8. 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) {...}
Friday, May 10, 13
9. 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) {...}
Friday, May 10, 13
15. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
Friday, May 10, 13
16. What Breakpoints to Use?
• Don’t think about devices
• “Make it look good”
• Something like 600px, 900px, max
Friday, May 10, 13
17. 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
Friday, May 10, 13
19. 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;
}
Friday, May 10, 13
20. 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;
}
Friday, May 10, 13
21. 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);
}
}
Friday, May 10, 13
25. Clean up some CSS
.article {
width: 31%;
min-width:250px;
}
#content .wrapper {
width:auto;
}
#page {
background:none;
}
Friday, May 10, 13
26. 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%;
}
}
Friday, May 10, 13
38. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
Friday, May 10, 13
39. Three Performance Goals:
1. Start with a small image
2. Upgrade to larger size without
downloading both
3. Unique image URLs (caching)
Friday, May 10, 13
40. • Resize on the fly
• Compress automatically
First Step: Automation
Friday, May 10, 13
48. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
Friday, May 10, 13
49. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
Friday, May 10, 13
50. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
• Supports all media queries
Friday, May 10, 13
51. HTML Output (picturefill)
• https://github.com/scottjehl/picturefill
• Mimics proposed <picture> element
• < 0.5K JS file
• Supports all media queries
• Works across all browsers
Friday, May 10, 13
52. <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="external/imgs/small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
Friday, May 10, 13
53. <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="external/imgs/small.jpg" alt="Interesting Image Alt Text">
</noscript>
</div>
IE 6, 7, 8 get this
Friday, May 10, 13
76. Find your favorite non-responsive site
Save the HTML locally
Friday, May 10, 13
77. Find your favorite non-responsive site
Save the HTML locally
Friday, May 10, 13
78. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Friday, May 10, 13
79. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Friday, May 10, 13
80. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Friday, May 10, 13
81. Find your favorite non-responsive site
Save the HTML locally
Add some media queries and a breakpoint
Make one retina image and use it
Friday, May 10, 13
83. • 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
Friday, May 10, 13
87. Recap
• Start with small sizes on new sites
• Use em’s and %’s
Friday, May 10, 13
88. Recap
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
Friday, May 10, 13
89. Recap
• Start with small sizes on new sites
• Use em’s and %’s
• ~3-4 device independent breakpoints
• Use Responsive Images
Friday, May 10, 13
90. Recap
• 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
Friday, May 10, 13