I’ve recently been involved in a project with a company who had interest in my work with mobile design with media queries. Before I began we talked what tools we wanted to use to create clean, lean code that worked across as many devices as possible. I of course suggested using HTML5 Boilerplate as they wanted to use HTML5 tags such as <header> and <section>.

I also suggested that we take a look at an extension to HTML5 Boilerplate called 320 and Up by the supersmart guys at Stuff and Nonsense.

The Designing Up Idea

The idea behind 320 and Up is to design for the tiny screen first to prevent the loading of elements for devices that don’t need them:

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

While this is a noble cause in and of itself, I found that there was another potentially more important reason to do this: It forces a designer to think about the mobile experience first.

Designing upside down inside out and backwards

Designing for User Experience has always been desktop-centric for me. Yes, the mobile web has been here for many years now, but is has always come secondary ( or third or forth-dary). Add in that it’s not been a high priority for most of my clients and it’s no reason my portfolio lacks great mobile examples.

Now that CSS3 Media Queries have gained major browser support, there really is no reason to not design every website with the small screen as the starting point.