Responsive Web Design or Separate Mobile Site? Eh. It Depends.

Geeks love systems, and that means we love rules. We love laws and dependable truths. This passion for order, along with a certain smartypants confidence, often lulls us into pronouncing One True Way in any number of disciplines. Whether the topic is programming languages, mobile operating systems, bracket style, mobile web vs native app, or robots vs zombies, geeks tend to latch onto a favorite as The Only Way It Must Be Done.

Religion, nationalism, and sports-team rivalries? They can’t compare to the passion of a nerd’s technical conviction. And so kerfuffles result. Well-intentioned zeal leads to distracting dustups. Alas, complex problems rarely resolve themselves into neat black-and-white principles. The only principle that ever seems reliable is drearily unsatisfying: “it depends.”

In the mobile world, we have the persistent and circular debate over whether the mobile web should be powered by the very same sites and webpages that render the desktop web. Savvy CSS media queries, beautifully explained as “responsive web design” by Ethan Marcotte, can transform any webpage into device-specific layouts tailored for any device. But should they? Strong opinions sally forth.

Jason Grigsby neatly laid out the essential (and long running) debate in a blog post last August, New to Mobile? Welcome to the One Web Debate. And he took a side, too, suggesting that we shouldn’t automatically assume there’s some inherent value in serving the same HTML page to every device:

Anyone who has worked on a site that supports multiple languages knows that we don’t have One Web on the desktop web. We don’t have any problem delivering different html documents and assets to someone who speaks a different language.…

Why is it ok for us to deliver different HTML documents because the user uses a different language, but it isn’t ok for us to deliver different HTML documents because the user is using a different device?

As long as every user has access to thematically consistent content from any device, Jason said, sites aren’t obliged to serve identical content. That’s fool’s gold, he said. Serving “desktop” HTML to low-bandwidth phones can cause performance headaches and ignore opportunities to provide the most appropriate content for the mobile context.

Brian Fling put it out there even more strongly on Twitter last week:

[1] Anyone that claims “responsive design” as a best practice clearly has never actually tried to support multiple contexts or devices. [2] Creating great contextual experiences has absolutely nothing to do with markup or css. [3] Responsive design seems like the easy hack that attempts to avoid solving the much harder but more thoughtful solution.

Brian’s thoughtful solution is to create a bespoke experience for mobile, a from-scratch conception of what people want from your service when they’re on the go with a handheld touch device as opposed to planted in front of a desktop screen. In other words, strapping on some fancy CSS doesn’t address the core issue: mobile apps and websites demand mobile content. This is often not the same content (or at least not in the same priority) that you want in a desktop context.

A lively conversation ensued.

As the Twitter confab continued, though, it became clear that it’s not really a debate after all. CSS-based responsive web design is a great tool for adapting a layout to different screens, period. It is a tool, not an end. In some cases, where a site’s content should be the same from device to device (a blog, for example), responsive web design is enough for the job. More complex services, though, may need much more, including different content, tools, and services.

Yes, friends: it depends.

What’s it depend on? Certainly the needs of the audience. But as with so many things, it often depends a great deal on business considerations, too. What can you afford to build and maintain? Building a separate mobile site (and a separate TV site and a separate tablet site) is the cure that kills the patient, Jeremy Keith wrote last month:

Those who are currently rejecting responsive design point to the difficulties of making desktop-optimised sites work on small screens with potentially narrow bandwidth. They’re right. But the solution is not to create a separate site just for smaller screens. The solution is to fix the site so it isn’t optimised for just one environment.

The truth is that web designers and developers have been making device-specific websites for years; it’s just that the device in question was the desktop computer. But just about every point in the W3C’s Mobile Best Practices should be applied to all websites.

The bottom line is whether you’re really talking about the same website in the first place. Depending on what you’re building, a mobile website could be an entirely different animal than its desktop counterpart, addressing entirely different needs. The simple thing to remember is that layout≠content. Great designs require considerable attention to both. Responsive web design cannot dictate content strategy, nor vice versa.

When you start a mobile project, ask yourself: what makes this project mobile? Why would someone use this website in a non-traditional computing environment? The use cases that flow forth dictate your content. From there, flexible layout techniques make the content look good wherever it might appear. The activities are related but independent. Knowing the ins and outs of CSS media queries is important. Understanding context and content strategy is important, too. They’re two different disciplines that need not be at odds.

<update date="March 27, 2011">
Jeremy Keith today writes, and correctly so, that mobile context is a tricky thing to nail down, perhaps even a myth, and that many oversimplify it:

All those people with mobile devices sitting on a train or sitting in a cafe or lounging on the sofa at home; they are all in a very different context to the imaginary persona of the mobile user rushing hither and thither.

We have once again created a consensual hallucination. Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span.

As a result, Jeremy says, you shouldn’t assume that mobile users want some stripped-down version of the site; most people want full access, no matter what device they use. I agree with him that mobile can mean a slow afternoon on the couch just as much as it means a dash through the airport. There’s no single mobile context. While we have to design for the “I’m microtasking” mindset, optimizing for quick dashes of activity, we also have to accommodate the “I’m bored” mindset, allowing and encouraging leisurely strolls through our apps and data.

Still, there are individual mobile contexts that you can specifically design for, and some of those may require very different content and features than a desktop context (or other mobile contexts). Creating separate, focused mobile apps or websites, sometimes several of them, is often a useful way to productively target individual use cases for mobile needs. See eBay’s lineup of mobile apps for an example of this more distributed approach.

My point: sometimes, but not always, a separate mobile site (or even several of them) is the right way to go, assuming (and it’s a big if) that you have the resources to manage it. Other times, simply applying a new layout to an all-in-one site will do the trick. Either way, you’re not off the hook for doing careful thinking about what services you offer and for what use cases. No matter what, your content should be available to all people, no matter what device you use. Even if you’re doing that with a single website, then responsive design alone is not the cure-all. Jeremy nails it in yet another post today:

I do not mean we need to adjust the layout of existing desktop sites for other devices. Quite the opposite. I mean we need to stop building desktop-specific sites.

I think there’s a misconception that responsive web design is a “get out of jail free” card: instead of designing for different devices, all you have to do is reflow your existing pages so that they fit fine on any screen, right?

Wrong. If you have a desktop-specific site—and, let’s face it, that covers over 90% of the web—the first step is to replace it with a device-agnostic site. Not mobile-specific, not desktop-specific, not tablet-specific, but centred instead around the person visiting the site and the content that they want.

My take is similar, but I also think we have to acknowledge that separate sites focused on specific needs and use cases can often be helpful, particularly for low-bandwidth mobile apps which are after all often used in low-attention contexts. It all depends on the project, the use case, and as Jeremy notes, the person visiting the site.
</update>

A couple of days after the Twitter exchange above, Ethan posted this gentle message:

I’m not interested in a religious debate. And chances are good that you’re not, either.

I really do believe responsive design can be a great way to design for our ever-changing web. Sure, I’ve got some fairly evident biases on that front: but with the right planning, implementation, and forethought, it can be a damned compelling approach.

But let’s say that your project—or more specifically, your audience—is better served by a mobile-/tablet-/$DEVICE-specific experience. Heck, I’ve worked on a number of projects that benefitted from that approach: where a separate mobile site was needed, and where a responsive approach would’ve been less than ideal. That decision wasn’t driven by any “mobile vs. desktop” mindset, though: it was dictated by research, by our content strategy, and by studying the needs of that site’s particular audience.…

The moral here is that you should tailor the approach to the project, and put the polemic aside.

We’re all in this together, baby. But people are interested in religious debates. Many seem to find them good sport and, every so often, some light even emerges from the heat. Sometimes, by arguing, we realize our positions actually coexist quite neatly. And in this case, it turns out that mobile content strategy and responsive web design go hand in hand. It might not offer the appeal of a One True Way, but “it depends” turns out to be a mighty good watchword.