JSDay 2013 - Practical Responsive Web Design

on

  • 1,410 views

This is a talk I gave in Verona, Italy at JSDay 2013 on May 16th

This is a talk I gave in Verona, Italy at JSDay 2013 on May 16th

Statistics

Views

Total Views
1,410
Views on SlideShare
1,162
Embed Views
248

Actions

Likes
3
Downloads
13
Comments
0

2 Embeds 248

http://jkle.in 237
http://librosweb.es 11

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JSDay 2013 - Practical Responsive Web Design JSDay 2013 - Practical Responsive Web Design Presentation Transcript

  • Practical ResponsiveWeb DesignJSDay 2013Jonathan Klein, Performance Engineer@jonathankleinThursday, May 16, 13
  • Slides, Linksjkle.in/jsdayThursday, May 16, 13
  • Some Etsy Stats• Handmade marketplace• 1.4 billion page views/month• Almost $1B in sales last year• ~1M lines of JavaScriptThursday, May 16, 13
  • Two AssertionsThursday, May 16, 13
  • 1. RWD isn’t that hardThursday, May 16, 13
  • 2. RWD can be fastThursday, May 16, 13
  • The BasicsThursday, 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
  • BreakpointsThursday, May 16, 13
  • Thursday, May 16, 13
  • What Breakpoints to Use?Thursday, May 16, 13
  • What Breakpoints to Use?• Don’t think about devicesThursday, 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, maxThursday, 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’sThursday, May 16, 13
  • Retina ImagesThursday, 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 ActionThursday, 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
  • PerformanceThursday, May 16, 13
  • A Few ConsiderationsThursday, 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 neededThursday, May 16, 13
  • A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  • A Few Considerations• Extra CSS (minimal)• Retina Images (ouch)• Larger images than needed• Extra Image RequestsThursday, May 16, 13
  • Responsive ImagesThursday, May 16, 13
  • Three Performance Goals:Thursday, May 16, 13
  • Three Performance Goals:1. Start with a small imageThursday, May 16, 13
  • Three Performance Goals:1. Start with a small image2. Upgrade to larger size withoutdownloading bothThursday, May 16, 13
  • Three Performance Goals:1. Start with a small image2. Upgrade to larger size withoutdownloading both3. Unique image URLs (caching)Thursday, May 16, 13
  • • Resize on the fly• Compress automaticallyFirst Step: AutomationThursday, May 16, 13
  • Lossless CompressionThursday, May 16, 13
  • 140 KBLossless CompressionThursday, May 16, 13
  • 140 KB 85 KBLossless CompressionThursday, May 16, 13
  • 140 KB 85 KBLossless Compression• http://www.smushit.com/ysmush.it/• https://developers.google.com/speed/pagespeed/Thursday, May 16, 13
  • • Automate HTML output• Plan for the futureMore AutomationThursday, May 16, 13
  • HTML Output (picturefill)Thursday, May 16, 13
  • HTML Output (picturefill)• https://github.com/scottjehl/picturefillThursday, May 16, 13
  • HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> elementThursday, May 16, 13
  • HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> element• < 0.5K JS fileThursday, May 16, 13
  • HTML Output (picturefill)• https://github.com/scottjehl/picturefill• Mimics proposed <picture> element• < 0.5K JS file• Supports all media queriesThursday, 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 browsersThursday, 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 thisThursday, May 16, 13
  • How does it do?Thursday, May 16, 13
  • How does it do?✓ Unique image URLsThursday, May 16, 13
  • How does it do?✓ Unique image URLs✓ Start with smallest imageThursday, May 16, 13
  • How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image downloadThursday, May 16, 13
  • How does it do?✓ Unique image URLs✓ Start with smallest image✓ Only one image download✓ Fallback for old IEThursday, May 16, 13
  • But that markup...Thursday, May 16, 13
  • Plan to ReplaceWhatever You BuildThursday, 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/jsdayThursday, May 16, 13
  • Browser SupportThursday, May 16, 13
  • Thursday, May 16, 13
  • FailThursday, May 16, 13
  • Handle IEConditional 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 HintsThursday, May 16, 13
  • Proposal by Ilya GrigorikThursday, May 16, 13
  • Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP HeaderThursday, May 16, 13
  • Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP Header• CH: dh=598, dw=384, dpr=2.0, tThursday, May 16, 13
  • Proposal by Ilya Grigorik• Client (browser) sends an additionalHTTP Header• CH: dh=598, dw=384, dpr=2.0, t• https://github.com/igrigorik/http-client-hints/Thursday, May 16, 13
  • HomeworkThursday, May 16, 13
  • Thursday, May 16, 13
  • Find your favorite non-responsive siteThursday, May 16, 13
  • Find your favorite non-responsive siteThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointMake one retina image and use itThursday, May 16, 13
  • Find your favorite non-responsive siteSave the HTML locallyAdd some media queries and a breakpointMake one retina image and use itThursday, May 16, 13
  • Welcome to the worldof RWDThursday, May 16, 13
  • • Resize browser window, use consolewhen you want a breakpoint• document.body.offsetWidth• If you must start w/ desktop, use:• @media screen and (max-width: 900px) {Some HintsThursday, May 16, 13
  • Thursday, May 16, 13
  • RecapThursday, May 16, 13
  • Recap• Start with small sizes on new sitesThursday, May 16, 13
  • Recap• Start with small sizes on new sites• Use em’s and %’sThursday, May 16, 13
  • Recap• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpointsThursday, May 16, 13
  • Recap• Start with small sizes on new sites• Use em’s and %’s• ~3-4 device independent breakpoints• Use Responsive ImagesThursday, 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 IEThursday, May 16, 13
  • Get in Touchwww.etsy.com/careersjonathan@etsy.com@jonathankleinThursday, May 16, 13