JSDay 2013 - Practical Responsive Web Design

  • 1,047 views
Uploaded on

This is a talk I gave in Verona, Italy at JSDay 2013 on May 16th

This is a talk I gave in Verona, Italy at JSDay 2013 on May 16th

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,047
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Practical ResponsiveWeb DesignJSDay 2013Jonathan Klein, Performance Engineer@jonathankleinThursday, May 16, 13
  • 2. Slides, Linksjkle.in/jsdayThursday, May 16, 13
  • 3. Some Etsy Stats• Handmade marketplace• 1.4 billion page views/month• Almost $1B in sales last year• ~1M lines of JavaScriptThursday, May 16, 13
  • 4. Two AssertionsThursday, May 16, 13
  • 5. 1. RWD isn’t that hardThursday, May 16, 13
  • 6. 2. RWD can be fastThursday, May 16, 13
  • 7. The BasicsThursday, May 16, 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) {...}Thursday, May 16, 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) {...}Thursday, May 16, 13
  • 10. Thursday, May 16, 13
  • 11. BreakpointsThursday, May 16, 13
  • 12. Thursday, May 16, 13
  • 13. What Breakpoints to Use?Thursday, May 16, 13
  • 14. What Breakpoints to Use?• Don’t think about devicesThursday, May 16, 13
  • 15. What Breakpoints to Use?• Don’t think about devices• “Make it look good”Thursday, May 16, 13
  • 16. What Breakpoints to Use?• Don’t think about devices• “Make it look good”• Something like 600px, 900px, maxThursday, May 16, 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’sThursday, May 16, 13
  • 18. Retina ImagesThursday, May 16, 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;}Thursday, May 16, 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;}Thursday, May 16, 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);}}Thursday, May 16, 13
  • 22. RWD In ActionThursday, May 16, 13
  • 23. Thursday, May 16, 13
  • 24. Thursday, May 16, 13
  • 25. Clean up some CSS.article {width: 31%;min-width:250px;}#content .wrapper {width:auto;}#page {background:none;}Thursday, May 16, 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%;}}Thursday, May 16, 13
  • 27. Thursday, May 16, 13
  • 28. PerformanceThursday, May 16, 13
  • 29. A Few ConsiderationsThursday, May 16, 13
  • 30. A Few Considerations• Extra CSS (minimal)Thursday, May 16, 13
  • 31. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)Thursday, May 16, 13
  • 32. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than neededThursday, May 16, 13
  • 33. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  • 34. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  • 35. Responsive ImagesThursday, May 16, 13
  • 36. Three Performance Goals:Thursday, May 16, 13
  • 37. Three Performance Goals:1. Start with a small imageThursday, May 16, 13
  • 38. Three Performance Goals:1. Start with a small image2. Upgrade to larger size withoutdownloading bothThursday, May 16, 13
  • 39. Three Performance Goals:1. Start with a small image2. Upgrade to larger size withoutdownloading both3. Unique image URLs (caching)Thursday, May 16, 13
  • 40. • Resize on the fly• Compress automaticallyFirst Step: AutomationThursday, May 16, 13
  • 41. Lossless CompressionThursday, May 16, 13
  • 42. 140 KBLossless CompressionThursday, May 16, 13
  • 43. 140 KB 85 KBLossless CompressionThursday, May 16, 13
  • 44. 140 KB 85 KBLossless Compression• http://www.smushit.com/ysmush.it/• https://developers.google.com/speed/pagespeed/Thursday, May 16, 13
  • 45. • Automate HTML output• Plan for the futureMore AutomationThursday, May 16, 13
  • 46. HTML Output (picturefill)Thursday, May 16, 13
  • 47. HTML Output (picturefill)• https://github.com/scottjehl/picturefillThursday, May 16, 13
  • 48. HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> elementThursday, May 16, 13
  • 49. HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> element• < 0.5K JS fileThursday, May 16, 13
  • 50. HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> element• < 0.5K JS file• Supports all media queriesThursday, May 16, 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 browsersThursday, May 16, 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="small.jpg" alt="Interesting Image Alt Text"></noscript></div>Thursday, May 16, 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="small.jpg" alt="Interesting Image Alt Text"></noscript></div>IE 6, 7, 8 get thisThursday, May 16, 13
  • 54. How does it do?Thursday, May 16, 13
  • 55. How does it do?✓ Unique image URLsThursday, May 16, 13
  • 56. How does it do?✓ Unique image URLs✓ Start with smallest imageThursday, May 16, 13
  • 57. How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image downloadThursday, May 16, 13
  • 58. How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image download✓ Fallback for old IEThursday, May 16, 13
  • 59. But that markup...Thursday, May 16, 13
  • 60. Plan to ReplaceWhatever You BuildThursday, May 16, 13
  • 61. Resources for Responsive ImgsJason 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/Thursday, May 16, 13
  • 62. Don’t type, click:jkle.in/jsdayThursday, May 16, 13
  • 63. Browser SupportThursday, May 16, 13
  • 64. Thursday, May 16, 13
  • 65. FailThursday, May 16, 13
  • 66. Handle IEConditional Comments<!--[if lt IE 9]><![endif]-->http://adactio.com/journal/4494/More: http://buildmobile.com/understanding-responsive-web-design-cross-browser-compatibility/Thursday, May 16, 13
  • 67. The Future:Client HintsThursday, May 16, 13
  • 68. Proposal by Ilya GrigorikThursday, May 16, 13
  • 69. Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP HeaderThursday, May 16, 13
  • 70. Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP Header• CH: dh=598, dw=384, dpr=2.0, tThursday, May 16, 13
  • 71. Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP Header• CH: dh=598, dw=384, dpr=2.0, t• https://github.com/igrigorik/http-client-hints/Thursday, May 16, 13
  • 72. HomeworkThursday, May 16, 13
  • 73. Thursday, May 16, 13
  • 74. Find your favorite non-responsive siteThursday, May 16, 13
  • 75. Find your favorite non-responsive siteThursday, May 16, 13
  • 76. Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  • 77. Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  • 78. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  • 79. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  • 80. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointMake one retina image and use itThursday, May 16, 13
  • 81. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointMake one retina image and use itThursday, May 16, 13
  • 82. Welcome to the worldof RWDThursday, May 16, 13
  • 83. • Resize browser window, use consolewhen you want a breakpoint• document.body.offsetWidth• If you must start w/ desktop, use:• @media screen and (max-width: 900px) {Some HintsThursday, May 16, 13
  • 84. Thursday, May 16, 13
  • 85. RecapThursday, May 16, 13
  • 86. Recap• Start with small sizes on new sitesThursday, May 16, 13
  • 87. Recap• Start with small sizes on new sites• Use em’s and %’sThursday, May 16, 13
  • 88. Recap• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpointsThursday, May 16, 13
  • 89. Recap• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpoints• Use Responsive ImagesThursday, May 16, 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 IEThursday, May 16, 13
  • 91. Get in Touchwww.etsy.com/careersjonathan@etsy.com@jonathankleinThursday, May 16, 13