Download - JSDay 2013 - Practical Responsive Web Design
![Page 1: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/1.jpg)
Practical Responsive Web Design
JSDay 2013Jonathan Klein, Performance Engineer@jonathanklein
Thursday, May 16, 13
![Page 2: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/2.jpg)
Slides, Linksjkle.in/jsday
Thursday, May 16, 13
![Page 3: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/3.jpg)
Some Etsy Stats• Handmade marketplace• 1.4 billion page views/month• Almost $1B in sales last year• ~1M lines of JavaScript
Thursday, May 16, 13
![Page 4: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/4.jpg)
Two Assertions
Thursday, May 16, 13
![Page 5: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/5.jpg)
1. RWD isn’t that hard
Thursday, May 16, 13
![Page 6: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/6.jpg)
2. RWD can be fast
Thursday, May 16, 13
![Page 7: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/7.jpg)
The Basics
Thursday, May 16, 13
![Page 8: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/8.jpg)
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) {...}
Thursday, May 16, 13
![Page 9: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/9.jpg)
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) {...}
Thursday, May 16, 13
![Page 10: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/10.jpg)
Thursday, May 16, 13
![Page 11: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/11.jpg)
Breakpoints
Thursday, May 16, 13
![Page 12: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/12.jpg)
Thursday, May 16, 13
![Page 13: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/13.jpg)
What Breakpoints to Use?
Thursday, May 16, 13
![Page 14: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/14.jpg)
What Breakpoints to Use?
• Don’t think about devices
Thursday, May 16, 13
![Page 15: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/15.jpg)
What Breakpoints to Use?
• Don’t think about devices• “Make it look good”
Thursday, May 16, 13
![Page 16: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/16.jpg)
What Breakpoints to Use?
• Don’t think about devices• “Make it look good”• Something like 600px, 900px, max
Thursday, May 16, 13
![Page 17: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/17.jpg)
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
Thursday, May 16, 13
![Page 18: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/18.jpg)
Retina Images
Thursday, May 16, 13
![Page 19: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/19.jpg)
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;}
Thursday, May 16, 13
![Page 20: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/20.jpg)
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;}
Thursday, May 16, 13
![Page 21: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/21.jpg)
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); }}
Thursday, May 16, 13
![Page 22: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/22.jpg)
RWD In Action
Thursday, May 16, 13
![Page 23: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/23.jpg)
Thursday, May 16, 13
![Page 24: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/24.jpg)
Thursday, May 16, 13
![Page 25: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/25.jpg)
Clean up some CSS.article {
width: 31%; min-width:250px; }
#content .wrapper { width:auto; }
#page { background:none; }
Thursday, May 16, 13
![Page 26: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/26.jpg)
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%; } }
Thursday, May 16, 13
![Page 27: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/27.jpg)
Thursday, May 16, 13
![Page 28: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/28.jpg)
Performance
Thursday, May 16, 13
![Page 29: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/29.jpg)
A Few Considerations
Thursday, May 16, 13
![Page 30: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/30.jpg)
A Few Considerations
• Extra CSS (minimal)
Thursday, May 16, 13
![Page 31: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/31.jpg)
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)
Thursday, May 16, 13
![Page 32: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/32.jpg)
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed
Thursday, May 16, 13
![Page 33: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/33.jpg)
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image Requests
Thursday, May 16, 13
![Page 34: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/34.jpg)
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image Requests
Thursday, May 16, 13
![Page 35: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/35.jpg)
Responsive Images
Thursday, May 16, 13
![Page 36: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/36.jpg)
Three Performance Goals:
Thursday, May 16, 13
![Page 37: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/37.jpg)
Three Performance Goals:
1. Start with a small image
Thursday, May 16, 13
![Page 38: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/38.jpg)
Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without downloading both
Thursday, May 16, 13
![Page 39: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/39.jpg)
Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without downloading both
3. Unique image URLs (caching)
Thursday, May 16, 13
![Page 40: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/40.jpg)
• Resize on the fly• Compress automatically
First Step: Automation
Thursday, May 16, 13
![Page 41: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/41.jpg)
Lossless Compression
Thursday, May 16, 13
![Page 42: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/42.jpg)
140 KB
Lossless Compression
Thursday, May 16, 13
![Page 43: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/43.jpg)
140 KB 85 KB
Lossless Compression
Thursday, May 16, 13
![Page 44: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/44.jpg)
140 KB 85 KB
Lossless Compression
• http://www.smushit.com/ysmush.it/
• https://developers.google.com/speed/pagespeed/
Thursday, May 16, 13
![Page 45: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/45.jpg)
• Automate HTML output• Plan for the future
More Automation
Thursday, May 16, 13
![Page 46: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/46.jpg)
HTML Output (picturefill)
Thursday, May 16, 13
![Page 47: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/47.jpg)
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
Thursday, May 16, 13
![Page 48: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/48.jpg)
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
Thursday, May 16, 13
![Page 49: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/49.jpg)
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
Thursday, May 16, 13
![Page 50: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/50.jpg)
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file• Supports all media queries
Thursday, May 16, 13
![Page 51: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/51.jpg)
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file• Supports all media queries• Works across all browsers
Thursday, May 16, 13
![Page 52: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/52.jpg)
<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>
Thursday, May 16, 13
![Page 53: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/53.jpg)
<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
Thursday, May 16, 13
![Page 54: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/54.jpg)
How does it do?
Thursday, May 16, 13
![Page 55: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/55.jpg)
How does it do?
✓ Unique image URLs
Thursday, May 16, 13
![Page 56: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/56.jpg)
How does it do?
✓ Unique image URLs
✓ Start with smallest image
Thursday, May 16, 13
![Page 57: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/57.jpg)
How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
Thursday, May 16, 13
![Page 58: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/58.jpg)
How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
✓ Fallback for old IE
Thursday, May 16, 13
![Page 59: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/59.jpg)
But that markup...
Thursday, May 16, 13
![Page 60: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/60.jpg)
Plan to Replace Whatever You Build
Thursday, May 16, 13
![Page 61: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/61.jpg)
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/
Thursday, May 16, 13
![Page 62: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/62.jpg)
Don’t type, click:jkle.in/jsday
Thursday, May 16, 13
![Page 63: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/63.jpg)
Browser Support
Thursday, May 16, 13
![Page 64: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/64.jpg)
Thursday, May 16, 13
![Page 65: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/65.jpg)
Fail
Thursday, May 16, 13
![Page 66: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/66.jpg)
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/
Thursday, May 16, 13
![Page 67: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/67.jpg)
The Future: Client Hints
Thursday, May 16, 13
![Page 68: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/68.jpg)
Proposal by Ilya Grigorik
Thursday, May 16, 13
![Page 69: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/69.jpg)
Proposal by Ilya Grigorik
• Client (browser) sends an additional HTTP Header
Thursday, May 16, 13
![Page 70: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/70.jpg)
Proposal by Ilya Grigorik
• Client (browser) sends an additional HTTP Header
• CH: dh=598, dw=384, dpr=2.0, t
Thursday, May 16, 13
![Page 71: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/71.jpg)
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/
Thursday, May 16, 13
![Page 72: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/72.jpg)
Homework
Thursday, May 16, 13
![Page 73: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/73.jpg)
Thursday, May 16, 13
![Page 74: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/74.jpg)
Find your favorite non-responsive site
Thursday, May 16, 13
![Page 75: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/75.jpg)
Find your favorite non-responsive site
Thursday, May 16, 13
![Page 76: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/76.jpg)
Find your favorite non-responsive site
Save the HTML locally
Thursday, May 16, 13
![Page 77: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/77.jpg)
Find your favorite non-responsive site
Save the HTML locally
Thursday, May 16, 13
![Page 78: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/78.jpg)
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Thursday, May 16, 13
![Page 79: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/79.jpg)
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Thursday, May 16, 13
![Page 80: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/80.jpg)
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Thursday, May 16, 13
![Page 81: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/81.jpg)
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Thursday, May 16, 13
![Page 82: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/82.jpg)
Welcome to the world of RWD
Thursday, May 16, 13
![Page 83: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/83.jpg)
• 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
Thursday, May 16, 13
![Page 84: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/84.jpg)
Thursday, May 16, 13
![Page 85: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/85.jpg)
Recap
Thursday, May 16, 13
![Page 86: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/86.jpg)
Recap
• Start with small sizes on new sites
Thursday, May 16, 13
![Page 87: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/87.jpg)
Recap
• Start with small sizes on new sites• Use em’s and %’s
Thursday, May 16, 13
![Page 88: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/88.jpg)
Recap
• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpoints
Thursday, May 16, 13
![Page 89: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/89.jpg)
Recap
• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpoints• Use Responsive Images
Thursday, May 16, 13
![Page 90: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/90.jpg)
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
Thursday, May 16, 13
![Page 91: JSDay 2013 - Practical Responsive Web Design](https://reader034.vdocuments.net/reader034/viewer/2022051816/5441a7c1afaf9f5e208b4783/html5/thumbnails/91.jpg)
Get in Touch
www.etsy.com/careers
@jonathanklein
Thursday, May 16, 13