19. Building blocks of RWD
/* Greater than 900px wide */
@media screen and (min-width: 56.25em) {...}
/* Retina Display */
@media screen and (min-device-pixel-ratio: 2) {...}
/* You can chain these */
@media screen and (min-width: 56.25em) and (min-
device-pixel-ratio: 2) {...}
Sunday, August 18, 13
20. Building blocks of RWD
/* Greater than 900px wide */
@media screen and (min-width: 56.25em) {...}
/* Retina Display */
@media screen and (min-device-pixel-ratio: 2) {...}
/* You can chain these */
@media screen and (min-width: 56.25em) and (min-
device-pixel-ratio: 2) {...}
Sunday, August 18, 13
26. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
Sunday, August 18, 13
27. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
• Something like 600px, 900px, max
Sunday, August 18, 13
28. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
• Something like 600px, 900px, max
• Divide by 16 to get em’s
Sunday, August 18, 13
30. Start With the Normal Version
/* Small version of the logo */
.logo {
background-image: url(logo_sm.png);
background-repeat: no-repeat;
background-position: center;
background-size: 230px 50px;
}
Sunday, August 18, 13
31. Start With the Normal Version
/* Small version of the logo */
.logo {
background-image: url(logo_sm.png);
background-repeat: no-repeat;
background-position: center;
background-size: 230px 50px;
}
Sunday, August 18, 13
32. High Res Screens
/* Provide a hi-res logo for retina screens */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background-image: url(logo_lg.png);
}
}
Sunday, August 18, 13
33. High Res Screens
/* Provide a hi-res logo for retina screens */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background-image: url(logo_lg.png);
}
}
Sunday, August 18, 13
37. Clean up some CSS
.article {
width: 31%;
min-width:250px;
}
#content .wrapper {
width:auto;
}
#page {
background:none;
}
Sunday, August 18, 13
38. Make it Responsive
/* Two articles across */
@media screen and (max-width: 850px) {
.article {
width: 46%;
}
}
/* One article across */
@media screen and (max-width: 530px) {
.article {
width: 90%;
}
}
Sunday, August 18, 13
51. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
Sunday, August 18, 13
52. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
3. Unique image URLs (caching)
Sunday, August 18, 13
66. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
Sunday, August 18, 13
67. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
Sunday, August 18, 13
68. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
• Supports all media queries
Sunday, August 18, 13
69. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
• Supports all media queries
• Works across all browsers
Sunday, August 18, 13
70. <div data-picture data-alt="Interesting Image Alt Text">
<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. Same img src as the initial,
unqualified source element. -->
<noscript>
<img src="small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
Sunday, August 18, 13
71. <div data-picture data-alt="Interesting Image Alt Text">
<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. Same img src as the initial,
unqualified source element. -->
<noscript>
<img src="small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
IE 6, 7, 8 get this
Sunday, August 18, 13
108. <img> with display:none Downloaded
<img> with parent
display:none
Downloaded
background image with
display:none
Downloaded
background image with
parent display:none
Not Downloaded
Sunday, August 18, 13
113. Handling display:none
• Start with an empty src, use JS
• Server side detection
• Lots more: http://timkadlec.com/
2012/04/media-query-asset-
downloading-results/
Sunday, August 18, 13
127. Find your favorite non-responsive site
Save the HTML locally
Sunday, August 18, 13
128. Find your favorite non-responsive site
Save the HTML locally
Sunday, August 18, 13
129. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Sunday, August 18, 13
130. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Sunday, August 18, 13
131. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Sunday, August 18, 13
132. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Sunday, August 18, 13
134. • Resize browser window, use console
when you want a breakpoint
• document.body.offsetWidth
• If you must start w/ desktop, use:
• @media screen and (max-width: 900px) {
Some Hints
Sunday, August 18, 13
142. Takeaways
• Start with small sizes on new sites
• Use em’s and %’s
Sunday, August 18, 13
143. Takeaways
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
Sunday, August 18, 13
144. Takeaways
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
• Use Responsive Images
Sunday, August 18, 13
145. Takeaways
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
• Use Responsive Images
• Have a fallback plan for IE
Sunday, August 18, 13