Practical Responsive Web Design - JSDay

Practical Responsive Web Design - JSDay

A talk I gave at JSDay 2013 in Verona, Italy. Resources available at http://jkle.in/jsday

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

May 16, 2013
Tweet

Transcript

  1. Practical Responsive Web Design JSDay 2013 Jonathan Klein, Performance Engineer

    @jonathanklein
  2. Slides, Links jkle.in/jsday

  3. Some Etsy Stats • Handmade marketplace • 1.4 billion page

    views/month • Almost $1B in sales last year • ~1M lines of JavaScript
  4. Two Assertions

  5. 1. RWD isn’t that hard

  6. 2. RWD can be fast

  7. The Basics

  8. 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) {...}
  9. 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) {...}
  10. None
  11. Breakpoints

  12. None
  13. What Breakpoints to Use?

  14. What Breakpoints to Use? • Don’t think about devices

  15. What Breakpoints to Use? • Don’t think about devices •

    “Make it look good”
  16. What Breakpoints to Use? • Don’t think about devices •

    “Make it look good” • Something like 600px, 900px, max
  17. 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
  18. Retina Images

  19. 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; }
  20. 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; }
  21. 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); } }
  22. RWD In Action

  23. None
  24. None
  25. Clean up some CSS .article { width: 31%; min-width:250px; }

    ! #content .wrapper { width:auto; } ! #page { background:none; }
  26. 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%; } }
  27. None
  28. Performance

  29. A Few Considerations

  30. A Few Considerations • Extra CSS (minimal)

  31. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch)
  32. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed
  33. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests
  34. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests
  35. Responsive Images

  36. Three Performance Goals:

  37. Three Performance Goals: 1. Start with a small image

  38. Three Performance Goals: 1. Start with a small image 2.

    Upgrade to larger size without downloading both
  39. Three Performance Goals: 1. Start with a small image 2.

    Upgrade to larger size without downloading both 3. Unique image URLs (caching)
  40. • Resize on the fly • Compress automatically First Step:

    Automation
  41. Lossless Compression

  42. 140 KB Lossless Compression

  43. 140 KB 85 KB Lossless Compression

  44. 140 KB 85 KB Lossless Compression • http://www.smushit.com/ysmush.it/ • https://developers.google.com/speed/pagespeed/

  45. • Automate HTML output • Plan for the future More

    Automation
  46. HTML Output (picturefill)

  47. HTML Output (picturefill) • https://github.com/scottjehl/picturefill

  48. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

  49. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file
  50. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file • Supports all media queries
  51. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file • Supports all media queries • Works across all browsers
  52. <div data-picture data-alt="Interesting Image Alt Text"> <div data-src="small.jpg"></div> <div data-src="medium.jpg"

    data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> ! <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="small.jpg" alt="Interesting Image Alt Text"> </noscript> </div>
  53. <div data-picture data-alt="Interesting Image Alt Text"> <div data-src="small.jpg"></div> <div data-src="medium.jpg"

    data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> ! <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="small.jpg" alt="Interesting Image Alt Text"> </noscript> </div> IE 6, 7, 8 get this
  54. How does it do?

  55. How does it do? ✓ Unique image URLs

  56. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image
  57. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download
  58. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download ✓ Fallback for old IE
  59. But that markup...

  60. Plan to Replace Whatever You Build

  61. 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/
  62. Don’t type, click: jkle.in/jsday

  63. Browser Support

  64. None
  65. Fail

  66. Handle IE Conditional Comments <!--[if lt IE 9]><![endif]--> http://adactio.com/journal/4494/ !

    ! More: http://buildmobile.com/understanding-responsive-web- design-cross-browser-compatibility/
  67. The Future:  Client Hints

  68. Proposal by Ilya Grigorik

  69. Proposal by Ilya Grigorik • Client (browser) sends an additional

    HTTP Header
  70. Proposal by Ilya Grigorik • Client (browser) sends an additional

    HTTP Header • CH: dh=598, dw=384, dpr=2.0, t
  71. 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/
  72. Homework

  73. None
  74. Find your favorite non-responsive site

  75. Find your favorite non-responsive site

  76. Find your favorite non-responsive site Save the HTML locally

  77. Find your favorite non-responsive site Save the HTML locally

  78. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint
  79. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint
  80. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Make one retina image and use it
  81. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Make one retina image and use it
  82. Welcome to the world of RWD

  83. • 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
  84. None
  85. Recap

  86. Recap • Start with small sizes on new sites

  87. Recap • Start with small sizes on new sites •

    Use em’s and %’s
  88. Recap • Start with small sizes on new sites •

    Use em’s and %’s • ~3-4 device independent breakpoints
  89. Recap • Start with small sizes on new sites •

    Use em’s and %’s • ~3-4 device independent breakpoints • Use Responsive Images
  90. Recap • 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
  91. Get in Touch ! www.etsy.com/careers ! jonathan@etsy.com ! @jonathanklein