Practical Responsive Web Design - JSDay

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

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) {...}
11. Breakpoints
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
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%; } }
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
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
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
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