The specs behind the sex, mobile-friendly layout beyond the desktop

2,444 views
2,261 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,444
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The specs behind the sex, mobile-friendly layout beyond the desktop

  1. 1. The specs behind the sexMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
  2. 2. Zeldman pic by Tony Quartarolo
  3. 3. Mobile Web philosophy
  4. 4. Three methodologies
  5. 5. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  6. 6. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  7. 7. refactored for small screen,not dumbed down for mobile
  8. 8. offer users choice:desktop or mobile?
  9. 9. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  10. 10. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  11. 11. not WAP or text anymore...
  12. 12. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  13. 13. CSS 2 Media Types
  14. 14. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  15. 15. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  16. 16. 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/
  17. 17. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  18. 18. 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}
  19. 19. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  20. 20. 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}
  21. 21. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  22. 22. Exclusive expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  23. 23. 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}
  24. 24. http://mediaqueri.es
  25. 25. http://mediaqueri.es
  26. 26. http://mediaqueri.es
  27. 27. http://mediaqueri.es
  28. 28. www.themaninblue.com/writing/perspective/2004/09/21
  29. 29. unsolved mysteries…
  30. 30. mobile devices lie
  31. 31. viewport metasuggests an initial layout viewport and zoom
  32. 32. physical vs virtual pixels
  33. 33. viewport meta<meta name="viewport"content="width=device-width"><meta name="viewport"content="width=320, initial-scale=2.3,user-scalable=no">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  34. 34. <meta name="viewport" content="width=550">
  35. 35. If youre using Media Queries: <meta name="viewport"content="width=device-width"> If you have an explicit width: <meta name="viewport" content="width=550">
  36. 36. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  37. 37. high-dpi devices lie twice
  38. 38. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  39. 39. 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
  40. 40. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  41. 41. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  42. 42. <meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@-o-viewport { width: 550px; max-zoom: 1; resolution: device;}
  43. 43. /* selective viewport via CSS */@media … { @-o-viewport { … /* for propellerheads */ }}
  44. 44. <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; }}
  45. 45. <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; }}
  46. 46. @-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto;}
  47. 47. The future
  48. 48. matchMediaif (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */} else { /* the view port is less than 400 pixels wide */} For IE9+ and Opera, polyfill github.com/paulirish/matchMedia.js/
  49. 49. lowsrc<img src=hires.jpg lowsrc=lores.jpg alt="blah">Both images are download; never in spec
  50. 50. Apple way<img src=lores.jpg data-src=hires.jpg alt="blah">Both images are download; requires JS for hires image
  51. 51. adaptive-images.comAdd .htaccess and adaptive-images.php to your document-root folder.Add one line of JavaScript into the <head> of your site.Add your CSS Media Query values into $resolutions in thePHP file.
  52. 52. Super WebKit-tastic CSSselector {background: image-set (url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;}selector {background: image-set(url(foo-lowres.png) 1x low-bandwidth, url(foo-highres.png) 2x high-bandwidth);}http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
  53. 53. .. extrapolate to HTML?<img src=foo-lowres.png set="foo-lowres.png 1x, foo-highres.png 2x" alt="blah">"Ill post something to the whatwg thread referencing thisproposal."
  54. 54. video and Responsive Web Design<video> <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"></video>
  55. 55. Adaptive Image Element<picture> <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"></picture>www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/http://www.w3.org/community/respimg/
  56. 56. <picture alt=… > <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"> <img src=… alt=…></picture>
  57. 57. “not a magic bullet...”
  58. 58. Good or evil?Florian Rivoal
  59. 59. Note to people who werent at the talk: following slides arestrawman ideas for the next iteration of Media Queries (CSS4) and are almost certainly to be completely different if theyever make it into the specification. (CSS 3 MQs became a"Proposed Recommendation", eg a "Standard" week of 23April 2012, so very early days!)
  60. 60. @media screen and (script) {...}@media screen and not (script) {…} http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
  61. 61. @media (paged) and (interactive:0) { // I am like a printer}@media (paged) and (interactive) { // Im a projector, or like a Kindle}@media (paged) and (interactive) and (touch){ // Im like a touch-screen Kindle}
  62. 62. @media (touch) and (max-width: 480) { // looks like an smart phone}@media (touch) and (keyboard) and (min-width:600) { // looks like a touch-screen laptop}
  63. 63. @media (remote) { // TV or set-top box?}@media (remote) and (hover) { // Wii?}
  64. 64. @media (network: v-slow) {..}Florian: "It has been proposed. Most people agree that itwould be cool, nobody has a clue about how to spec it in away that is useful and implementable. If you find peoplewith a clue, encourage them to submit proposals to me orto www-style@w3.org. Use [css4-mediaqueries] in thesubject line, and read lists.w3.org/Archives/Public/www-style/2012Mar/0691.html first."
  65. 65. “embrace the fluidity, dont fight it”
  66. 66. http://futurefriend.ly
  67. 67. brucel@opera.com opera.com/developerwww.brucelawson.co.uk @brucel

×