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:
- 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.
- 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 Umbraco, 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 desgn 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.