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

Practical Responsive Web Design

Practical Responsive Web Design

I gave this talk at Northeast PHP 2013 in Boston, MA.

Slides and links available at http://jkle.in/rwd

Jonathan Klein

August 18, 2013
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. Practical Responsive
    Web Design
    Northeast PHP 2013
    Jonathan Klein, Performance Engineer
    @jonathanklein
    Sunday, August 18, 13

    View full-size slide

  2. Slides, Links
    jkle.in/rwd
    Sunday, August 18, 13

    View full-size slide

  3. Some Etsy Stats
    Sunday, August 18, 13

    View full-size slide

  4. Some Etsy Stats
    • Handmade marketplace
    Sunday, August 18, 13

    View full-size slide

  5. Some Etsy Stats
    • Handmade marketplace
    • 1.5 billion page views/month
    Sunday, August 18, 13

    View full-size slide

  6. Some Etsy Stats
    • Handmade marketplace
    • 1.5 billion page views/month
    • Almost $1B in sales last year
    Sunday, August 18, 13

    View full-size slide

  7. Some Etsy Stats
    • Handmade marketplace
    • 1.5 billion page views/month
    • Almost $1B in sales last year
    • ~1M lines of PHP
    Sunday, August 18, 13

    View full-size slide

  8. Why Responsive Web
    Design?
    Sunday, August 18, 13

    View full-size slide

  9. Main Advantages
    Sunday, August 18, 13

    View full-size slide

  10. Main Advantages
    • Maintainability
    Sunday, August 18, 13

    View full-size slide

  11. Main Advantages
    • Maintainability
    • SEO
    Sunday, August 18, 13

    View full-size slide

  12. Main Advantages
    • Maintainability
    • SEO
    • User Experience
    Sunday, August 18, 13

    View full-size slide

  13. Main Advantages
    • Maintainability
    • SEO
    • User Experience
    • Performance
    Sunday, August 18, 13

    View full-size slide

  14. 1.6 seconds
    Sunday, August 18, 13

    View full-size slide

  15. Two Assertions
    Sunday, August 18, 13

    View full-size slide

  16. 1. RWD isn’t that hard
    Sunday, August 18, 13

    View full-size slide

  17. 2. RWD can be fast
    Sunday, August 18, 13

    View full-size slide

  18. The Basics
    Sunday, August 18, 13

    View full-size slide

  19. Building blocks of RWD
    /* Greater than 900px wide */
    @media screen and (min-width: 56.25em) {...}
    /* Retina Display */
    @media screen and (min-device-pixel-ratio: 2) {...}
    /* You can chain these */
    @media screen and (min-width: 56.25em) and (min-
    device-pixel-ratio: 2) {...}
    Sunday, August 18, 13

    View full-size slide

  20. Building blocks of RWD
    /* Greater than 900px wide */
    @media screen and (min-width: 56.25em) {...}
    /* Retina Display */
    @media screen and (min-device-pixel-ratio: 2) {...}
    /* You can chain these */
    @media screen and (min-width: 56.25em) and (min-
    device-pixel-ratio: 2) {...}
    Sunday, August 18, 13

    View full-size slide

  21. Sunday, August 18, 13

    View full-size slide

  22. Breakpoints
    Sunday, August 18, 13

    View full-size slide

  23. Sunday, August 18, 13

    View full-size slide

  24. What Breakpoints to Use?
    Sunday, August 18, 13

    View full-size slide

  25. What Breakpoints to Use?
    • Don’t think about devices
    Sunday, August 18, 13

    View full-size slide

  26. What Breakpoints to Use?
    • Don’t think about devices
    • “Make it look good”
    Sunday, August 18, 13

    View full-size slide

  27. What Breakpoints to Use?
    • Don’t think about devices
    • “Make it look good”
    • Something like 600px, 900px, max
    Sunday, August 18, 13

    View full-size slide

  28. What Breakpoints to Use?
    • Don’t think about devices
    • “Make it look good”
    • Something like 600px, 900px, max
    • Divide by 16 to get em’s
    Sunday, August 18, 13

    View full-size slide

  29. Retina Images
    Sunday, August 18, 13

    View full-size slide

  30. Start With the Normal Version
    /* Small version of the logo */
    .logo {
    background-image: url(logo_sm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 230px 50px;
    }
    Sunday, August 18, 13

    View full-size slide

  31. Start With the Normal Version
    /* Small version of the logo */
    .logo {
    background-image: url(logo_sm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 230px 50px;
    }
    Sunday, August 18, 13

    View full-size slide

  32. High Res Screens
    /* Provide a hi-res logo for retina screens */
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
    background-image: url(logo_lg.png);
    }
    }
    Sunday, August 18, 13

    View full-size slide

  33. High Res Screens
    /* Provide a hi-res logo for retina screens */
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
    background-image: url(logo_lg.png);
    }
    }
    Sunday, August 18, 13

    View full-size slide

  34. RWD In Action
    Sunday, August 18, 13

    View full-size slide

  35. Sunday, August 18, 13

    View full-size slide

  36. Sunday, August 18, 13

    View full-size slide

  37. Clean up some CSS
    .article {
    width: 31%;
    min-width:250px;
    }
    #content .wrapper {
    width:auto;
    }
    #page {
    background:none;
    }
    Sunday, August 18, 13

    View full-size slide

  38. Make it Responsive
    /* Two articles across */
    @media screen and (max-width: 850px) {
    .article {
    width: 46%;
    }
    }
    /* One article across */
    @media screen and (max-width: 530px) {
    .article {
    width: 90%;
    }
    }
    Sunday, August 18, 13

    View full-size slide

  39. Sunday, August 18, 13

    View full-size slide

  40. Demo
    Sunday, August 18, 13

    View full-size slide

  41. Performance
    Sunday, August 18, 13

    View full-size slide

  42. A Few Considerations
    Sunday, August 18, 13

    View full-size slide

  43. A Few Considerations
    • Extra CSS (minimal)
    Sunday, August 18, 13

    View full-size slide

  44. A Few Considerations
    • Extra CSS (minimal)
    • Retina Images (ouch)
    Sunday, August 18, 13

    View full-size slide

  45. A Few Considerations
    • Extra CSS (minimal)
    • Retina Images (ouch)
    • Larger images than needed
    Sunday, August 18, 13

    View full-size slide

  46. A Few Considerations
    • Extra CSS (minimal)
    • Retina Images (ouch)
    • Larger images than needed
    • Extra Image Requests
    Sunday, August 18, 13

    View full-size slide

  47. A Few Considerations
    • Extra CSS (minimal)
    • Retina Images (ouch)
    • Larger images than needed
    • Extra Image Requests
    Sunday, August 18, 13

    View full-size slide

  48. Responsive Images
    Sunday, August 18, 13

    View full-size slide

  49. Three Performance Goals:
    Sunday, August 18, 13

    View full-size slide

  50. Three Performance Goals:
    1. Start with a small image
    Sunday, August 18, 13

    View full-size slide

  51. Three Performance Goals:
    1. Start with a small image
    2. Upgrade to larger size without
    downloading both
    Sunday, August 18, 13

    View full-size slide

  52. Three Performance Goals:
    1. Start with a small image
    2. Upgrade to larger size without
    downloading both
    3. Unique image URLs (caching)
    Sunday, August 18, 13

    View full-size slide

  53. Automate
    Sunday, August 18, 13

    View full-size slide

  54. Resize on the fly
    Sunday, August 18, 13

    View full-size slide

  55. Resize on the fly
    • Based on browser resolution, make the
    right image
    Sunday, August 18, 13

    View full-size slide

  56. Resize on the fly
    • Based on browser resolution, make the
    right image
    • Round a bit
    Sunday, August 18, 13

    View full-size slide

  57. Resize on the fly
    • Based on browser resolution, make the
    right image
    • Round a bit
    • http://adaptive-images.com
    Sunday, August 18, 13

    View full-size slide

  58. Lossless Compression
    Sunday, August 18, 13

    View full-size slide

  59. Lossless Compression
    Sunday, August 18, 13

    View full-size slide

  60. 140 KB
    Lossless Compression
    Sunday, August 18, 13

    View full-size slide

  61. 140 KB 85 KB
    Lossless Compression
    Sunday, August 18, 13

    View full-size slide

  62. 140 KB 85 KB
    Lossless Compression
    • http://www.smushit.com/ysmush.it/
    • https://developers.google.com/speed/pagespeed/
    Sunday, August 18, 13

    View full-size slide

  63. • Automate HTML output
    • Plan for the future
    More Automation
    Sunday, August 18, 13

    View full-size slide

  64. HTML Output (picturefill)
    Sunday, August 18, 13

    View full-size slide

  65. HTML Output (picturefill)
    • https://github.com/scottjehl/picturefill
    Sunday, August 18, 13

    View full-size slide

  66. HTML Output (picturefill)
    • https://github.com/scottjehl/picturefill
    • Mimics proposed element
    Sunday, August 18, 13

    View full-size slide

  67. HTML Output (picturefill)
    • https://github.com/scottjehl/picturefill
    • Mimics proposed element
    • < 0.5K JS file
    Sunday, August 18, 13

    View full-size slide

  68. HTML Output (picturefill)
    • https://github.com/scottjehl/picturefill
    • Mimics proposed element
    • < 0.5K JS file
    • Supports all media queries
    Sunday, August 18, 13

    View full-size slide

  69. HTML Output (picturefill)
    • https://github.com/scottjehl/picturefill
    • Mimics proposed element
    • < 0.5K JS file
    • Supports all media queries
    • Works across all browsers
    Sunday, August 18, 13

    View full-size slide











  70. Sunday, August 18, 13

    View full-size slide











  71. IE 6, 7, 8 get this
    Sunday, August 18, 13

    View full-size slide

  72. How does it do?
    Sunday, August 18, 13

    View full-size slide

  73. How does it do?
    ✓ Unique image URLs
    Sunday, August 18, 13

    View full-size slide

  74. How does it do?
    ✓ Unique image URLs
    ✓ Start with smallest image
    Sunday, August 18, 13

    View full-size slide

  75. How does it do?
    ✓ Unique image URLs
    ✓ Start with smallest image
    ✓ Only one image download
    Sunday, August 18, 13

    View full-size slide

  76. How does it do?
    ✓ Unique image URLs
    ✓ Start with smallest image
    ✓ Only one image download
    ✓ Fallback for old IE
    Sunday, August 18, 13

    View full-size slide

  77. But that markup...
    Sunday, August 18, 13

    View full-size slide

  78. Plan to Replace
    Whatever You Build
    Sunday, August 18, 13

    View full-size slide

  79. Resources for Responsive Imgs
    Jason Grigsby:
    http://blog.cloudfour.com/responsive-imgs/
    http://blog.cloudfour.com/responsive-imgs-part-2/
    http://blog.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/
    http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
    http://blog.cloudfour.com/sensible-jumps-in-responsive-image-file-sizes/
    Sunday, August 18, 13

    View full-size slide

  80. Don’t type, click:
    jkle.in/rwd
    Sunday, August 18, 13

    View full-size slide

  81. Clown Car Technique
    Sunday, August 18, 13

    View full-size slide

  82. Basics
    Sunday, August 18, 13

    View full-size slide

  83. Basics
    • tag
    Sunday, August 18, 13

    View full-size slide

  84. Basics
    • tag
    • References SVG file
    Sunday, August 18, 13

    View full-size slide

  85. Basics
    • tag
    • References SVG file
    • ...as a DataURI
    Sunday, August 18, 13

    View full-size slide

  86. Basics
    • tag
    • References SVG file
    • ...as a DataURI
    • ...URL encoded
    Sunday, August 18, 13

    View full-size slide

  87. Basics
    • tag
    • References SVG file
    • ...as a DataURI
    • ...URL encoded
    • Wrapping conditional comment
    Sunday, August 18, 13

    View full-size slide

  88. Clowns and Cars
    type="image/svg+xml">


    Sunday, August 18, 13

    View full-size slide

  89. Benefits
    Sunday, August 18, 13

    View full-size slide

  90. Benefits
    • All logic in an SVG file
    Sunday, August 18, 13

    View full-size slide

  91. Benefits
    • All logic in an SVG file
    • One HTTP request
    Sunday, August 18, 13

    View full-size slide

  92. Benefits
    • All logic in an SVG file
    • One HTTP request
    • Management is easy
    Sunday, August 18, 13

    View full-size slide

  93. Benefits
    • All logic in an SVG file
    • One HTTP request
    • Management is easy
    • Adapts to browser size automatically
    Sunday, August 18, 13

    View full-size slide

  94. Drawbacks
    Sunday, August 18, 13

    View full-size slide

  95. Drawbacks
    • Accessibility
    Sunday, August 18, 13

    View full-size slide

  96. Drawbacks
    • Accessibility
    • No right-click
    Sunday, August 18, 13

    View full-size slide

  97. Drawbacks
    • Accessibility
    • No right-click
    • Doesn’t work on Android <= 2.3
    Sunday, August 18, 13

    View full-size slide

  98. We Need Something
    Better
    Sunday, August 18, 13

    View full-size slide

  99. display:none
    Sunday, August 18, 13

    View full-size slide


  100. Sunday, August 18, 13

    View full-size slide


  101. Image is Downloaded
    Sunday, August 18, 13

    View full-size slide




  102. Sunday, August 18, 13

    View full-size slide




  103. Image is Downloaded
    Sunday, August 18, 13

    View full-size slide

  104. <br/>.bg {<br/>background-image: url(foo.png);<br/>width:100px;<br/>height: 100px;<br/>display: none;<br/>}<br/>

    Sunday, August 18, 13

    View full-size slide

  105. <br/>.bg {<br/>background-image: url(foo.png);<br/>width:100px;<br/>height: 100px;<br/>display: none;<br/>}<br/>

    Image is Downloaded
    Sunday, August 18, 13

    View full-size slide

  106. <br/>.bg {<br/>background-image: url(foo.png);<br/>width:100px;<br/>height: 100px;<br/>display: none;<br/>}<br/>



    Sunday, August 18, 13

    View full-size slide

  107. <br/>.bg {<br/>background-image: url(foo.png);<br/>width:100px;<br/>height: 100px;<br/>display: none;<br/>}<br/>



    Image is NOT Downloaded
    Sunday, August 18, 13

    View full-size slide

  108. with display:none Downloaded
    with parent
    display:none
    Downloaded
    background image with
    display:none
    Downloaded
    background image with
    parent display:none
    Not Downloaded
    Sunday, August 18, 13

    View full-size slide

  109. Workarounds
    Sunday, August 18, 13

    View full-size slide

  110. Handling display:none
    Sunday, August 18, 13

    View full-size slide

  111. Handling display:none
    • Start with an empty src, use JS
    Sunday, August 18, 13

    View full-size slide

  112. Handling display:none
    • Start with an empty src, use JS
    • Server side detection
    Sunday, August 18, 13

    View full-size slide

  113. Handling display:none
    • Start with an empty src, use JS
    • Server side detection
    • Lots more: http://timkadlec.com/
    2012/04/media-query-asset-
    downloading-results/
    Sunday, August 18, 13

    View full-size slide

  114. Media Query Browser
    Support
    Sunday, August 18, 13

    View full-size slide

  115. Sunday, August 18, 13

    View full-size slide

  116. Fail
    Sunday, August 18, 13

    View full-size slide

  117. Handle IE
    Conditional Comments

    http://adactio.com/journal/4494/
    More: http://buildmobile.com/understanding-responsive-web-
    design-cross-browser-compatibility/
    Sunday, August 18, 13

    View full-size slide

  118. The Future:
    Client Hints
    Sunday, August 18, 13

    View full-size slide

  119. Proposal by Ilya Grigorik
    Sunday, August 18, 13

    View full-size slide

  120. Proposal by Ilya Grigorik
    • Client (browser) sends an additional
    HTTP Header
    Sunday, August 18, 13

    View full-size slide

  121. Proposal by Ilya Grigorik
    • Client (browser) sends an additional
    HTTP Header
    • CH: dh=598, dw=384, dpr=2.0, t
    Sunday, August 18, 13

    View full-size slide

  122. Proposal by Ilya Grigorik
    • Client (browser) sends an additional
    HTTP Header
    • CH: dh=598, dw=384, dpr=2.0, t
    • https://github.com/igrigorik/http-client-hints/
    Sunday, August 18, 13

    View full-size slide

  123. Homework
    Sunday, August 18, 13

    View full-size slide

  124. Sunday, August 18, 13

    View full-size slide

  125. Find your favorite non-responsive site
    Sunday, August 18, 13

    View full-size slide

  126. Find your favorite non-responsive site
    Sunday, August 18, 13

    View full-size slide

  127. Find your favorite non-responsive site
    Save the HTML locally
    Sunday, August 18, 13

    View full-size slide

  128. Find your favorite non-responsive site
    Save the HTML locally
    Sunday, August 18, 13

    View full-size slide

  129. Find your favorite non-responsive site
    Save the HTML locally
    Add some media queries and a breakpoint
    Sunday, August 18, 13

    View full-size slide

  130. Find your favorite non-responsive site
    Save the HTML locally
    Add some media queries and a breakpoint
    Sunday, August 18, 13

    View full-size slide

  131. Find your favorite non-responsive site
    Save the HTML locally
    Add some media queries and a breakpoint
    Make one retina image and use it
    Sunday, August 18, 13

    View full-size slide

  132. Find your favorite non-responsive site
    Save the HTML locally
    Add some media queries and a breakpoint
    Make one retina image and use it
    Sunday, August 18, 13

    View full-size slide

  133. Congratulations!
    Sunday, August 18, 13

    View full-size slide

  134. • Resize browser window, use console
    when you want a breakpoint
    • document.body.offsetWidth
    • If you must start w/ desktop, use:
    • @media screen and (max-width: 900px) {
    Some Hints
    Sunday, August 18, 13

    View full-size slide

  135. Sunday, August 18, 13

    View full-size slide

  136. Synthetic Testing
    Sunday, August 18, 13

    View full-size slide

  137. WebPagetest
    • Use Chrome
    • Script:
    • setviewportsize 400 600
    • navigate bostonglobe.com
    Sunday, August 18, 13

    View full-size slide

  138. Sunday, August 18, 13

    View full-size slide

  139. Recap
    Sunday, August 18, 13

    View full-size slide

  140. Takeaways
    Sunday, August 18, 13

    View full-size slide

  141. Takeaways
    • Start with small sizes on new sites
    Sunday, August 18, 13

    View full-size slide

  142. Takeaways
    • Start with small sizes on new sites
    • Use em’s and %’s
    Sunday, August 18, 13

    View full-size slide

  143. Takeaways
    • Start with small sizes on new sites
    • Use em’s and %’s
    • ~3-4 device independent breakpoints
    Sunday, August 18, 13

    View full-size slide

  144. Takeaways
    • Start with small sizes on new sites
    • Use em’s and %’s
    • ~3-4 device independent breakpoints
    • Use Responsive Images
    Sunday, August 18, 13

    View full-size slide

  145. Takeaways
    • Start with small sizes on new sites
    • Use em’s and %’s
    • ~3-4 device independent breakpoints
    • Use Responsive Images
    • Have a fallback plan for IE
    Sunday, August 18, 13

    View full-size slide

  146. Get in Touch
    www.etsy.com/careers
    [email protected]
    @jonathanklein
    Sunday, August 18, 13

    View full-size slide