introduction to responsive web design

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.” – John Allsop, "A Dao of Web Design"

http://alistapart.com/article/dao

http://www.english.utoronto.ca/Page4.aspx

Responsive: http://www.microsoft.com/en-ca/default.aspx

Not responsive:

Front-end ingredients for RWD:1. Flexible grid2. Flexible media3. Media queries

http://alistapart.com/article/responsive-web-design

Instead of pixels, use proportional units:h1 {font-size: 1.5 em} Exercise: rwd_flexTypeSTART.html, rwd_snippets.html

Flexible Grid

target ÷ context = result eg. 24px ÷ 16px = 1.5em• Also applies to grid dimension• Can avoid context considerations with remsExercise: rwd_miniFlexGridDemoSTART.html, snippets.html

http://aralbalkan.com/notes/pixel-parity-rems/

Flexible Grid

img, embed, object, video {max-width: 100%}Exercise: rwd_miniFlexGridDemoSTART.html, snippets.html

github.com/filamentgroup/Responsive-Images/

Flexible Media

Image considerations: Scaling vs. large downloads1. Serve as a background-image and swap at

break-points2. Use image.js to serve the appropriate size

image

github.com/filamentgroup/Responsive-Images/

Flexible Media

“At some point everything breaks.” – Ethan Marcotte, “Responsive Web Design”

• Media queries are used to solve breakpoints• Responsive websites usually have at least 3

breakpoints• Trend is towards device agnosticismExercise (open in Google): http://bradfrost.github.com/this-is-responsive

Media Queries

@media screen and (min-width: 1024px) { body{font-size = 100%} }

Syntax:• media type• keyword• 1+ expression

http://www.w3.org/TR/CSS2/media.htmlhttps://developer.mozilla.org/en/docs/CSS/Media_queries#Media_features

Media Queries

https://developer.mozilla.org/en/docs/CSS/Media_queries#Media_features

Media Queries

https://github.com/scottjehl/Respondhttp://caniuse.com/#search=media%20queries

Media Queries

• “Mobile first”, work up from smallest target device

• Design to look right, not for the device size• Test, redesign, test, rinse, repeat:

• Test user-defined breakpoints: http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

• Test preset breakpoints: http://www.responsinator.com/• Test with animated preset breakpoints:

http://responsive.is/typecast.com• This test comes with measurement bars: http://screenqueri.es/

Design Advice

Maybe RWD is not right for you, but fixed-width is no longer viable.

• RWD is Google and Bing’s recommended configuration• Responsive e-commerce sites see 333% transactions• RWD is in-line with W3C goal of “One Web”

http://www.lukew.com/ff/entry.asp?1509http://googlewebmastercentral.blogspot.ca/2012/06/recommendations-for-building-smartphone.htmlhttp://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/http://www.w3.org/TR/mobile-bp/#OneWeb

Final Thoughts

Recommended reading• http://alistapart.com/article/responsive-web-

design• "Responsive Web Design” by Ethan Marcotte

Useful Resources• A px to em math tool: http://pxtoem.com/• Responsive grid resources: • http://goldengridsystem.com/• http://www.responsivegridsystem.com/• http://foundation.zurb.com/• http://twitter.github.com/bootstrap/• http://www.tinyfluidgrid.com/