Creating iPhone-ready sites using CSS media queries

Using A List Apart's article on Responsive Web Design (by Ethan Marcotte) as inspiration, this site now uses CSS media queries to determine a visitor's screen resolution and serve up an appropriate version should the viewer be visiting from an iPhone. If you have an iPhone next to you, give it a try.

I find myself visiting an increasing number of sites through my iPhone, and have noticed I tend to visit a large number of links from Twitter, email, RSS apps and similar, make a mental note of them, and re-read them from my laptop once I'm back in the office. In fact, I'm getting increasingly frustrated when I'm on 3G and forced to download an entire site's output, from ad farms to images. So, to that end, I've optimised this site, sans fat, for quick and easy readability.

The best part? The entire experience is done through a few new meta tags and an iPhone-only stylesheet. No markup was harmed in the making of this (mobile) version.

A few points

CarbonGraffiti iPhone version

Update October 2010 - Let's get responsive!

Having become somewhat obsessed with responsive design recently (and applying it to client sites, for example <a http://lcpeurope.eu), this site is now set on a fully-flexible layout, powered by media queries and %'s, not pixel widths. That means the site will expand and stretch to use all available screen real estate, and not remain locked into what now feels like a cramped and confined 960px grid layout. Unfortunately, this does not apply to IE8 and lower. Sorry.

Further Reading