This document summarizes a presentation on practical responsive web design. It discusses using media queries to define breakpoints, choosing breakpoints based on how the site looks rather than targeting specific devices. It also covers responsive images, using different sized images depending on screen width and only downloading the needed image. Retina images and techniques like picturefill are presented. Performance considerations like image size and extra requests are addressed.

1. Practial Responsive
Web Design
JSDay 2013
Jonathan Klein, Performance Engineer
@jonathanklein
Friday, May 10, 13

2. Slides, Links
jkle.in/jsday
Friday, May 10, 13

3. Some Etsy Stats
• Handmade marketplace
• 1.4 billion page views/month
• Almost $1B in sales last year
• ~1M lines of JavaScript
Friday, May 10, 13

4. Two Assertions
Friday, May 10, 13

5. 1. RWD isn’t that hard
Friday, May 10, 13

6. 2. RWD can be fast
Friday, May 10, 13

7. The Basics
Friday, May 10, 13

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) {...}
Friday, May 10, 13

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) {...}
Friday, May 10, 13

10. Friday, May 10, 13

11. Breakpoints
Friday, May 10, 13

12. Friday, May 10, 13

13. What Breakpoints to Use?
Friday, May 10, 13

14. What Breakpoints to Use?
• Don’t think about devices
Friday, May 10, 13

15. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
Friday, May 10, 13

16. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
• Something like 600px, 900px, max
Friday, May 10, 13

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
Friday, May 10, 13

18. Retina Images
Friday, May 10, 13

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;
}
Friday, May 10, 13

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;
}
Friday, May 10, 13

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);
}
}
Friday, May 10, 13

22. RWD In Action
Friday, May 10, 13

23. Friday, May 10, 13

24. Friday, May 10, 13

25. Clean up some CSS
.article {
width: 31%;
min-width:250px;
}
#content .wrapper {
width:auto;
}
#page {
background:none;
}
Friday, May 10, 13

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%;
}
}
Friday, May 10, 13

27. Friday, May 10, 13

28. Performance
Friday, May 10, 13

29. A Few Considerations
Friday, May 10, 13

30. A Few Considerations
• Extra CSS (minimal)
Friday, May 10, 13

31. A Few Considerations
• Extra CSS (minimal)
• Retina Images (ouch)
Friday, May 10, 13

32. A Few Considerations
• Extra CSS (minimal)
• Retina Images (ouch)
• Larger images than needed
Friday, May 10, 13

33. A Few Considerations
• Extra CSS (minimal)
• Retina Images (ouch)
• Larger images than needed
• Extra Image Requests
Friday, May 10, 13

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

35. Responsive Images
Friday, May 10, 13

36. Three Performance Goals:
Friday, May 10, 13

37. Three Performance Goals:
1. Start with a small image
Friday, May 10, 13

38. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
Friday, May 10, 13

39. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
3. Unique image URLs (caching)
Friday, May 10, 13

40. • Resize on the fly
• Compress automatically
First Step: Automation
Friday, May 10, 13

41. Lossless Compression
Friday, May 10, 13

42. 140 KB
Lossless Compression
Friday, May 10, 13

43. 140 KB 85 KB
Lossless Compression
Friday, May 10, 13

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

45. • Automate HTML output
• Plan for the future
More Automation
Friday, May 10, 13

46. HTML Output (picturefill)
Friday, May 10, 13

47. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
Friday, May 10, 13

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

49. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
Friday, May 10, 13

50. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
• Supports all media queries
Friday, May 10, 13

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
Friday, May 10, 13

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="external/imgs/small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
Friday, May 10, 13

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="external/imgs/small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
IE 6, 7, 8 get this
Friday, May 10, 13

54. How does it do?
Friday, May 10, 13

55. How does it do?
✓ Unique image URLs
Friday, May 10, 13

56. How does it do?
✓ Unique image URLs
✓ Start with smallest image
Friday, May 10, 13

57. How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
Friday, May 10, 13

58. How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
✓ Fallback for old IE
Friday, May 10, 13

59. But that markup...
Friday, May 10, 13

60. Plan to Replace
Whatever You Build
Friday, May 10, 13

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/
Friday, May 10, 13

62. Don’t type, click:
jkle.in/jsday
Friday, May 10, 13

63. Browser Support
Friday, May 10, 13

64. Friday, May 10, 13

65. Fail
Friday, May 10, 13

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/
Friday, May 10, 13

67. The Future:
Client Hints
Friday, May 10, 13

68. Proposal by Ilya Grigorik
Friday, May 10, 13

69. Proposal by Ilya Grigorik
• Client (browser) sends an additional
HTTP Header
Friday, May 10, 13

70. Proposal by Ilya Grigorik
• Client (browser) sends an additional
HTTP Header
• CH: dh=598, dw=384, dpr=2.0, t
Friday, May 10, 13

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/
Friday, May 10, 13

72. Homework
Friday, May 10, 13

73. Friday, May 10, 13

74. Find your favorite non-responsive site
Friday, May 10, 13

75. Find your favorite non-responsive site
Friday, May 10, 13

76. Find your favorite non-responsive site
Save the HTML locally
Friday, May 10, 13

77. Find your favorite non-responsive site
Save the HTML locally
Friday, May 10, 13

78. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Friday, May 10, 13

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

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
Friday, May 10, 13

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
Friday, May 10, 13

82. Welcome to the world
of RWD
Friday, May 10, 13

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
Friday, May 10, 13

84. Friday, May 10, 13

85. Recap
Friday, May 10, 13

86. Recap
• Start with small sizes on new sites
Friday, May 10, 13

87. Recap
• Start with small sizes on new sites
• Use em’s and %’s
Friday, May 10, 13

88. Recap
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
Friday, May 10, 13

89. Recap
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
• Use Responsive Images
Friday, May 10, 13

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
Friday, May 10, 13

91. Get in Touch
www.etsy.com/careers
jonathan@etsy.com
@jonathanklein
Friday, May 10, 13