Ethan is a brilliant person. Responsive web design is a brilliant technique. These two facts are related.
As Ethan recently clarified:
A responsive design is composed of three distinct parts:
- A flexible grid.
- Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
- Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and that spot-fix bugs that occur at different resolution ranges.
There has been a lot of discussion on that third part—including a superb presentation by Bryan Rieger—but there has been less emphasis on those first two parts. Anyone hoping to take an existing fixed-width rigid design and adapt it for smaller screen widths using media queries is going to be disappointed and frustrated.
I recently had to adapt an existing layout for varying screen widths. Clearleft did some design and development work for St. Paul’s School, where the thoroughly lovely David Smith is a teacher. I didn’t have much to do with that initial work. Cennydd worked on the information architecture, JayBay created the beautiful visual design and Natalie produced the HTML, CSS and JavaScript. But when they asked for some small-screen optimisation, the task fell to me.
It was a breeze. Because Natalie’s markup and CSS was rock-solid, I was able to whip up some alternate layouts in no time. The fact that the site was already using a fluid grid and fluid images was crucial.
The site now goes from a three-column layout (on browsers wider than 800 pixels) to a two-column layout (on browsers between 800 and 640 pixels) to a single column layout (on browsers less than 640 pixels). I spent some time finessing the details but the lion’s share of the work was done in the first hour.
Notice that I don’t refer to this as mobile optimisation. This is about user-agents with narrow screens. Now, some of those user-agents will be running on handheld devices (whatever that means, these days) and the site certainly looks good on some mobile devices, such as the iPhone, the iPod Touch, the iPad and Android phones. But it works equally well on desktop or laptop-bound user-agents with narrow screen widths.
Some people have misinterpreted the power of responsive web design as being a claim to the title of silver bullet for the mobile context. That’s never been the case. If your content would benefit from a completely different approach when viewed on the go, and you’ve got the time and budget to create a separate mobile site, then go for it (though you may end up going down the rabbit hole of figuring out which devices qualify as mobile and which of those you can support).
But if you’re building your sites the right way anyway, with fluidity and flexibility baked in from the start, then it’s certainly worth spending a few minutes to bash out a couple of quick media queries to optimise for small-screen devices.
The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.
That said, in many situations the content you want to serve up will be the same regardless of context. Take Huffduffer, for example. There’s nothing I want to strip out of the pages when they’re served up to mobile devices.
This harks back to what Luke has been saying with his Mobile First talk at An Event Apart. Instead of beginning with a big ol’ desktop site and asking What can I take away for mobile?
, ask instead why all that stuff is clogging up your desktop site to begin with. Just because you’ve given yourself 960 pixels to play with—or whatever arbitrary number is the current fave of fixed-width designs—doesn’t mean that every piece of screen real estate needs to be filled up.
Another complaint levelled at media queries is when they are used to over-ride background-image declarations or to apply display: none to images: Those images are still downloaded by the mobile user!
It’s a fair point but I would turn it on its head: why the sudden concern about bandwidth when dealing with the mobile context? Performance should be a priority for all your users, regardless of screen size or user-agent. If a large image can be hidden from mobile users, why is it being served up to other users?
That’s the thing about responsive web design: you can’t just think of it as a sprinkle of pixie dust that can be applied to any site. It requires the right mindset. It requires that sites be built on solid foundations of best practice. If those foundations are in place—a flexible layout, flexible images, optimised performance—then responsive web design can work its magic.
In the case of St. Paul’s School and its sister-site Colet Court, the foundations couldn’t have been better.