This document discusses responsive web design and provides tips for creating responsive sites. It covers progressive enhancement, flexible layouts using percentages instead of fixed widths, using media queries to apply styles for different screen sizes, responsive navigation techniques like toggles and flyouts, responsive images using the picture element or picturefill plugin, making video responsive with plugins like FitVid, and resources for further learning including books, articles, tools, and people to follow on Twitter.
4. What we’ll be going over
• Progressive Enhancement
• Flexible Layouts
• Media Queries
• Responsive Navigation
• Responsive Images & Video (Time permitting)
Responsive Web Design
5. 01 The Basics
Getting on the same page & responsive design basics
Responsive Web Design
8. Why & When of RWD
• +1 for Progressive Enhancement
• Single codebase
• Scales to multi-sites
• Less staff
• Less server overhead
• Better SEO
Responsive Web Design
9. Why & When of RWD
• What is “mobile” about this site?
• Do NOT do it just because it’s cool
Responsive Web Design
11. 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
• Seriously, don’t call it “mobile”
• Consider the strategy from the start
Responsive Web Design
15. The Media Query
media type media feature
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
applied styles
Responsive Web Design
16. The Media “Type”
• all
• screen
• print
• braille
• handheld
• projections
• tv
• aural (speech and sound synthesis)
Responsive Web Design
17. 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
Responsive Web Design
30. Navigation
• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• Toggle
• Left nav flyout (we’ll go through this later)
• The “Hide and Cry”
Responsive Web Design
51. 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/
Responsive Web Design
52. 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
Responsive Web Design
53. Folks on Twitter
• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad Frost, @brad_frost
• Luke Wroblewski, @lukew
Responsive Web Design
54. What we went over
• What?
• When?
• Why?
• How?
Responsive Web Design