Your SlideShare is downloading. ×
  • Like
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 3,792 views
Published

 

Published 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,792
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
110
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