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

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

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)

Automate

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

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

Clown Car Technique

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>

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

• Accessibility

Drawbacks

• Accessibility• No right-click

Drawbacks

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

We Need Something Better

display:none

Image is Downloaded

Image is Downloaded

Image is Downloaded

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/

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

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

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

jonathan@etsy.com

@jonathanklein

Practical Responsive Web Design - Northeast PHP 2013

Technology

PHP Programming: PHP Crush Course! Learn PHP Programming

PHP Certified training Coimbatore|PHP institutes Coimbatore|PHP certification

MARKET RESPONSIVE PRESTASHOP THEME USER GUIDE …market.arenathemes.com/market-document/readme_en.pdf · Our themes are compatible with the Prestashop versions 1.6 or higher (PHP

Magento Marketplace's Program Marketplace... · Test Automation Improvements Foundation for MFTF Responsive Design. ... • PHP • Composer • XML • Codeception (BDD-styled PHP

PHP Tutorial - Learn PHP

2013-08 10 evil things - Northeast PHP Conference Keynote

PHP Without PHP—Confoo

RESPONSIVE FORMATION · Maitrise du du logiciel Dreamweaver Créer, modiﬁer des éléments Html Elaborer un site, news, blog… Connaissance des langages XML, HTML5, CSS3 PHP

MENU - The Wholesome Table...Desiccated Coconut Almonds Granola Php 60 Php 70 Php 70 Php 100 Fruit add-ons: Mangoes Banana Blueberries Fresh Strawberries Php 20 Php 40 Php 50 Superfood

(PHP based Customer Relationship Management Script)softwaresuggest-cdn.s3.amazonaws.com/.../1490781140_Profession… · CRM does the rest. This CRM is mobile responsive design and

ELECTRO RESPONSIVE PRESTASHOP THEME USER GUIDE …electro.arenathemes.com/electro-document/readme_en.pdf · Our themes are compatible with the Prestashop versions 1.6 or higher (PHP

1 Open Source Programming. -Introduction to PHP -PHP installation /wamp server installation for PHP environment -PHP syntax -PHP variables -PHP Strings

Php Training Institute|Php Tutorial|Php Opening in Bangalore|Php Jobs|Php Training Centre|Php Course|Campus Drive for fresher| Php Online Video |Video Tutorials| On Job Project| Online

Northeast PHP - High Performance PHP

Don't Fear the Regex - Northeast PHP 2015

Exploiting Php With Php

PHP: Get the Right Responsive Website Design for Your Business - New York career advice

COMP519: Web Programming Autumn 2010 PHP Basics: Introduction to PHP a PHP file, PHP workings, running PHP. Basic PHP syntax variables, operators,

PHP Training in Coimbatore|PHP training Coimbatore|PHP certification

CLOVER RESPONSIVE PRESTASHOP THEME USER GUIDE …clover.arenathemes.com/clover-document/readme_en.pdf · Our themes are compatible with the Prestashop versions 1.6 or higher (PHP