On using responsive web design to create a mobile website

• August 7, 2010
• 1 Comment

Update: I wrote this article over a year ago when RWD was still fairly recent. I pretty much disagree with most of what I wrote here now, so don't take it too seriously :)

Back in May, Ethan Marcotte's A List Apart article Responsive Web Design offered an alternative to keeping mobile websites quarantined at seperate "m." domains. Instead, we can use CSS media queries, fluid grids and flexible images to create a website that uses CSS to create an experience tailored to the user's device without changing the underlying HTML.

Since then, Jon Hicks, Colly and Stephen Caver have put the idea into practice, creating some very cool examples of what can be done with this powerful technique.

Then this post on Smashing Mag touted responsive web design as the best way to quickly and easily "mobilize" your existing site. Jason Grigsby and Jeff Croft responded.

Jason and Jeff both make the point that simply restyling your desktop site to fit on a mobile screen ignores the context in which most mobile browsing happens. I agree.

For me, mobile browsing to most sites is usually about trying to quickly find directions, phone numbers, opening hours and movie times. Sometimes, in the case of blogs or news sites, it's about loading that content as quickly as possible and viewing it on a site optimised for my phone's screen size. In the case of web app-type sites, it's about using those apps in a way that takes into account the fact I'm doing it on a tiny screen over a sketchy 3G connection using fat fingers and a tiny picture of a keyboard.

That said, I think using responsive web design to style common HTML for the user's device is a great technique, but it shouldn't be our entire mobile strategy. We still need to take the mobile browsing context into account. As Ethan says in the original article, "...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."

What happens if you're an edge case and need something that isn't front and centre on the mobile site? Like Rik says in the comments on Jeff's post, sometimes you need the stuff that got the chop in the mobile version. If you're anything like me, you go straight to the bottom of the page and click "View full site". That's when you get a site that's been styled for a 1024x768 monitor, and I think that's where responsive web design can play a powerful role.

So, let's say we keep serving up an optimised "m." site to mobile visitors where we give 90% of them exactly what they're after. But should a user happen to want more, let them continue on to your full site which has been responsively designed to look great on any device.

What do you think?