if (browser == Mobile Safari) OR
(browser == Opera Mini) {
// Show mobile site
} else {
// Show “Desktop” site
}
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html
84%
80%
76%
64%
39%
AT HOME
RANDOM DOWNTIMES
WAITING IN LINE
AT WORK
IN THE BATHROOM
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
61% LIARS
Slide 12
Slide 12 text
MOBILE WEB
THERE IS NO
http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
Slide 13
Slide 13 text
We should embrace the fact
that the web doesn’t have the
same constraints [as print], and
design for this flexibility.
JOHN ALSOPP, 2000
http://www.alistapart.com/articles/dao/
Slide 14
Slide 14 text
SCALABLE
FLEXIBLE
RESPONSIVE
Slide 15
Slide 15 text
WEB DESIGN
RESPONSIVE
Slide 16
Slide 16 text
1
FLEXIBLE GRIDS
Slide 17
Slide 17 text
{
80px
{
24px
Slide 18
Slide 18 text
960px
288px 600px
Slide 19
Slide 19 text
TARGET ÷ CONTEXT = RESULT
From Ethan Marcotte, Responsive Web Design, 2011.
Slide 20
Slide 20 text
ELEMENT ÷ CONTAINER = RESULT
From Ethan Marcotte, An Event Apart, May 2011