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.

Angry mob of nerds. Photo by LDM.
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.
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.
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.