responsive responsive design
DESCRIPTION
Presented at the New York Web Performance Meetup in NYC on April 23, 2013TRANSCRIPT
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