The Rainworks site viewed responsively in 3 devices.

The Rainworks website viewed responsively on three devices.


This is part four in a multi-part series in which I am exploring how to be mobile-friendly. Here is part one, part two, and part three.


In a landmark article in A List Apart dated May 25, 2010 (just three years ago!), Ethan Marcotte wrote:

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to […] a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such 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.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

And so he looked to an emerging field of architecture — responsive architecture — for inspiration, which recommended against what you might think of when you think of classic architecture: that the structures we live in, work in, and move through should adapt to us — not the other way around. And thus was born responsive web design. Continues Marcotte:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

In other words, websites should adapt to the devices that are viewing them — not the other way around. In part, this is to avoid swimming up the increasingly torrential stream of new devices, large and small, and to instead become future proof. To be future proof means that if someone discovered a new way of interacting with your website (say, a handheld phone in 2007, or a movie theater screen), you would be able to provide them with a positive experience immediately.

How it works

Responsive design relies on already existing technology, built into CSS. We can use media queries to select specific sets of styling to apply on top of the rest of your design styles, giving developers the ability to move, hide, show, and otherwise transform content depending solely on device viewport and orientation.

The A List Apart site as viewed on a Nintendo Wii browser. Image © A List Apart

The A List Apart site as viewed on a Nintendo Wii. Image © A List Apart

The most common approach is to start from the largest size viewport you reasonably expect to serve (so probably not a theater screen — but it could be a television), and then work your way down to the smallest viewport. As the viewport shrinks in width, certain design elements “break” or become distorted, moved out of place, shoved offscreen, etc. At these breakpoints, CSS styling is added to make necessary adjustments at only that screen width and smaller.

So making your site responsive is not technologically difficult, but it can be time consuming to test and refine, particularly in the various browsers that are out there.

The A List Apart website as viewed on a Nintendo 3DS XL. Image © A List Apart

The A List Apart website as viewed on a Nintendo 3DS XL. Image © A List Apart

Let’s revisit our goals and see how responsive design stacks up.

A mobile user should be able to access the same content as a desktop user

Check. Since you’re just making CSS changes to your full site, this part is already done for you. In fact, you will probably run into the opposite problem…

Mobile users should not have to wait much longer than a desktop user for a page to load

While you don’t have to worry about mobile users not getting all of the content there is available, instead you have to worry about all the content they are getting that is not sized properly for mobile, wasting precious bandwidth. For example, you can hide ads that you don’t want taking up prized real estate on mobile devices, but that doesn’t mean the images and scripts aren’t downloaded.

Interaction and navigation should be simple

You should easily be able to address this in your CSS. You can make buttons and text larger, you can make images smaller, you can reduce the number of columns, etc. This can and should be part of your responsive strategy.

All or most major devices should be supported

Of course, this is the primary reason for going with this approach: to be future proof. This doesn’t mean you shouldn’t test on major new devices that are released though. You never know when a major device manufacturer may decide their newest device isn’t going to follow the rules.

Conclusion

Going responsive is my favorite answer to the “how do I go mobile?” question. For most websites, the pros outweigh the cons, and it creates the best, most seamless experience for the end user.

Not to put too fine a point on it, but: this is the future of website design and development. For the sake of efficiency and for the sake of good product design, responsive design will only grow in use in the coming years. Mashable dubbed 2013 the Year of Responsive Web Design, due in no small part to the greater and greater numbers of mobile devices hitting the Internet. Google is embracing responsive as well.

Are you already responsive? Got any tips or pitfalls to share? Lay ’em down in the comments.

Pin It on Pinterest

Share This