JSDay 2013 - Practical Responsive Web Design
Post on 17-Oct-2014
1404 Views
Preview:
DESCRIPTION
Transcript
Practical Responsive Web Design
JSDay 2013Jonathan Klein, Performance Engineer@jonathanklein
Thursday, May 16, 13
Slides, Linksjkle.in/jsday
Thursday, May 16, 13
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
Two Assertions
Thursday, May 16, 13
1. RWD isn’t that hard
Thursday, May 16, 13
2. RWD can be fast
Thursday, May 16, 13
The Basics
Thursday, May 16, 13
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
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
Thursday, May 16, 13
Breakpoints
Thursday, May 16, 13
Thursday, May 16, 13
What Breakpoints to Use?
Thursday, May 16, 13
What Breakpoints to Use?
• Don’t think about devices
Thursday, May 16, 13
What Breakpoints to Use?
• Don’t think about devices• “Make it look good”
Thursday, May 16, 13
What Breakpoints to Use?
• Don’t think about devices• “Make it look good”• Something like 600px, 900px, max
Thursday, May 16, 13
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
Retina Images
Thursday, May 16, 13
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
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
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
RWD In Action
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
Clean up some CSS.article {
width: 31%; min-width:250px; }
#content .wrapper { width:auto; }
#page { background:none; }
Thursday, May 16, 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%; } }
Thursday, May 16, 13
Thursday, May 16, 13
Performance
Thursday, May 16, 13
A Few Considerations
Thursday, May 16, 13
A Few Considerations
• Extra CSS (minimal)
Thursday, May 16, 13
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)
Thursday, May 16, 13
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed
Thursday, May 16, 13
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image Requests
Thursday, May 16, 13
A Few Considerations
• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image Requests
Thursday, May 16, 13
Responsive Images
Thursday, May 16, 13
Three Performance Goals:
Thursday, May 16, 13
Three Performance Goals:
1. Start with a small image
Thursday, May 16, 13
Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without downloading both
Thursday, May 16, 13
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
• Resize on the fly• Compress automatically
First Step: Automation
Thursday, May 16, 13
Lossless Compression
Thursday, May 16, 13
140 KB
Lossless Compression
Thursday, May 16, 13
140 KB 85 KB
Lossless Compression
Thursday, May 16, 13
140 KB 85 KB
Lossless Compression
• http://www.smushit.com/ysmush.it/
• https://developers.google.com/speed/pagespeed/
Thursday, May 16, 13
• Automate HTML output• Plan for the future
More Automation
Thursday, May 16, 13
HTML Output (picturefill)
Thursday, May 16, 13
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
Thursday, May 16, 13
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
Thursday, May 16, 13
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
Thursday, May 16, 13
HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file• Supports all media queries
Thursday, May 16, 13
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
<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
<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
How does it do?
Thursday, May 16, 13
How does it do?
✓ Unique image URLs
Thursday, May 16, 13
How does it do?
✓ Unique image URLs
✓ Start with smallest image
Thursday, May 16, 13
How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
Thursday, May 16, 13
How does it do?
✓ Unique image URLs
✓ Start with smallest image
✓ Only one image download
✓ Fallback for old IE
Thursday, May 16, 13
But that markup...
Thursday, May 16, 13
Plan to Replace Whatever You Build
Thursday, May 16, 13
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
Don’t type, click:jkle.in/jsday
Thursday, May 16, 13
Browser Support
Thursday, May 16, 13
Thursday, May 16, 13
Fail
Thursday, May 16, 13
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
The Future: Client Hints
Thursday, May 16, 13
Proposal by Ilya Grigorik
Thursday, May 16, 13
Proposal by Ilya Grigorik
• Client (browser) sends an additional HTTP Header
Thursday, May 16, 13
Proposal by Ilya Grigorik
• Client (browser) sends an additional HTTP Header
• CH: dh=598, dw=384, dpr=2.0, t
Thursday, May 16, 13
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
Homework
Thursday, May 16, 13
Thursday, May 16, 13
Find your favorite non-responsive site
Thursday, May 16, 13
Find your favorite non-responsive site
Thursday, May 16, 13
Find your favorite non-responsive site
Save the HTML locally
Thursday, May 16, 13
Find your favorite non-responsive site
Save the HTML locally
Thursday, May 16, 13
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Thursday, May 16, 13
Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Thursday, May 16, 13
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
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
Welcome to the world of RWD
Thursday, May 16, 13
• 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
Thursday, May 16, 13
Recap
Thursday, May 16, 13
Recap
• Start with small sizes on new sites
Thursday, May 16, 13
Recap
• Start with small sizes on new sites• Use em’s and %’s
Thursday, May 16, 13
Recap
• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpoints
Thursday, May 16, 13
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
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
Get in Touch
www.etsy.com/careers
jonathan@etsy.com
@jonathanklein
Thursday, May 16, 13
top related