Responsive Images and Video

Responsive Images
and Video
Jason Grigsby • @grigs • cloudfour.com

Follow along at @grigs_talks

http://bit.ly/grigs-2013-10-13

The web has always been a balancing act…

http://www.ﬂickr.com/photos/classblog/5136926303

with many competing priorities.

http://www.ﬂickr.com/photos/tudor/4324056624/

Finding that balance is
more diﬃcult…

http://www.ﬂickr.com/photos/superfantastic/50088733/

as device diversity increases.
http://www.ﬂickr.com/photos/lyza/7382235106

Responsive web design oﬀers us

for a sensible way to deal with device diversity.
http://www.ﬂickr.com/photos/darrentunnicliff/4232232092/

And yet the one question I frequently ask myself is…

Can a one size fits all solution…

http://www.ﬂickr.com/photos/sldghmmr/6041481069

compete with a
tailored experience?
http://www.ﬂickr.com/photos/helloturkeytoe/4932748746/

Important question from many perspectives:
Search engine optimization
Context
Advertising
Performance

What about mobile context?

http://www.ﬂickr.com/photos/brunauto/5062644167/

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

Advertising?

http://www.ﬂickr.com/photos/sh1mmer/
2510487525

People
demand
fast web
sites.
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf

Privacy and cookie policy

Log In

Subscribe

Subscribe

Slow sites
mean real
dollars
are lost.

Basket

Reports

Contact Us

Training

Events

i am looking for...

Jobs

Blog

More

Browse by topic

Home / Blog

67% of consumers cite slow
websites as the main cause of
basket abandonment
by David Moth
Tweet

236

06 December 2012 11:40

3

8 comments
Like

14

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

Print

Share

20

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.

ADVERTISE HERE »

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.

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

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

Many ways to navigate desktop web sites on mobile.

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

There are no gestures that
can make a web site faster.

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

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/

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

BBG: Before Boston Globe

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

Original

Resized

K Saved

% Saved

Original

Resized

K Saved

% Saved

34.7K

8.1K

26.6K

76.6%

43.4K

8.2K

35.2K

81.1%

39.0K

8.4K

30.6K

78.4%

26.0K

6.6K

19.4K

74.6%

30.5K

6.7K

23.8K

78.0%

34.7K

7.8K

26.9K

77.5%

Original

Resized

K Saved

% Saved

Original

Resized

K Saved

% Saved

34.7K

8.1K

26.6K

76.6%

43.4K

8.2K

35.2K

81.1%

Original Resized K Saved % Saved
39.0K

Total

30.5K

8.4K

30.6K

78.4%

6.7K

23.8K

78.0%

208.3K

45.8K

26.0K

6.6K

19.4K

74.6%

34.7K

7.8K

26.9K

77.5%

162.5K 78.0%

The resounding answer from the community:

Mobile First Responsive Web Design

Mobile First Responsive Web Design

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

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

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

Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
9%
4%

25%

21%
4%

Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 100% Savings

38%

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/

http://www.ﬂickr.com/photos/beautyredeﬁned/2643858323/

http://www.ﬂickr.com/photos/puuikibeach/3654517679

Most responsive web designs are…

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

“

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

5

key techniques for
responsible
responsive design

#1

Build Mobile First
Responsive Designs

http://www.ﬂickr.com/photos/auyongcheemeng/95769332/

Diﬀerent than
Mobile First
Design Theory

http://www.ﬂickr.com/photos/localcelebrity/4831362933/

Mobile First Responsive Web Design is a
technical approach for responsive designs.

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

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]
}

*/

e mobile media query block
Move th
e desktop media query.
above th
this, we’re making sure
By doing
he cascading effect of CSSiris
t
nsistent with our mobile f ostch.
co
ogressive enhancement appr a
pr

Keep basic styles outside of media queries.

“

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

IE8 and below don’t
support media queries.

What do you see if your browser doesn’t support media queries?

Desktop First Responsive Web Design =
Desktop Fallback
Mobile First Responsive Web Design =
Mobile Fallback

IE conditional comments
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="all and
(min-width: 481px)">


The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.

IE conditional comments
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="all and
(min-width: 481px)">


The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.

or use Respond.js
(a media query polyfill for IE)

#2
Keep CSS images
in their place
http://www.ﬂickr.com/photos/lintmachine/2306383943/

Images with display:none are still downloaded
[Other CSS rules are here]
.header {display:none;}
}

it
s.jpg file is 440.7K making
The tap
.
the largest file on the page

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;

}
}


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>

This single iframe causes 47 files to be downloaded!

Extremely long URL abbreviated

.
.
.

are many more rules
There
in the css file.

#map {display:none;}
}

The iframe has an id of map. This rule hides
the Google Maps iframe by setting the
display to none.

In JS, use
matchMedia()
or a polyfill for
it to test a
media query

https://github.com/paulirish/matchMedia.js

AJAX Include Pattern
Use AJAX to bring more content into the page as the viewport width gets bigger

<a
href="articles/latest/"

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

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

Latest
Articles
</a>

https://github.com/ﬁlamentgroup/Ajax-Include-Pattern/

#4

Deliver different size <IMG>s
at different screen sizes

http://www.flickr.com/photos/kk/230544325/

One SRC to rule all images
n
r labels on the Og
There are 16 bee at use an img ta
ap Now page th the Bensons Bubbler.
T
e this one for
lik

Despite the need for multiple versions of this image depending on
the
screen size, HTML only allows one value for the src.

<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">

https://www.ﬂickr.com/photos/whitehouse/8491445521

Resolution Switching
Includes high-density (retina) images.

https://www.ﬂickr.com/photos/whitehouse/8491445521

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

Art direction

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

Responsive Images and Video

More Related Content

What's hot

Similar to Responsive Images and Video

More from Jason Grigsby

Recently uploaded

Responsive Images and Video