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

  • 3,721 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,721
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
109
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adapt and respondMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOPPatrick H. Lauke / standards.next / 3 March 2012
  • 2. mobile webis 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
  • 6. sites that work on (almost) all mobile devices
  • 7. 3 approaches
  • 8. 1. do nothing
  • 9. moved beyond WAP or text
  • 10. modern mobile browserscan handle the “real web”
  • 11. “but the mobile context...”
  • 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. twitter.com/#!/stephenhay/status/23350345962889216
  • 14. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 15. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 16. let the user decide: diet or full fat?
  • 17. “refactored” for small displays, not dumbed down for mobile
  • 18. 3. single adaptive site
  • 19. nothing new
  • 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. how to take “desktop” layout to “mobile”?
  • 22. CSS 2 Media Types
  • 23. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  • 24. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  • 25. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 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. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 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. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  • 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. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  • 32. Exclusive expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  • 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. http://mediaqueri.es
  • 35. http://mediaqueri.es
  • 36. http://mediaqueri.es
  • 37. http://mediaqueri.es
  • 38. www.themaninblue.com/writing/perspective/2004/09/21
  • 39. design approaches using media queries
  • 40. easy-readers.net/books/adaptive-web-design
  • 41. www.alistapart.com/articles/responsive-web-design
  • 42. grid-based layouts
  • 43. www.subtraction.com/2007/03/19/oh-yeeaahh
  • 44. www.subtraction.com/2007/03/19/oh-yeeaahh
  • 45. www.alistapart.com/articles/fluidgrids
  • 46. Responsive Web Design™fluid grid + fluid images + media queries
  • 47. bostonglobe.com
  • 48. adaptive vs responsive?
  • 49. “not a magic bullet...”
  • 50. unsolved mysteries…
  • 51. www.opera.com/developer/tools/mobile
  • 52. mobile devices lie
  • 53. physical vs virtual pixels
  • 54. viewport metasuggests an initial layout viewport and zoom
  • 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. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  • 57. <meta name="viewport"content="width=device-width">
  • 58. high-dpi devices lie twice
  • 59. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  • 60. “interesting” iOS quirk
  • 61. confused?a practical example…
  • 62. <meta name="viewport" content="width=550">
  • 63. <meta name="viewport" content="width=550">
  • 64. <meta name="viewport" content="width=550">
  • 65. <meta name="viewport"content="width=550,maximum-scale=1.0">
  • 66. <meta name="viewport"content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi">
  • 67. maximum-scale=1.0breaks zooming!
  • 68. JavaScript approaches to selectively apply viewport meta...argh!
  • 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. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  • 71. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  • 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. /* selective viewport via CSS */@media … { @-o-viewport { … /* for propellerheads */ }}
  • 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. <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. @-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto;}
  • 77. more unsolved mysteries
  • 78. Responsive Web Design™fluid grid + fluid images + media queries
  • 79. /* fluid image based on parent container */img { max-width:100%; }
  • 80. Responsive Web Design™fluid grid + fluid images + media queries
  • 81. stephanierieger.com/the-trouble-with-android
  • 82. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints
  • 83. “embrace the fluidity, dont fight it”
  • 84. http://futurefriend.ly
  • 85. www.opera.com/developer patrick.lauke@opera.com