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.
Is anyone suggesting that RWD is a magic bullet? From what I’ve read it has been described as a method for providing an appropriate experience in absence of one designed specifically for mobile.
I wouldn’t assume so much about what people want to do on a website depending on the context. I can look at a restaurant website and I’d like to see pictures because I’m showing this to a friend or I’d like to see the menu cause I can’t remember the exact name of the good meal I ordered two days ago. Same goes for the other examples.
Of course your examples will be the most accessed part of the mobile version. But it doesn’t mean I don’t want the other parts. So please, don’t remove them.
Thanks for posting this, Jeff. Great to chat with you on Twitter about this, but you know—140 characters and in-depth discussions and all that.
Anyway:
It’s probably the lack of caffeine, but I’m not sure I follow your point about context—or at least, in how you’re citing it as a potential disqualifier for responsive web design writ large. Looking at the examples you mentioned, I would imagine that the two “contexts”—mobile and desktop—would likely share some similar tasks. To grossly oversimplify things a bit: the former might distill the page down to just those core tasks, whereas the latter affords us more options to promote other content/tasks.
As I see it, the decision to adopt a responsive approach—putting aside, for a second, the completely valid technical questions raised by Jason—is going to come down to exactly how much content is preserved/shared between the two contexts. I would disagree with the title of Jason’s post, if not some of his very valid concerns: media queries are, as PPK eloquently states, an incredible tool for designing on and beyond the desktop, if applied intelligently and appropriately. If you’re simply using media queries to hide a significant portion of your markup on a smaller display, for example, then there might be a better approach. (And of course, without support for CSS3’s template module, we’re still very much hampered by source order. So that’s another deciding factor.)
There’s more I could say about this, but I certainly never meant to suggest that responsive web design was about “designing for mobile”; it’s a more agnostic technique than that. And it’s just that—a technique. One that should be duly evaluated during the course of a project, and applied only to the sites that would benefit from them.
Hope that clears my thoughts up a bit.
Yes. The Smashing Magazine article I linked to above leads with: “In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.”
In other words, “here’s a super simple way to make a mobile version of your website.”
I didn’t say anything about removing them. I agree with you, those things should be there — but they’re probably not going to be the focus on a mobile site, and therefore you’re probably going to have different HTML.
Just to clarify one quick thing: by themselves, media queries alone do not a responsive design make. Not by my definition of the concept, that is.
@greg
I believe what Ethan is implying is that Responsive Web Design by way of CSS Media Queries is a way to design and support multiple contexts. If we had an easy way to solve that problem it truly would be a “magic bullet.” While he is absolutely correct that media queries can support basic content adaptation, it really only works for very basic examples.
The use of media queries is really no different that media type attribute that has been around in XHTML for ages—media queries just allow for more fine grain presentation controls for a broader range of contexts.
What I think Jason is saying is not only it that approach not very practical in most scenarios, but in typical cases it actually forces the user to pay a price in speed, performance and cost. And that simple content adaptation techniques, like media queries, do nothing to address the context of the content contained within the markup, which is really the problem we should be focused on.
But I’m most likely injecting my own bias into the debate ;)
They might. Depends on the project. But in any case, it’s about user experience. It doesn’t make any sense for, say, Gap.com to have a form on the homepage where you can enter an order number and get a status update. But that might make perfect sense on mobile.
And sure, you could send the form to both and hide it where it’s not be used — but that’s inelegant and ugly, not to mention wasteful.
Agreed 100%. And all I’m saying is that, for me, there’s usually not a lot of overlap. The tweet I posted back in June, my tweet that started this today, and this blog post all say, “In my experience, I rarely want to provide the same HTML for mobile and desktop users.” If your experience is different, that’s great. All I can do is speak to my own experience building mobile sites.
I would disagree with it, too. There are many ways in which media queries are very useful for mobile development. But the idea that simply changing your layout to fit a mobile device’s screen gives you a world class mobile site is fundamentally flawed, in my opinion. This debate has been raging for years in the mobile community, and I’m sure we can continue to debate it for the next five. But for me, in my experience, with my clients, it’s usually necessary to serve different HTML to mobile devices in order to give them the best possible user experience.
If your focus is more on content-oriented sites instead of applications with a lot of functionality, you may find you can get away with serving the same HTML more often.
But I tend to work more on applications, and simply changing the layout doesn’t usually cut it with mobile apps. Take a look at the difference between Foursquare or Gowalla’s web site for desktops and their web site for mobile, for example. The functions provided and featured are quite different — it probably wouldn’t make sense to try to do this with the same HTML.
Agreed, I said so above (“There are countless ways in which media queries and fluid grids can be used to enhance the user experience of your site or application”).
I don’t think (nor did I say) you did suggest that. As I said in this, you clearly stated my point at the end of your article. You noted that, in many cases, you may need to serve different HTML to different devices. It was others (like Smashing Magazine) that took it to the “magic bullet for mobile web design” place.
Thanks for taking the time to respond, Ethan. You are someone I respect a great deal, so it’s always good to hear your thoughts. But, this piece wasn’t at all intended to debate anything you’ve said. It’s in contrast to what Smashing Magazine and others have said, but not what you’ve said.
@ethan
Sorry you beat me to the post button! But now I’m a bit confused. You seem to infer that Responsive Web Design is a technique for designing for multiple contexts—be it multiple desktop screen sizes or non-desktop screens. I think most people assume that non-desktop is mobile, and by the numbers they would be correct.
But I would also caution you on saying Javascript will solve any problems here, as its reliability on most non-desktop devices is worse that media queries. That argument makes gross assumptions about the state of the mobile landscape.
-Brian
Jeff:
Oh, then I misread your comments. Apologies.
Still, I’ve seen a number of articles that conflate the two. So please consider that paragraph entered into the public record. Or something.
Brian:
I don’t believe I said that, Brian—I’m well aware of the problems with relying on JS beyond the desktop. But even so, I don’t think that invalidates PPK’s article, or the solutions he proposes; he’s approaching the issues with the proper degree of progressive enhancement, which I think is appropriate.
Now I’m just super-confused.
You said:
I said:
And then you said…
…with a link to a comment about where I say that Smashing Magazine is calling media queries a “magic bullet.” I have no idea how me saying Smashing Magazine called media queries a magic bullet got misread as me saying you were claiming responsive web design was about mobile.
God, the Internet sucks at this.
Heh.
Jeff, you were responding to Greg’s question about “responsive web design” being a magic bullet, and cited the SM article on mobile design. So I responded.
Anyway: it was an apparent misunderstanding, probably fueled by the fact that I’m completely exhausted. Moving on!
Sometimes you write headlines for posts that work and sometimes not so much. :-)
Andrew Hedges (@segdeha) called me out for the post title. It’s more inflammatory than it should have been.
Many people have been talking about media queries as THE solution for making mobile sites. The Smashing Magazine article was just one example.
There was a whole session at Web Visions entitled “Mobile Web Dev without Developing a Mobile Site” built around CSS3 media queries. And lots of Twitter and blog posts echoing the same.
To Ethan’s credit, I don’t think he ever over promised about media queries. It was really those who read and reacted to his article.
It is telling that PPK starts his post by saying that I was challenging “the conventional view that media queries are all we need to make a website mobile-friendly.”
If that was the conventional view, then that view might be described as Fool’s Gold. That view needs to be replaced with a more nuanced view that media queries are part of the toolset.
But taking a strident position in the title obscures the nuance of my perspective as well. We’re using media queries as key parts of two mobile projects right now. And it also seems more attacking than I intended.
In response to Andrew, I found a sentence that I really summed up what I was trying to say:
“CSS Media Query for mobile–particularly as it has been thus far promoted–hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.”
I don’t know what the correct analogy is for that sentiment in that sentence. But I now no longer agree with the title of my own post. :-)
For this we also need to rethink about the content we present to different viewports (desktop/mobile) and thus we can say Context precedes Content.
Reading the comments for this post before just replying (it seems things got muddled in there). Media Queries certainly seem to be an excellent idea in theory, even with some added design included, they should help! That’s what we’re hoping for right?
This is a link to a great article that sums up all that I want to say: http://www.drawar.com/articles/a…
That being said, what is RWD good for then? Could you please enlighten me?
Is it just a good temporary solution if in case you don’t have a separate mobile version of your site ready?
Also, I noticed that on Ethan’s RWD sample on A List Apart, you can’t pinch and zoom on it on the iPhone? Same problem goes with Dan Cederholm’s Simplebits.com.
Shot an email to both these guys asking the same question but I never got a reply.
I’ll preface my comments without the fact that I’m a designer just taking a stab a developing for responsive web design.
That being said, I completely agree with you jeff about creating a mobile experience by having the user’s context be just as important as the user’s screen size or device. With that in mind, that is exactly what I read into ethan’s extremely well written article on al list apart.
Responsive web design is just that: responsive to screen size & user context.
To do this, I guess one solution would be to create new HTML pages fo each context. But wouldn’t a much better solution be to simply “display: hidden” the items that are not needed?
Take this all knowing that I’m a designer , not a developer. But, I’d love to hear the thoughts of developers out there.
Also, I took a first stab at this with my portfolio ( http://www.kreathaus.com ) if anyone wants to check it out, rip it apart, or send me cookies.
Thanks!
@Jonathan:
I’ll defer to a comment left on Jason’s post. If you can use
display: noneto…On many sites and apps (an airline is a great example — much better than the examples I included above), the functionality provided on the desktop version is far, far different from that provided on the mobile version. Could you simply
display: noneone set of functions and enable the other, based on what their screen size is? Yes. But doing so would quickly become unwieldy, unmanageable, overly complicated, and above all, wasteful (you’re sending twice the HTML on each request — and that’s going to slow things down, especially on mobile).One of my core design philosophy is always “the simpler the solution, the better it is.” Using one HTML file with two completely different sets of HTML contained within it, and then using media queries to toggle between those two sets is the opposite of simple. It’s complicated, fragile, and ugly. It’s over-engineering for the sake of over-engineering. There’s no practical benefit to it, other than to impress your web geek friends.
As I’ve said above, though: if the HTML for your mobile site and desktop site sis mostly the same, with only a few little differences, then sure, go ahead and use one HTML file and switch between the designs using media queries. But in my experience, these cases where the content is nearly the same for both contexts are few and far between.
Jeff — I come tardy to the party and now all the arguments have all died down — such a shame! I have more fuel for the fire.
Well, not really. But I do want to say I agree 100% that designing for any medium requires you to consider the context. We’re getting so good at making great looking/functioning/performing websites I feel we sometimes gloss over the core, strategic questions — why are we building this, what problem are we trying to solve?
We’ve gotten so used to our established patterns of design and development that we often fail to challenge basic issues — can this 50 page site be re-thought into 5? Do I even need navigation or pages at all — can I create a convincing microsite?
Anyhow, this is baseless, unsubstantiated rambling right now. Blog post someday soon.
Why can’t I pinch and zoom on Ethan’s ALA RWD sample and Dan Cederholm’s simplebits.com???
You can’t pinch and zoom simplebits.com because Dan has included this line in the head of his document:
meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"I totally agree with you Jeff! You managed to put a logical argument to the what I was thinking (which was “but why would you want to do that when you are in a different place on a mobile device vs. desktop?”)
I agree that responsive web design is a great tool, but it is just another tool in a huge toolbox we have to work with.
Great read!
Media Queries certainly seem to be an excellent idea in theory, even with some added design included, they should help!
I have not really looked it to developing a website further purely for mobile applications but after reading this I think it is probably time that I did. With so many people browsing the web now with smart phones its got to have some benefit to develop something more suited to this type of user. Thanks for sharing, the articles you provide are really exceptional. Keep up the excellent work.
In terms of using the internet as a platform to market a product isn’t it still a waste of time to market or optimize for mobile phones? I mean, besides from a very few users compared to computer users and people aren’t exactly ready to buy anything when they are on their phone.
עבודה בחול IOPAI73948IOPP
Thanks for news.
Nice article, I agree with you on this. We http://www.tiltin.nl use the same technique on some of our sites.