How I got media queries all wrong

Tuesday 26th October 2010

So this website adapts. It’s been on my to-do list for a while and it’s nice to check it off but I got my approach somewhat wrong.

I got some things right. I built it using fluid grids paired with fluid images and when I pushed the site live it was about 90% flexible.

My error was in thinking that once live I’d just bolt–on some media query magic and my website would be suitable for mobile. I was wrong.

When I began the redesign of this site media queries were not on my radar. Ethan Marcotte had not published his article and some well known designers were not pushing this technique. Consequently my initial content gathering considered desktop only and not mobile.

And when the time came to review that very same content before implementing a responsive design it was clear the content was not suited for the mobile world.

The fluff was everywhere

As I reviewed the content on each page the fluff became apparent. Content I added to pad out my website. Do mobile visitors to my website really want to see snapshots of my digital scrapbooking? Do they really want to read my latest mumblings on twitter? I doubt it. And what about those featured panels on the homepage!?

So I have hidden some parts of the website when viewing on smaller resolutions, not ideal and left in my scrapbook for better or worse.

The good parts

What the layout handles well is varying viewport sizes. My website is not mobile ready, it just adapts nicely to different screen sizes.

Summing up

Media queries are simple. The syntax is not hard. The hard part is designing a website which works in varying resolutions and in a number of different contexts. Oh! and looks well of course. That’s the tricky part.