3. Responsive Web Design
I wrote this book.
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740
Wednesday, May 29, 13
4. Responsive Web Design
What we’ll be going over
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
8. Responsive Web Design
The BIG secret!
normal CSS
normal CSS
normal CSS
breakpoint (media query)
breakpoint (media query)Stuff at the
bottom
Overwrites
stuff at the
top
Wednesday, May 29, 13
10. Responsive Web Design
Rules of Responsive Design
• Don’t call it “mobile”
• Treat it as 1 site
• Don’t target devices
• Don’t remove content for small screens
• Think in terms of features (touch vs. no touch)
• Always remember bandwidth
• Consider the strategy from the start
• Recognize when it isn’t the answer.
Wednesday, May 29, 13
11. Responsive Web Design
02Media Queries & breakpointsHoly sh*t, stop using iPhone dimensions...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
12. Responsive Web Design
The Media Query
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
media type media feature
normal CSS
Wednesday, May 29, 13
13. Responsive Web Design
The Media “Type”
• all
• screen
• print
• braille
• handheld
• projections
• tv
• aural (speech and sound synthesis)
Wednesday, May 29, 13
14. Responsive Web Design
The Media “Feature”
• min/max-width
• min/max-height
• orientation
• aspect-ratio (browser window)
• device-aspect-ratio (4/3,16/9)
• color-index
• resolution & min-resolution (dpi * dpcm)
• device pixel ratio
Wednesday, May 29, 13
15. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13
16. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13
17. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled
Wednesday, May 29, 13
18. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13
19. Responsive Web Design
Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)
Wednesday, May 29, 13
27. Responsive Web Design
03Design patternsOther people do things this way...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
28. Responsive Web Design
Navigation
• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• Toggle
• Left navigation flyout
• The “Hide and Cry”
Credit: Brad Frost
Wednesday, May 29, 13
37. Responsive Web Design
04Responsive ImagesLoading a image for a small screen? Eh.
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
42. Responsive Web Design
Bandwidth Testing
navigator.mozConnection.bandwidth
if(Manage.connection === “good”) {
// you have ample bandwidth
}
https://github.com/timwright12/js-asset-management
Wednesday, May 29, 13
43. Responsive Web Design
05Responsive JavaScriptGulp...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
44. Responsive Web Design
Responsive JavaScript
body:before {
content: “widescreen”;
position: absolute;
top: -9999px;
left: -9999px;
}
@media screen and (max-width:600px) {
content: “smallscreen”;
}
Wednesday, May 29, 13
45. Responsive Web Design
Responsive JavaScript
// set the initial screen size
var size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
// check the breakpoint on resize
window.addEventListener(“resize”, function(){
size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
if (size.indexOf(“smallscreen”) != -1) {
// do small screen JS
} else {
// do large screen JS
}
}, false);
Wednesday, May 29, 13
48. Responsive Web Design
06Responsive Design & the ServerLean on me... when you’re not strooooong... and I’ll be your friend...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
50. Responsive Web Design
RESS
In the browser On the server
• Screen size
• Orientation
• Design changes (CSS)
• Is mobile?
• Structural changes (HTML)
Wednesday, May 29, 13
53. Responsive Web Design
RESS
?
Insert call button
& use native
datepicker
Async load jQuery UI &
date picker base CSS
YES!
NO!
Wednesday, May 29, 13
54. Responsive Web Design
RESS
What is the window size? Is touch available?
• Answered with media
queries
• No - Do nothing
• Yes - Async load touch
interactions (swiping)
Wednesday, May 29, 13
55. Responsive Web Design
What we went over
• Progressive Enhancement
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
Wednesday, May 29, 13
57. Responsive Web Design
Articles
• Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
• Guidelines for Responsive Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• Design Process in a Responsive Age
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
• Adaptive vs. Responsive Design
http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/
• Responsive Design is more than breakpoints
http://inspectelement.com/articles/responsive-web-design-is-so-more-than-just-a-few-
breakpoints/
Wednesday, May 29, 13
58. Responsive Web Design
Tools & Plugins
• Picturefill
https://github.com/scottjehl/picturefill
• FitVids
http://fitvidsjs.com/
• RespondJS
https://github.com/scottjehl/Respond
• Testing a Responsive Site
http://mattkersley.com/responsive/
• Multi-device layout patterns
http://www.lukew.com/ff/entry.asp?1514
Wednesday, May 29, 13
59. Responsive Web Design
Folks on Twitter
• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad Frost, @brad_frost
• Luke Wroblewski, @lukew
Wednesday, May 29, 13
60. Responsive Web Design
A Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil
Wednesday, May 29, 13