20130312 responsive web design and css3

5/26/2018 20130312 Responsive Web Design and Css3

1/80

Responsive web design andCSS3T-111.5360 WWW Applications12.03.2013

Mikko [email protected]://mikkokuhna.com


2/80

My background


3/80

Images


4/80

Editorial content

Magazines, periodicals, glossies or serialsarepublications, generally published on aregularschedule, containing a variety ofarticles. They are generally financed byadvertising, by a purchase price, by pre-paid magazine subscriptions, or all three.

A newspaperis a scheduledpublicationcontaining newsof current events,informative articles, diversefeatures,editorials, and advertising. It usually isprinted on relatively inexpensive, low-gradepapersuch as newsprint.

http://en.wikipedia.org/wiki/Magazine

=

TA

TATA

http://en.wikipedia.org/wiki/Newspaper
http://en.wikipedia.org/wiki/Newsprinthttp://en.wikipedia.org/wiki/Newsprinthttp://en.wikipedia.org/wiki/Newshttp://en.wikipedia.org/wiki/Newshttp://en.wikipedia.org/wiki/Publicationhttp://en.wikipedia.org/wiki/Publicationhttp://en.wikipedia.org/wiki/Subscriptionhttp://en.wikipedia.org/wiki/Subscriptionhttp://en.wikipedia.org/wiki/Advertisinghttp://en.wikipedia.org/wiki/Advertisinghttp://en.wikipedia.org/wiki/Article_(publishing)http://en.wikipedia.org/wiki/Article_(publishing)http://en.wikipedia.org/wiki/Publicationhttp://en.wikipedia.org/wiki/Publication


5/80

Print vs. digital publication

=TA

TATA


6/80


TA

T

A

TA

=TA

TATA


7/80


=TA

TATA

TA

T

A

TAX X


8/80

Fixed layout

fixed format, static layout

Responsive layout

flexible, fluid, adaptive, dynamic


=

TA

TA

TA

TA

TA

TA

T


9/80

Content-based image features

center of

importance

face

orientation

color

palette

perspective

Combined

image feature

maps

Image

feature

maps

Image

feature

values

Image

feature

algorithms

image

cropping

article

color

text

overlaying

image

alignment

contents

page

edge

map

textureness

map

skin color

map

color saliency

map

face

map

salient color

map

importance

map

Mikko Kuhna, Ida-Maria Kivel, and Pirkko Oittinen. 2012. Semi-automated magazine layout using content-basedimage features. In Proceedings of the 20th ACM international conference on Multimedia(MM '12). ACM, 379-388.http://dx.doi.org/10.1145/2393347.2393403


10/80

Aalto University Magazine Concept

Mobile

Tablet

Desktop


11/80

Aalto University Magazine Concept


12/80



13/80



14/80

Responsive web design


15/80

Grid

Margin Column Gutter

In typography, a marginis the space that surroundsthe content of a page. The margin helps to definewhere a line of text begins and ends. When a page is

justified the text is spread out to be flush with the leftand right margins.

In typography, a columnis one or more vertical blocks of content positionedon a page, separated by guttersor rules. Columns are most commonlyused to break up large bodies of text that cannot fit in a single block of text

on a page. Additionally, columns are used to improve page composition andreadability.

http://en.wikipedia.org/wiki/Margin_(typography)

http://en.wikipedia.org/wiki/Column_(typography)


16/80


Elements

Media Queries

Flexible grid

Flexible images

Related

Mobile first

Progressive enhancement

http://www.abookapart.com/products/responsive-web-design

http://www.alistapart.com/articles/responsive-web-design/

Responsive web design(often abbreviated to RWD) is anapproach to web design in which a site is crafted to provide anoptimal viewing experienceeasy reading and navigation with aminimum of resizing, panning, and scrollingacross a widerange of devices (from desktop computer monitors to mobilephones).

http://en.wikipedia.org/wiki/Responsive_web_design


17/80

Web design

http://yle.fi/uutiset/


18/80

Web design



19/80




20/80


http://mikkokuhna.com/researcher/


21/80

Media Queries

Media Queriesis a CSS3 module allowing to adapt therendering of webpages based on conditions such asscreen resolution (eg. smartphone vs. high definitionscreen). It was first drafted in 2001 by the W3C andbecame a recommended standard in June 2012. It is acornerstone technology to Responsive Web Design.

http://en.wikipedia.org/wiki/Media_queries

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: portrait)

@media only screen

and (max-width: 320px)

and (min-resolution: 192dpi)
http://en.wikipedia.org/wiki/Responsive_Web_Designhttp://en.wikipedia.org/wiki/Responsive_Web_Designhttp://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/W3Chttp://en.wikipedia.org/wiki/W3Chttp://en.wikipedia.org/wiki/CSS3http://en.wikipedia.org/wiki/CSS3


22/80

Media Queries

Media features

width (min/max)

height (min/max)

device-width (min/max)

device-height (min/max)

orientation

aspect-ratio (min/max)

device-aspect-ratio (min/max)

color (min/max)

color-index (min/max)

monochrome (min/max)

resolution (min/max)

scan

grid

@media only screen




@media only screen



http://www.w3.org/TR/css3-mediaqueries/


23/80

Media Queries

CSS2 Media types

braille

embossed

handheld

print

projection

screen

speecg

tty

tv

@media only screen




@media only screen



http://www.w3.org/TR/CSS21/media.html


24/80

Media Queries

Mobile Br wser Sup port

iOS

AndroidWP

3.2 -> Nov 2008

2.1 -> Jan 20107.5 -> Sep 2011

Browser upport

Opera

SafariChrome

Firefox

IE

9.5 -> Jun 2008

3.1 -> Jun 20084.0 -> Dec 2008

3.5 -> Jun 2009

9.0 -> Mar 2011

http://www.w3.org/standards/history/css3-mediaqueries

http://caniuse.com/#feat=css-mediaqueries

Media Queries Publication His oryFirst Public Draft

...

Candidate Recommendation

...

Media Queries Recommendation

2001-04-04

2007-06-06

2012-06-19


25/80

Fixed Grid

column

128px

text img

960px

gutter

20px

margin

46px


26/80

Fixed Grid

@media screen and

(max-width: 959px)

column

128px

text img

text

img

960px

480px

gutter

20px

margin

46px


27/80

Fixed Grid

@media screen and

(max-width: 959px)

column

128px

text img

text

img

text

img

960px

720px

480px

gutter

20px

margin

46px


28/80

Flexible Grid

text img

960px

column

13.33%

gutter

2.08%

margin

4.79%


29/80

Flexible Grid

text img

text

img

960px

480px

column

13.33%

gutter

2.08%

margin

4.79%

@media screen and

(max-width: 480px)


30/80

Flexible Grid

text img

text img

text

img

960px

720px

480px

column

13.33%

gutter

2.08%

margin

4.79%

@media screen and

(max-width: 480px)


31/80

Example


32/80

Example


33/80

Example

Ab l t R l ti it


34/80

Absolute vs. Relative units

targetcontext

= result

Absolute units = px, pt, ...Relative units = %, em, ...

Browser default font size= 16 ptTarget font size= 24 pt

24pt16pt = 1.5em

Baseline format= 960 px

Fixed grid margin= 36 px

36px960px

= 3.75%

Fl ibl i


35/80

.figure {

width: 2cols;

}

.figure img {

max-width: 100%;

}

2cols

caption text captiontext

Width (px)

Height(px)

2cols

caption text caption

text

Flexible images

.figure {

width: 2cols;

}

M bil Fi t


36/80

Advantages

Reduce requests and file size

Baseline gets downloaded first

Smaller devices usually have lessresources and bandwidth

Backwards compatibility

Older browser with no Media Queries

support get a simple Baseline layout(usually width: 100%)

Mobile First

http://www.abookapart.com/products/mobile-first

@media only screen




@media only screen

and (min-width: 1024px)

P i h t


37/80

Graceful degradation Providing an alternative version of your

functionality or making the user aware ofshortcomings of a product as a safetymeasure to ensure that the product is usable.

Progressive enhancement Starting with a baseline of usable

functionality, then increasing the richness ofthe user experience step by step by testing forsupport for enhancements before applyingthem.

Progressive enhancement

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

Print this page

Print a copy of your confirmation.Select the "Print" icon in your browser,

or select "Print" from the "File" menu.

Print this page

No JavaScript: No printing

No JavaScript: Guide how to print


38/80

Problems

HTML


39/80

HTML

http://dev.w3.org/html5/markup/img.html

HTML5

http://www.w3.org/MarkUp/html3/img.html

HTML3

http://www.w3.org/TR/REC-html40/struct/objects.html

HTML4

TA

TA

TA

T

Ad ti i


40/80

Adaptive images

http://adaptive-images.com

ti j


41/80

retina.js

http://retinajs.com

R i I C it G


42/80

Responsive Images Community Group

http://www.w3.org/community/respimg/

HTML5 < i t >


43/80

HTML5

http://picture.responsiveimages.org

Accessible text


44/80

CSS3 preview


45/80

http://commons.wikimedia.org/wiki/File:CSS3-Status-by-Sergey-Mavrody.png

Web Fonts


46/80

Web Fonts

CSS 2

font

font-family

font-size

font-style font-variat

font-weight

CSS 3

font-size-adjust

font-stretch

font-feature-settings

+ @font-face

http://www.google.com/webfonts

http://www.fontsquirrel.com/fontface/generator

Multi column Layout


47/80

Multi-column Layout

column-width: 15em;

column-gap: 2em;column-rule: 4px solid green;

padding: 5px;

img {

display: block; width: 100%}

img {

display: block; float: right}

http://www.w3.org/TR/css3-multicol/

Grid layout


48/80

Grid layout

Fraction valuesare new units applicable to the grid-

definition-rows and grid-definition-columns properties:

fr

Fraction of available space.

http://www.w3.org/TR/css3-grid-layout/

Flexible Box Layout


49/80

Flexible Box Layout

http://www.w3.org/TR/css3-flexbox/

English

flex-flow: row wrap;writing-mode: horizontal-tb;

Japanese

flex-flow: row wrap;writing-mode: vertical-rl;

Exclusions


50/80

Exclusions

http://www.w3.org/TR/css3-exclusions/

Template layout


51/80

Template layout

@page :first {

display: "A A A A A A A A A" / 5cm ". . . . . . . . ." / 0.25cm

"B . C C C C C C C" / *

"B . C C C C C C C" / *

"B . C C C C C C C" / *

"B . C C C C C C C" / * "B . C C C C C C C" / * "B . D D D D D D D" / *

"B . D D D D D D D" / *

"B . E E E . F F F" / *

"B . E E E . F F F" / * "B . E E E . F F F" / *

* 3em * 3em * 3em * 3em *}

h1 {position: a; border-bottom: thick; margin-bottom: 1.5em}#toc {position: b; margin-right: -1.5em; border-right: thin;

padding-right: 1.5em}#leader {position: c; columns: 4; column-gap: 3em}

#art1 {position: d; columns: 4; column-gap: 3em; border-top: thin}

#art2 {position: e; columns: 2; column-gap: 3em}

#art3 {position: f; columns: 2; column-gap: 3em}

http://www.w3.org/TR/css3-layout/

Regions


52/80

Regions

http://www.w3.org/TR/css3-regions/

Text balancing


53/80

Text balancing

https://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/

WebPlatform org


54/80

WebPlatform.org

blogs adobe com/webplatform/


55/80

blogs.adobe.com/webplatform/


56/80

How to get started?

Empty template


57/80

Empty template

Grid framework


58/80

Grid framework

Front-end framework


59/80

Front-end framework

Bootstrap


60/80

Bootstrap

Comparison


61/80

Comparison

Publishing


62/80

Publishing


63/80

Preprocessors & templates

CSS Preprocessors


64/80

CSS Preprocessors

CSS Preprocessors


65/80

CSS Preprocessors

CSS Preprocessors


66/80

CSS Preprocessors

!"#$%&'(')* ,-./0123!4$567$859* 2-0:;> "$


67/80

Lightweight markup / templates



68/80


!!!%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"} %head %title BoBlog %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"} %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"} %body #header

%h1 BoBlog %h2 Bob's Blog #content - @entries.each do |entry| .entry %h3.title= entry.title %p.date= entry.posted.strftime("%A, %B %d, %Y") %p.body= entry.body #footer %p All content copyright Bob



69/80


BoBlog BoBlog Bob's Blog

Halloween Tuesday, October 31, 2006
Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited. New Rails Templating Engine Friday, August 11, 2006
There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.

All content copyright Bob


70/80

What I use


71/80


72/80


73/80


74/80


75/80


76/80


77/80

I currently use alternatives


78/80

CSS

Language

Compass &

Foundation

Compiler

Framework

Output

Sublime TextEditor Espresso, Coda, Textmate, ...

Less, Stylus, ...

LiveReload, Less.app, Crunch, Scout,

Hammer, ...

Bootstrap, Bourbon, Susy, ...


SASS (SCSS)

Compass /

Codekit



79/80

HTML

Language

Foundation

Compiler

Framework

Output

Sublime TextEditor Espresso, Coda, Textmate, ...

Markdown, Jade, ...

LiveReload, Hammer, ...

Bootstrap, Skeleton, ...


HAML

Haml(rubygem)

/ Codekit


80/80

Thanks, Questions?mikkokuhna.com / [email protected]

20130312 responsive web design and css3

Documents

responsive web design

responsive web design5262018

css3 380images5262018

surroundsthe content

digital publicationtatata

contentbasedimage features

semiautomated magazine

line of text