Adaptive layouts - standards>next Manchester 23.03.2011

4,240 views
4,192 views

Published on

Making your site cross-device friendly
standards>next / Manchester / 23 March 2011

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,240
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
76
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Adaptive layouts - standards>next Manchester 23.03.2011

  1. 1. Adaptive layoutsMAKING YOUR SITE CROSS-DEVICE FRIENDLYPatrick H. Lauke / standards>next / Manchester / 23 March 2011
  2. 2. we need a site that works on iPhone
  3. 3. ...works on iPhone... oh, and iPad
  4. 4. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  5. 5. make your site work on all (most) mobile devices
  6. 6. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  7. 7. CSS 2 Media Types
  8. 8. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  9. 9. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  10. 10. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  11. 11. CSS 3 Media Queries● build and extend CSS 2.1 Media Types● more granular control of capabilitieshttp://www.w3.org/TR/css3-mediaqueries/
  12. 12. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  13. 13. 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}
  14. 14. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  15. 15. 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}
  16. 16. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  17. 17. Negative expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  18. 18. Multiple media queries@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}
  19. 19. www.alistapart.com/articles/responsive-web-design
  20. 20. http://mediaqueri.es
  21. 21. http://mediaqueri.es
  22. 22. http://mediaqueri.es
  23. 23. http://mediaqueri.es
  24. 24. www.themaninblue.com/writing/perspective/2004/09/21
  25. 25. viewport meta
  26. 26. physical vs virtual pixels
  27. 27. mobile devices lie“to lie is to state something with disregard to the truth with the intention that people will accept the statement as truth” thanks wikipedia
  28. 28. viewport metasuggests sizing to mobile browser
  29. 29. 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
  30. 30. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  31. 31. <meta name="viewport" content="width=550">
  32. 32. CSS Device Adaptation@viewport { width: device-width;}@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}dev.w3.org/csswg/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
  33. 33. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom
  34. 34. high-dpi devices ...is where my brain starts to meltdev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport developer.android.com/reference/android/webkit/WebView.html
  35. 35. www.opera.com/developer patrick.lauke@opera.com

×