Responsive Design: A Web Design Game-Changer

One of the hottest buzzwords on the web has been “responsive design.” (Sometimes referred to as adaptive design or progressive enhancement, ultimately it all means the same thing.) At its core, responsive design is the process of adapting a design to match the environment of the user. This means styling a site one way for mobile devices, another for tablets and yet another for desktop computers. The design styles itself differently depending on the size of browser window.

Think about how we did things just a year or two ago. The entire goal used to be to get all pages to render the same, no matter the user environment. The development community was packed with tools to help sites do that for a wide array of browsers. This worked great when the desktop computer was the primary medium, but now users are accessing the web from a multitude of devices—smartphones, tablets, desktop computers, netbooks, laptops and web-enabled TVs.

I would put responsive design on the short list of things that have shaped the way we design and build sites. It’s an absolute game-changer for the future of web design and presents one of the greatest opportunities in the industry.


Learn the basics of Responsive Web Design, including how to convert PSD designs to HTML and how to translate your designs across platforms, in this on-demand web design tutorial with Chris Converse.


This radical shift to accommodating users’ environments has a dramatic impact on web designers. At the most basic level, a designer must plan for at least four different layouts of the same content. Take a look at the Forgotten Presidents website to see this in action. Resize your browser and you’ll see it transition between four different layouts.

The screenshots from this site were taken at 320px wide for smartphone, 768px for tablets, 1024px for netbooks and 1600px for desktops.

More design time

On the surface, this doesn’t look so complicated, but there are a number of things you need to consider. Good design doesn’t happen by accident. As such, sites that embrace a responsive approach will ultimately require more design time. Once a design approach is selected, you have to plan for at least four different variations of the layout, as seen here.

If you start proposing responsive sites to your clients, make sure you consider the impact it will have on the design budget, not to mention the coding and testing portion of the project. With a larger amount of work required for each layout variation, the cost will inevitably increase. This means educating clients why we’re passing on these costs.

Getting the design right

Sometimes web designers like to wing it, designing only a few pages and working through the details as they build the actual site.

But with responsive design, you must consider how the same content will render in multiple layouts. This means it’s imperative that you design these ahead of time. If you choose not to, you’re much more likely to run into problems as the site is built.

This is a huge reason why so many responsive sites rely on a single layout. Dig through the Forgotten Presidents site, and you’ll notice the site uses a single layout formula. This makes for less design work, less coding and less testing. And, of course, less work for us means less cost for the client.

A more typical site, though, has perhaps four different page layouts. That translates into 16 design scenarios when you’re designing for four widths. That’s a lot to plan for. If you don’t prepare for this, you’ll be doing a lot on the fly and will likely end up with more time invested in the project. Designing and planning these ahead of time saves time and improves the overall quality.

Understand the code

One of the most beautiful things about building CSS-based sites is how effectively the styles are separated from the actual content (check out CSS Zen Garden if you’re new to this). You don’t have to be a master coder to work with responsive design, but it certainly doesn’t hurt. Most fundamentally you should understand that the exact same HTML is sent to every user. How the site is rendered depends on the user’s device.

With this in mind, the only way to adapt to the user’s environment is though CSS, HTML and JavaScript. This is relevant because we need to understand that if we radically alter the design, it might present some difficulties in the coding process.

Sites that embrace this mentality often have a minimalist approach to design. While by no means are they strictly minimal, they avoid complex layouts based on intertwined containers and frameworks. Over time this will likely change, because responsive design is still working its way into the design and development process. Eventually we’ll see far more complex designs that truly embrace the flexibility of CSS-based designs.

A tremendous opportunity

Responsive design presents a fantastic opportunity.The majority of the design community moves slowly, especially when something as far-reaching as this comes along. Those who dive into this new approach and master it first have a chance to stand out.

Ultimately, responsive design will have a large impact on the web design and development community. I believe that the more designers understand what makes the web work, the better they’ll be able to accommodate and plan for responsive designs.

Additional resources

Responsive grid systems

The following are some popular CSS grid systems that include responsive elements.

Books

These are the best books on the topic:

Online web tutorials

COMMENT