The document summarizes key techniques for responsible responsive web design, including building mobile-first responsive designs, keeping CSS images in their place, conditionally loading JavaScript based on screen size and capabilities, delivering different sized images at different screen sizes, and handling high-density images carefully. It also discusses debates around whether a one-size-fits-all responsive approach can compete with a tailored experience and ensuring responsive designs are optimized for performance.
16. What about
mobile context?
http://www.flickr.com/photos/brunauto/5062644167/
17. 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
33. Crap, that’s not what I was trying to do.
https://twitter.com/ldexterldesign/status/55229350299181057
34. What I meant to say:
The 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.
38. “Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
39.
40. Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
9%
4% 25%
21%
4%
38%
Mobile is Larger Same Size
Less than 10% Savings 11 to 50% Savings
51% to 100% Savings Greater than 100% Savings
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
41. Guy Podjarny repeated the experiment a year later.
347 sites from mediaqueri.es tested
3%
11%
86%
Same size A bit smaller Much smaller
A bit smaller = 50%-90% the size
Much smaller = <50% the size
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
45. Big site, big waterfall
1600x1200
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
46. Small site, big waterfall
320x480
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
47. 1398 elements
1402 elements
3491 nodes
3485 nodes
Simplicity
not reflected
in DOM
1600x1200 320x480
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
54. 5 key techniques
for responsible
responsive design
55. #1 Build Mobile First
Responsive Designs
http://www.flickr.com/photos/auyongcheemeng/95769332/
56. Different than
Mobile First
Design Theory
http://www.flickr.com/photos/localcelebrity/4831362933/
57. Mobile First Responsive Web Design
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
58. 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] M ove the mobile media query block
} above the desktop media query.
By doing this, we’re making S re
su
the cascading effect of CSfiris
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) { st
consistent with our mobile oach.
[Mobile layout rules here] progressive enhancement appr
}
Keep basic styles outside of media queries.
59. The absence of support for media
queries is in fact the first media query.
—Bryan Rieger, Yiibu
60. Oh come on IE. No love?
Because IE 8 and below don’t su
media queries, IE isn’t getting t pport
CSS rules that create columns. he
61. 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)">
<!--[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.
62. 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)">
<!--[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.
or use Respond.js
(a media query polyfill for IE)
63. #2 Keep CSS images
in their place
http://www.flickr.com/photos/lintmachine/2306383943/
64. Images with display:none are still downloaded
K making it
The taps.jpg file is 440.7 .
the largest file on the page
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
65. 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;
}
}
67. #3 Conditionally load JS based
on screen size and capabilities
http://www.flickr.com/photos/lyza/7382255242/
68. Hiding content with display:none does
not prevent it from downloading.
Look inside ontap.html to
find this code.
<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
taps.css
@media screen and (max-width:480px) {
.
les
. There are many more ru
. 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.
73. One SRC to rule all images
On
eer labels on thetag
There are 16 b hat use an img Despite the need for multiple versions of this image depending on
the
Tap Now page tr the Bensons Bubbler. screen size, HTML only allows one value for the src.
like this one fo
<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
74.
75.
76.
77.
78. Things are still moving forward on a standards-
based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
81. Add more on the questions we still need to answer.
82. Picturefill JavaScript Library
<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>
https://github.com/scottjehl/picturefill
83. Regardless of the img technique you choose,
Plan to deprecate it when standards
catch up with responsive images.
85. Downloads both standard and retina images Apple.com as an anti-pattern
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/
86. If possible, use CSS for now
<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>
99. For most projects,
responsive design can be fast
enough to make sense…
Flickr: Uploaded February 11, 2007 by hawridger
100. if we do the extra work
to make mobile first
responsive designs.
101. Thank You!
Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users
sharing under creative commons.
Jason Grigsby • @grigs
jason@cloudfour.com
Slides: bit.ly/mf-rwd
http://www.flickr.com/photos/sualk61/4083223760/