Get your webby stuff ready for iPad mania.
Building Towards Responsiveness
Rightfully deserved, Ethan Marcotte’s Responsive Web Design techniques are the latest buzz in front-end web development. Media Queries, of course, steal the show. When folks re-size a web browser and see the page actually adapt on a meaningful level that sure is something to admire.
However, the foundation that a Responsive Web Design requires is one of fluid grids and flexible images. These are best practices that developers should be using to lay out their web designs whether they are going to make use of newfangled media queries and adapt a wide variety of browsing environments or if they’re going to be ye olde static nine-sixty designs.
I now begin each development project, whether it will be responsive or not, with the foundation of flexible grids and flexible images. This groundwork for a responsive design gets put to use each and every time I start a project even if the website will ultimately be a static width (for whatever reason that might be).
The benefits, as I see them are thus:
Firstly, it’s a good way to familiarize yourself with the process of implementing fluid grids and flexible images. Although not exactly rocket science, it can be tricky to understand how percentages work with the cascade at first. The best way to get past that is to simply do it. The benefits of being comfortable with using percentages in context to layout a design is worth the initial frustration.
Secondly, there is better consistency across code. There’s just no reason to not develop with fluid grids and flexible images. Percentages work just as effectively whether I’m building an old-fashioned 960 pixel layout or building a shinny new responsive design. A huge benefit to myself, personally, is to not have to deal with flipping the cognitive switch back and forth between thinking in percentages and hard pixels.
Lastly, it streamlines process by better future proofing the design. Say your client gets a whiff of all this new fancy responsive designs being done and now they want that. You’re ready to go if you built everything with fluid grids and flexible images. You can jump in, write your media queries without have to retrofit the rest of the work.
Even if you haven’t made the jump to creating responsive web designs you should start incorporating the best practices right now. There is really no reason not to. Your process and your work will be better prepared for the future if you do.
