introduction to responsive web design
DESCRIPTION
A brief introduction to responsive web design presented to Biomedical Communications (MScBMC) students on March 15, 2013.TRANSCRIPT
“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/