The lack of media queries

In a Yiibu presentation from September 2010 slide 79, had this sentence.

"the absence of support for @media queries is in fact the first @media query…"

So any browser on any machine that doesn't support media queries will have this one true 'media query' from the outset.

Have I told you lately?

What I'm seeing lately are designs created from 320 pixels and upwards (not Andy's fantastic boilerplate). Which is great if your have a browser viewport that's 320px wide. But 'the mobile web' doesn't start at 320px.

Recently Sam Richard posted an overview of his browser statistics for December 2012. Although screen resolution doesn't necessarily equate to a devices viewport. You could easily be breaking your site if you only start optimising the design from 320px.

Baseline first

On January 9th Jeremy wrote a brief musing on supporting IE in a media queried world. In it he mentions "linearised content with baseline styles". That is what we should be doing first.

In the code.

Before you even think about the layout on your popular device from 320 and up code as if the design is a complete "stack and scroll" device.

Basics First

Add your HTML, include your reset then only add font sizes, families, weights. Include colours and minimal margins and paddings to your CSS. Don't float. Don't make a horizontal navigation. No gradients, no rounded corners. Just the basics.


Doing this will give you good stead for the devices and browsers that don't support media queries and the ones that do but are smaller than 320px.