Practical Responsive Web Design

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

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

1. Practical Responsive Web Design Northeast PHP 2013 Jonathan Klein, Performance Engineer @jonathanklein Sunday, August 18, 13
2. Slides, Links jkle.in/rwd Sunday, August 18, 13
3. Some Etsy Stats Sunday, August 18, 13
4. Some Etsy Stats • Handmade marketplace Sunday, August 18, 13
5. Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month Sunday, August 18, 13
6. Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month • Almost $1B in sales last year Sunday, August 18, 13
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
8. Why Responsive Web Design? Sunday, August 18, 13
9. Main Advantages Sunday, August 18, 13
10. Main Advantages • Maintainability Sunday, August 18, 13
11. Main Advantages • Maintainability • SEO Sunday, August 18, 13
12. Main Advantages • Maintainability • SEO • User Experience Sunday, August 18, 13
13. Main Advantages • Maintainability • SEO • User Experience • Performance Sunday, August 18, 13
14. 1.6 seconds Sunday, August 18, 13
15. Two Assertions Sunday, August 18, 13
16. 1. RWD isn’t that hard Sunday, August 18, 13
17. 2. RWD can be fast Sunday, August 18, 13
18. The Basics Sunday, August 18, 13
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
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
21. Sunday, August 18, 13
22. Breakpoints Sunday, August 18, 13
23. Sunday, August 18, 13
24. What Breakpoints to Use? Sunday, August 18, 13
25. What Breakpoints to Use? • Don’t think about devices Sunday, August 18, 13
26. What Breakpoints to Use? • Don’t think about devices • “Make it look good” Sunday, August 18, 13
27. What Breakpoints to Use? • Don’t think about devices • “Make it look good” • Something like 600px, 900px, max Sunday, August 18, 13
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
29. Retina Images Sunday, August 18, 13
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
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
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
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
34. RWD In Action Sunday, August 18, 13
35. Sunday, August 18, 13
36. Sunday, August 18, 13
37. Clean up some CSS .article { width: 31%; min-width:250px; } #content .wrapper { width:auto; } #page { background:none; } Sunday, August 18, 13
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
39. Sunday, August 18, 13
40. Demo Sunday, August 18, 13
41. Performance Sunday, August 18, 13
42. A Few Considerations Sunday, August 18, 13
43. A Few Considerations • Extra CSS (minimal) Sunday, August 18, 13
44. A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) Sunday, August 18, 13
45. A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed Sunday, August 18, 13
46. A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
47. A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
48. Responsive Images Sunday, August 18, 13
49. Three Performance Goals: Sunday, August 18, 13
50. Three Performance Goals: 1. Start with a small image Sunday, August 18, 13
51. Three Performance Goals: 1. Start with a small image 2. Upgrade to larger size without downloading both Sunday, August 18, 13
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
53. Automate Sunday, August 18, 13
54. Resize on the fly Sunday, August 18, 13
55. Resize on the fly • Based on browser resolution, make the right image Sunday, August 18, 13
56. Resize on the fly • Based on browser resolution, make the right image • Round a bit Sunday, August 18, 13
57. Resize on the fly • Based on browser resolution, make the right image • Round a bit • http://adaptive-images.com Sunday, August 18, 13
58. Lossless Compression Sunday, August 18, 13
59. Lossless Compression Sunday, August 18, 13
60. 140 KB Lossless Compression Sunday, August 18, 13
61. 140 KB 85 KB Lossless Compression Sunday, August 18, 13
62. 140 KB 85 KB Lossless Compression • http://www.smushit.com/ysmush.it/ • https://developers.google.com/speed/pagespeed/ Sunday, August 18, 13
63. • Automate HTML output • Plan for the future More Automation Sunday, August 18, 13
64. HTML Output (picturefill) Sunday, August 18, 13
65. HTML Output (picturefill) • https://github.com/scottjehl/picturefill Sunday, August 18, 13
66. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element Sunday, August 18, 13
67. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element • < 0.5K JS file Sunday, August 18, 13
68. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element • < 0.5K JS file • Supports all media queries Sunday, August 18, 13
69. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element • < 0.5K JS file • Supports all media queries • Works across all browsers Sunday, August 18, 13
70. <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> Sunday, August 18, 13
71. <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 Sunday, August 18, 13
72. How does it do? Sunday, August 18, 13
73. How does it do? ✓ Unique image URLs Sunday, August 18, 13
74. How does it do? ✓ Unique image URLs ✓ Start with smallest image Sunday, August 18, 13
75. How does it do? ✓ Unique image URLs ✓ Start with smallest image ✓ Only one image download Sunday, August 18, 13
76. How does it do? ✓ Unique image URLs ✓ Start with smallest image ✓ Only one image download ✓ Fallback for old IE Sunday, August 18, 13
77. But that markup... Sunday, August 18, 13
78. Plan to Replace Whatever You Build Sunday, August 18, 13
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
80. Don’t type, click: jkle.in/rwd Sunday, August 18, 13
81. Clown Car Technique Sunday, August 18, 13
82. Basics Sunday, August 18, 13
83. Basics • <object> tag Sunday, August 18, 13
84. Basics • <object> tag • References SVG file Sunday, August 18, 13
85. Basics • <object> tag • References SVG file • ...as a DataURI Sunday, August 18, 13
86. Basics • <object> tag • References SVG file • ...as a DataURI • ...URL encoded Sunday, August 18, 13
87. Basics • <object> tag • References SVG file • ...as a DataURI • ...URL encoded • Wrapping conditional comment Sunday, August 18, 13
88. Clowns and Cars <object data="data:image/svg+xml,%3Csvg %20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid %20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EClown%20Car %20Technique%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size: 100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and %20(max-width:400px)%7Bsvg%7Bbackground-image:url(images/small.png);%7D %7D@media%20screen%20and%20(min-width:401px)%7Bsvg%7Bbackground- image:url(images/medium.png);%7D%7D@media%20screen%20and%20(min-width: 701px)%7Bsvg%7Bbackground-image:url(images/big.png);%7D%7D@media%20screen %20and%20(min-width:1001px)%7Bsvg%7Bbackground-image:url(images/ huge.png);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml"> <!--[if lte IE 8]> <img src="images/medium.png" alt="Fallback for IE"> <![endif]--> </object> Sunday, August 18, 13
89. Benefits Sunday, August 18, 13
90. Benefits • All logic in an SVG file Sunday, August 18, 13
91. Benefits • All logic in an SVG file • One HTTP request Sunday, August 18, 13
92. Benefits • All logic in an SVG file • One HTTP request • Management is easy Sunday, August 18, 13
93. Benefits • All logic in an SVG file • One HTTP request • Management is easy • Adapts to browser size automatically Sunday, August 18, 13
94. Drawbacks Sunday, August 18, 13
95. Drawbacks • Accessibility Sunday, August 18, 13
96. Drawbacks • Accessibility • No right-click Sunday, August 18, 13
97. Drawbacks • Accessibility • No right-click • Doesn’t work on Android <= 2.3 Sunday, August 18, 13
98. We Need Something Better Sunday, August 18, 13
99. display:none Sunday, August 18, 13
100. <img src="foo.png" style="display:none" /> Sunday, August 18, 13
101. <img src="foo.png" style="display:none" /> Image is Downloaded Sunday, August 18, 13
102. <div style="display:none;"> <img src="foo.png" style="display:none" /> </div> Sunday, August 18, 13
103. <div style="display:none;"> <img src="foo.png" style="display:none" /> </div> Image is Downloaded Sunday, August 18, 13
104. <style> .bg { background-image: url(foo.png); width:100px; height: 100px; display: none; } </style> <div class="bg"></div> Sunday, August 18, 13
105. <style> .bg { background-image: url(foo.png); width:100px; height: 100px; display: none; } </style> <div class="bg"></div> Image is Downloaded Sunday, August 18, 13
106. <style> .bg { background-image: url(foo.png); width:100px; height: 100px; display: none; } </style> <div style="display:none;"> <div class="bg"></div> </div> Sunday, August 18, 13
107. <style> .bg { background-image: url(foo.png); width:100px; height: 100px; display: none; } </style> <div style="display:none;"> <div class="bg"></div> </div> Image is NOT Downloaded Sunday, August 18, 13
108. <img> with display:none Downloaded <img> with parent display:none Downloaded background image with display:none Downloaded background image with parent display:none Not Downloaded Sunday, August 18, 13
109. Workarounds Sunday, August 18, 13
110. Handling display:none Sunday, August 18, 13
111. Handling display:none • Start with an empty src, use JS Sunday, August 18, 13
112. Handling display:none • Start with an empty src, use JS • Server side detection Sunday, August 18, 13
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
114. Media Query Browser Support Sunday, August 18, 13
115. Sunday, August 18, 13
116. Fail Sunday, August 18, 13
117. 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/ Sunday, August 18, 13
118. The Future: Client Hints Sunday, August 18, 13
119. Proposal by Ilya Grigorik Sunday, August 18, 13
120. Proposal by Ilya Grigorik • Client (browser) sends an additional HTTP Header Sunday, August 18, 13
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
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
123. Homework Sunday, August 18, 13
124. Sunday, August 18, 13
125. Find your favorite non-responsive site Sunday, August 18, 13
126. Find your favorite non-responsive site Sunday, August 18, 13
127. Find your favorite non-responsive site Save the HTML locally Sunday, August 18, 13
128. Find your favorite non-responsive site Save the HTML locally Sunday, August 18, 13
129. Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Sunday, August 18, 13
130. Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Sunday, August 18, 13
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
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
133. Congratulations! Sunday, August 18, 13
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
135. Sunday, August 18, 13
136. Synthetic Testing Sunday, August 18, 13
137. WebPagetest • Use Chrome • Script: • setviewportsize 400 600 • navigate bostonglobe.com Sunday, August 18, 13
138. Sunday, August 18, 13
139. Recap Sunday, August 18, 13
140. Takeaways Sunday, August 18, 13
141. Takeaways • Start with small sizes on new sites Sunday, August 18, 13
142. Takeaways • Start with small sizes on new sites • Use em’s and %’s Sunday, August 18, 13
143. Takeaways • Start with small sizes on new sites • Use em’s and %’s • ~3-4 device independent breakpoints Sunday, August 18, 13
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
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
146. Get in Touch www.etsy.com/careers jonathan@etsy.com @jonathanklein Sunday, August 18, 13