As far as development trends go, responsive design is as new as they get. So it’s probably worth me spending a few minutes to define this emergent philosophy.

Responsive design is an elegant solution to the many-medium problem. As developers, we’ve had to struggle for years to get our designs to render consistently across browsers. The days of 800×600 were superseded by the days of 1024×768, and people still complained when our design failed to fill out the 2000-pixel width of a high-resolution monitor. “There’s so much empty space!” It turns out that era was one of luxury—today, we have to consider how our design renders across multiple devices, not just browsers.

When mobile devices evolved competent browsing capability, the answer was clear: We only need one web. That mindset has always carried an asterisk: though your phone can display a website the same way it looks on your laptop, it doesn’t look pretty—and, the people who use your website on a mobile device will still prefer an optimized version most of the time (yes, people are starting to expect viewport-optimization).

Unfortunately, the many-web alternative isn’t much better. Early attempts at mobile web optimization used convoluted conditional code to accomplish their goal. It was an absolute mess to maintain and didn’t always work. A more recent attempt, the mobile app, can hit a relatively wide audience but also carries a hefty development price tag. Web developers need a middle ground.

Enter responsive design

At its heart, responsive design is about composing a flexible layout with fluid grids and using media queries to make tactical adjustments.

Traditional web layouts are static. You can resize your viewport all day and the only thing that will change is where the content is centered to. Flexible layouts use percentages to calculate appearance, getting wider or thinner depending on the browser. Developers may mix in a max-width and min-width as the extremes of the design still looking okay. Responsive design lets us go beyond max-width and min-width: We can tell the browser to display alternative styling when the viewport hits certain thresholds.

For example, take a look at colly.com, the homepage of Simon Collison (a UK-based designer). Here’s a screenshot of Collison’s high-resolution display.

Drop the width a bit and you get these layouts:

Whoa! That responsiveness is elegant.

(Note: The advantage of a grid-based system, in this case, is to make the layout more predictable.)

For more on responsive design basics, including some simple examples of media queries, read Ethan Marcotte’s article on A List Apart.

One major drawback

Responsive design philosophy carries one major drawback: it does not consider use context. Though the fluid/flexible approach does provide a better presentation experience on mobile devices, it ignores the context of environment. For example, someone browsing a bus website (like cata.org) from their phone is unlikely to be leisurely skipping along like we casually assume our users are doing. They could be on their way to a bus stop right now and wondering if they should bust into a full-on sprint to catch the next ride. Responsive design, being a lightweight alternative-presentation model, fails to accommodate this shift in context. Some functionality becomes essential, others completely useless, while responsive design limits developers to filtering out unnecessary content and making minor changes to interaction objects.

The traditional approach to web development begins with the PC screen and then moves to mobile devices. What if we started with the small screen before moving to the big screen? Mobile-first methodology can help solve this constraint of responsive design. This is the approach Luke Wroblewski suggests taking because it forces developers to focus on what’s important, and Jeremy Keith notes that mobile-first in combination with responsive design is really just an extension of progressive enhancement philosophy. A responsive, mobile-first version of your local bus system website would start with tools that are essential to users on the go and then add in the fluffy stuff as an enhancement for PC-web users.

Where are we headed?

Some form of responsive design will likely become the leading tradition in web design over the next few years, with a simultaneous shift to the mobile-first mindset. Content-driven websites (like blogs) will benefit the most from responsive design; service-driven applications will likely need to maintain multiple versions: a lightweight version for mobile devices (both web and native app) and a richer experience for PC and tablet users.