Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jonathan Klein

August 18, 2013
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. Some Etsy Stats • Handmade marketplace • 1.5 billion page

    views/month • Almost $1B in sales last year Sunday, August 18, 13
  2. 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. 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. 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. What Breakpoints to Use? • Don’t think about devices •

    “Make it look good” Sunday, August 18, 13
  6. What Breakpoints to Use? • Don’t think about devices •

    “Make it look good” • Something like 600px, 900px, max Sunday, August 18, 13
  7. 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. 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. 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. 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. 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. Clean up some CSS .article { width: 31%; min-width:250px; }

    #content .wrapper { width:auto; } #page { background:none; } Sunday, August 18, 13
  13. 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. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed Sunday, August 18, 13
  15. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
  16. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13
  17. Three Performance Goals: 1. Start with a small image 2.

    Upgrade to larger size without downloading both Sunday, August 18, 13
  18. 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. Resize on the fly • Based on browser resolution, make

    the right image Sunday, August 18, 13
  20. Resize on the fly • Based on browser resolution, make

    the right image • Round a bit Sunday, August 18, 13
  21. Resize on the fly • Based on browser resolution, make

    the right image • Round a bit • http://adaptive-images.com Sunday, August 18, 13
  22. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file • Supports all media queries Sunday, August 18, 13
  23. 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
  24. <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
  25. <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
  26. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image Sunday, August 18, 13
  27. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download Sunday, August 18, 13
  28. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download ✓ Fallback for old IE Sunday, August 18, 13
  29. Basics • <object> tag • References SVG file • ...as

    a DataURI • ...URL encoded Sunday, August 18, 13
  30. Basics • <object> tag • References SVG file • ...as

    a DataURI • ...URL encoded • Wrapping conditional comment Sunday, August 18, 13
  31. 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
  32. Benefits • All logic in an SVG file • One

    HTTP request Sunday, August 18, 13
  33. Benefits • All logic in an SVG file • One

    HTTP request • Management is easy Sunday, August 18, 13
  34. Benefits • All logic in an SVG file • One

    HTTP request • Management is easy • Adapts to browser size automatically Sunday, August 18, 13
  35. <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
  36. <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
  37. <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
  38. <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
  39. Handling display:none • Start with an empty src, use JS

    • Server side detection Sunday, August 18, 13
  40. 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
  41. 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
  42. Proposal by Ilya Grigorik • Client (browser) sends an additional

    HTTP Header • CH: dh=598, dw=384, dpr=2.0, t Sunday, August 18, 13
  43. 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
  44. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Sunday, August 18, 13
  45. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Sunday, August 18, 13
  46. 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
  47. 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
  48. • 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
  49. WebPagetest • Use Chrome • Script: • setviewportsize 400 600

    • navigate bostonglobe.com Sunday, August 18, 13
  50. Takeaways • Start with small sizes on new sites •

    Use em’s and %’s Sunday, August 18, 13
  51. Takeaways • Start with small sizes on new sites •

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