Slide 1
Slide 1 text
When Responsive Web Design
Meets the Real World
Slide 2
Slide 2 text
Follow me at @grigs http://bit.ly/grigs-akamai-rwd
Slide 3
Slide 3 text
The web has always been a balancing act.
http://www. ickr.com/photos/classblog/5136926303
Slide 4
Slide 4 text
With many competing interests.
http://www. ickr.com/photos/tudor/4324056624/
Slide 5
Slide 5 text
Finding balance is more difficult…
http://www. ickr.com/photos/superfantastic/50088733/
Slide 6
Slide 6 text
As device diversity increases.
http://www. ickr.com/photos/lyza/7382235106
Slide 7
Slide 7 text
Responsive web
design offers us
for a sensible way to deal
with device diversity.
http://www. ickr.com/photos/superfantastic/50088733/
http://www. ickr.com/photos/darrentunnicliff/4232232092/
Slide 8
Slide 8 text
And yet the one question I frequently ask myself is…
http://www. ickr.com/photos/classblog/5136926303
Slide 9
Slide 9 text
Can a
http://www. ickr.com/photos/sldghmmr/6041481069
experience…
Slide 10
Slide 10 text
compete with a tailored experience?
http://www. ickr.com/photos/adrianclarkmbbs/3062676599/
Slide 11
Slide 11 text
Important question from
many perspectives:
Search engines
Context
Advertising
Performance
Slide 12
Slide 12 text
Search engines
Slide 13
Slide 13 text
Search engines
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Until recently, Google recommended separate sites.
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
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
http://www. ickr.com/photos/brunauto/5062644167/
Slide 24
Slide 24 text
Mobile context?
http://www. ickr.com/photos/brunauto/5062644167/
Slide 25
Slide 25 text
http://www. ickr.com/photos/brunauto/5062644167/
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
80% during misc downtime
76% while waiting in lines
86% while watching TV
69% for point of sale research
http://www. ickr.com/photos/carbonnyc/5140154965
Slide 29
Slide 29 text
http://www. ickr.com/photos/carbonnyc/5140154965
Slide 30
Slide 30 text
TMI
Slide 31
Slide 31 text
TMI
Slide 32
Slide 32 text
TMI 39% use
on toliet!
Slide 33
Slide 33 text
Advertising
Slide 34
Slide 34 text
New responsive ad units
But advertising is still big problem.
Slide 35
Slide 35 text
PERFORMANCE
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites Slow sites mean real dollars are lost
67% of consumers cite slow
websites as the main cause of
basket abandonment
Daily Pulse Newsletter
Get our free Daily Pulse Newsletter to
keep informed about the latest news and
insights in Digital Marketing.
Register for our free Daily Pulse
ADVERTISE HERE »
by David Moth 06 December 2012 11:40 8 comments Print
Tweet
Tweet 236 3
Everyone hates slow loading websites, and a new survey
highlights just how damaging a slow site can be to the user
experience.
The study by Brand Perfect found that two thirds of UK
consumers (67%) cite slow loading times as the main reason
they would abandon an online purchase.
It’s a topic we’ve looked at in more detail in our post 'Site
speed: case studies, tips and tools for improving your conversion rate', with stats showing that
slow loading websites are losing businesses up to £1.73bn a year.
Home / Blog
Subscribe Reports Training Events Jobs Blog More Browse by topic
Like 14 Share
Share 20
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Top ecommerce sites are 22% slower than last year
http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/
Slide 38
Slide 38 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Slide 39
Slide 39 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
Slide 40
Slide 40 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
Slide 41
Slide 41 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
Slide 42
Slide 42 text
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Slide 43
Slide 43 text
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Mobile browsers offer many ways to
navigate desktop web sites.
Slide 44
Slide 44 text
http://www.flickr.com/photos/stephenjohnbryde/384095768/
Slide 45
Slide 45 text
http://www.flickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that make a web site load faster.
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
http://www. ickr.com/photos/nathaninsandiego/4829858186
Slide 48
Slide 48 text
http://www.flickr.com/photos/wesbrowning/5316400258/
Slide 49
Slide 49 text
http://www.flickr.com/photos/69797234@N06/7203485148/
Slide 50
Slide 50 text
BBG Before the Boston Globe
http://www.flickr.com/photos/69797234@N06/7203485148/
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
CSS Media Query for Mobile is Fool’s Gold
“
Slide 54
Slide 54 text
CSS Media Query for Mobile is Fool’s Gold
“
—Me (oops)
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Demo from ALA article
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Slide 60
Slide 60 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Slide 61
Slide 61 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Original Resized K Saved % Saved
Total 208.3K 45.8K 162.5K 78.0%
Slide 62
Slide 62 text
The resounding answer from the community:
Slide 63
Slide 63 text
Mobile First Responsive Web Design
The resounding answer from the community:
Slide 64
Slide 64 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Slide 65
Slide 65 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Slide 66
Slide 66 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Desktop First Responsive Web Design Mobile First Responsive Web Design
Slide 67
Slide 67 text
“Awesome. We’ll devote a chapter to Mobile
First Responsive Web Design in our book.”
Slide 68
Slide 68 text
“Awesome. We’ll devote a chapter to Mobile
First Responsive Web Design in our book.”
Famous last words.
Slide 69
Slide 69 text
9%
4%
21%
38%
4%
25%
Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 100% Savings
Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
Slide 70
Slide 70 text
Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Slide 71
Slide 71 text
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Akin to hosting a dinner party on short notice…
http://www. ickr.com/photos/beautyrede ned/2643858323/
Slide 77
Slide 77 text
So you shove all your
junk in the closet.
http://www. ickr.com/photos/puuikibeach/3654517679
Slide 78
Slide 78 text
Most responsive designs are…
Slide 79
Slide 79 text
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
https://twitter.com/scottjehl/status/243025352069349377
Slide 82
Slide 82 text
Being Responsive from a layout perspective should not preclude us from being
responsive from a performance and interaction perspective.
—Scott Jehl
“
https://twitter.com/scottjehl/status/243025352069349377
Slide 83
Slide 83 text
5key techniques for responsible
responsive design
Slide 84
Slide 84 text
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First
Responsive Designs
#1
Slide 85
Slide 85 text
Different than Mobile
First Design Theory
http://www.flickr.com/photos/localcelebrity/4831362933/
Slide 86
Slide 86 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Slide 87
Slide 87 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Mobile First Responsive Web Design is a technical approach for responsive designs.
Slide 88
Slide 88 text
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
}
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
[Mobile layout rules here]
}
Move the mobile media query block
above the desktop media query.
By doing this, we’re making sure
the cascading effect of CSS is
consistent with our mobile first
progressive enhancement approach.
Slide 89
Slide 89 text
Reorder media queries so cascade
goes from small to large screens
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
}
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
[Mobile layout rules here]
}
Move the mobile media query block
above the desktop media query.
By doing this, we’re making sure
the cascading effect of CSS is
consistent with our mobile first
progressive enhancement approach.
Keep basic styles outside of media queries.
Slide 90
Slide 90 text
The absence of support for media queries is in fact the rst media query.
—Bryan Rieger
“
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
IE8 and below don’t support media queries.
Slide 93
Slide 93 text
Desktop First Responsive Web Design = Desktop Fallback
Mobile First Responsive Web Design = Mobile Fallback
What do you see if your browser doesn’t support media queries?
Slide 94
Slide 94 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
Slide 95
Slide 95 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
or use Respond.js
(a media query poly ll for IE)
Slide 96
Slide 96 text
Keep CSS images in their place
#2
Slide 97
Slide 97 text
The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
Slide 98
Slide 98 text
The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
Images with display:none are still downloaded
Slide 99
Slide 99 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 100
Slide 100 text
Images scoped within
media queries
@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;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 101
Slide 101 text
display:none on
parent element
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
#test3
div
{
background-‐image:url('images/test3.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test3
{
display:none;
}
}
Slide 102
Slide 102 text
Image override with a
media query
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
#test4
{
background-‐image:url('images/test4-‐desktop.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test4
{
background-‐image:url('images/test4-‐mobile.png');
}
}
Slide 103
Slide 103 text
#3 Conditionally load JS
based on screen size
and capabilities
http://www.flickr.com/photos/lyza/7382255242/
Slide 104
Slide 104 text
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Slide 105
Slide 105 text
Hiding content with display:none does not prevent it from downloading.
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Slide 106
Slide 106 text
https://github.com/paulirish/matchMedia.js
In JavaScript, use matchMedia() or a
poly ll for it to test a media query
Slide 107
Slide 107 text
Latest
Articles
https://github.com/filamentgroup/Ajax-Include-Pattern/
Use AJAX to bring more content into the page as
the viewport width gets bigger
AJAX Include Pattern
Slide 108
Slide 108 text
Behaviorial Breakpoints
Better yet, keep your breakpoints in your CSS and
have your JavaScript watch to changes to the DOM
triggered by media queries.
Slide 109
Slide 109 text
Deliver different size ![]()
s at
different screen sizes
#4
http://www.flickr.com/photos/kk/230544325/
Slide 110
Slide 110 text
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
Slide 111
Slide 111 text
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
One SRC to rule all images
Slide 112
Slide 112 text
Two most common use cases
Slide 113
Slide 113 text
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
Slide 114
Slide 114 text
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
Slide 115
Slide 115 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction
Slide 116
Slide 116 text
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 117
Slide 117 text
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 118
Slide 118 text
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 119
Slide 119 text
Art Direction Not simply cropping
Slide 120
Slide 120 text
Art Direction Images with text
Sign In Account Get Email Español Shopping Bag
Features
New Arrivals
Show Off Tees
Backpacks
Tech Toys
2/$30 & 2/$40 PINK Favorites
Spin the Panty Wheel
Tops
All Tops
Hoodies & Crews
Tees & Tanks
Bottoms
All Bottoms
Sweats
Shorts
Yoga
PINK Loves Yoga
Panties
5/$26 Styles
3/$33 Styles
Shop by Style
Bras
All Bras
Bandeaus & Bralettes
2/$42 Wear Everywhere Bras
Bras 101
Swim
Search
Slide 121
Slide 121 text
No good solutions
Slide 122
Slide 122 text
New proposed standards
srcset src-n
Slide 123
Slide 123 text
Standards process is still
moving forward
http://www.flickr.com/photos/johnlamb/2576062549/
Slide 124
Slide 124 text
Get Involved at
Responsiveimages.org
Slide 125
Slide 125 text
In the meantime, pick a hack.
My fave is PictureFill.
![]()
https://github.com/scottjehl/picturefill
Slide 126
Slide 126 text
Handle high-density (retina)
images very carefully
#5
http://www.flickr.com/photos/kk/230544325/
Slide 127
Slide 127 text
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080
57920
Single image on multiple screens
320x18
480x27
960x54 909x51
1818x10
Slide 128
Slide 128 text
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080
57920
Single image on multiple screens
3,214% bigger
320x18
480x27
960x54 909x51
1818x10
Slide 129
Slide 129 text
Apple.com is an anti-pattern.
Downloads both standard and retina.
The total size of the page goes from 502.90K to 2.13MB
when the retina versions of images are downloaded.
Slide 130
Slide 130 text
If possible, use CSS for now.
@media
screen
and
(-‐webkit-‐device-‐pixel-‐ratio:
1)
{
/*
Image
for
normal
displays.
*/
#main
{
background-‐image:
url(dog.jpg);
}
}
@media
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
2)
{
/*
Image
for
high
resolution
displays.
*/
#main
{
background-‐image:
(dog-‐hi-‐res.jpg);
}
}
Slide 131
Slide 131 text
Foresight.js
Slide 132
Slide 132 text
PictureFill User Preference Branch Tap HD/SD to switch image density
https://github.com/scottjehl/picturefill/tree/user-prefs
Slide 133
Slide 133 text
Compressive Images?
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 134
Slide 134 text
If I could dream up my
ideal solution…
Slide 135
Slide 135 text
8 guidelines and 1 immutable rule
Slide 136
Slide 136 text
Use vector-based images or font
icons whenever you can
#1
Slide 137
Slide 137 text
IcoMoon.io makes font icons easy
IcoMoon App Premium Icons Font CDN
Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts
IcoMoon
IcoMoon
Custom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About
Slide 138
Slide 138 text
Grumpicon.com helps with SVG
Based on open source grunticon
/'
//
. //
|\//7
/' " \
.
| ( \
_ _ - -_ | '._ '
_ __ _- \_ _/ \'-'
// \\_/
\\ | |
|| | /
/ | \ /
|VV ||--\__________/-||-/|
|| || || ||
{ } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?
Slide 139
Slide 139 text
Encourage people to upload the
highest quality source possible
#2
Slide 140
Slide 140 text
Provide an automatic image
resizing and compression service
#3
Slide 141
Slide 141 text
Images can be resized to any
size with URL parameters
#4 
Slide 142
Slide 142 text
“Save for the Web” should be a thing of the past.
—@adambradley
“
Slide 143
Slide 143 text
Provide automated output
of PictureFill or alternative
#5 {
"source":"/source.jpg",
"breakpoints":
[
{
"max-‐width":"30em","pixel-‐density":1,"width":360px},
{
"max-‐width":"30em","pixel-‐density":2,"width":720px},
{
"max-‐width":"30em","pixel-‐density":1,"width":800px},
{
"max-‐width":"30em","pixel-‐density":2,"width":1600px},
{
"pixel-‐density":1,"width":800px},
{
"pixel-‐density":2,"width":1600px},
]
}
templates contain breakpoint information
Responsive Images Markup Function
PictureFill
Markup
Sample syntax.
Don’t get hung up
on details.
Markup for all
images can be
changed in one spot.
Slide 144
Slide 144 text
Provide a way to override resized
images for art direction needs
#6
Slide 145
Slide 145 text
Integrate image compression
best practices
#7 jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
Slide 146
Slide 146 text
Bonus: Detect support for WebP
image format and use it
#8 The average WebP le size is 25% - 34% smaller
compared to JPEG le size.
WebP compresses 34% better than libpng, and 26%
better than pngout for loseless images.
Slide 147
Slide 147 text
The only rule for your responsive images implementation:
Plan for the fact that it will be deprecated. Make it easy to change.
Slide 148
Slide 148 text
It’s three years later. Let’s revisit my original question.
Slide 149
Slide 149 text
http://www.flickr.com/photos/theyoungthousands/4025421438
Can a one-size ts all solution…
Slide 150
Slide 150 text
compete with a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Slide 151
Slide 151 text
Or will it always be TOO BIG?
http://www.flickr.com/photos/haddadi/5971508861
Slide 152
Slide 152 text
Unlikely responsive design will ever be as fast as
something crafted speci cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
Slide 153
Slide 153 text
But web design is a balancing act…
http://www.flickr.com/photos/kalexanderson/6266452817
Slide 154
Slide 154 text
And performance is just one factor.
Slide 155
Slide 155 text
For most projects, responsive design
will be fast enough…
Flickr: Uploaded February 11, 2007 by hawridger
Slide 156
Slide 156 text
if we roll up our sleeves and build
mobile rst responsive designs.
Slide 157
Slide 157 text
Thank You!
Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users
sharing under creative commons.