Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bruce Lawson Over The Air 2012

Bruce Lawson Over The Air 2012

Responsive Web Design: the sex behind the specs

(moving so fast these days, I had to re-write the "future" section since I wrote it 3 weeks ago!)


bruce lawson

June 03, 2012

More Decks by bruce lawson

Other Decks in Technology


  1. RWD: The specs behind the sex DEVICE-FRIENDLY LAYOUTS BEYOND THE

  2. Zeldman pic by Tony Quartarolo

  3. (Artist's Impression)

  4. Mobile Web philosophy

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. Three methodologies

  14. 1. Special mobile site 2. Do nothing at all 3.

    Optimise for mobile
  15. 1. Special mobile site 2. Do nothing at all 3.

    Optimise for mobile
  16. photo: http://www.useit.com/jakob/photos/jakob_likes_it-big.jpg

  17. Rule of thumbs Like accessibility, retrofitting for RWD on a

    non-trivial site (eg, different templates, data tables etc) is an order of magnitude more expensive than building it RWD from scratch.
  18. refactored for small screen, not dumbed down for mobile

  19. offer users choice: desktop or mobile?

  20. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/

  21. 1. Special mobile site 2. Do nothing at all 3.

    Optimise for mobile
  22. not WAP or text anymore...

  23. 1. Special mobile site 2. Do nothing at all 3.

    Optimise for mobile
  24. None
  25. CSS 3 Media Queries

  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 features width color height color-index device-width monochrome device-height resolution

    orientation scan aspect-ratio grid device-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 first media 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. unsolved mysteries…

  40. mobile devices lie

  41. physical vs virtual pixels

  42. viewport meta suggests an initial layout viewport and zoom

  43. None
  44. Viewport properties width initial-scale height minimum-scale user-scalable maximum-scale

  45. This is the viewport

  46. Not just this, but it's almost always the width you

    want to control
  47. None
  48. no viewport defined in <head>, so fallback to default of

    980px, which is squeezed inside 320px.
  49. <meta name="viewport" content="width=320">

  50. <meta name="viewport" content="width=320">

  51. None
  52. <meta name="viewport" content="width=device-width">

  53. <meta name="viewport" content="width=device-width">

  54. <meta name="viewport" content="width=device-width">

  55. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no">

  56. None
  57. None
  58. <meta name="viewport" content="width=550">

  59. If you're using Media Queries: <meta name="viewport" content="width=device-width"> If you

    have an explicit width: <meta name="viewport" content="width=550">
  60. high-dpi devices lie twice

  61. <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

  62. Inception-like resources people.opera.com/patrickl/experiments/viewport-meta-css/ (bit.ly/KldE8Z) dev.opera.com/articles/view/an-introduction-to-meta- viewport-and-viewport/

  63. CSS Device Adaptation @viewport { width: 320px; zoom: 2.3; user-zoom:

    fixed; } Opera Mobile, Opera Mini, Internet Explorer 10 with prefixes www.w3.org/TR/css-device-adapt dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
  64. Viewport properties width / min-width / max-width user-zoom height /

    min-height / max-height orientation zoom / min-zoom / max-zoom resolution
  65. <meta name="viewport" content="width=550"> @viewport { width: 550px; }

  66. <meta name="viewport" content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi"> @viewport { width: 550px; max-zoom: 1;

    resolution: device; }
  67. /* selective viewport via CSS */ @media … { @-o-viewport

    { … /* for propellerheads */ } }
  68. <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; } }
  69. None
  70. None
  71. None
  72. <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; } }
  73. @-o-viewport { /* minimum of 550px viewport width */ width:

    550px auto; max-zoom: auto; }
  74. Testing viewport: Opera Mobile Emulator

  75. The future

  76. matchMedia if (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/
  77. Not in older browsers

  78. fixmystreet.com @media screen and (max-width: 480px) { body {display: table;

    caption-side: bottom;} Nav { float: none; display: table-caption; width:100%; } }
  79. None
  80. lowsrc <img src=hires.jpg lowsrc=lores.jpg alt="blah"> Both images are download; never

    in spec
  81. Apple way <img src=lores.jpg data-src=hires.jpg alt="blah"> Both images are download;

    requires JS for hires image
  82. adaptive-images.com Add .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 the PHP file.
  83. Super WebKit-tastic CSS selector {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
  84. .. extrapolate to HTML? <img src="face-600-200-at-1.jpeg" alt="" srcset="face-600-200-at-1.jpeg 600w 200h

    1x, face-600-200-at-2.jpeg 600w 200h 2x, face-icon.png 200w 200h"> A comma-separated list of URLs each with one or more descriptors giving the maximum viewport dimensions and pixel density allowed to use the image.
  85. Media Query "hints" From the available options, the user agent

    then picks the most appropriate image. If the viewport dimensions or pixel density changes, the user agent can replace the image data with a new image on the fly.
  86. Good or evil?

  87. Good or evil? Florian Rivoal

  88. Script media query @media screen and (script) {...} @media screen

    and not (script) {…} http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
  89. hover media query The ‘hover’ media feature is used to

    query whether primary pointing system used on the output device can hover or not.
  90. pointer media query none The input mechanism of the device

    does not include a pointing device. coarse The input mechanism of the device includes a pointing device of limited accuracy. fine The input mechanism of the device includes an accurate pointing device.
  91. @media (paged) and (interactive:0) { // I am like a

    printer } @media (paged) and (interactive) { // I'm a projector, or like a Kindle } @media (paged) and (interactive) and (touch) { // I'm like a touch-screen Kindle }
  92. @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 }
  93. @media (remote) { // TV or set-top box? } @media

    (remote) and (hover) { // Wii? }
  94. None
  95. Tangent about web on TV "Searching, browsing, updating and buffering

    are not TV- like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment." www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx
  96. OMG watchin TV LOL #justsayin Most consumers have up to

    five devices that do social media better than a TV. Consumer engagement with social media is inversely proportional to the size of the screen used for it.
  97. No shit, sherlock! Teenagers were "horrified at the prospect of

    displaying their social activities on the family TV." Image from www.buzzfeed.com/scott/holy-shit-halloween-costume
  98. </tangent>

  99. @media (network: v-slow) {..} Florian: "It has been proposed. Most

    people agree that it would be cool, nobody has a clue about how to spec it in a way that is useful and implementable. If you find people with a clue, encourage them to submit proposals to me or to www-style@w3.org. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/www- style/2012Mar/0691.html first."
  100. “embrace the fluidity, don't fight it”

  101. None
  102. brucel@opera.com opera.com/developer www.brucelawson.co.uk @brucel