Mobile First Responsive Design
-
Upload
jason-grigsby -
Category
Technology
-
view
11.757 -
download
3
description
Transcript of Mobile First Responsive Design
![Page 1: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/stuart-dootson/4024407198
Jason Grigsby • @grigs • [email protected]
Mobile First Responsive Design
![Page 2: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/2.jpg)
Follow along@grigs
Slides: bit.ly/mf-rwd
http://www.flickr.com/photos/stevegarfield/4247757731/
![Page 3: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/3.jpg)
!e web has always been a balancing act…
http://www.flickr.com/photos/classblog/5136926303
![Page 4: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/4.jpg)
with many competing priorities.
http://www.flickr.com/photos/tudor/4324056624/
![Page 5: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/5.jpg)
Finding that balance is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
![Page 6: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/6.jpg)
as device diversity increases.http://www.flickr.com/photos/lyza/7382235106
![Page 7: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/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: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/8.jpg)
And yet the one question I frequently ask myself is…
![Page 9: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/9.jpg)
Can a one size $ts all solution…
http://www.flickr.com/photos/sldghmmr/6041481069
![Page 10: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/10.jpg)
compete with a tailored experience?http://www.flickr.com/photos/helloturkeytoe/4932748746/
![Page 11: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/11.jpg)
Important question from many perspectives:
![Page 12: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/12.jpg)
Important question from many perspectives:
Search engine optimization
Context
Advertising
Performance
![Page 13: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/13.jpg)
Search engines?
![Page 14: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/14.jpg)
![Page 15: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/15.jpg)
![Page 16: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/brunauto/5062644167/
What about mobile context?
![Page 17: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/17.jpg)
80% during misc downtime
76% while waiting in lines
62% while watching TV
69% for point of sale research
http://www.flickr.com/photos/missmeng/5327470961
![Page 18: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/18.jpg)
TMI: 39% use phone on the toilet.
![Page 19: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/19.jpg)
http://www.flickr.com/photos/sh1mmer/2510487525
Advertising?
![Page 20: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/20.jpg)
![Page 21: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/21.jpg)
Performance?
![Page 22: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/22.jpg)
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
![Page 23: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/23.jpg)
http://velocityconf.com/velocity2009/public/schedule/detail/7709
Shopzilla improves load time 5 seconds
![Page 24: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/24.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
![Page 25: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/wesbrowning/5316400258/
![Page 26: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/26.jpg)
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG: Before Boston Globe
![Page 27: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/27.jpg)
![Page 28: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/28.jpg)
![Page 29: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/29.jpg)
![Page 30: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/30.jpg)
![Page 31: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/31.jpg)
![Page 32: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/32.jpg)
Original Resized K Saved % Saved
Holmes 34.7K 8.1K 26.6K 76.6%
Watson 39.0K 8.4K 30.6K 78.4%
Mycroft 30.5K 6.7K 23.8K 78.0%
Moriarty 43.4K 8.2K 35.2K 81.1%
Adler 26.0K 6.6K 19.4K 74.6%
Winter 34.7K 7.8K 26.9K 77.5%
Total 208.3K 45.8K 162.5K 78.0%
Media Queries Hide Problems
![Page 33: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/33.jpg)
https://twitter.com/ldexterldesign/status/55229350299181057
Crap, that’s not what I was trying to do.
![Page 34: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/34.jpg)
!e way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.
What I meant to say:
![Page 35: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/35.jpg)
!e resounding answer from the community:Mobile First Responsive Web Design
![Page 36: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/36.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
![Page 37: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/37.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
![Page 38: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/38.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
Famous last words.
![Page 39: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/39.jpg)
![Page 40: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/40.jpg)
9%4%
21%
38%
4%
25%
Mobile is Larger Same SizeLess than 10% Savings 11 to 50% Savings51% 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/
![Page 41: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/41.jpg)
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
3%11%
86%
Same size A bit smaller Much smaller
Guy Podjarny repeated the experiment a year later.347 sites from mediaqueri.es tested
A bit smaller = 50%-90% the sizeMuch smaller = <50% the size
![Page 42: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/42.jpg)
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
![Page 43: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/43.jpg)
![Page 44: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/44.jpg)
!ankfully Guy took the tests further…
![Page 45: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/45.jpg)
1600x1200
Big site, big waterfall
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
![Page 46: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/46.jpg)
320x480
Small site, big waterfall
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
![Page 47: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/47.jpg)
320x4801600x1200
Simplicitynot re"ected in DOM
1402 elements3485 nodes
1398 elements3491 nodes
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
![Page 48: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/48.jpg)
http://www.flickr.com/photos/beautyredefined/2643858323/
![Page 49: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/puuikibeach/3654517679
![Page 50: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/50.jpg)
Most responsive web designs are…
![Page 51: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/51.jpg)
Time to pen another fool’s gold post?http://www.flickr.com/photos/myklroventine/3400040943/
![Page 52: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/52.jpg)
![Page 53: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/53.jpg)
https://twitter.com/scottjehl/status/243025352069349377
![Page 54: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/54.jpg)
5 key techniques for responsible responsive design
![Page 55: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/55.jpg)
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First Responsive Designs#1
![Page 56: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/localcelebrity/4831362933/
Different than Mobile First Design !eory
![Page 57: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/57.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
![Page 58: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/58.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 59: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/59.jpg)
!e absence of support for media queries is in fact the "rst media query.
—Bryan Rieger, Yiibu
![Page 60: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/60.jpg)
Oh come on IE. No love?
Because IE 8 and below don’t support media queries, IE isn’t getting the CSS rules that create columns.
![Page 61: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/61.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 62: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/62.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 63: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/63.jpg)
http://www.flickr.com/photos/lintmachine/2306383943/
Keep CSS images in their place#2
![Page 64: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/64.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 65: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/65.jpg)
Put CSS images inside media queries to prevent extra downloads
@media screen and (min-width:481px){ .header { background:URL('images/taps.jpg') repeat-x; height: 300px; }}
![Page 66: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/66.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 67: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/67.jpg)
Conditionally load JS based on screen size and capabilities#3
http://www.flickr.com/photos/lyza/7382255242/
![Page 68: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/68.jpg)
<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!
Look inside ontap.html to find this code.
@media screen and (max-width:480px) { . . . #map {display:none;}}
taps.css
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.
![Page 69: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/69.jpg)
https://github.com/paulirish/matchMedia.js
![Page 71: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/71.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/
![Page 72: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/72.jpg)
http://www.flickr.com/photos/kk/230544325/
Deliver different size <IMG>s at different screen sizes#4
![Page 73: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/73.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 74: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/74.jpg)
![Page 75: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/75.jpg)
![Page 76: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/76.jpg)
![Page 77: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/77.jpg)
![Page 78: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/78.jpg)
!ings are still moving forward on a standards-based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
![Page 80: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/80.jpg)
Add more on current status of spec.
![Page 81: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/81.jpg)
Add more on the questions we still need to answer.
![Page 82: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/82.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 83: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/83.jpg)
Regardless of the img technique you choose,Plan to deprecate it when standards
catch up with responsive images.
![Page 84: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/84.jpg)
Handle high-density images carefully#5
![Page 85: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/85.jpg)
Apple.com as an anti-patternDo
wnlo
ads
both
sta
ndar
d an
d re
tina
imag
es !e 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 86: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/86.jpg)
<style>#main {
background-size: 400px 250px;}@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);}
}</style>
If possible, use CSS for now
![Page 87: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/87.jpg)
div.dog {background-image: -webkit-image-set(url(dog.jpg) 1x,
url(dog-hi-res.jpg) 2x);}
CSS image-set new proposed spec
![Page 88: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/88.jpg)
![Page 89: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/89.jpg)
Picture"ll User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
![Page 90: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/90.jpg)
Large JPEGs with Low Quality Settings?
http://blog.netvlies.nl/design-interactie/retina-revolution/
![Page 91: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/91.jpg)
QUICK
CONCAT
ENHANCE
SOUTHSTREETECS
SENTIAL
PICTUREFI
LL
AJAXINCLUDE
WRAP
https://github.com/filamentgroup/Southstreet
![Page 92: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/92.jpg)
It’s two years later. Let’s revisit the my original question.
![Page 93: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/93.jpg)
Can a one size $ts all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
![Page 94: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/94.jpg)
compete with a tailored experience?http://www.flickr.com/photos/fronx/2862975043
![Page 95: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/95.jpg)
Or will we always end up with something that is too big?
http://www.flickr.com/photos/haddadi/5971508861
![Page 96: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/96.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 97: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/97.jpg)
But web design is a balancing act.
http://www.flickr.com/photos/kalexanderson/6266452817
![Page 98: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/98.jpg)
And performance is just one factor.
![Page 99: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/99.jpg)
Flickr: Uploaded February 11, 2007 by hawridger
For most projects, responsive design can be fast enough to make sense…
![Page 100: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/100.jpg)
if we do the extra work to make mobile $rst responsive designs.
![Page 101: Mobile First Responsive Design](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b782a84a79591f6f8b45c9/html5/thumbnails/101.jpg)
Jason Grigsby • @[email protected]: bit.ly/mf-rwd
!ank You!Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users sharing under creative commons.
http://www.flickr.com/photos/sualk61/4083223760/