I’ve been using this site to experiment with the principles of responsive, mobile-first web design.

The details of building a site mobile-first are discussed in Peter Gasston’s article Using Media Queries in the Real World and captured in Andy Clarke’s 320 and Up framework. I’ll let the 320 and Up description explain:

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.

Clever, right? Except for…

Desktop Browsers that don’t support media queries

The major assumption of writing your CSS like this is that browsers on larger screens will understand those media queries. And most of them do.

But what if they don’t?

You already know I’m talking about Internet Explorer (version 8 and lower, in this case), but also older versions of Firefox (prior to 3.5), Camino, and heaven knows how many other terrible browsers that might be out there don’t support media queries. With a relatively wide screen, your site might look a bit let’s say unloved without all those advanced layout goodies like columns and sidebars kicking in. Is there anything we can do to send a little tenderness their way?

Option 1: Internet Explorer conditional comments

Peter Gasston’s article recommends using conditional comments to serve an additional stylesheet with widescreen styles to only Internet Explorer, like so:

<!--[if lt IE 9]>
   <link href="desktop.css" media="screen" rel="stylesheet">
<![endif]-->

If you’re already breaking out your CSS into multiple files this isn’t a bad way to go, but otherwise it’s another CSS file to maintain and serve up. Plus, this does nothing for any browser that isn’t IE.

Option 2: JavaScript polyfills

The 320 and Up framework recommends using respond.js or a similar script to cram media query support into desktop browsers that don’t have it.

I think this could work well for simpler sites, but if your styling is pretty complicated or you’re also using assorted other polyfill scripts like Selectivizr or SuperSleight, when something goes wrong it will be pretty tough to troubleshoot. And you’re also dooming IE to run that much slower.

I tested this approach, and on this site I ran into some conflicts (that have since reportedly been resolved) between respond.js and Selectivizr, but I was also using some pretty wild CSS selectors in media queries to move columns around – who knew :nth-of-type selectors could ever come in handy?

Option 3: Treat Internet Explorer like the outdated browser that it is

Another idea that I first heard about from Joni Korpi is to just treat older versions of Internet Explorer as if they were crappy mobile browsers: serve them a narrow layout just like on a smart phone and you won’t have a lot to fix.

I have to admire the elegance of this: after all, one of the big wins of designing for mobile first is that you’re prepared for bad browsers, and I think we can all agree these days that old IE is a bad browser.

The only trick is to set up your layout so that bad browsers don’t let your content grow too wide and ungainly.

There are many ways to go about that, but as an example from my site, here’s the code for the container class that I use to center the layout and allow it expand to a maximum size with max-width. I’m using Paul Irish’s Internet Explorer conditional classes to give me a hook for IE6, but otherwise this is just CSS:

.container {
   margin: 0 auto;

   /* For browsers that do not support media queries,
    max out .container at an arbitrary width */
   max-width: 480px;
}

/* IE6 doesn’t understand max-width */
.ie6 .container {
   width: 480px;
}

@media only screen and (min-width: 0px) {
   .container {
       max-width: 1200px;
   }
}

The magic part is the @media only screen and (min-width: 0px) { ... }. Any browser that understands basic min- or max-width media queries will pick up those styles, because the browser window will always be wider than 0 pixels. But those styles are also effectively hidden from any browser that doesn’t support media queries.

So bad desktop browsers get a still-readable narrow layout with trivial effort and no JavaScript, and you’re free to go nuts with your CSS in those media queries. Feels nice, doesn’t it?

And if any old IE user complains (they won’t), just tell them they’re getting the special iPhone treatment. So trendy!