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
5/26/2018 20130312 Responsive Web Design and Css3
2/80
My background
5/26/2018 20130312 Responsive Web Design and Css3
3/80
Images
5/26/2018 20130312 Responsive Web Design and Css3
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/Publication5/26/2018 20130312 Responsive Web Design and Css3
5/80
Print vs. digital publication
=TA
TATA
5/26/2018 20130312 Responsive Web Design and Css3
6/80
Print vs. digital publication
TA
T
A
TA
=TA
TATA
5/26/2018 20130312 Responsive Web Design and Css3
7/80
Print vs. digital publication
=TA
TATA
TA
T
A
TAX X
5/26/2018 20130312 Responsive Web Design and Css3
8/80
Fixed layout
fixed format, static layout
Responsive layout
flexible, fluid, adaptive, dynamic
Print vs. digital publication
=
TA
TA
TA
TA
TA
TA
T
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
10/80
Aalto University Magazine Concept
Mobile
Tablet
Desktop
5/26/2018 20130312 Responsive Web Design and Css3
11/80
Aalto University Magazine Concept
5/26/2018 20130312 Responsive Web Design and Css3
12/80
Content-based image features
5/26/2018 20130312 Responsive Web Design and Css3
13/80
Content-based image features
5/26/2018 20130312 Responsive Web Design and Css3
14/80
Responsive web design
5/26/2018 20130312 Responsive Web Design and Css3
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)
5/26/2018 20130312 Responsive Web Design and Css3
16/80
Responsive web design
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
5/26/2018 20130312 Responsive Web Design and Css3
17/80
Web design
http://yle.fi/uutiset/
5/26/2018 20130312 Responsive Web Design and Css3
18/80
Web design
http://yle.fi/uutiset/
5/26/2018 20130312 Responsive Web Design and Css3
19/80
Responsive web design
http://yle.fi/uutiset/
5/26/2018 20130312 Responsive Web Design and Css3
20/80
Responsive web design
http://mikkokuhna.com/researcher/
5/26/2018 20130312 Responsive Web Design and Css3
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/CSS35/26/2018 20130312 Responsive Web Design and 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
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://www.w3.org/TR/css3-mediaqueries/
5/26/2018 20130312 Responsive Web Design and Css3
23/80
Media Queries
CSS2 Media types
braille
embossed
handheld
projection
screen
speecg
tty
tv
@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://www.w3.org/TR/CSS21/media.html
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
25/80
Fixed Grid
column
128px
text img
960px
gutter
20px
margin
46px
5/26/2018 20130312 Responsive Web Design and Css3
26/80
Fixed Grid
@media screen and
(max-width: 959px)
column
128px
text img
text
img
960px
480px
gutter
20px
margin
46px
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
28/80
Flexible Grid
text img
960px
column
13.33%
gutter
2.08%
margin
4.79%
5/26/2018 20130312 Responsive Web Design and Css3
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)
5/26/2018 20130312 Responsive Web Design and Css3
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)
5/26/2018 20130312 Responsive Web Design and Css3
31/80
Example
5/26/2018 20130312 Responsive Web Design and Css3
32/80
Example
5/26/2018 20130312 Responsive Web Design and Css3
33/80
Example
Ab l t R l ti it
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
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
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
@media only screen
and (min-width: 1024px)
P i h t
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
38/80
Problems
HTML
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
40/80
Adaptive images
http://adaptive-images.com
ti j
5/26/2018 20130312 Responsive Web Design and Css3
41/80
retina.js
http://retinajs.com
R i I C it G
5/26/2018 20130312 Responsive Web Design and Css3
42/80
Responsive Images Community Group
http://www.w3.org/community/respimg/
HTML5 < i t >
5/26/2018 20130312 Responsive Web Design and Css3
43/80
HTML5
http://picture.responsiveimages.org
Accessible text
5/26/2018 20130312 Responsive Web Design and Css3
44/80
CSS3 preview
5/26/2018 20130312 Responsive Web Design and Css3
45/80
http://commons.wikimedia.org/wiki/File:CSS3-Status-by-Sergey-Mavrody.png
Web Fonts
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
50/80
Exclusions
http://www.w3.org/TR/css3-exclusions/
Template layout
5/26/2018 20130312 Responsive Web Design and Css3
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
5/26/2018 20130312 Responsive Web Design and Css3
52/80
Regions
http://www.w3.org/TR/css3-regions/
Text balancing
5/26/2018 20130312 Responsive Web Design and Css3
53/80
Text balancing
https://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/
WebPlatform org
5/26/2018 20130312 Responsive Web Design and Css3
54/80
WebPlatform.org
blogs adobe com/webplatform/
5/26/2018 20130312 Responsive Web Design and Css3
55/80
blogs.adobe.com/webplatform/
5/26/2018 20130312 Responsive Web Design and Css3
56/80
How to get started?
Empty template
5/26/2018 20130312 Responsive Web Design and Css3
57/80
Empty template
Grid framework
5/26/2018 20130312 Responsive Web Design and Css3
58/80
Grid framework
Front-end framework
5/26/2018 20130312 Responsive Web Design and Css3
59/80
Front-end framework
Bootstrap
5/26/2018 20130312 Responsive Web Design and Css3
60/80
Bootstrap
Comparison
5/26/2018 20130312 Responsive Web Design and Css3
61/80
Comparison
Publishing
5/26/2018 20130312 Responsive Web Design and Css3
62/80
Publishing
5/26/2018 20130312 Responsive Web Design and Css3
63/80
Preprocessors & templates
CSS Preprocessors
5/26/2018 20130312 Responsive Web Design and Css3
64/80
CSS Preprocessors
CSS Preprocessors
5/26/2018 20130312 Responsive Web Design and Css3
65/80
CSS Preprocessors
CSS Preprocessors
5/26/2018 20130312 Responsive Web Design and Css3
66/80
CSS Preprocessors
!"#$%&'(')* ,-./0123!4$567$859* 2-0:;> "$
5/26/2018 20130312 Responsive Web Design and Css3
67/80
Lightweight markup / templates
Lightweight markup / templates
5/26/2018 20130312 Responsive Web Design and Css3
68/80
Lightweight markup / templates
!!!%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
Lightweight markup / templates
5/26/2018 20130312 Responsive Web Design and Css3
69/80
Lightweight markup / templates
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, 2006There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
All content copyright Bob
5/26/2018 20130312 Responsive Web Design and Css3
70/80
What I use
5/26/2018 20130312 Responsive Web Design and Css3
71/80
5/26/2018 20130312 Responsive Web Design and Css3
72/80
5/26/2018 20130312 Responsive Web Design and Css3
73/80
5/26/2018 20130312 Responsive Web Design and Css3
74/80
5/26/2018 20130312 Responsive Web Design and Css3
75/80
5/26/2018 20130312 Responsive Web Design and Css3
76/80
5/26/2018 20130312 Responsive Web Design and Css3
77/80
I currently use alternatives
5/26/2018 20130312 Responsive Web Design and Css3
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, ...
I currently use alternatives
SASS (SCSS)
Compass /
Codekit
I currently use alternatives
5/26/2018 20130312 Responsive Web Design and Css3
79/80
HTML
Language
Foundation
Compiler
Framework
Output
Sublime TextEditor Espresso, Coda, Textmate, ...
Markdown, Jade, ...
LiveReload, Hammer, ...
Bootstrap, Skeleton, ...
I currently use alternatives
HAML
Haml(rubygem)
/ Codekit
5/26/2018 20130312 Responsive Web Design and Css3
80/80
Thanks, Questions?mikkokuhna.com / [email protected]