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

Practical Responsive Web Design - JSDay

Practical Responsive Web Design - JSDay

A talk I gave at JSDay 2013 in Verona, Italy. Resources available at http://jkle.in/jsday

Jonathan Klein

May 16, 2013
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

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

    views/month • Almost $1B in sales last year • ~1M lines of JavaScript
  2. 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) {...}
  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) {...}
  4. What Breakpoints to Use? • Don’t think about devices •

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

    ! #content .wrapper { width:auto; } ! #page { background:none; }
  10. 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%; } }
  11. A Few Considerations • Extra CSS (minimal) • Retina Images

    (ouch) • Larger images than needed • Extra Image Requests
  12. A Few Considerations • Extra CSS (minimal) • Retina Images

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

    Upgrade to larger size without downloading both
  14. Three Performance Goals: 1. Start with a small image 2.

    Upgrade to larger size without downloading both 3. Unique image URLs (caching)
  15. HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed <picture> element

    • < 0.5K JS file • Supports all media queries • Works across all browsers
  16. <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>
  17. <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
  18. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download
  19. How does it do? ✓ Unique image URLs ✓ Start

    with smallest image ✓ Only one image download ✓ Fallback for old IE
  20. 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/
  21. 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/
  22. Proposal by Ilya Grigorik • Client (browser) sends an additional

    HTTP Header • CH: dh=598, dw=384, dpr=2.0, t
  23. 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/
  24. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Make one retina image and use it
  25. Find your favorite non-responsive site Save the HTML locally Add

    some media queries and a breakpoint Make one retina image and use it
  26. • 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
  27. Recap • Start with small sizes on new sites •

    Use em’s and %’s • ~3-4 device independent breakpoints
  28. Recap • Start with small sizes on new sites •

    Use em’s and %’s • ~3-4 device independent breakpoints • Use Responsive Images
  29. 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 IE