Minimalist Agenda

Responsive websites rock, period. All the cool designers are doing it, and in reality, it’s definitely worth doing. The web is no longer just about our desktop and laptop computers, and we get that.

There’s just one tiny problem: Internet Explorer

Oh, come on, not this again!

I’m sorry dear Reader, but this browser is still a consideration. Now, IE9 is pretty good, as far as CSS support goes. It supports @media queries and the like, but IE7 & IE 8, which are still in use, unfortunately, do not. Oh, there are various solutions, such as using polyfills like Respond.js, checking for CSS3 Feature support with Modernizr, serving up the mobile version, and so on, but you no what?

We don’t need them. I have found the solution, and that is to simply give IE 8 and below the desktop layout.

Huh?

Let’s say you have some HTML.

<div class="container">

    <header>This is a header</header>

    <section>
        <article>This is an article.</article>
    </section>

    <aside>This is the Sidebar</aside> 

    <footer>This is the footer.</footer>

</div>

And then, you make some CSS. You want this layout to be responsive, so you throw in some @media queries, like so:

div.container {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
}

header, section, aside, footer {
    width: 100%;
}

@media screen and (min-width: 727px) {
    section {
        width: 70%;
        float: left;
    }

    aside {
        width: 30%;
        float: right;
    }
}

footer {
    clear: both;
}

“Yes, yes… but what was that about IE?”, you ask. The answer is pretty simple.

If a user is viewing your website in IE, chances are that they are on a desktop, laptop, netbook or, at worst, a tablet.

This means that the idea of a “minimum resolution” is, in the case of IE, not such a far-fetched concept. Therefore, the solution is simple. Use a conditional comment to load an IE-specific stylesheet, and put everything that’s in your media queries into that stylesheet.

So, in IE8-7.css, you’d put this:

section {
    width: 70%;
    float: left;
}

aside {
    width: 30%;
    float: right;
}

Well, obviously, with large-scale projects, things aren’t nearly so simple, but keep your expectations low, aim for compatibility with most mid-range monitor resolutions, and chances are that you’ll end up with a site that is still usable, and maybe even pretty, in older versions of IE.