Blog

Or search support forum

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Tapworthy: Designing Great iPhone Apps

Best iPhone Apps: The Guide for Discriminating Downloaders

iWork ’09: The Mising Manual

Moxiemail

Enter your e-mail to receive occasional updates:

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

Posted Mar 26, 2011 (updated Mar 28, 2011)

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
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.

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.

Tags: ,

Want more? Recent blog entries...

Comments

15 comment(s) on this page. Add your own comment below.

Mar 28, 2011 10:53am [ 1 ]

Great read. It's hit on a number of things where people have been banging on about responsive design being the be-all and end-all of design at the moment.

I think as mentioned by Ethan, it's a tool and as usual, it's down to designers to be sensible in how it's used for a project to get the maximum benefit.

I've thought for a long time there's a strong case for some sites to deliver mobile specific content. It's not just a layout thing, it's about delivering content that's more relevant to mobile use. Things like big banner graphics could be replaced with contact info etc.

Tricky and like the age old "one true layout" quest, there isn't one answer that's 100% suitable for every situation.

Still, the one interesting thing about seeing these debates and topics is that one thing rings true above all else in every circumstance and that is designers have always had a range of tools and techniques at their disposal and using logical problem solving and analysis to decide on how best to use these tools remains one of the key skills to being a designer.

Mar 28, 2011 11:05am [ 2 ]

I'm in a position now where discovering the context within which a website I work on is being experienced is absolutely integral (as it should be) in choosing whether we produce a 'responsive design' or build a ground-up mobile version of the website.

Thanks for adding to my confusion, Josh!!

Mar 28, 2011 11:15am [ 3 ]

You're welcome! Always here to confuse!

The trick, of course, is not only thinking about context (where are you, what device are you using) but also: intent. What do you want to do. Context can often give us some useful clues at guessing what intent might be, but it's not foolproof. As more and more people use mobile devices as a primary browser on an equal and even superior footing to their desktop, assumptions of what makes something mobile may not always be correct.

Still, mobile's tiny footprint, its frequent (but not exclusive) use in distracting environments, its common role in microtasking… all of these things should lead us as designers to think carefully about focus. What are the primary, repetitive tasks, and how can we optimize for those? As we do that, though, we also have to be careful not to willy-nilly pare out features and content. Missing content is why so many of us still seek out the "desktop version" link in mobile sites: the designers made incorrect guesses at intent in the mobile context.

My take is that we should not seek to make mobile sites "less complex" than desktop sites—complexity is a good thing, and it's what lets us tackle complex tasks. Instead, our goal should be to make complexity less complicated. And often that means a different hierarchy of content and tools on mobile than you might see on the desktop. In mobile interfaces, it's best to remove secondary content and features to additional screens. Make it available if it's necessary content, but nudge it aside for tasks that will more commonly meet mobile use cases (and intents).

Mar 28, 2011 11:19am [ 4 ]

This is a really good article and gives everyone something to think about - and quickly! The world of design is rapidly changing with clients calling out for effective mobile, tablet and touchscreen friendly sites. Thank you.

Ed Zbinski
May 17, 2011 4:17pm [ 5 ]

A little late to the party (article) on this one but what a great read Josh. In the middle of redesigning my site and buying whole-heartedly into the Responsive Web Design idea, this mobile vs responsive debate raged in my head after talking with a friend. I get the feeling "it depends" can illicit scowls from some, those looking for definitive answers and don't want to think problems through themselves, it really fits well with this argument. "It depends" also keeps website decision makers from glossing over very important parts of the design process.

I think it's nice having both arguments, as it means designers, including myself, are well aware that the audience is no longer filled with 19-inch CRT monitors. And having the know-how to critically think through both content and layout for different devices is just as important a tool as the tool of execution(mobile site or responsive).

I'm looking forward to taking my site responsively into the future, and helping along any future clients into much broader (is that even a word?) web experience with their sites. Thanks Josh!

Troup
May 19, 2011 8:33am [ 6 ]

What about link sharing through email? If you have 2+ sites how do you share across devices?

May 26, 2011 12:39pm [ 7 ]

I use responsive for my blogs and separate for marketing sites. It all depends on the content.

Jul 5, 2011 4:37pm [ 8 ]

A nicely put together summery of the issue. I've really noticed in my own design that I develop for the desktop. I've been working on some mobile stuff and looking into responsive design but it seems like taking the correct approach at the very beginning is the most important thing.

Like the lego photo :)

Jul 28, 2011 4:53am [ 9 ]

I also used responsive on my website for a while. But as mentioned earlier it can often have a massive effect on what the content is like. The Lego photo is great! I hope to use some of the techniques displayed in the future, thanks.

Oct 28, 2011 4:45am [ 10 ]

You will find all the mobile emulators/simulators are the same in that they will display the zoomed in version of the site. There are none I have come across that allow you to zoom in and zoom out. The reality is someone is going to have to zoom in on a website in order to read and/or use it so this is what they will be faced with.

This is something you can explain to prospects. You can then show them how their mobile site will look and function - much more important.

Nov 22, 2011 4:00pm [ 11 ]

Great article. I think one of the most important points in this article is pointing out that not everyone on a "mobile device" is running through the airport, and because of that we really need to keep in mind that each project is different, and thus..each may have a different solution. At the very least, it is a great tool.

Aug 6, 2012 3:10pm [ 12 ]

It doesn't have to be an "either / or" argument. Recently we've open sourced Mobify.js (http://mobifyjs.com) with an MIT license. Mobify.js allows developers to launch mobile or iPad specific websites on the same URL as the main website, as well as re-use (or not) HTML from the existing website. Try it out and let us know what you think!

One thing we learned for sure while building Mobify.js is that on the Web everything is possible, but not everything is economical. Responsive websites - especially as techniques behind them go mainstream - are very cost effective for many content-driven websites. Use cases requiring more mobile context can also be facilitated on top of responsive (through server-side and client-side options) but will require more developer time and resources to implement.

Metrixa Technology Software Development Company
Mar 12, 2013 2:09am [ 13 ]

I absolutely agree that developers or programmers loves organize system because with out it the task will not be accomplished on time due to conflicts.

Jun 17, 2013 2:31am [ 14 ]

I am really impressed from this article. It is giving me a new thought and ideas to work on start up website.

Louise M. Simard
May 15, 2014 8:02pm [ 15 ]

I've been researching & studying different techniques lately & I find this subject most interesting. I am no web designer and I will never be, I am no programmer neither, but I like doing things myself because I need to ensure the business drives the technology and not the other way around.

So, in that context, after reading the book "Mobile First", reading this article,reading some more on Responsive Design (the book is next on my list) and taking several courses on web design (some more technical than some other) I came to the conclusion that users will do with their device(s) (whichever one(s) they happen to have access to at the time) whatever needs to be done at that time to fulfill their needs at that moment. For example, I own an iPhone 4, a tablet, a portable and a very large desktop. In addition to all of those, I can connect my phone, my tablet and my laptop to my high definition TV. I use each one of these devices on the web for different things even if I have access to them all at the same time. As a result, my web browsing time has significantly decreased on the desktop every time I acquired a new smaller web browsing capable device. But certain things, I just will not do on anything else but the big screen of my desktop unless I'm not there and it needs to be done NOW, in which case I'll use whatever device I have access to at that time and the biggest screen wins. In some cases it is very painful, in some other cases it is quite easy.

Having said the above, my friend next door is at the opposite end of the spectrum: all she has is a smart phone. So there is no choice to be made: the phone it is... for everything and anything... every time!

So, in the context of Responsive Web Design or Specific Device Design (for say different target markets) how would the web page appear on a high definition TV screen if browsing using her phone?

Thinking about this particular scenario, then I can just imagine the next generation not having a desktop or a laptop at all (unless needed for very specific work) why would anyone need one in the first place if the mobile or tablet can use the screen of a high definition TV? Then things like "max. width" rule and "@media" query, etc... doesn't solve the problem, it creates a problem for the user because it forces the user to use a web design that was created for the "engine" driving the user interface screen (the phone) as opposed to the end screen (High definition TV).

Maybe the user should decide what version of the site he wants to use based on his current context & need instead of the designer deciding for the user based on the size of the device driving the screen.

Any thoughts?

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Download Big Medium
Try it free for 30 days, or buy to unlock.

State of Josh's Brain

Twittering

Follow me on Twitter

    Snapping

    Latest photos