Is Responsive Design a Good Fit For Mobile?
Matt Henry, Former Viget
Since Ethan Marcotte put forward the idea of Responsive Web Design (RWD), it has been touted as a way to use one code base to support browsers of dramatically different resolutions and screen densities. Despite the good reasons to be cautious of this approach, designers and developers have continued to recommend using RWD as a solution for mobile.
Fortunately, the discussion about whether RWD is a good strategy for mobile websites/webapps has been rekindled over the last couple of months, and the consensus appears to be increasingly skeptical. Many critics focus on the idea that responsive designs would hide content on smaller screens that would otherwise be visible on desktop/laptop ("desktop," herein) screens. The problem with this, the critics say, is that this strategy implicitly assumes mobile sites should have less content than their desktop counterparts. At first blush, this assumption has at least some intuitive appeal. In the absence of data about how people expect and want to use a site on a mobile device, assuming that users want quick access to things like directions, contact information, menus, etc., doesn't feel obviously wrong. What does feel obviously wrong is building a site without data on how people expect and want to use it on a mobile device. It took the web community at large at least 10 years of making websites to realize that knowing something concrete about our users is pretty important. Why did we decide that we no longer need to have good data on users now that some browsers fit in our pockets and have touch screens instead of pointer devices?
If the thrust of the criticism is that it's generally wrong to make assumptions about what users want without supporting data, then it's both uncontroversial and laudable. Even so, it's still not the best argument for using caution in applying responsive design to mobile browsers.
Less is more?
The single best argument against using responsive design for mobile devices is still that it's almost always a bad idea to send a full desktop site's worth of mark-up, CSS, JS, and images over the wire to devices that won't use all of it and might have limited connectivity. If this point isn't readily apparent to you, go read Jason Grigsby's blog post on this, and you should come away suitably convinced.
It's worth pointing out, as well, that even Marcotte makes this point in his ALA article introducing the technique:
"f the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach."
In some cases, you'd even want to show more content to mobile devices than you would on the desktop. A site like Eightbit, for instance, isn't super useful on a desktop browser. If you go there after you've set up your account, it just has a page suggesting you go check it out on your mobile.
Of course, none of this is to say that it's never a good idea to use RWD for mobile sites. If your assets and information architecture are minimal, and you just need something simple that works everywhere (in the case of some blogs, for instance), RWD might be a fit. Once you get a couple big images or scripts in there or start thinking about what content you need to hide or show in certain contexts, you've outgrown the utility of responsive design.
So, what's the answer to the question, "Should I use a responsive design in my mobile strategy?" The somewhat unsatisfying short answer you probably saw coming is: "Maybe." The slightly longer answer is that it might be a fit, depending on your users' needs. But, how is that different from any other technique in our toolbox? Responsive design is a very powerful (not to mention extremely cool) method of putting a site together, and you should absolutely use it when appropriate. In order to figure out when that is, you still have to do the legwork to see who your users are, how they expect to be able to use your site, and how those expectations change (or don't) when they're using different kinds of devices.