&

CSS3, Media Queries,

Responsive Design
May 23, 2012
STC Summit
Zoe Mickley Gillenwater | @zomigi
2
What I do
Books
Stunning CSS3:
A Project-based Guide to
the Latest in CSS
www.stunningcss3.com

Flexible Web Design:
Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com
Web
Accessibility
specialist at AT&T
Visual designer
CSS developer
and consultant
3
My home's web-enabled devices
3
2
2
1
4
more mobile devices

more diversity within devices
EVERY DAY
&
5
every day
1.45 MILLION DEVICES

317,124 BABIES
enter the world
&
Source: http://www.lukew.com/ff/entry.asp?1506
6
Growing screen resolution
diversity on desktop
May 2009 widths
1024
1280
1440
1680
800
1152
other
May 2012 widths
1366
1024
1280
1440
1920
1600
1680
1360
other
Source: http://gs.statcounter.com
7
25%
of U.S. smartphone users do
MOST OR ALL
of their web browsing on mobile
Source: http://www.lukew.com/ff/entry.asp?1405
8
how can our sites
accommodate all this
DIVERSITY
?
9
Introducing media queries
Awesome new part of CSS3
Simple way to feed different CSS based on
characteristics of user's device
Used to build responsive/adaptive designs
Not:
for feeding styles based on browser
just for feeding styles based on viewport size
10
Media query syntax: internal
body {
backgr ound: gr ay;
}
@medi a scr een and ( max- wi dt h: 500px) {
body {
backgr ound: bl ue;
}
}
English translation:
Make the background gray. But up to a maximum width of 500
pixels, make the background blue.
11
Flip flop it
body {
backgr ound: bl ue;
}
@medi a scr een and ( mi n- wi dt h: 501px) {
body {
backgr ound: gr ay;
}
}
English translation:
Make the background blue. But at and past the minimum width
of 501 pixels, make the background gray.
12
How it looks
13
Media query syntax: external
Extend the existing media part of the link
element or @import rule:

<l i nk hr ef =" nar r ow. css" r el =" st yl esheet "
medi a="onl y scr een and ( max- wi dt h: 500px) " >

@i mpor t ur l ( nar r ow. css) onl y scr een and
( max- wi dt h: 500px) ;
14
Recommendation: internal
Main advantages:
No extra HTTP request(s)
Not out of sight and forgotten
Learn full pros/cons: www.zomigi.com/blog/
essential-considerations-crafting-quality-
media-queries
15
you now know media query syntax
YAY
!
16
but media queries don't actually
DO
anything
17
it's the CSS
INSIDE
that changes the appearance
18
Width-dependent layout changes
Responsive web design:
Media queries + fluid layouts + fluid media
See www.alistapart.com/articles/responsive-
web-design/
Adaptive layouts:
Media queries + fixed-width layouts
See www.netmagazine.com/tutorials/
adaptive-layouts-media-queries

19
Retrofitting responsiveness
Typical to add on media queries for both
smaller and wider styles
CSS before media queries is default
Can take different approach when starting
from scratch
Start with "mobile," layer on wider styles?
Start with "desktop," layer on narrower styles?
Start with something in between for majority?

20
Starting with desktop styles
Pros:
No extra work to
make majority width
appear correctly on
IE 6-8
Easiest way to retrofit
existing site
Cons:
Mobile devices may
have to download
unneeded desktop
assets
Need separate style
sheets or J avaScript
to make mobile
design appear in IE
Mobile 7 and other
older mobile
browsers
21
Starting with mobile styles
Pros:
Mobile devices won't
download unneeded
desktop assets
Older, non-media-
query-supporting
mobile browsers still
get the mobile styles
without any extra
work
Cons:
Desktop devices may
have to download
unneeded mobile
assets
Need separate style
sheets or J avaScript
to make majority
desktop design
appear in IE 6-8
22
Our
starting
point
23
Very wide: awkward
24
Very
narrow:
awkward
25
Wide-screen media query
/ *al l t he ot her st yl es up her e*/

@medi a scr een and ( mi n- wi dt h: 1200px) {
/ *st yl es f or l ar ger scr eens i n her e*/
}
26
Add third column
@medi a scr een and ( mi n- wi dt h: 1200px) {
#nav- mai n {
posi t i on: f i xed;
t op: 136px;
wi dt h: 13%;
mar gi n: 0;
}
#cont ent - mai n {
wi dt h: 58%;
mar gi n- l ef t : 18%;
}
#cont ent - secondar y { wi dt h: 20%; }
}
27
Style nav as vertical menu
@medi a scr een and ( mi n- wi dt h: 1200px) {
. . .
#nav- mai n l i {
f l oat : none;
mar gi n: 0;
}
#nav- mai n a {
- moz- bor der - r adi us: 0;
- webki t - bor der - r adi us: 0;
bor der - r adi us: 0;
}
}
28
Wide-screen design
29
Small-screen media query
/ *al l t he ot her st yl es up her e*/

@medi a scr een and ( max- wi dt h: 760px) {
/ *st yl es f or smal l er scr eens i n her e*/
}
30
Remove columns from text
@medi a scr een and ( max- wi dt h: 760px) {
h1 + p {
- moz- col umn- count : 1;
- o- col umn- count : 1;
- webki t - col umn- count : 1;
col umn- count : 1;
}
}
31
Stack feature boxes
@medi a scr een and ( max- wi dt h: 760px) {
. . .
. f eat ur e {
f l oat : none;
wi dt h: aut o;
mar gi n: 0 0 1. 6em0;
paddi ng: 0 0 0 140px;
backgr ound- posi t i on: t op l ef t ;
}
}
32
Narrow-
screen
design
33
pause for
CAVEATS

CLARIFICATIONS
&
34
Some sites would be better
served with a separate site for
mobile devices instead of using
media queries.
35
Even if a separate mobile site
would be best, using media
queries is a good first step if a
separate site isn't currently
feasible.
36
The choice is not between using media queries
and creating a dedicated mobile site; the choice
is between using media queries and doing
nothing at all.
J eremy Keith
http://adactio.com/journal/1696/
37
You can add media queries to a
dedicated mobile site in order to
cater to the wide range of
mobile viewport sizes.
38
If you do use media queries on
a single site, they're not the only
tool you can useyou can add
scripting as well to further
customize the content, markup,
functionality, etc.
39
Media queries are only meant to
solve the problem of mobile's
small viewports, not all the other
things that can make mobile
browsing different (such as
context, bandwidth, etc.).
40
It's making sure your layout doesn't look crap
on diff. sized screens.
Mark Boulton
http://twitter.com/#!/markboulton/status/50237480368214016
41
back to
CSS
42
Mobile media query
/ *al l t he ot her st yl es up her e*/

@medi a scr een and ( max- wi dt h: 550px) {
/ *st yl es f or t i ny scr eens i n her e*/
}
43
Non-overlapping version
@medi a scr een and ( mi n- wi dt h: 551px) and
( max- wi dt h: 760px) {
/ *st yl es f or smal l scr eens i n her e*/
}
@medi a scr een and ( max- wi dt h: 550px) {
/ *st yl es f or t i ny scr eens i n her e*/
}
44
Media features for mobile
mi n- wi dt h
max- wi dt h
devi ce- wi dt h
mi n- devi ce- wi dt h
max- devi ce- wi dt h
or i ent at i on
mi n- devi ce- pi xel - r at i o
- webki t - mi n- devi ce- pi xel - r at i o
mi n- - moz- devi ce- pi xel - r at i o
- o- mi n- devi ce- pi xel - r at i o
45
Useful media features for mobile
mi n- wi dt h
max- wi dt h
devi ce- wi dt h
mi n- devi ce- wi dt h
max- devi ce- wi dt h
or i ent at i on
mi n- devi ce- pi xel - r at i o
- webki t - mi n- devi ce- pi xel - r at i o
mi n- - moz- devi ce- pi xel - r at i o
- o- mi n- devi ce- pi xel - r at i o
46
Changing to single column
@medi a scr een and ( max- wi dt h: 550px) {
#cont ent - mai n, #cont ent - secondar y,
#about , #cr edi t s {
f l oat : none;
wi dt h: 100%;
}
}
47
Changing feature images
@medi a scr een and ( max- wi dt h: 550px) {
. . .
. f eat ur e { paddi ng- l ef t : 70px; }
#f eat ur e- candy {
backgr ound- i mage: ur l ( i con_candy_64. png) ;
}
#f eat ur e- past r y {
backgr ound- i mage: ur l ( i con_past r y_64. png) ;
}
#f eat ur e- desser t {
backgr ound- i mage: ur l ( i con_desser t _64. png) ;
}
}
48
Mobile
design
49
Viewport meta tag
Forces mobile devices to scale viewport to
actual device width

<met a name="vi ewpor t "
cont ent ="wi dt h=devi ce- wi dt h">
50
Zoom problem in iOS
Remember: device-width on iOS devices
always matches portrait width
This means design doesn't reflow when you
switch to landscape, but instead just zooms
51
Fixing (and adding) zoom issues
Option 1: add maximum-scale=1
But disables user scaling
<met a name=" vi ewpor t "
cont ent =" wi dt h=devi ce- wi dt h, maxi mum- scal e=1" >

Option 2: add initial-scale=1
Allows user scaling
But triggers over-zoom/crop bug when
changing from portrait to landscape
<met a name=" vi ewpor t "
cont ent =" wi dt h=devi ce- wi dt h, i ni t i al - scal e=1" >
52
The best way to fix zoom issues
Option 3: add initial-scale=1 plus
script to fix over-zoom bug
See http://filamentgroup.com/lab/a_fix_for_
the_ios_orientationchange_zoom_bug/

<head>
. . .
<met a name=" vi ewpor t "
cont ent =" wi dt h=devi ce- wi dt h, i ni t i al - scal e=1" >
<scr i pt sr c=" i os- or i ent at i onchange- f i x. j s" >
. . .
</ head>
53
View it live
http://stunningcss3.com/code/bakery/
54
More responsive examples
Design patterns:
"Multi-Device Layout Patterns" by Luke
Wroblewski: www.lukew.com/ff/entry.asp?1514
"Responsive Navigation Patterns" by Brad
Frost: http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
Inspiration:
Gallery: http://mediaqueri.es/
My own bookmarks: https://gimmebar.com/
loves/zomigi/tag/mediaqueries
55
Dealing with IE 8 and earlier
Conditional comments
J avaScript
56
Conditional comments
Split styles into separate sheets and feed
applicable sheet to IE based on whether
it's IE on desktop or mobile
Approach varies based on which set of
styles are your default
57
Conditional comment when
desktop styles are default
Feed IE Mobile 7 media query sheet:

<l i nk r el =" st yl esheet " hr ef =" gl obal . css" medi a=" al l " >

<l i nk r el =" st yl esheet " hr ef =" mobi l e. css" medi a=" al l
and ( max- wi dt h: 700px) " >

<! - - [ i f I EMobi l e 7] >
<l i nk r el =" st yl esheet " hr ef =" mobi l e. css" medi a=" al l " >
<! [ endi f ] - - >
Source: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-
optimized-css-at-windows-phone-7.aspx
58
Conditional comment when
mobile styles are default
Feed older IE media query sheet, hide from
IE Mobile 7:

<l i nk r el =" st yl esheet " hr ef =" gl obal . css" medi a=" al l " >

<l i nk r el =" st yl esheet " hr ef =" deskt op. css" medi a=" al l
and ( mi n- wi dt h: 700px) " >

<! - - [ i f ( l t I E 9) &( ! I EMobi l e 7) ] >
<l i nk r el =" st yl esheet " hr ef =" deskt op. css" medi a=" al l " >
<! [ endi f ] - - >
Source: http://adactio.com/journal/4494/
59
Pre-fab J avaScript for non-
supporting browsers
Simply add one of these scripts:
Respond: https://github.com/scottjehl/Respond
css3-mediaqueries.js:
http://code.google.com/p/css3-mediaqueries-js/
Avoid extra HTTP request for non-old-IE
browsers using conditional comments:
<! - - [ i f ( l t I E 9) &( ! I EMobi l e 7) ] >
<scr i pt sr c=" r espond. mi n. j s" ></ scr i pt >
<! [ endi f ] - - >
60
WHAT ELSE
can media queries do
?
61
Swapping images on high-res
displays
@medi a
scr een and ( moz- - mi n- devi ce- pi xel - r at i o : 1. 5) ,
scr een and ( - o- mi n- devi ce- pi xel - r at i o : 3/ 2) ,
scr een and ( - webki t - mi n- devi ce- pi xel - r at i o : 1. 5) ,
scr een and ( mi n- devi ce- pi xel - r at i o : 1. 5) {

}
62
Swapping images on high-res
displays
@medi a . . . scr een and ( mi n- devi ce- pi xel - r at i o : 1. 5) {
. f eat ur e {
- moz- backgr ound- si ze: 64px 64px;
- webki t - backgr ound- si ze: 64px 64px;
backgr ound- si ze: 64px 64px;
}
#f eat ur e- candy {
backgr ound- i mage: ur l ( i con_candy_128. png) ; }
#f eat ur e- past r y {
backgr ound- i mage: ur l ( i con_past r y_128. png) ; }
#f eat ur e- desser t {
backgr ound- i mage: ur l ( i con_desser t _128. png) ; }
}
63
Learn more
Download slides and get links at
http://zomigi.com/blog/responsive-web-
design-presentation
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com