Adapt and respondMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOPPatrick H. Lauke / standards.next / 3 March 2012
mobile webis increasingly important
we need a site that works on iPhone
oh, and on the iPad
“remove iPhone from ass” Peter-Paul Koch, The iPhone obsession       www.quirksmode.org/blog/archives/2010/02/the_iphone_o...
sites that work on (almost)    all mobile devices
3 approaches
1. do nothing
moved beyond WAP or text
modern mobile browserscan handle the “real web”
“but the mobile context...”
“Desktop computers and mobile devices are so different that  the only way to offer a great user experience is to create tw...
twitter.com/#!/stephenhay/status/23350345962889216
2. separate mobile site  (m.flickr.com, mobile.mysite.com, ...)
beware browser sniffing      photo: http://www.flickr.com/photos/timdorr/2096272747/
let the user decide:  diet or full fat?
“refactored” for small displays, not dumbed down for mobile
3. single adaptive site
nothing new
The Sage “... accepts the ebb and flow of things,    Nurtures them, but does not own them,”               Tao Te Ching; 2 ...
how to take “desktop” layout to “mobile”?
CSS 2 Media Types
Media typesall           brailleembossed      handheldprint         projectionscreen        speechtty           tv
CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print {    // insert...
CSS 3 Media Queries   “...the new hotness” Jeffrey Zeldman      http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries●   builds on CSS 2.1 Media Types concept●   more granular control (not just screen, print...)http://ww...
Media featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
CSS 3 Media Queries<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">@import url("...") screen and...
Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) {    // screen device and widt...
Multiple expressions – comma separated@media screen and (min-width:800px),         print and (min-width:20em) {    // scre...
Negative expressions – not keyword@media not screen and (min-width:800px) {    // not applied to screen device    // with ...
Exclusive expressions – only keyword@media only screen and (min-width:800px) {    // only applied to screen device    // w...
Multiple media queries/* “The absence of a media query is the firstmedia query” Bryan Rieger */@media screen and (max-widt...
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
www.themaninblue.com/writing/perspective/2004/09/21
design approaches using     media queries
easy-readers.net/books/adaptive-web-design
www.alistapart.com/articles/responsive-web-design
grid-based layouts
www.subtraction.com/2007/03/19/oh-yeeaahh
www.subtraction.com/2007/03/19/oh-yeeaahh
www.alistapart.com/articles/fluidgrids
Responsive Web Design™fluid grid + fluid images + media queries
bostonglobe.com
adaptive vs responsive?
“not a magic bullet...”
unsolved mysteries…
www.opera.com/developer/tools/mobile
mobile devices lie
physical vs virtual pixels
viewport metasuggests an initial layout viewport            and zoom
viewport meta<meta name="viewport"content="width=480"><meta name="viewport"content="width=480, user-scalable=no">http://de...
Viewport propertieswidth                 initial-scaleheight                minimum-scaleuser-scalable         maximum-scale
<meta name="viewport"content="width=device-width">
high-dpi devices lie twice
<meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
“interesting” iOS quirk
confused?a practical example…
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport"content="width=550,maximum-scale=1.0">
<meta name="viewport"content="width=550,maximum-scale=1.0,   target-densitydpi=device-dpi">
maximum-scale=1.0breaks zooming!
JavaScript approaches to selectively    apply viewport meta...argh!
CSS Device Adaptation@viewport {    width: 320px;    zoom: 2.3;    user-zoom: fixed;}www.w3.org/TR/css-device-adaptonly wo...
Viewport propertieswidth / min-width / max-width      user-zoomheight / min-height / max-height   orientationzoom / min-zo...
<meta name="viewport" content="width=550">@-o-viewport {    width: 550px;}
<meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@-o-viewport {    width: 550px;   ...
/* selective viewport via CSS */@media … {    @-o-viewport {        … /* for propellerheads */    }}
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen {    @-o-viewport {...
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen {    @-o-viewport {...
@-o-viewport {    /* minimum of 550px viewport width */    width: 550px auto; max-zoom: auto;}
more unsolved mysteries
Responsive Web Design™fluid grid + fluid images + media queries
/* fluid image based on parent container */img { max-width:100%; }
Responsive Web Design™fluid grid + fluid images + media queries
stephanierieger.com/the-trouble-with-android
www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints
“embrace the fluidity,   dont fight it”
http://futurefriend.ly
www.opera.com/developer   patrick.lauke@opera.com
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Upcoming SlideShare
Loading in...5
×

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012

3,985

Published on

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,985
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
111
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012

  1. 1. Adapt and respondMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOPPatrick H. Lauke / standards.next / 3 March 2012
  2. 2. mobile webis increasingly important
  3. 3. we need a site that works on iPhone
  4. 4. oh, and on the iPad
  5. 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  6. 6. sites that work on (almost) all mobile devices
  7. 7. 3 approaches
  8. 8. 1. do nothing
  9. 9. moved beyond WAP or text
  10. 10. modern mobile browserscan handle the “real web”
  11. 11. “but the mobile context...”
  12. 12. “Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create twoseparate designs — typically with fewer features for mobile.” www.useit.com/alertbox/mobile-redesign.html
  13. 13. twitter.com/#!/stephenhay/status/23350345962889216
  14. 14. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  15. 15. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  16. 16. let the user decide: diet or full fat?
  17. 17. “refactored” for small displays, not dumbed down for mobile
  18. 18. 3. single adaptive site
  19. 19. nothing new
  20. 20. 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
  21. 21. how to take “desktop” layout to “mobile”?
  22. 22. CSS 2 Media Types
  23. 23. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  24. 24. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  25. 25. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  26. 26. 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/
  27. 27. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  28. 28. 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}
  29. 29. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  30. 30. 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}
  31. 31. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  32. 32. Exclusive expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  33. 33. Multiple media queries/* “The absence of a media query is the firstmedia 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}
  34. 34. http://mediaqueri.es
  35. 35. http://mediaqueri.es
  36. 36. http://mediaqueri.es
  37. 37. http://mediaqueri.es
  38. 38. www.themaninblue.com/writing/perspective/2004/09/21
  39. 39. design approaches using media queries
  40. 40. easy-readers.net/books/adaptive-web-design
  41. 41. www.alistapart.com/articles/responsive-web-design
  42. 42. grid-based layouts
  43. 43. www.subtraction.com/2007/03/19/oh-yeeaahh
  44. 44. www.subtraction.com/2007/03/19/oh-yeeaahh
  45. 45. www.alistapart.com/articles/fluidgrids
  46. 46. Responsive Web Design™fluid grid + fluid images + media queries
  47. 47. bostonglobe.com
  48. 48. adaptive vs responsive?
  49. 49. “not a magic bullet...”
  50. 50. unsolved mysteries…
  51. 51. www.opera.com/developer/tools/mobile
  52. 52. mobile devices lie
  53. 53. physical vs virtual pixels
  54. 54. viewport metasuggests an initial layout viewport and zoom
  55. 55. 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
  56. 56. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  57. 57. <meta name="viewport"content="width=device-width">
  58. 58. high-dpi devices lie twice
  59. 59. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  60. 60. “interesting” iOS quirk
  61. 61. confused?a practical example…
  62. 62. <meta name="viewport" content="width=550">
  63. 63. <meta name="viewport" content="width=550">
  64. 64. <meta name="viewport" content="width=550">
  65. 65. <meta name="viewport"content="width=550,maximum-scale=1.0">
  66. 66. <meta name="viewport"content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi">
  67. 67. maximum-scale=1.0breaks zooming!
  68. 68. JavaScript approaches to selectively apply viewport meta...argh!
  69. 69. CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}www.w3.org/TR/css-device-adaptonly works in Opera Mobile 11+ at the moment, with -o- prefixdev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
  70. 70. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  71. 71. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  72. 72. <meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@-o-viewport { width: 550px; max-zoom: 1; resolution: device;}
  73. 73. /* selective viewport via CSS */@media … { @-o-viewport { … /* for propellerheads */ }}
  74. 74. <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; }}
  75. 75. <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; }}
  76. 76. @-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto;}
  77. 77. more unsolved mysteries
  78. 78. Responsive Web Design™fluid grid + fluid images + media queries
  79. 79. /* fluid image based on parent container */img { max-width:100%; }
  80. 80. Responsive Web Design™fluid grid + fluid images + media queries
  81. 81. stephanierieger.com/the-trouble-with-android
  82. 82. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints
  83. 83. “embrace the fluidity, dont fight it”
  84. 84. http://futurefriend.ly
  85. 85. www.opera.com/developer patrick.lauke@opera.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×