A First Look at Responsive Web Design
The challenge of building websites that accommodate the many types of web-enabled devices is formidable. Building websites for each specific device or device category (tablet, smartphone) is an unsustainable option. What's a designer of educational websites to do?
Welcome to the world of Responsive Web Design (RWD) — a new and evolving approach to building sites. Through the strategies and tactics of RWD, a single site can be built to provide a consistent experience within the context of any web-enabled device — desktop, laptop, tablet, mobile, and beyond.
Originally coined by designer and developer Ethan Marcotte, the core concept behind RWD is built on a "cocktail" of three technical web design tactics. They are:
- Fluid Grids - All information, navigation, and interface elements positioned on a screen should have sizes expressed as relative units (percentages or ems) rather than fixed units (pixels or points).
- Media Queries - Different styles (via CSS) should be applied based on the unique characteristics of the device (especially browser width).
- Flexible Media - Like fluid grids, images and other media types should also have relative sizes in order to resize proportionally to the "push and pull" of the device's browser.
Put all three of these recommendations together and you can see a demonstration of Marcotte's RWD idea in action:
However, as practical and compelling as RWD is as a solution to the multiple device problem is, it is still not a magic bullet just yet. Standards and workflows are still evolving and web designers are being forced to unlearn old habits. Reverse engineering an old site to meet RWD standards can be a frustrating and time-consuming endeavor. Also, a site built with RWD in may still not even replace the need for a solution like an independent mobile app developed in iOS or Android.
Fortunately, a lot of smart people have already been working hard and have produced many handy resources out there to help you jumpstart your next project with RWD in mind. A small handful of these resources include:
- Foundation: http://foundation.zurb.com
- Skeleton: http://www.getskeleton.com
- Bootstrap: http://twitter.github.com/bootstrap/
Unlike many other web design trends and fads that have come and gone, the recent hype around RWD is justified as it will fundamentally change the way the web is being created — and will be created. For further reading, see these links:
- Marcotte's original article
- Marcotte's new book
