Ever open up a website on your smartphone or tablet and try to click on the “Get Directions” link with your finger and end up calling the place instead? Ever look around for a magnifying glass so you can actually read words on the site? Notice that your own website looks great on an iPhone but terrible on a slightly bigger Android device?

Ever wish there was a magical multiple-device design cure?

Well, there just might be! It’s called responsive design, and it's all the rage.

What Is It?

“Responsive design” is not just a clever name; indeed, it’s just what it sounds like—design that responds to the screen size of whatever device you load a website on. This is made possible by employing uber-high-tech processes in the back end, including media queries that support fluid grids and flexible images.

Now, what does all that mean? Essentially it means that you don’t have to research a whole bunch of divergent device experiences and design a whole bunch of different sites based on an ever-increasing number of devices with an ever-increasing number of screen widths and resolutions; instead, you design one site that offers consistency and flexibility to your users, regardless of device.

“Within any device experience, there’s still a lot of variation-especially in display sizes. [Devices] all come in a variety of screen resolutions, densities, and aspect ratios. But don’t worry...responsive design can help.”

— Luke Wroblewski, Facebook

To demo what is quickly becoming the paradigm for responsive design at its best, here's what it looks like with the website for The Boston Globe:

As you can see from these images, the content stays the same, but the layout, navigation, and font size adjust based on screen size and resolution. So you're not missing out on anything, and you don't run the risk of going blind reading tiny print or clicking the wrong link!

What’s Awesome About It?

The real question here should be what isn’t awesome about responsive design? It adjusts to users’ needs, devices, and behaviors; it automatically responds to screen widths and resolutions; it offers a scalable solution to the ever-expanding handheld device pool; and, perhaps most important, it keeps the content and layout of any particular website consistent.

“You build a website once, and it works seamlessly across thousands of different screens.”

— Pete Cashmore, Mashable

What Isn't Awesome About It?

Glad you asked. In short, responsive design dictates a one-size-fits-all user experience. Because the foundational design is the same across platforms, there's no room to cut content or functionality depending on device and, ultimately, differing user goals.

The Role of User Goals

This is a non-issue for more passive experiences like news sites, where the primary user goal is reading regardless of device. But for those sites like retailers that offer a mix of passive experiences (e.g. browsing) and task-based features (e.g. searching for recipes or comparing prices), responsive design can create a burdensome user experience.

The difference between me looking at a grocery store's website at home on my desktop and me looking at the same site in the car on my iPhone (while someone else is driving) is all in my goals. At home I probably want to see what sorts of products are offered by the store, and I don't mind browsing around for a few minutes. In the car I want to find directions or store hours, and I want to find it quickly.

The Role of Apps

So what does this mean in the context of responsive design? Realistically, it means that goal-specific apps will be as important as ever—perhaps even more important—as responsive design gains traction. In other words, it's no big deal.

Why Isn’t Everyone Doing It?

As with any magical cure, there are prices to pay if you want responsive design to work hard for you. Here are the most poignant:

The Difficulty

As you can imagine, coding responsive design on the back end is not the easiest process. In fact, the nuances are so complicated that some designers and developers are hesitant to jump on the responsive design bandwagon. Designing and developing one fluid site as opposed to a series of fixed sites breaks the mold of tradition and forces the team to restructure their mental models of how a particular Web experience is imagined. The design process is overhauled as we move from designing for one static experience to designing for multiple form factors. But as we learn over and over with each new high-tech innovation, tradition is losing sway when it comes to designing for the user—and the device—experience.

“[Designers] often take comfort in . . . explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from ‘the non-iPhone website.’ ”

— Ethan Marcotte, A List Apart

The Timeline

A second hesitation designers face when considering responsive design versus a series of fixed designs is timeline. Because responsive design involves a lot more consideration on both the back and front ends than traditional fixed designs, it takes longer. It’s a necessary evil. So you have to consider what’s more important—a fluid user experience developed simultaneously across platforms, or a series of fixed—and potentially inconsistent—experiences deployed on a staggered timeline.

The Cost

A final drawback, of course, is cost. Responsive design is expensive, at least for now. As we continue along this path, responsive design will lose its new-car smell and gain a lot of miles—but until the point when it’s the rule rather than the exception, you’re going to pay for it.

The good thing—and bad thing—about these drawbacks is that they’re time-sensitive. It’s difficult now, but it will be less difficult as patterns emerge and solutions are presented. It takes a lot of time, but if you add up the time it takes to design fixed sites for an increasing number of screen sizes and resolutions, it’s not that bad. And it’s costly, but then, so is designing a number of different fixed sites and experiences.

“As responsive design increases in popularity, best practices, code libraries, and other development tools will become more widely available to make implementation easier, faster, and less expensive.”

— Rich Schmick, Andy Young, & Bill Krejci, VML

Why Should Everyone Be Doing It?

When something is difficult and time-consuming, it’s typically going to come with a hefty price tag. But it’s also typically worth it, in the long run. Going to the Moon turned out to be difficult, time-consuming, and expensive, but the end result? We went to the Moon!

Yes, responsive design is expensive. Yes, it takes a little longer. Yes, it’s difficult. But the results when you’re done are unequaled: a flexible yet consistent user experience. This is one of those times when you say to yourself, “Listen up, self: sometimes you’ve got to suffer a little for the good of your web presence.” In other words: short-term pain, long-term gain.

“The most popular size is every size. If you’re not thinking in a mobile-first, content-first way, if you’re not planning an adaptive or responsive redesign, if you still think we have a standard canvas that ‘everybody’ uses . . . you don’t deserve to be a designer.”

— Jeffrey Zeldman

References

Cashmore, P. (12/11/2012). Why 2013 Is the Year of Responsive Design. Retrieved from http://mashable.com/2012/12/11/responsive-web-design/

Marcotte, E. (5/25/2012). Responsive Web Design. Retrieved from http://www.alistapart.com/articles/responsive-web-design/

Schmick, R., Young, A., & Krejci, B. (2012). The Why and How of Responsive Design. Retrieved from http://www.vml.com/news-and-trends/articles/why-and-how-responsive-design

Wroblewski, L. (1/24/2012). Device Experiences & Responsive Design. Retrieved from https://developers.facebook.com/html5/blog/post/6/

Zeldman, J. (4/13/2012). Browser Screen Resolution Stats Rile Devs. Retrieved from http://www.netmagazine.com/news/browser-screen-resolution-stats-rile-devs-121897

Published by Design For Use.