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 400600
• 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