1. Adapt and respond
MOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
Patrick H. Lauke / standards.next / 3 March 2012

2. mobile web
is increasingly important

3. we need a site that
works on iPhone

4. oh, and on the iPad

5. “remove iPhone from ass”
Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

7. sites that work on (almost)
all mobile devices

9. 3 approaches

10. 1. do nothing

11. moved beyond WAP or text

12. modern mobile browsers
can handle the “real web”

15. “but the mobile context...”

16. “Desktop computers and mobile devices are so different that
the only way to offer a great user experience is to create two
separate designs — typically with fewer features for mobile.”
www.useit.com/alertbox/mobile-redesign.html

17. twitter.com/#!/stephenhay/status/23350345962889216

18. 2. separate mobile site
(m.flickr.com, mobile.mysite.com, ...)

19. beware browser sniffing
photo: http://www.flickr.com/photos/timdorr/2096272747/

20. let the user decide:
diet or full fat?

26. “refactored” for small displays,
not dumbed down for mobile

27. 3. single adaptive site

28. nothing new

29. The Sage “... accepts the ebb and flow of things,
Nurtures them, but does not own them,”
Tao Te Ching; 2 Abstraction
www.alistapart.com/articles/dao

30. how to take “desktop”
layout to “mobile”?

31. CSS 2 Media Types

32. Media types
all braille
embossed handheld
print projection
screen speech
tty tv

34. CSS 2.1 Media Types
<link rel="stylesheet" ...
media="print" href="...">
@import url("...") print;
@media print {
// insert CSS rules here
}

35. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/

36. CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept
● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/

37. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

38. CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}

39. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}

40. Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}

41. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}

42. Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}

43. Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}

44. http://mediaqueri.es

45. http://mediaqueri.es

46. http://mediaqueri.es

47. http://mediaqueri.es

48. www.themaninblue.com/writing/perspective/2004/09/21

49. design approaches using
media queries

50. easy-readers.net/books/adaptive-web-design

51. www.alistapart.com/articles/responsive-web-design

52. grid-based layouts

53. www.subtraction.com/2007/03/19/oh-yeeaahh

54. www.subtraction.com/2007/03/19/oh-yeeaahh

55. www.alistapart.com/articles/fluidgrids

57. Responsive Web Design™
fluid grid + fluid images + media queries

58. bostonglobe.com

61. adaptive vs responsive?

62. “not a magic bullet...”

63. unsolved mysteries…

66. www.opera.com/developer/tools/mobile

68. mobile devices lie

69. physical vs virtual pixels

72. viewport meta
suggests an initial layout viewport
and zoom

73. viewport meta
<meta name="viewport"
content="width=480">
<meta name="viewport"
content="width=480, user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

74. Viewport properties
width initial-scale
height minimum-scale
user-scalable maximum-scale

77. <meta name="viewport"
content="width=device-width">

79. high-dpi devices lie twice

80. <meta name="viewport"
content="width=device-width,
target-densitydpi=device-dpi">

82. “interesting” iOS quirk

85. confused?
a practical example…

88. <meta name="viewport" content="width=550">

89. <meta name="viewport" content="width=550">

90. <meta name="viewport" content="width=550">

91. <meta name="viewport"
content="width=550,maximum-scale=1.0">

92. <meta name="viewport"
content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">

93. maximum-scale=1.0
breaks zooming!

94. JavaScript approaches to selectively
apply viewport meta...argh!

95. CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

96. Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom resolution

97. <meta name="viewport" content="width=550">
@-o-viewport {
width: 550px;
}

98. <meta name="viewport"
content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">
@-o-viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}

99. /* selective viewport via CSS */
@media … {
@-o-viewport {
… /* for propellerheads */
}
}

100. <meta name="viewport" content="width=550,maximum-
scale=1.0,target-densitydpi=device-dpi">
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}

104. <meta name="viewport" content="width=550,maximum-
scale=1.0,target-densitydpi=device-dpi">
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}

105. @-o-viewport {
/* minimum of 550px viewport width */
width: 550px auto; max-zoom: auto;
}

106. more unsolved mysteries

107. Responsive Web Design™
fluid grid + fluid images + media queries

108. /* fluid image based on parent container */
img { max-width:100%; }

109. Responsive Web Design™
fluid grid + fluid images + media queries

110. stephanierieger.com/the-trouble-with-android

111. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints

112. “embrace the fluidity,
don't fight it”

113. http://futurefriend.ly

114. www.opera.com/developer
patrick.lauke@opera.com