responsive images and video
DESCRIPTION
Presented at Velocity Conference NYC in October 2013 Most responsive designs are slow and bloated. The biggest issues areTRANSCRIPT
![Page 1: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/1.jpg)
Responsive Imagesand Video
Jason Grigsby • @grigs • cloudfour.com
![Page 2: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/2.jpg)
Follow along at @grigs_talks
http://bit.ly/grigs-2013-10-13
![Page 3: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/3.jpg)
The web has always been a balancing act…
http://www.flickr.com/photos/classblog/5136926303
![Page 4: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/4.jpg)
with many competing priorities.
http://www.flickr.com/photos/tudor/4324056624/
![Page 5: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/5.jpg)
Finding that balance is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
![Page 6: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/lyza/7382235106
as device diversity increases.
![Page 7: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/darrentunnicliff/4232232092/
Responsive web design offers us
for a sensible way to deal with device diversity.
![Page 8: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/8.jpg)
And yet the one question I frequently ask myself is…
![Page 9: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/9.jpg)
Can a one size #ts all solution…
http://www.flickr.com/photos/sldghmmr/6041481069
![Page 10: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/10.jpg)
compete with a tailored experience?http://www.flickr.com/photos/helloturkeytoe/4932748746/
![Page 11: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/11.jpg)
Context
Advertising
Performance
Important question from many perspectives:
Search engine optimization
![Page 12: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/12.jpg)
Search engine optimization
![Page 13: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/13.jpg)
Search engine optimization
![Page 14: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/14.jpg)
Search engine optimization
![Page 15: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/15.jpg)
Search engine optimization
![Page 16: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/16.jpg)
![Page 17: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/17.jpg)
![Page 18: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/18.jpg)
![Page 19: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/19.jpg)
![Page 20: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/20.jpg)
![Page 21: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/21.jpg)
http://www.flickr.com/photos/brunauto/5062644167/
What about mobile context?
![Page 22: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/22.jpg)
80% during misc downtime
76% while waiting in lines
86% while watching TV
69% for point of sale research
http://www.flickr.com/photos/carbonnyc/5140154965
![Page 23: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/23.jpg)
TMI
![Page 24: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/24.jpg)
39% use phone on toilet
![Page 25: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/sh1mmer/2510487525
Advertising?
![Page 26: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/26.jpg)
![Page 27: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/27.jpg)
PERFORMANCE
![Page 28: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/28.jpg)
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites.
![Page 29: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/29.jpg)
Log In Subscribe Basket Contact Us i am looking for...
67% of consumers cite slowwebsites as the main cause ofbasket abandonment
Daily Pulse NewsletterGet our free Daily Pulse Newsletter tokeep informed about the latest news andinsights 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 surveyhighlights just how damaging a slow site can be to the userexperience.
The study by Brand Perfect found that two thirds of UKconsumers (67%) cite slow loading times as the main reasonthey would abandon an online purchase.
It’s a topic we’ve looked at in more detail in our post 'Sitespeed: case studies, tips and tools for improving your conversion rate', with stats showing thatslow loading websites are losing businesses up to £1.73bn a year.
Privacy and cookie policy
Home / Blog
Subscribe Reports Training Events Jobs Blog More Browse by topic
Like 14 ShareShare 20
Slow sites mean real dollars are lost.
![Page 30: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/30.jpg)
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/
![Page 31: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/31.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that their network is slow.
![Page 32: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/32.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
![Page 33: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/33.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Many ways to navigate desktop web sites on mobile.
![Page 34: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that can make a web site faster.
![Page 35: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/35.jpg)
http://www.flickr.com/photos/nathaninsandiego/4829858186/
![Page 36: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/wesbrowning/5316400258/
![Page 37: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/37.jpg)
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG: Before Boston Globe
![Page 38: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/38.jpg)
![Page 39: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/39.jpg)
![Page 40: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/40.jpg)
![Page 41: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/41.jpg)
![Page 42: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/42.jpg)
![Page 43: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/43.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
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
![Page 44: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/44.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
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
![Page 45: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/45.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
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%
![Page 46: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/46.jpg)
The resounding answer from the community:
Mobile First Responsive Web Design
![Page 47: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/47.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
![Page 48: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/48.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
![Page 49: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/49.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
Famous last words.
![Page 50: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/50.jpg)
9%4%
21%
38%
4%
25%Mobile is LargerSame SizeLess than 10% Savings11 to 50% Savings51% to 100% SavingsGreater 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/
![Page 51: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/51.jpg)
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested
![Page 52: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/52.jpg)
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
![Page 53: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/53.jpg)
![Page 54: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/54.jpg)
![Page 55: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/55.jpg)
![Page 56: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/56.jpg)
![Page 57: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/57.jpg)
http://www.flickr.com/photos/beautyredefined/2643858323/
![Page 58: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/58.jpg)
http://www.flickr.com/photos/puuikibeach/3654517679
![Page 59: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/59.jpg)
Most responsive web designs are…
![Page 60: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/60.jpg)
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
![Page 61: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/61.jpg)
![Page 62: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/62.jpg)
![Page 63: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/63.jpg)
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
![Page 64: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/64.jpg)
5 key techniques for responsible responsive design
![Page 65: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/65.jpg)
http://www.flickr.com/photos/auyongcheemeng/95769332/
#1 Build Mobile First Responsive Designs
![Page 66: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/66.jpg)
http://www.flickr.com/photos/localcelebrity/4831362933/
Different than Mobile First Design Theory
![Page 67: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/67.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design is a technical approach for responsive designs.
![Page 68: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/68.jpg)
/* 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
Keep basic styles outside of media queries.
![Page 69: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/69.jpg)
![Page 70: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/70.jpg)
The absence of support for media queries is in fact
the #rst media query.
—Bryan Rieger, Yiibu
“
”
![Page 71: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/71.jpg)
![Page 72: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/72.jpg)
IE8 and below don’t support media queries.
![Page 73: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/73.jpg)
![Page 74: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/74.jpg)
![Page 75: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/75.jpg)
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?
![Page 76: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/76.jpg)
<link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href="layout.css" media="all" /><![endif]-->
The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file.
IE conditional comments
![Page 77: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/77.jpg)
<link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href="layout.css" media="all" /><![endif]-->
The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file.
IE conditional comments
or use Respond.js(a media query poly!ll for IE)
![Page 78: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/78.jpg)
http://www.flickr.com/photos/lintmachine/2306383943/
#2
Keep CSS images in their place
![Page 79: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/79.jpg)
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
![Page 80: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/80.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 81: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/81.jpg)
<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; }}
Images scoped within media queries
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 82: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/82.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<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; }}
display:none on parent element
![Page 83: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/83.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<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'); }}
Image override with a media query
![Page 84: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/84.jpg)
http://www.flickr.com/photos/lyza/7382255242/
#3 Conditionally load JS based on screen size and capabilities
![Page 85: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/85.jpg)
@media screen and (max-width:480px) { . . . #map {display:none;}}
There are many more rules in the css file.
The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none.
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 abbreviatedThis single iframe causes 47 files to be downloaded!
![Page 86: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/86.jpg)
https://github.com/paulirish/matchMedia.js
In JS, use matchMedia() or a poly!ll for it to test a media query
![Page 87: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/87.jpg)
<a href="articles/latest/"
data-‐append="articles/latest/fragment"
data-‐media="(min-‐width: 30em)">
Latest Articles
</a>
AJAX Include Pattern
https://github.com/filamentgroup/Ajax-Include-Pattern/
Use AJAX to bring more content into the page as the viewport width gets bigger
![Page 88: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/88.jpg)
Behavioral Breakpoints
![Page 89: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/89.jpg)
http://www.flickr.com/photos/kk/230544325/
#4 Deliver different size <IMG>s at different screen sizes
![Page 90: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/90.jpg)
One SRC to rule all images
<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 the screen size, HTML only allows one value for the src.
![Page 91: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/91.jpg)
Two most common use cases
![Page 92: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/92.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
![Page 93: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/93.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes high-density (retina) images.
![Page 94: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/94.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 95: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/95.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 96: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/96.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 97: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/97.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 98: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/98.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 99: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/99.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 100: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/100.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 101: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/101.jpg)
Not simply cropping
![Page 102: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/102.jpg)
Art direction: Images with textSign In Account Get Email Español Shopping Bag
FeaturesNew ArrivalsShow Off TeesBackpacksTech Toys2/$30 & 2/$40 PINK FavoritesSpin the Panty Wheel
TopsAll TopsHoodies & CrewsTees & Tanks
BottomsAll BottomsSweatsShortsYoga
PINK Loves Yoga
Panties5/$26 Styles3/$33 StylesShop by Style
BrasAll BrasBandeaus & Bralettes2/$42 Wear Everywhere BrasBras 101
Swim
Search
![Page 103: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/103.jpg)
No good solutions
![Page 104: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/104.jpg)
Things are still moving forward on a standards-based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
![Page 105: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/105.jpg)
New proposed standards
<picture> srcset src-n
Too early to use any of them
![Page 106: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/106.jpg)
![Page 107: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/107.jpg)
<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" data-‐media="(min-‐width: 400px)"></div>
<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>
<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></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>
Picture#ll JavaScript Library
https://github.com/scottjehl/picturefill
![Page 108: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/108.jpg)
#5 Handle high-density images carefully
![Page 109: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/109.jpg)
A single image on multiple screens
![Page 110: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/110.jpg)
Image Resolution
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
320x181480x271
960x541 909x512
1818x1024
![Page 111: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/111.jpg)
Image Resolution
3,214% bigger
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
320x181480x271
960x541 909x512
1818x1024
![Page 112: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/112.jpg)
Apple.com as an anti-patternDo
wnlo
ads
both
sta
ndar
d an
d re
tina
imag
es
The total size of the page
goes from 502.90K to
2.13MB when the retina
versions of images are
downloaded.
http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
![Page 113: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/113.jpg)
@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);
}
}
If possible, use CSS for now
![Page 114: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/114.jpg)
![Page 115: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/115.jpg)
Picture#ll User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
![Page 116: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/116.jpg)
Compressive images?
http://blog.netvlies.nl/design-interactie/retina-revolution/
![Page 117: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/117.jpg)
Responsive Video
![Page 118: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/118.jpg)
http://www.longtailvideo.com/html5/
How do you provide the right video codec?
![Page 119: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/119.jpg)
<video width="640" height="360" controls> <!-‐-‐ MP4 must be first for iPad! -‐-‐> <source src="__VIDEO__.MP4" type="video/mp4" /><!-‐-‐ Safari / iOS video -‐-‐> <source src="__VIDEO__.OGV" type="video/ogg" /><!-‐-‐ Firefox / Opera / Chrome10 -‐-‐> <!-‐-‐ fallback to Flash: -‐-‐> <object width="640" height="360" type="application/x-‐shockwave-‐flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object></video><p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a></p>
http://camendesign.com/code/video_for_everybody
Multiple sources with Flash Fallback
![Page 120: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/120.jpg)
How do you maintain the aspect ratio of video?• This is mostly a problem if you’re embedding video from a third
party site. If you are using your own video, it is not usually an issue.
• For third party video, FitVid.js is a good place to start.
• For your own video, the only trick is making sure you’re not changing the proportions of the video element as the page resizes.
![Page 121: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/121.jpg)
![Page 122: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/122.jpg)
![Page 123: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/123.jpg)
How do you send the right resolution and quality?
![Page 124: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/124.jpg)
http://www.longtailvideo.com/html5/
How do you send the right resolution and quality?
![Page 125: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/125.jpg)
You will need a video streaming service.
![Page 126: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/126.jpg)
http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
If I could dream up my ideal solution for images…
![Page 127: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/127.jpg)
Eights guidelines and one immutable rule
![Page 128: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/128.jpg)
#1 Use vector-based images or font icons whenever you can
![Page 129: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/129.jpg)
IcoMoon App Premium Icons Font CDN
A Few Testimonials
Browse 3800+ Free Vector Icons
Import Your Own Vectors toMake Fonts
Generate Custom & Crisp IconFonts
Generate CSS Sprites with anysize or color
Basic Glyph Editing
1200+ Vector Icons & Counting
Handcrafted on a 16×16 grid
Several Different Formats
Optimized for Icon Fonts
Free Updates
Serve Custom-Built Fonts
Powered by Amazon WebServices
Easily Update Your Icon Fonts
Production (Cached) Links
Starting at $1.60/Month
IcoMoonIcoMoonCustom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About
![Page 130: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/130.jpg)
/' // . // |\//7 /' " \ . | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | // | \ /|VV ||--\__________/-||-/| || || || || { } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?
With special guest, Eric Pontouniconkey head drawn by R.B.Cleary in 1995
Grumpicon.com based on Grunticon
![Page 131: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/131.jpg)
![Page 132: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/132.jpg)
#2 Encourage people to upload the highest quality source possible
![Page 133: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/133.jpg)
#3 Provide an automatic image resizing and compression service
![Page 134: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/134.jpg)
Example from Sencha IO SRC. De!ne height, width or both.
<img src="http://src.sencha.io/320/http://sencha.com/files/u.jpg" alt="My constrained image"/>
#4 Images can be resized to any size with URL parameters
![Page 135: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/135.jpg)
![Page 136: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/136.jpg)
“Save for the Web” should be a thing of the past.
—@adamdbradley
“
”
![Page 137: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/137.jpg)
<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" data-‐media="(min-‐width: 400px)"></div>
<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>
<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></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>
#5 Provide automated output of PictureFill or alternative
![Page 138: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/138.jpg)
{"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
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.
![Page 139: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/139.jpg)
#6 Provide a way to override resized images for art direction needs
![Page 140: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/140.jpg)
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
learn from mod_pagespeed or use it
#7 Integrate image compression best practices
![Page 141: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/141.jpg)
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.
#8 Bonus: Detect support for WebP image format and use it
![Page 142: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/142.jpg)
Plan for the fact that it will be deprecated. Make it easy to change.
#! The only rule for your responsive images implementation.
![Page 143: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/143.jpg)
It’s three years later. Let’s revisit the my original question.
![Page 144: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/144.jpg)
Can a one size #ts all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
![Page 145: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/145.jpg)
compete with a tailored experience?http://www.flickr.com/photos/fronx/2862975043
![Page 146: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/146.jpg)
http://www."ickr.com/photos/haddadi/5971508861
Or will it always be TOO BIG?
![Page 147: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/147.jpg)
Unlikely responsive design will ever be as fast as something crafted speci#cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
![Page 148: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/148.jpg)
But web design is a balancing act.
http://www.flickr.com/photos/kalexanderson/6266452817
![Page 149: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/149.jpg)
And performance is just one factor.
![Page 150: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/150.jpg)
Flickr: Uploaded February 11, 2007 by hawridger
For most projects, responsive design can be fast enough to make sense…
![Page 151: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/151.jpg)
if we do the extra work to make mobile #rst responsive designs.
![Page 152: Responsive Images and Video](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c7bdf14a7959f0488b4595/html5/thumbnails/152.jpg)
Thank You!Special thanks to Scott Jehl, Guy Podjarny, and all of the
Flickr users sharing under creative commons.
Slides: http://bit.ly/grigs-2013-10-13