responsive responsive design

Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012

ResponsiveResponsive Design

Building sites that are flexible and fast

NY Web Perf Meetup | April 23, 2013

— Ethan Marcotte

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.

http://alistapart.com/article/responsive-web-design

— John Allsopp

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

http://alistapart.com/article/dao

More than layout

— Ethan Marcotte

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.

gradient of different experiences

http://alistapart.com/article/responsive-web-design

— Ethan Marcotte

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.

gradient of different experiences

http://alistapart.com/article/responsive-web-design

— Stephanie Rieger

Shoot me now…responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it.

https://twitter.com/stephanierieger/status/245240465572642816

74 requests, 1511kb114 requests, 1200kb99 requests, 1298kb105 requests, 5942kb

48.97s, 55632.80kb

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

Revenue

RevenueTrafficConversionsSatisfactionPage views

71%as quickly or faster

http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile

Performance is a fundamental component of the user experience.

Blame the implementation, not the technique.

March 2012: 829kb

http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

March 2012: 829kbMarch 2013: 1031kb

http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

Performance needs to matter because it matters to usersA culture of performance

— A friend

I doubt anyone really wants to release a site that doesn't perform well, it's just a product of not being afforded the luxury of time and top-down pressure.

Set a performance budget

Must be usable in <= 10s65kB - 100kB

1. Optimize

1. Optimize2. Remove

1. Optimize2. Remove3. Don’t Add

Become a performance masochistEmbrace the pain

Get real, early

— Brad Frost

You can’t mock-up performance in Photoshop.

Or: Why I cry myself to sleep at nightResponsive Images

display:none is useless

<div id="test1"> <img src="images/test1.png" alt="" /></div>

@media all and (max-width: 600px) { #test1 { display:none; }}

Except Opera Mobile and Opera MiniEverybody loads it anyway

http://blog.netvlies.nl/design-interactie/retina-revolution/

<picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p></picture>

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <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="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript></div>

<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

Actually, not so suckyBackground images

<div id="test3"> <div></div></div>

#test3 div { background-image:url('images/test3.png'); width:200px; height:75px;}@media all and (max-width: 600px) { #test3 { display:none; }}

<div id="test5"></div>

@media all and (min-width: 601px) { #test5 { background-image:url('images/test5-desktop.png'); width:200px; height:75px; }}@media all and (max-width: 600px) { #test5 { background-image:url('images/test5-mobile.png'); width:200px; height:75px; }}

Load only what you need, when you need itConditional loading

1. Content

https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii

1. Content

https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii

2. Enhancements

1. Content

https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii

2. Enhancements3. Leftovers

Cutting the mustard

if (‘querySelector’ in document

! && ‘localStorage’ in window

! && ‘addEventListener’ in window) {

}

http://bit.ly/RSrWVI

http://bit.ly/RSrWVI

http://bit.ly/RSrWVI

globe.enhanced = (

! respond.mediaQueriesSupported

! || globe.browser.ie6

! || globe.browser.ie7

! || globe.browser.ie8

)

<h2>

<a data-target="reviews"

href="reviews.html">Reviews</a>

</h2>

anchorInclude : function ( elem ) {

var url = elem.getAttribute('href');

var target =

document.getElementById(elem.getAttribute

('data-target'));

reqwest(url, function (resp) {

target.innerHTML = resp;

});

}

<a href="..." data-replace="articles/latest/

fragment">Latest Articles</a>

<a href="..." data-before="articles/latest/

fragment">Latest Articles</a>

<a href="..." data-after="articles/latest/

fragment">Latest Articles</a>

<a href="..." data-append="articles/latest/

fragment">Latest Articles</a>

$("[data-append],[data-replace],[data-after],

[data-before]").ajaxInclude();

No AJAX, no problem

<div data-lazy-content="more_puppies" aria-

live="polite">

<!--

<p>You clicked for more puppies! Here you

go:</p>

<img src="puppy.jpg" alt="Lazy loaded

puppy image" />

-->

</div>

var toShow = document.querySelectorAll('[data-lazy-

content=' + item.getAttribute('[data-lazy-reveal]') +

']';

for (var j = toShow.length - 1; j >= 0; j--) {

! var children = toShow[j].childNodes;

! for (var k = children.length - 1; k >= 0; k--) {

! ! var child = children[k];

! ! if (child.nodeType === 8) {

! ! ! //it's a comment

! ! ! toShow[j].innerHTML = child.nodeValue;

! ! ! break;

! ! }

! }

}

Lazy-load images*maybe*

<div class="delayed-image-load"

data-src="http://ichef.bbci.co.uk/news/200/

media/images/64664000/jpg/

_64664041_016703869.jpg"

data-width="521"

data-height="293"></div>

<div class="delayed-image-load"

data-src="http://ichef.bbci.co.uk/news/200/

media/images/64664000/jpg/

_64664041_016703869.jpg"

data-width="521"

data-height="293"></div>

<div class="delayed-image-load"

data-src="http://ichef.bbci.co.uk/news/200/

media/images/64664000/jpg/

_64664041_016703869.jpg"

data-width="521"

data-height="293"></div>

<img class="delayed"

src="http://assets.aneventapart.com/_/img/

lazy-holder.gif"

data-original="http://

assets.aneventapart.com/images/made/images/

uploads/action-shots/

aea_zeldman_300x_96_96_c1.jpg" width="96"

height="96" />

<img class="delayed"

src="http://assets.aneventapart.com/_/img/

lazy-holder.gif"

data-original="http://

assets.aneventapart.com/images/made/images/

uploads/action-shots/

aea_zeldman_300x_96_96_c1.jpg" width="96"

height="96" />

<img class="delayed"

src="http://assets.aneventapart.com/_/img/

lazy-holder.gif"

data-original="http://

assets.aneventapart.com/images/made/images/

uploads/action-shots/

aea_zeldman_300x_96_96_c1.jpg" width="96"

height="96" />

Maybe?

http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS

What about CSS?

Embeddeda {

! text-decoration: none;

}

@media screen and (min-width: 1300px) {

! a {

! ! text-decoration: underline;

! }

}

External

<link href=”style.css” media=”only screen and

(min-width: 1300px)” />

Embedded External

One HTTP request Many HTTP requests

Large file could be hard to maintain Organization can be easier

Extra weight, regardless of if needed Smaller CSS for device not supporting media queries

All styles downloaded All styles downloaded (if media queries supported)

http://scottjehl.github.com/CSS-Download-Tests/

Chrome 26Safari 6.0.2iOS Safari 6.1Android 4.2.1Android 4.2.1 Chrome 18Android 4.2.1 Chrome 18Android 4.2.1 Opera Mini

Yay!

Internet Explorer 10Internet Explorer 9Internet Explorer 8Firefox 20Opera 12.15Android 4.2.1 Opera Mobile

Nooooo!

Go vanilla

https://twitter.com/ppk/status/249100988693241856

jQuery = 200-300msbased on 1.8.0

http://jsperf.com/zepto-jq-eval

Up to 8s!

Custom jQuery builds

Everything hasa trade-off

What value does this provide?

Time to move beyondjust visual aesthetics

This may not be easy...

...but man is it fun!

thank you!

@tkadlec timkadlec.com

TIM KADLEC

implementingresponsivedesign.com