Slide 1
Slide 1 text
Responsive
Responsive Design
Building sites that are flexible and fast
Peachpit Presents | January 16, 2014
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
20% in 5 days
Slide 4
Slide 4 text
15% in 24 hours
Slide 5
Slide 5 text
18% in 24 hours
Slide 6
Slide 6 text
Most popular in 3 days
Slide 7
Slide 7 text
6 months. 681,900 Android devices.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
source: http://opensignal.com/reports/fragmentation.php
Slide 8
Slide 8 text
Source: http://stephanierieger.com/the-trouble-with-android/
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
“I want the entire
smartphone, the entire
internet, on my wrist.”
Slide 11
Slide 11 text
No content
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
@media [not|only] type [and] (expression)
{
...
}
Slide 17
Slide 17 text
@media only screen and (min-width: 400px)
{
...
}
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
— 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 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 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 27
Slide 27 text
More than layout
Slide 28
Slide 28 text
Too good a job?
Slide 29
Slide 29 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 30
Slide 30 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 31
Slide 31 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 32
Slide 32 text
No content
Slide 33
Slide 33 text
74 requests, 1511kb
114 requests, 1200kb
99 requests, 1298kb
105 requests, 5942kb
Slide 34
Slide 34 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
72%
22%
6% Much Smaller
Slightly Smaller
Same Size
Slide 35
Slide 35 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
320x480 640x960 1024x768 1600x1200
0
200000
400000
600000
800000
1000000
1200000
1400000
Slide 36
Slide 36 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
320x480 640x960 1024x768 1600x1200
0
200000
400000
600000
800000
1000000
1200000
1400000
Slide 37
Slide 37 text
Revenue
Slide 38
Slide 38 text
Revenue
Traffic
Conversions
Satisfaction
Page views
Slide 39
Slide 39 text
71%
as quickly or faster
http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
Slide 40
Slide 40 text
Performance
is a fundamental
component of
User Experience
Slide 41
Slide 41 text
RWD is bad for
performance!
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Blame the implementation,
not the technique.
Slide 44
Slide 44 text
January 2012: 814.68kb
January 2013: 1062.63kb
http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Slide 45
Slide 45 text
30%
Slide 46
Slide 46 text
Performance needs to matter because it matters to users
A culture of performance
Slide 47
Slide 47 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 48
Slide 48 text
Set a performance budget
Slide 49
Slide 49 text
Must be usable in <= 10s
65kB - 100kB
Slide 50
Slide 50 text
1. Optimize
Slide 51
Slide 51 text
1. Optimize
2. Remove
Slide 52
Slide 52 text
1. Optimize
2. Remove
3. Don’t Add
Slide 53
Slide 53 text
Channel your inner performance masochist
Embrace the pain
Slide 54
Slide 54 text
Get real, early
Slide 55
Slide 55 text
— Brad Frost
You can’t mock-up performance in
Photoshop.
Slide 56
Slide 56 text
— Brad Frost
You can’t mock-up performance in
Photoshop.
Slide 57
Slide 57 text
Or: Why I cry myself to sleep at night
Responsive Images
Slide 58
Slide 58 text
Compress any and all images
Trim the fat
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Savings after
compression
244.4 KB
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Don’t download things you don’t need
Show not, waste note
Slide 63
Slide 63 text
display:none is useless
Slide 64
Slide 64 text
Slide 65
Slide 65 text
Everybody loads it anyway
Slide 66
Slide 66 text
Slide 67
Slide 67 text
for (var i = lazy.length - 1; i >= 0; i--) {
! var includeSize = lazy[i].getAttribute('data-include-size');
! ! ! !
! if (!includeSize) {
! ! return;
! }
! if (includeSize[j].trim() == MQ) {
! ! lazy.length[i].src = lazy.length[i].getAttribute('data-
replace-src');
! ! return;
! }
}
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Slide 72
Slide 72 text
Slide 73
Slide 73 text
Make sure things are the right size and resolution
Appropriate images
Slide 74
Slide 74 text
72%
Slide 75
Slide 75 text
255 values for red
255 values for green
255 values for blue
255 values for alpha
Slide 76
Slide 76 text
600px
Slide 77
Slide 77 text
550px
Slide 78
Slide 78 text
(600 x 600) - (550 x 550)
57,500 pixels
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Slide 81
Slide 81 text
L.Q.I.P
Low Quality Image Placeholders
Slide 82
Slide 82 text
Slide 83
Slide 83 text
Compressive Images
AKA Black Magic
Slide 84
Slide 84 text
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 85
Slide 85 text
SVG
Slide 86
Slide 86 text
Slide 87
Slide 87 text
.main-header {
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
.no-svg .main-header {
background-image: url(logo.png);
}
Slide 88
Slide 88 text
1. Analyze
Slide 89
Slide 89 text
1. Analyze
2. Big images first
Slide 90
Slide 90 text
(600 x 600) - (550 x 550)
57,500 pixels
Slide 91
Slide 91 text
(200 x 200) - (150 x 150)
17,500 pixels
Slide 92
Slide 92 text
57,500 / 17,500 = 3.2x
Slide 93
Slide 93 text
1. Analyze
2. Big images first
3. Know the trade-offs
Slide 94
Slide 94 text
Actually, not so sucky
Background images
Slide 95
Slide 95 text
Slide 96
Slide 96 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 97
Slide 97 text
Load only what you need, when you need it
Conditional loading
Slide 98
Slide 98 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
Slide 99
Slide 99 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
Slide 100
Slide 100 text
1. Content
https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
2. Enhancements
3. Leftovers
Slide 101
Slide 101 text
Cutting the mustard
Slide 102
Slide 102 text
if ('querySelector' in document
! && 'localStorage' in window
! && 'addEventListener' in window) {
...
}
Slide 103
Slide 103 text
http://bit.ly/RSrWVI
Slide 104
Slide 104 text
http://bit.ly/RSrWVI
Slide 105
Slide 105 text
http://bit.ly/RSrWVI
Slide 106
Slide 106 text
globe.enhanced = (
! respond.mediaQueriesSupported
! || globe.browser.ie6
! || globe.browser.ie7
! || globe.browser.ie8
)
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 111
Slide 111 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 113
Slide 113 text
$("[data-append],[data-replace],[data-after],
[data-before]").ajaxInclude();
Slide 114
Slide 114 text
No AJAX, no problem
Slide 115
Slide 115 text
Slide 116
Slide 116 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 117
Slide 117 text
What about CSS?
Slide 118
Slide 118 text
Embedded
a {
! text-decoration: none;
}
@media screen and (min-width: 1300px) {
! a {
! ! text-decoration: underline;
! }
}
Slide 119
Slide 119 text
External
Slide 120
Slide 120 text
All styles downloaded
Slide 121
Slide 121 text
http://scottjehl.github.com/CSS-Download-Tests/
Slide 122
Slide 122 text
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 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 125
Slide 125 text
Internet Explorer 10
Internet Explorer 9
Internet Explorer 8
Firefox 20
Opera 12.15
Android 4.2.1 Opera Mobile
Nooooo!
Slide 126
Slide 126 text
https://twitter.com/ppk/status/249100988693241856
Slide 127
Slide 127 text
jQuery = 200-300ms
based on 1.8.0
http://jsperf.com/zepto-jq-eval
Slide 128
Slide 128 text
Up to 8s!
Slide 129
Slide 129 text
Custom jQuery builds
Slide 130
Slide 130 text
Everything has
a trade-off
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
What value does this
provide?
Slide 133
Slide 133 text
Don’t worry about JS size.
Just include one less image.
Slide 134
Slide 134 text
Don’t worry about JS size and
Just include one less image.
Slide 135
Slide 135 text
Time to move beyond
visual aesthetics
Slide 136
Slide 136 text
This may not be easy...
Slide 137
Slide 137 text
...but man is it fun!
Slide 138
Slide 138 text
thank you!
@tkadlec timkadlec.com
TIM KADLEC
Slide 139
Slide 139 text
implementingresponsivedesign.com
peachpit.com/deals