See the Mobile page for some background.

Current status: Work being done in the responsive branch. See the issues here.

Responsive design reading

Apparently one of the first blog articles about this, written by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/

For background, the article references two articles about flexible layouts:
http://www.alistapart.com/articles/fluidgrids/ (using em to set text sizes and % to set margins and max-widths)
and
http://unstoppablerobotninja.com/entry/fluid-images (sizing images down instead of breaking layout, kinda hacky in IE)

Ethan has a book I just ordered http://www.abookapart.com/products/responsive-web-design

More recent article on MSDN (November 2011):
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

The main takeaways are:

  • Use a fluid layout, not absolute widths, margins, font size, etc
  • Media queries let you use different CSS based on things like viewport widths
  • Fully supported by everyone except IE 8 and older (doesn’t matter much, but can use JS to fix this if needed)
  • Use CSS to lay things out better for very small (or very large) screens, including typography
  • Some mobile browsers will fake the viewport size, so to reset this add:
    • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • In the near future, keep an eye on media query listeners, which let you load totally different assets based on these queries.
Add tags