Practical Responsive Web Design

72f8175ac13e367bb500dd4da1f1aa32?s=47 Jonathan Klein
August 18, 2013
Technology
1
210

Practical Responsive Web Design

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

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

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

August 18, 2013
Tweet

Want more?

72f8175ac13e367bb500dd4da1f1aa32?s=48 jklein
12
220
72f8175ac13e367bb500dd4da1f1aa32?s=48 jklein
1
420
72f8175ac13e367bb500dd4da1f1aa32?s=48 jklein
2
560
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
9
510
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
260
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
170
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
320
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
220
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
300
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
560
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
170
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250

Transcript

  1. 1.

    Practical Responsive Web Design Northeast PHP 2013 Jonathan Klein, Performance

    Engineer @jonathanklein Sunday, August 18, 13
  2. 2.

    Slides, Links jkle.in/rwd Sunday, August 18, 13

  3. 3.

    Some Etsy Stats Sunday, August 18, 13

  4. 4.

    Some Etsy Stats • Handmade marketplace Sunday, August 18, 13

  5. 5.

    Some Etsy Stats • Handmade marketplace • 1.5 billion page

    views/month Sunday, August 18, 13
  6. 6.

    Some Etsy Stats • Handmade marketplace • 1.5 billion page

    views/month • Almost $1B in sales last year Sunday, August 18, 13
  7. 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. 8.

    Why Responsive Web Design? Sunday, August 18, 13

  9. 9.

    Main Advantages Sunday, August 18, 13

  10. 10.

    Main Advantages • Maintainability Sunday, August 18, 13

  11. 11.

    Main Advantages • Maintainability • SEO Sunday, August 18, 13

  12. 12.

    Main Advantages • Maintainability • SEO • User Experience Sunday,

    August 18, 13
  13. 13.

    Main Advantages • Maintainability • SEO • User Experience •

    Performance Sunday, August 18, 13
  14. 14.

    1.6 seconds Sunday, August 18, 13

  15. 15.

    Two Assertions Sunday, August 18, 13

  16. 16.

    1. RWD isn’t that hard Sunday, August 18, 13

  17. 17.

    2. RWD can be fast Sunday, August 18, 13

  18. 18.

    The Basics Sunday, August 18, 13

  19. 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. 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. 21.

    Sunday, August 18, 13

  22. 22.

    Breakpoints Sunday, August 18, 13

  23. 23.

    Sunday, August 18, 13

  24. 24.

    What Breakpoints to Use? Sunday, August 18, 13

  25. 25.

    What Breakpoints to Use? • Don’t think about devices Sunday,

    August 18, 13
  26. 26.

    What Breakpoints to Use? • Don’t think about devices •

    “Make it look good” Sunday, August 18, 13
  27. 27.

    What Breakpoints to Use? • Don’t think about devices •

    “Make it look good” • Something like 600px, 900px, max Sunday, August 18, 13
  28. 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. 29.

    Retina Images Sunday, August 18, 13

  30. 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. 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. 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. 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. 34.

    RWD In Action Sunday, August 18, 13

  35. 35.

    Sunday, August 18, 13

  36. 36.

    Sunday, August 18, 13

  37. 37.

    Clean up some CSS .article { width: 31%; min-width:250px; }

    #content .wrapper { width:auto; } #page { background:none; } Sunday, August 18, 13
  38. 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. 39.

    Sunday, August 18, 13

  40. 40.

    Demo Sunday, August 18, 13

  41. 41.

    Performance Sunday, August 18, 13

  42. 42.

    A Few Considerations Sunday, August 18, 13

  43. 43.

    A Few Considerations • Extra CSS (minimal) Sunday, August 18,

    13
  44. 44.

    A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) Sunday, August 18, 13
  45. 45.

    A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed Sunday, August 18, 13
  46. 46.

    A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
  47. 47.

    A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
  48. 48.

    Responsive Images Sunday, August 18, 13

  49. 49.

    Three Performance Goals: Sunday, August 18, 13

  50. 50.

    Three Performance Goals: 1. Start with a small image Sunday,

    August 18, 13
  51. 51.

    Three Performance Goals: 1. Start with a small image 2.

    Upgrade to larger size without downloading both Sunday, August 18, 13
  52. 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. 53.

    Automate Sunday, August 18, 13

  54. 54.

    Resize on the fly Sunday, August 18, 13

  55. 55.

    Resize on the fly • Based on browser resolution, make

    the right image Sunday, August 18, 13
  56. 56.

    Resize on the fly • Based on browser resolution, make

    the right image • Round a bit Sunday, August 18, 13
  57. 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. 58.

    Lossless Compression Sunday, August 18, 13

  59. 59.

    Lossless Compression Sunday, August 18, 13

  60. 60.

    140 KB Lossless Compression Sunday, August 18, 13

  61. 61.

    140 KB 85 KB Lossless Compression Sunday, August 18, 13

  62. 62.

    140 KB 85 KB Lossless Compression • http://www.smushit.com/ysmush.it/ • https://developers.google.com/speed/pagespeed/

    Sunday, August 18, 13
  63. 63.

    • Automate HTML output • Plan for the future More

    Automation Sunday, August 18, 13
  64. 64.

    HTML Output (picturefill) Sunday, August 18, 13

  65. 65.

    HTML Output (picturefill) • https://github.com/scottjehl/picturefill Sunday, August 18, 13

  66. 66.

    HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    Sunday, August 18, 13
  67. 67.

    HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file Sunday, August 18, 13
  68. 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. 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. 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. 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. 72.

    How does it do? Sunday, August 18, 13

  73. 73.

    How does it do? ✓ Unique image URLs Sunday, August

    18, 13
  74. 74.

    How does it do? ✓ Unique image URLs ✓ Start

    with smallest image Sunday, August 18, 13
  75. 75.

    How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download Sunday, August 18, 13
  76. 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. 77.

    But that markup... Sunday, August 18, 13

  78. 78.

    Plan to Replace Whatever You Build Sunday, August 18, 13

  79. 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. 80.

    Don’t type, click: jkle.in/rwd Sunday, August 18, 13

  81. 81.

    Clown Car Technique Sunday, August 18, 13

  82. 82.

    Basics Sunday, August 18, 13

  83. 83.

    Basics • <object> tag Sunday, August 18, 13

  84. 84.

    Basics • <object> tag • References SVG file Sunday, August

    18, 13
  85. 85.

    Basics • <object> tag • References SVG file • ...as

    a DataURI Sunday, August 18, 13
  86. 86.

    Basics • <object> tag • References SVG file • ...as

    a DataURI • ...URL encoded Sunday, August 18, 13
  87. 87.

    Basics • <object> tag • References SVG file • ...as

    a DataURI • ...URL encoded • Wrapping conditional comment Sunday, August 18, 13
  88. 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. 89.

    Benefits Sunday, August 18, 13

  90. 90.

    Benefits • All logic in an SVG file Sunday, August

    18, 13
  91. 91.

    Benefits • All logic in an SVG file • One

    HTTP request Sunday, August 18, 13
  92. 92.

    Benefits • All logic in an SVG file • One

    HTTP request • Management is easy Sunday, August 18, 13
  93. 93.

    Benefits • All logic in an SVG file • One

    HTTP request • Management is easy • Adapts to browser size automatically Sunday, August 18, 13
  94. 94.

    Drawbacks Sunday, August 18, 13

  95. 95.

    Drawbacks • Accessibility Sunday, August 18, 13

  96. 96.

    Drawbacks • Accessibility • No right-click Sunday, August 18, 13

  97. 97.

    Drawbacks • Accessibility • No right-click • Doesn’t work on

    Android <= 2.3 Sunday, August 18, 13
  98. 98.

    We Need Something Better Sunday, August 18, 13

  99. 99.

    display:none Sunday, August 18, 13

  100. 100.

    <img src="foo.png" style="display:none" /> Sunday, August 18, 13

  101. 101.

    <img src="foo.png" style="display:none" /> Image is Downloaded Sunday, August 18,

    13
  102. 102.

    <div style="display:none;"> <img src="foo.png" style="display:none" /> </div> Sunday, August 18,

    13
  103. 103.

    <div style="display:none;"> <img src="foo.png" style="display:none" /> </div> Image is Downloaded

    Sunday, August 18, 13
  104. 104.

    <style> .bg { background-image: url(foo.png); width:100px; height: 100px; display: none;

    } </style> <div class="bg"></div> Sunday, August 18, 13
  105. 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. 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. 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. 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. 109.

    Workarounds Sunday, August 18, 13

  110. 110.

    Handling display:none Sunday, August 18, 13

  111. 111.

    Handling display:none • Start with an empty src, use JS

    Sunday, August 18, 13
  112. 112.

    Handling display:none • Start with an empty src, use JS

    • Server side detection Sunday, August 18, 13
  113. 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. 114.

    Media Query Browser Support Sunday, August 18, 13

  115. 115.

    Sunday, August 18, 13

  116. 116.

    Fail Sunday, August 18, 13

  117. 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. 118.

    The Future: Client Hints Sunday, August 18, 13

  119. 119.

    Proposal by Ilya Grigorik Sunday, August 18, 13

  120. 120.

    Proposal by Ilya Grigorik • Client (browser) sends an additional

    HTTP Header Sunday, August 18, 13
  121. 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. 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. 123.

    Homework Sunday, August 18, 13

  124. 124.

    Sunday, August 18, 13

  125. 125.

    Find your favorite non-responsive site Sunday, August 18, 13

  126. 126.

    Find your favorite non-responsive site Sunday, August 18, 13

  127. 127.

    Find your favorite non-responsive site Save the HTML locally Sunday,

    August 18, 13
  128. 128.

    Find your favorite non-responsive site Save the HTML locally Sunday,

    August 18, 13
  129. 129.

    Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Sunday, August 18, 13
  130. 130.

    Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Sunday, August 18, 13
  131. 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. 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. 133.

    Congratulations! Sunday, August 18, 13

  134. 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. 135.

    Sunday, August 18, 13

  136. 136.

    Synthetic Testing Sunday, August 18, 13

  137. 137.

    WebPagetest • Use Chrome • Script: • setviewportsize 400 600

    • navigate bostonglobe.com Sunday, August 18, 13
  138. 138.

    Sunday, August 18, 13

  139. 139.

    Recap Sunday, August 18, 13

  140. 140.

    Takeaways Sunday, August 18, 13

  141. 141.

    Takeaways • Start with small sizes on new sites Sunday,

    August 18, 13
  142. 142.

    Takeaways • Start with small sizes on new sites •

    Use em’s and %’s Sunday, August 18, 13
  143. 143.

    Takeaways • Start with small sizes on new sites •

    Use em’s and %’s • ~3-4 device independent breakpoints Sunday, August 18, 13
  144. 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. 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. 146.

    Get in Touch www.etsy.com/careers jonathan@etsy.com @jonathanklein Sunday, August 18, 13