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

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

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

3. Unique image URLs (caching)

• Resize on the fly• Compress automatically

First Step: Automation

Lossless Compression

140 KB

140 KB 85 KB

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

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

• Automate HTML output• Plan for the future

More Automation

HTML Output (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

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

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

IE 6, 7, 8 get this

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

Handle IE

Conditional Comments

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

More: 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/

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

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

• Start with small sizes on new sites

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

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

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

• 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

jonathan@etsy.com

@jonathanklein

JSDay 2013 - Practical Responsive Web Design

Technology

Transcript of JSDay 2013 - Practical Responsive Web Design

jsDay 2016 recap

Responsive Website Design and Hosting - Rediker Software · Responsive Website Design and Hosting Responsive Website Hosting Benefits: ... other web components • Responsive navigation

React Native - JSday

Enterprise Risk Management Qualifications · reputation for offering highly practical, academically rigorous qualifications to meet industry needs. We are responsive to the latest

(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)

Angular js mobile jsday 2014 - Verona 14 may

Storypath: A Practical Approach for Culturally Responsive Instruction Margit E. McGuire Seattle University

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012

Responsive Design - Magento · Responsive Design . 16-fold growth in responsive ecommerce . Responsive Design is a won debate •3 types of audience •Tried and tested base responsive

Responsive Flexbox Inspiration (Responsive Day Out)

Practical Pointers for an Inclusive and Culturally …...Practical Pointers for an Inclusive and Culturally Responsive Classroom Portland State University is the most diverse public

Please dont touch-3.6-jsday

Practical workflows for responsive design

content Authoring For Responsive Design - MadCap …assets.madcapsoftware.com/webinar/Presentation... · Content Authoring for Responsive Design . ... • Responsive Design ... RESPONSIVE

Responsive eLearning Design and Developmentsifytechnologies.com/.../2017/06/Responsive-Design-and-Development... · Responsive eLearning Design and Development ... Enter Responsive

JSDay Italy - Backbone.js

Building Responsive Layoutsxiemin.me/wp-content/uploads/2012/11/Building-Responsive-Layouts… · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by .

Breaking out of the endless callback look - #jsday Italy keynote

RESPONSIVE PRACTICAL LEADERSHIP AND GOOD GOVERNANCE Contents Purpose Outcome Introduction Methodology & Approach Responding to the 21 ST Century Dynamics.

MODULE 2: CULTURALLY RESPONSIVE PEDAGOGY AND PRACTICE Academy 2: Culturally Responsive ... · · 2009-07-03Academy 2: Culturally Responsive Classrooms ... Culturally Responsive