Practical Responsive Web Design - Northeast PHP 2013

Practical Responsive Web Design

Northeast PHP 2013Jonathan Klein, Performance Engineer@jonathanklein

Sunday, August 18, 13

Slides, Linksjkle.in/rwd


Some Etsy Stats


Some Etsy Stats• Handmade marketplace


Some Etsy Stats• Handmade marketplace• 1.5 billion page views/month


Some Etsy Stats• Handmade marketplace• 1.5 billion page views/month• Almost $1B in sales last year


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


Why Responsive Web Design?


Main Advantages


Main Advantages

• Maintainability


Main Advantages

• Maintainability• SEO


Main Advantages

• Maintainability• SEO• User Experience


Main Advantages

• Maintainability• SEO• User Experience• Performance


1.6 seconds


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


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


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


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



Demo


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



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


Automate


Resize on the fly


Resize on the fly

• Based on browser resolution, make the right image


Resize on the fly


• Round a bit


Resize on the fly


• Round a bit• http://adaptive-images.com


http://adaptive-images.com

http://adaptive-images.com

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>


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


Clown Car Technique


Basics


Basics

• <object> tag


Basics

• <object> tag• References SVG file


Basics

• <object> tag• References SVG file• ...as a DataURI


Basics

• <object> tag• References SVG file• ...as a DataURI• ...URL encoded


Basics

• <object> tag• References SVG file• ...as a DataURI• ...URL encoded• Wrapping conditional comment


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"> </object>


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


















Benefits


Benefits

• All logic in an SVG file


Benefits

• All logic in an SVG file• One HTTP request


Benefits

• All logic in an SVG file• One HTTP request• Management is easy


Benefits

• All logic in an SVG file• One HTTP request• Management is easy• Adapts to browser size automatically


Drawbacks


Drawbacks

• Accessibility


Drawbacks

• Accessibility• No right-click


Drawbacks

• Accessibility• No right-click• Doesn’t work on Android <= 2.3


We Need Something Better


display:none


<img src="foo.png" style="display:none" />


<img src="foo.png" style="display:none" />

Image is Downloaded


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


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

Image is Downloaded


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

<div class="bg"></div>



<div class="bg"></div>

Image is Downloaded



<div style="display:none;"> <div class="bg"></div></div>



<div style="display:none;"> <div class="bg"></div></div>

Image is NOT Downloaded


<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


Workarounds


Handling display:none



• Start with an empty src, use JS



• Start with an empty src, use JS• Server side detection



• Start with an empty src, use JS• Server side detection• Lots more: http://timkadlec.com/

2012/04/media-query-asset-downloading-results/


http://timkadlec.com/2012/04/media-query-asset-downloading-results/






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









Make one retina image and use it





Make one retina image and use it


Congratulations!


• 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



Synthetic Testing


WebPagetest

• Use Chrome• Script: • setviewportsize 400 600

• navigate bostonglobe.com



Recap


Takeaways


Takeaways

• Start with small sizes on new sites


Takeaways

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


Takeaways

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


Takeaways

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


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


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]

Practical Responsive Web Design - Northeast PHP 2013

Technology

media screen

considerations

http request

lossless compression

rwd greater

logo

drawbacks

smallest image