One of the hottest buzzwords on the web right now is 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 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 poised to be a game changer for many and presents one of the greatest opportunities in the industry.
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 site 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
- Media Queries Showcase: a gallery of responsive sites
- CSS Zen Garden: why CSS-based design is the only way to build sites
- Responsive Web Design: the definitive article from A List Apart that started it all
- Media Queries: how to serve up device specific CSS
Responsive grid systems
The following are some popular CSS grid systems that include responsive elements.
Books
These are the best books on the topic:
- Adaptive Web Design by Aaron Gustafson
- Hardboiled Web Design by Andy Clarke
- Responsive Web Design by Ethan Marcotte
