A few months back, Ethan Marcotte, a web designer and developer I have a great deal of respect for, wrote a great piece on A List Apart entitled Responsive Web Design. The gist of the article is that, by using CSS media queries, fluid grids, and flexible images, you can craft a single HTML page that “responds” to varying viewport sizes with different layouts, unique design elements, and more.
It’s a great technique that has many, many potential uses. One use that quickly surfaced and got the attention of the web design community was the idea of using this technique to “mobilize” a site — that is, to make a single page that adapted its layout appropriately for mobile devices, such as smartphones. Back in June, I tweeted: “‘Responsive Web Design’ is way cool — but I rarely want to serve the same content to devices with different sized screens. It ignores context.” No one really paid any attention to me.
But, on Tuesday, Jason Grigsby wrote a detailed, provocatively-titled article called CSS Media Query for Mobile is Fool’s Gold, and people have paid attention. He points out several reasons why Responsive Web Design isn’t the magic bullet for mobilization some in our community have claimed it to be. But the one that interests me, and has for years (as evidenced by this article I wrote in 2006), is context. For me, creating a great mobile version of a web product is all about capturing the context the user will be in when they visit.
By and large, mobile users want different things from your product than desktop users do. If you’re a restaurant, desktop users may want photos of your place, a complete menu, and some information about your history. But mobile users probably just want your address and operating hours. If you’re a blockbuster movie, desktop users probably want an immersive experience, including trailers and production details. On mobile, they probably just want to know where the nearest theater is and what time it’s showing. If you’re a calendaring application, desktop users probably want a full-featured suite of tools for adding and editing events. Mobile users are probably more focused on simply seeing what they’ve got going on today. If you’re a major retail site, desktop users may be more interested in browsing and shopping, whereas mobile users may be more interested in checking the status of an existing order.
In my experience, I rarely want to serve up the exact same HTML to mobile users that I do to desktop users. That’s not to say it never happens. For example, a blog or simple news site may be a case where mobile users really are looking for the same thing that desktop users are — perhaps the same HTML with a screen-specific layout will work great. But, by and large, mobile users have different goals, and that necessitates different HTML. Ethan, in his original article, recognizes this. Towards the end, he states, “if 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.”
That’s not at all to say that “Responsive Web Design” isn’t useful. On the contrary, I think it’s extraordinarily useful. There are countless ways in which media queries and fluid grids can be used to enhance the user experience of your site or application, and many of them have nothing to do with mobilization.
In the end, “Responsive Web Design” is another tool in our belt. But thinking of it as a magic bullet to creating moblie versions of your site or app is probably, as Grigsby says, fool’s gold.