When responsive web design meets the real world

When ResponsiveWeb Design
Meets the RealWorld

Follow me at @grigs http://bit.ly/grigs-akamai-rwd

The web has always been a balancing act.
http://www.flickr.com/photos/classblog/5136926303

With many competing interests.
http://www.flickr.com/photos/tudor/4324056624/

Finding balance is more diﬃcult…
http://www.flickr.com/photos/superfantastic/50088733/

As device diversity increases.
http://www.flickr.com/photos/lyza/7382235106

Responsive web
design oﬀers us
for a sensible way to deal
with device diversity.
http://www.flickr.com/photos/superfantastic/50088733/
http://www.flickr.com/photos/darrentunnicliﬀ/4232232092/

And yet the one question I frequently ask myself is…
http://www.flickr.com/photos/classblog/5136926303

Can a
http://www.flickr.com/photos/sldghmmr/6041481069 experience…

compete with a tailored experience?http://www.flickr.com/photos/adrianclarkmbbs/3062676599/

Important question from
many perspectives:
Search engines
Context
Advertising
Performance

When responsive web design meets the real world

Until recently, Google recommended separate sites.

http://www.flickr.com/photos/brunauto/5062644167/

Mobile context?
http://www.flickr.com/photos/brunauto/5062644167/

80% during misc downtime
76% while waiting in lines
86% while watchingTV
69% for point of sale research
http://www.flickr.com/photos/carbonnyc/5140154965

http://www.flickr.com/photos/carbonnyc/5140154965

New responsive ad units
But advertising is still big problem.

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
TweetTweet 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 ShareShare 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/

Mobile users don’t care that
their network is slow.

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Mobile browsers oﬀer many ways to
navigate desktop web sites.

http://www.ﬂickr.com/photos/stephenjohnbryde/384095768/

http://www.ﬂickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that make a web site load faster.

http://www.flickr.com/photos/nathaninsandiego/4829858186

http://www.ﬂickr.com/photos/wesbrowning/5316400258/

http://www.ﬂickr.com/photos/69797234@N06/7203485148/

BBG Before the Boston Globe
http://www.ﬂickr.com/photos/69797234@N06/7203485148/

CSS Media Query for Mobile is Fool’s Gold“

CSS Media Query for Mobile is Fool’s Gold“ —Me (oops)

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%

34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Total 208.3K 45.8K 162.5K 78.0%

The resounding answer from the community:

Mobile First ResponsiveWeb Design
The resounding answer from the community:

http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

Graceful degradation Progressive Enhancement

Desktop First ResponsiveWeb Design Mobile First ResponsiveWeb Design

“Awesome.We’ll devote a chapter to Mobile
First ResponsiveWeb Design in our book.”

“Awesome.We’ll devote a chapter to Mobile
First ResponsiveWeb Design in our book.”
Famous last words.

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-ﬁrst-responsive-web-designs/

Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/

Akin to hosting a dinner party on short notice…
http://www.flickr.com/photos/beautyredefined/2643858323/

So you shove all your
junk in the closet.
http://www.flickr.com/photos/puuikibeach/3654517679

Most responsive designs are…

http://www.ﬂickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?

https://twitter.com/scottjehl/status/243025352069349377

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

5key techniques for responsible
responsive design

http://www.ﬂickr.com/photos/auyongcheemeng/95769332/
Build Mobile First
Responsive Designs
#1

Diﬀerent than Mobile
First DesignTheory
http://www.ﬂickr.com/photos/localcelebrity/4831362933/

Mobile First ResponsiveWeb Design is a technical approach for responsive designs.

/* 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.

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 */
[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.

The absence of support for media queries is in fact the first media query.
—Bryan Rieger
“

IE8 and below don’t support media queries.

Desktop First ResponsiveWeb Design = Desktop Fallback
Mobile First ResponsiveWeb Design = Mobile Fallback
What do you see if your browser doesn’t support media queries?

Keep CSS images in their place
#2

The taps.jpg file is 440.7K making it
the largest file on the page.
[Other CSS rules are here]
.header {display:none;}
}

The taps.jpg file is 440.7K making it
the largest file on the page.
[Other CSS rules are here]
.header {display:none;}
}
Images with display:none are still downloaded

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Images scoped within
media queries
<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;

}
}http://timkadlec.com/2012/04/media-query-asset-downloading-results/

display:none on
parent element
<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;

}
}

Image override with a
media query
<div
id="test4"></div>
#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');

}
}

#3 Conditionally load JS
based on screen size
and capabilities
http://www.ﬂickr.com/photos/lyza/7382255242/

Hiding content with display:none does not prevent it from downloading.
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!

https://github.com/paulirish/matchMedia.js
In JavaScript, use matchMedia() or a
polyfill for it to test a media query

<a
href="articles/latest/"

data-‐append="articles/latest/fragment"

data-‐media="(min-‐width:
30em)">

Latest
Articles
</a>
https://github.com/ﬁlamentgroup/Ajax-Include-Pattern/
Use AJAX to bring more content into the page as
the viewport width gets bigger
AJAX Include Pattern

Behaviorial Breakpoints
Better yet, keep your breakpoints in your CSS and
have your JavaScript watch to changes to the DOM
triggered by media queries.

Deliver different size <IMG>s at
different screen sizes
#4
http://www.flickr.com/photos/kk/230544325/

<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
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 thescreen size, HTML only allows one value for the src.

<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
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 thescreen size, HTML only allows one value for the src.
One SRC to rule all images

https://www.ﬂickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.

http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/
Art Direction

Art Direction
http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/

Art Direction Not simply cropping

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

New proposed standards
<picture> srcset src-n

Standards process is still
moving forward
http://www.ﬂickr.com/photos/johnlamb/2576062549/

Get Involved at
Responsiveimages.org

In the meantime, pick a hack.
My fave is PictureFill.
<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"
400px)"></div>

<div
data-‐src="large.jpg"
800px)"></div>

<!-‐-‐
Fallback
content
for
non-‐JS
browsers.

-‐-‐>

<noscript>

<img
src="small.jpg"
alt="A
giant
stone
face
at
The
Bayon

temple
in
Angkor
Thom,
Cambodia">

</noscript>
</div>https://github.com/scottjehl/pictureﬁll

Handle high-density (retina)
images very carefully
#5
http://www.ﬂickr.com/photos/kk/230544325/

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

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

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.

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);
}
}

PictureFill User Preference Branch Tap HD/SD to switch image density
https://github.com/scottjehl/pictureﬁll/tree/user-prefs

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

If I could dream up my
ideal solution…

8 guidelines and 1 immutable rule

Use vector-based images or font
icons whenever you can#1

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
IcoMoonIcoMoon
Custom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About

Grumpicon.com helps with SVG
Based on open source grunticon
/'
//
. //
|//7
/' "
.
| (
_ _ - -_ | '._ '
_ __ _- _ _/ '-'
// _/
| |
|| | /
/ | /
|VV ||--__________/-||-/|
|| || || ||
{ } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?

Encourage people to upload the
highest quality source possible#2

Provide an automatic image
resizing and compression service#3

Images can be resized to any
size with URL parameters#4 <img
src="http://src.sencha.io/320/http://sencha.com/files/u.jpg"
alt="My constrained image"
/>

“Save for theWeb”should be a thing of the past.
—@adambradley“

Provide automated output
of PictureFill or alternative#5
{
"source":"/source.jpg",
"breakpoints":
[
{
"max-‐width":"30em","pixel-‐density":1,"width":360px},

{
{
{
{
"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 upon details.
Markup for allimages can bechanged in one spot.

Provide a way to override resized
images for art direction needs#6

Integrate image compression
best practices#7
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers

Bonus: Detect support forWebP
image format and use it#8
The averageWebP file size is 25% - 34% smaller
compared to JPEG file size.
WebP compresses 34% better than libpng, and 26%
better than pngout for loseless images.

The only rule for your responsive images implementation:
Plan for the fact that it will be deprecated. Make it easy to change.

It’s three years later. Let’s revisit my original question.

http://www.ﬂickr.com/photos/theyoungthousands/4025421438
Can a one-size fits all solution…

compete with a tailored experience?
http://www.ﬂickr.com/photos/fronx/2862975043

Or will it always beTOO BIG?
http://www.ﬂickr.com/photos/haddadi/5971508861

Unlikely responsive design will ever be as fast as
something crafted specifically for a device.
http://www.ﬂickr.com/photos/quarenta/3256329577

But web design is a balancing act…
http://www.ﬂickr.com/photos/kalexanderson/6266452817

And performance is just one factor.

For most projects, responsive design
will be fast enough…
Flickr: Uploaded February 11, 2007 by hawridger

if we roll up our sleeves and build
mobile first responsive designs.

ThankYou!
Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users
sharing under creative commons.

When responsive web design meets the real world

More Related Content

What's hot (19)

Similar to When responsive web design meets the real world (20)

More from Jason Grigsby (20)

Recently uploaded (20)

When responsive web design meets the real world