Practical Responsive Web Design

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

Transcript

  1. 6.

    Some Etsy Stats • Handmade marketplace • 1.5 billion page

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

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

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

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

    “Make it look good” • Something like 600px, 900px, max Sunday, August 18, 13
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 37.

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

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

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

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

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

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

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

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

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

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

    Resize on the fly • Based on browser resolution, make

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

    Resize on the fly • Based on browser resolution, make

    the right image • Round a bit Sunday, August 18, 13
  21. 57.

    Resize on the fly • Based on browser resolution, make

    the right image • Round a bit • http://adaptive-images.com Sunday, August 18, 13
  22. 63.
  23. 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
  24. 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
  25. 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
  26. 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
  27. 74.

    How does it do? ✓ Unique image URLs ✓ Start

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

    How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download Sunday, August 18, 13
  29. 76.

    How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download ✓ Fallback for old IE Sunday, August 18, 13
  30. 85.
  31. 86.

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

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

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

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

    Benefits • All logic in an SVG file • One

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

    Benefits • All logic in an SVG file • One

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

    Benefits • All logic in an SVG file • One

    HTTP request • Management is easy • Adapts to browser size automatically Sunday, August 18, 13
  37. 104.
  38. 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
  39. 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
  40. 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
  41. 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
  42. 112.

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

    • Server side detection Sunday, August 18, 13
  43. 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
  44. 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
  45. 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
  46. 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
  47. 129.

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

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

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

    some media queries and a breakpoint Sunday, August 18, 13
  49. 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
  50. 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
  51. 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
  52. 137.

    WebPagetest • Use Chrome • Script: • setviewportsize 400 600

    • navigate bostonglobe.com Sunday, August 18, 13
  53. 142.

    Takeaways • Start with small sizes on new sites •

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

    Takeaways • Start with small sizes on new sites •

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