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?

I plan to write here pretty regularly, and post stuff to the tumblelog even regularly-er.

So what's under the hood?

Well, there's the omnipresent League Gothic brought to you by The League Of Moveable Type and Font Squirrel's awesome @font-face generator. There's some fancy schmancy CSS3 gradients and transforms (as long as you're looking at this in anything other than IE). Of course the latest version of jQuery is in there working its magic, as well as the wonderful jQuery Tools. And the whole thing is valid HTML5 (subject to the utter previewness of this service).

The blog is set up so I can publish new posts quickly and easily, or if the mood strikes me and I have a little spare time, I can get my blogazine on and customise the design of each post (a la Jason, Dustin & Paddy).

The tumblelog is where I can post images, videos, links, short blog posts... basically a Tumblr/Posterous kind of thing, but built to give me precise control over how I post and where else on the web those posts show up.

This site is very much a work in progress. The homepage was designed with some pretty ambitious Last.fm, Flickr & Vimeo API trickery in mind that I haven't got around to yet, and although I don't need one at the moment I'll eventually add a portfolio section.

I couldn't think of a way to conclude my inaugural blog post, so without further ado...