jsday 2013 - practical responsive web design

Practical Responsive Web Design

JSDay 2013Jonathan Klein, Performance Engineer@jonathanklein

Thursday, May 16, 13

Slides, Linksjkle.in/jsday


Some Etsy Stats• Handmade marketplace• 1.4 billion page views/month• Almost $1B in sales last year• ~1M lines of JavaScript


Two Assertions


1. RWD isn’t that hard


2. RWD can be fast


The Basics


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) {...}


Breakpoints


What Breakpoints to Use?



• Don’t think about devices



• Don’t think about devices• “Make it look good”



• Don’t think about devices• “Make it look good”• Something like 600px, 900px, max



• Don’t think about devices• “Make it look good”• Something like 600px, 900px, max• Divide by 16 to get em’s


Retina Images


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;}


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); }}


RWD In Action


Clean up some CSS.article {

width: 31%; min-width:250px; }

#content .wrapper { width:auto; }

#page { background:none; }


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%; } }


Performance


A Few Considerations



• Extra CSS (minimal)



• Extra CSS (minimal)• Retina Images (ouch)



• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed



• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image Requests


Responsive Images


Three Performance Goals:



1. Start with a small image




2. Upgrade to larger size without downloading both




2. Upgrade to larger size without downloading both

3. Unique image URLs (caching)


• Resize on the fly• Compress automatically

First Step: Automation


Lossless Compression


140 KB



140 KB 85 KB



140 KB 85 KB


• http://www.smushit.com/ysmush.it/

• https://developers.google.com/speed/pagespeed/


http://www.smushit.com/ysmush.it/

http://www.smushit.com/ysmush.it/

https://developers.google.com/speed/pagespeed/

https://developers.google.com/speed/pagespeed/

• Automate HTML output• Plan for the future

More Automation


HTML Output (picturefill)



• https://github.com/scottjehl/picturefill


https://github.com/scottjehl/picturefill




• Mimics proposed <picture> element







• < 0.5K JS file







• < 0.5K JS file• Supports all media queries







• < 0.5K JS file• Supports all media queries• Works across all browsers




<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>

 <noscript> <img src="small.jpg" alt="Interesting Image Alt Text"> </noscript></div>

IE 6, 7, 8 get this

How does it do?


How does it do?

✓ Unique image URLs


How does it do?


✓ Start with smallest image


How does it do?



✓ Only one image download


How does it do?



✓ Only one image download

✓ Fallback for old IE


But that markup...


Plan to Replace Whatever You Build


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/
















Don’t type, click:jkle.in/jsday


Browser Support


Fail


Handle IE

Conditional Comments

http://adactio.com/journal/4494/

More: http://buildmobile.com/understanding-responsive-web-design-cross-browser-compatibility/


http://adactio.com/journal/4494/

http://adactio.com/journal/4494/

http://buildmobile.com/understanding-responsive-web-design-cross-browser-compatibility/

The Future: Client Hints


Proposal by Ilya Grigorik



• Client (browser) sends an additional HTTP Header




• CH: dh=598, dw=384, dpr=2.0, t




• CH: dh=598, dw=384, dpr=2.0, t• https://github.com/igrigorik/http-client-hints/


https://github.com/igrigorik/http-client-hints/

https://github.com/igrigorik/http-client-hints/

Homework


Find your favorite non-responsive site



Save the HTML locally




Add some media queries and a breakpoint




Add some media queries and a breakpoint

Make one retina image and use it


Welcome to the world of RWD


• 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


Recap


Recap

• Start with small sizes on new sites


Recap

• Start with small sizes on new sites• Use em’s and %’s


Recap

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


Recap

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


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


Get in Touch

www.etsy.com/careers

[email protected]

@jonathanklein


http://www.etsy.com/careers

http://www.etsy.com/careers

mailto:[email protected]

mailto:[email protected]

jsday 2013 - practical responsive web design

Technology