A Dao of Flexibility
November 2nd, 2010 by Matt Haff
Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition
“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.
Responsive Architecture
Moving from being unchanged spaces, to reshaping to accommodate for what the people need.
Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout?
The Flexible Grid
Grids have been used as long as print was in use. Grids began to pick up speed online, however they were all static widths…What we want is a flexible grid that works for any screen size.
body {font-size:100%} Which sets the default font size to 16px. Then using the formula Target / Context = Result (em).
Fluid Grids: Target / Context = Result (em)
Flexible Media
img {max-width:100%;} which keeps the image no bigger than the container that it goes inside of.
video, audio, object {max-width:100%;} which does the same for video, audio, anything…
This stuff works in everything except for IE 7 and below. Ways around that using proprietary css selectors from IE but I’m not gonna get into it 
Responsive Design
Changing the design based on the size of screen. This way you can serve the same website but if it is a smaller browser window then alter the layout to work better, or choose not to display it. See more about this here: Everything Old Is New Again
This works in Mobile WebKit and most modern browsers.
Patches to work around the older browsers here: http://code.google.com/p/css3-mediaqueries-js/
Is responsive design right for your project? Shared goals between contexts? If so then yeah it might be the right response… If not, then try it a different way.
