JSDay 2013 - Practical Responsive Web Design

1,150

Published on

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

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,150
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JSDay 2013 - Practical Responsive Web Design

  1. 1. Practical ResponsiveWeb DesignJSDay 2013Jonathan Klein, Performance Engineer@jonathankleinThursday, May 16, 13
  2. 2. Slides, Linksjkle.in/jsdayThursday, May 16, 13
  3. 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. 4. Two AssertionsThursday, May 16, 13
  5. 5. 1. RWD isn’t that hardThursday, May 16, 13
  6. 6. 2. RWD can be fastThursday, May 16, 13
  7. 7. The BasicsThursday, May 16, 13
  8. 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. 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. 10. Thursday, May 16, 13
  11. 11. BreakpointsThursday, May 16, 13
  12. 12. Thursday, May 16, 13
  13. 13. What Breakpoints to Use?Thursday, May 16, 13
  14. 14. What Breakpoints to Use?• Don’t think about devicesThursday, May 16, 13
  15. 15. What Breakpoints to Use?• Don’t think about devices• “Make it look good”Thursday, May 16, 13
  16. 16. What Breakpoints to Use?• Don’t think about devices• “Make it look good”• Something like 600px, 900px, maxThursday, May 16, 13
  17. 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. 18. Retina ImagesThursday, May 16, 13
  19. 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. 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. 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. 22. RWD In ActionThursday, May 16, 13
  23. 23. Thursday, May 16, 13
  24. 24. Thursday, May 16, 13
  25. 25. Clean up some CSS.article {width: 31%;min-width:250px;}#content .wrapper {width:auto;}#page {background:none;}Thursday, May 16, 13
  26. 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. 27. Thursday, May 16, 13
  28. 28. PerformanceThursday, May 16, 13
  29. 29. A Few ConsiderationsThursday, May 16, 13
  30. 30. A Few Considerations• Extra CSS (minimal)Thursday, May 16, 13
  31. 31. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)Thursday, May 16, 13
  32. 32. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than neededThursday, May 16, 13
  33. 33. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  34. 34. A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  35. 35. Responsive ImagesThursday, May 16, 13
  36. 36. Three Performance Goals:Thursday, May 16, 13
  37. 37. Three Performance Goals:1. Start with a small imageThursday, May 16, 13
  38. 38. Three Performance Goals:1. Start with a small image2. Upgrade to larger size withoutdownloading bothThursday, May 16, 13
  39. 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. 40. • Resize on the fly• Compress automaticallyFirst Step: AutomationThursday, May 16, 13
  41. 41. Lossless CompressionThursday, May 16, 13
  42. 42. 140 KBLossless CompressionThursday, May 16, 13
  43. 43. 140 KB 85 KBLossless CompressionThursday, May 16, 13
  44. 44. 140 KB 85 KBLossless Compression• http://www.smushit.com/ysmush.it/• https://developers.google.com/speed/pagespeed/Thursday, May 16, 13
  45. 45. • Automate HTML output• Plan for the futureMore AutomationThursday, May 16, 13
  46. 46. HTML Output (picturefill)Thursday, May 16, 13
  47. 47. HTML Output (picturefill)• https://github.com/scottjehl/picturefillThursday, May 16, 13
  48. 48. HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> elementThursday, May 16, 13
  49. 49. HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> element• < 0.5K JS fileThursday, May 16, 13
  50. 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. 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. 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. 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. 54. How does it do?Thursday, May 16, 13
  55. 55. How does it do?✓ Unique image URLsThursday, May 16, 13
  56. 56. How does it do?✓ Unique image URLs✓ Start with smallest imageThursday, May 16, 13
  57. 57. How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image downloadThursday, May 16, 13
  58. 58. How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image download✓ Fallback for old IEThursday, May 16, 13
  59. 59. But that markup...Thursday, May 16, 13
  60. 60. Plan to ReplaceWhatever You BuildThursday, May 16, 13
  61. 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. 62. Don’t type, click:jkle.in/jsdayThursday, May 16, 13
  63. 63. Browser SupportThursday, May 16, 13
  64. 64. Thursday, May 16, 13
  65. 65. FailThursday, May 16, 13
  66. 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. 67. The Future:Client HintsThursday, May 16, 13
  68. 68. Proposal by Ilya GrigorikThursday, May 16, 13
  69. 69. Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP HeaderThursday, May 16, 13
  70. 70. Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP Header• CH: dh=598, dw=384, dpr=2.0, tThursday, May 16, 13
  71. 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. 72. HomeworkThursday, May 16, 13
  73. 73. Thursday, May 16, 13
  74. 74. Find your favorite non-responsive siteThursday, May 16, 13
  75. 75. Find your favorite non-responsive siteThursday, May 16, 13
  76. 76. Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  77. 77. Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  78. 78. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  79. 79. Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  80. 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. 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. 82. Welcome to the worldof RWDThursday, May 16, 13
  83. 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. 84. Thursday, May 16, 13
  85. 85. RecapThursday, May 16, 13
  86. 86. Recap• Start with small sizes on new sitesThursday, May 16, 13
  87. 87. Recap• Start with small sizes on new sites• Use em’s and %’sThursday, May 16, 13
  88. 88. Recap• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpointsThursday, May 16, 13
  89. 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. 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. 91. Get in Touchwww.etsy.com/careersjonathan@etsy.com@jonathankleinThursday, May 16, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×