Post on 27-Jan-2015
description
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/