Slide 1
Slide 1 text
Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
Responsive
Responsive Design
Building sites that are flexible and fast
NY Web Perf Meetup | April 23, 2013
Slide 2
Slide 2 text
— 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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
— 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
Slide 5
Slide 5 text
More than layout
Slide 6
Slide 6 text
— 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
Slide 7
Slide 7 text
— 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
Slide 8
Slide 8 text
— 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
Slide 9
Slide 9 text
74 requests, 1511kb
114 requests, 1200kb
99 requests, 1298kb
105 requests, 5942kb
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
48.97s,
55632.80kb
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 22
Slide 22 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 23
Slide 23 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 24
Slide 24 text
Revenue
Slide 25
Slide 25 text
Revenue
Traffic
Conversions
Satisfaction
Page views
Slide 26
Slide 26 text
71%
as quickly or faster
http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
Slide 27
Slide 27 text
Performance is a
fundamental component of
the user experience.
Slide 28
Slide 28 text
Blame the implementation,
not the technique.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
March 2012: 829kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Slide 31
Slide 31 text
March 2012: 829kb
March 2013: 1031kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Performance needs to matter because it matters to users
A culture of performance
Slide 34
Slide 34 text
— 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.
Slide 35
Slide 35 text
Set a performance budget
Slide 36
Slide 36 text
Must be usable in <= 10s
65kB - 100kB
Slide 37
Slide 37 text
1. Optimize
Slide 38
Slide 38 text
1. Optimize
2. Remove
Slide 39
Slide 39 text
1. Optimize
2. Remove
3. Don’t Add
Slide 40
Slide 40 text
Become a performance masochist
Embrace the pain
Slide 41
Slide 41 text
Get real, early
Slide 42
Slide 42 text
— Brad Frost
You can’t mock-up performance in
Photoshop.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Or: Why I cry myself to sleep at night
Responsive Images
Slide 45
Slide 45 text
display:none is useless
Slide 46
Slide 46 text
Slide 47
Slide 47 text
Except Opera Mobile and Opera Mini
Everybody loads it anyway
Slide 48
Slide 48 text
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 49
Slide 49 text
Accessible text
Slide 50
Slide 50 text
Slide 51
Slide 51 text
Slide 52
Slide 52 text
Actually, not so sucky
Background images
Slide 53
Slide 53 text
Slide 54
Slide 54 text
@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;
}
}
Slide 55
Slide 55 text
Load only what you need, when you need it
Conditional loading
Slide 56
Slide 56 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
Slide 57
Slide 57 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
Slide 58
Slide 58 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
3. Leftovers
Slide 59
Slide 59 text
Cutting the mustard
Slide 60
Slide 60 text
if (‘querySelector’ in document
! && ‘localStorage’ in window
! && ‘addEventListener’ in window) {
}
Slide 61
Slide 61 text
http://bit.ly/RSrWVI
Slide 62
Slide 62 text
http://bit.ly/RSrWVI
Slide 63
Slide 63 text
http://bit.ly/RSrWVI
Slide 64
Slide 64 text
globe.enhanced = (
! respond.mediaQueriesSupported
! || globe.browser.ie6
! || globe.browser.ie7
! || globe.browser.ie8
)
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 68
Slide 68 text
anchorInclude : function ( elem ) {
var url = elem.getAttribute('href');
var target =
document.getElementById(elem.getAttribute
('data-target'));
reqwest(url, function (resp) {
target.innerHTML = resp;
});
}
Slide 70
Slide 70 text
$("[data-append],[data-replace],[data-after],
[data-before]").ajaxInclude();
Slide 71
Slide 71 text
No AJAX, no problem
Slide 72
Slide 72 text
Slide 73
Slide 73 text
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;
! ! }
! }
}
Slide 74
Slide 74 text
Lazy-load images*
maybe*
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Slide 81
Slide 81 text
Slide 82
Slide 82 text
Slide 83
Slide 83 text
Maybe?
Slide 84
Slide 84 text
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS
Slide 85
Slide 85 text
What about CSS?
Slide 86
Slide 86 text
Embedded
a {
! text-decoration: none;
}
@media screen and (min-width: 1300px) {
! a {
! ! text-decoration: underline;
! }
}
Slide 87
Slide 87 text
External
Slide 88
Slide 88 text
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)
Slide 89
Slide 89 text
http://scottjehl.github.com/CSS-Download-Tests/
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Chrome 26
Safari 6.0.2
iOS Safari 6.1
Android 4.2.1
Android 4.2.1 Chrome 18
Android 4.2.1 Chrome 18
Android 4.2.1 Opera Mini
Yay!
Slide 92
Slide 92 text
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Firefox 20
Opera 12.15
Android 4.2.1 Opera Mobile
Nooooo!
Slide 93
Slide 93 text
Go vanilla
Slide 94
Slide 94 text
https://twitter.com/ppk/status/249100988693241856
Slide 95
Slide 95 text
jQuery = 200-300ms
based on 1.8.0
http://jsperf.com/zepto-jq-eval
Slide 96
Slide 96 text
Up to 8s!
Slide 97
Slide 97 text
Custom jQuery builds
Slide 98
Slide 98 text
Everything has
a trade-off
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
What value does this
provide?
Slide 101
Slide 101 text
Time to move beyond
just visual aesthetics
Slide 102
Slide 102 text
This may not be easy...
Slide 103
Slide 103 text
...but man is it fun!
Slide 104
Slide 104 text
thank you!
@tkadlec timkadlec.com
TIM KADLEC
Slide 105
Slide 105 text
implementingresponsivedesign.com