Earlier today, Martin Beeby, a developer evangelist over at Microsoft, posted a blog about how responsive web design is the solution to developing rich web experiences across a multitude of platforms, and how designers are probably thinking about "just" desktop (browser) and mobile (cellphone), and need to think more in terms of other devices - iPads, interactive TVs, and so on.

He mentions three staples that Ethan Marcotte (the guy who coined the term "responsive design") wrote about in his book, coincidentally titled "Responsive Web Design" (ingenuitive, huh?). Of those three, one is media queries - the @media directive that's been around in CSS2, but has only now been started to touted as "CSS3" in recent years, with improved browser support for window size detection.

Now, I find @media queries useful and great when you're building CSS to target multiple devices - it allows you to set out base styles that enforce brand consistency across your design, and then simply adjust positioning for various devices - I get the concept, and I think it's a great idea. However, there's a big caveat about @media queries which gives me a particularly large cause for concern.

I run a business which deals with a lot of small customers - and having patched Umbraco to work in cheap hosting, I recognise the commercial aspects of people being on a very tight budget - I was there, after all, it's what prompted my patches.

However, throughout the design and build process of a website, there needs to be consideration for this very simple fact - bandwidth is fast becoming expensive and a limited resource.

I recently quit Vodafone because they removed my 5GB data bolt-on without telling me, and then all they offered as a replacement was a 2GB one (3GB if you have an iPad). Most domestic broadband providers cap usage, or have a "fair use" policy which constrains to an average of 40GB - when I Google'd, only four companies had truly "unlimited" packages (and some of these are also documented to use traffic filtering at peak periods - Virgin's XXL Package, for example). The average page size of Alexa's top 500, as of May '11, is fast approaching 700kb, and the one bit that people who tout @media as the answer to everything don't tell you is: your entire stylesheet, with resources, images, the works - for all viewports - is loaded, before the @media stuff is parsed by the browser.

Yes, you read correctly - everything gets loaded, regardless of the device you're looking at a page on, prior to @media being parsed by the browser. This means if you're on a mobile device which should be served up maybe 50kb of page and image, you'll get all 700kb of the desktop page too. Conversely, if you're on a desktop, you'll get 50kb of unnecessary mobile stuff downloaded for no good reason. Let's quickly work out how this breaks down:

  1. Mobile with 2GB data bolt-on - means you can browse approximately 2000 ~700kb pages before you cap out at your limit. That's less than ten a day for a month. Add in the fact that if you own a smartphone, you can kiss goodbye to several MB a day if you have Twitter, Facebook, Foursquare, etc. all hooked up and running in the background.
  2. Home broadband package with 40GB allowance (which is the top end of most broadband companies, with exceptions already noted): you can browse ~60,000 pages a month, or ~200 a day. It is a drastic improvement by 20-fold, but homes now normally have more than one PC, and if your kids are Youtubing, or you're using something like BBC iPlayer/ITV Player/4OD, then you're going to cut into that limit pretty quickly.

These figures don't take into account caching, which the link above notes cuts back on average response sizes of the top 500 home pages from >500kb to <100kb - an 80+% saving. However, cellphone and portable devices, whilst improving, are notorious for having pretty crappy memory capabilities, and caching takes time to implement in a robust policy (since I build on Umbracoenter link description here, I of course am biased to recommend using the included ClientDependency library, originally built by Aaron Powell at Redify and Shannon Deminick at Umbraco HQ, both formerly of TheFARM Digital in Oz).

The main issue here is that on your mobile, if you're browsing a site that uses responsive design to handle multiple devices, you're wasting in excess of 80%, maybe even 90% of your visitor's bandwidth just for them to view your site. For desktop viewers, it's more like 10% - but still nothing short of bad practice. Bandwidth is money - both for your customer, and for whoever's hosting the site.

I personally built the new Kingsmill Bread website before Christmas for CMW London, with two sites - one for full desktop and iPads, and one specifically for cellphones (if you're on a cellphone, tough luck, we do user-agent checking to redirect you to the mobile one automatically. Sorry!). If they want to expand that out in future to support TVs, tablets and netbooks specifically, great - we know that the site is fully performance-optimised for each platform already to save them and their visitors money on bandwidth.

Responsive design has a place, but it's by no means a one-size-fits-all solution. Remember that in an ever-increasingly-connected world, bytes are money, and it's your responsibility to save them to deliver value-for-money in your solutions.