Skip to main content Accessibility Feedback

Mobile First and Internet Explorer

Mobile first web design extends progressive enhancement to site layout. But because Internet Explorer 8 and lower do not recognize media queries, they get the small screen layout instead of the bigger screen version on mobile-first designs.

Fortunately, there’s a pretty simple fix that allows you to code mobile first and provide a bigger screen experience for older IE browsers.

What is mobile first?

Mobile first, from a coding perspective, means that your base style is typically a single-column, fully-fluid layout. You use @media (min-width: whatever) to add a grid-based layout on top of that.

The alternative - desktop first - involves starting with a wide, grid-based layout, and using @media (max-width: whatever) to scale down to a single-column layout.

Why mobile first?

iPhone and Android browsers are quite capable, but older smart phones, feature phones and other small-screen devices like gaming consoles may not support media queries.

Imagine trying to read tiny text in a big screen layout on an old, underpowered feature phone.

Mobile first web design extends progressive enhancement to site layout, allowing you to serve simple, readable content to all devices, and layer on structure and presentation for more capable devices.

Mobile first and Internet Explorer

Unfortunately, Internet Explorer 8 and older don’t recognize media queries. That means, they get the base, small screen version of a mobile first website instead of the bigger screen version.

That may work well for simple, content-based sites, but it may not always be acceptable for certain designs.

Fortunately, there’s a pretty simple fix that allows you to code mobile first and provide a bigger screen experience for older IE browsers.

A Conditional IE Class

We’re going to add a conditional .ie class to our html element just for older Internet Explorer browsers. This will let us add some conditional styling later that only applies to those browsers.

Replace the html element with this code:

<!-- Conditional class for older versions of IE -->
<!--[if lt IE 9 & !IEMobile]><html class="ie" lang="en"><![endif]-->
<!--[if gt IE 8 | IEMobile]><!--><html lang="en"><!--<![endif]-->

Why the html and not the body? A lot of JavaScript functions target the body element. This helps avoid any conflicts.

You’ll also notice that we’re not adding the .ie class to IE Mobile browsers. Those are typically on small screen devices, so we want them to receive the small screen layout.

Adding Conditional CSS

Rather than serving a conditional IE stylesheet, we’ll be adding a few IE specific modifications to our main stylesheet. It makes it easier (for me, anyways) to keep track of things when I make changes and updates.

Let’s say I’m using a simple three-column grid (adapted from the Kraken boilerplate) like this:

@media (min-width: 40em) {

    .row {
        margin-left: -1.515151515152%;
        margin-right: -1.515151515152%;
    }

    [class^="grid-"],
    [class*=" grid-"] {
        float: left;
        width:96.969696969697%;
        margin-left: 1.515151515152%;
        margin-right: 1.515151515152%;
    }

    .grid-third {
        width: 30.30303030303%;
    }

    .grid-half {
        width: 46.969696969697%;
    }

    .grid-two-thirds {
        width: 63.636363636364%;
    }

}

To make that work in Internet Explorer 8 and lower but still serve a mobile first layout, I would copy-and-paste the content outside of the media query, and prefix each class with .ie.

Here’s what the example above would look like:

@media (min-width: 40em) {

    .row {
        margin-left: -1.515151515152%;
        margin-right: -1.515151515152%;
    }

    [class^="grid-"],
    [class*=" grid-"] {
        float: left;
        width:96.969696969697%;
        margin-left: 1.515151515152%;
        margin-right: 1.515151515152%;
    }

    .grid-third {
        width: 30.30303030303%;
    }

    .grid-half {
        width: 46.969696969697%;
    }

    .grid-two-thirds {
        width: 63.636363636364%;
    }

}

.ie .row {
    margin-left: -1.515151515152%;
    margin-right: -1.515151515152%;
}

.ie [class^="grid-"],
.ie [class*=" grid-"] {
    float: left;
    width:96.969696969697%;
    margin-left: 1.515151515152%;
    margin-right: 1.515151515152%;
}

.ie .grid-third {
    width: 30.30303030303%;
}

.ie .grid-half {
    width: 46.969696969697%;
}

.ie .grid-two-thirds {
    width: 63.636363636364%;
}

Now all devices will be served the mobile first layout, and older Internet Explorer browsers will get the bigger screen styling.

Follow this format for any bigger screen content that you want to work on IE8 and lower.

What about Respond.js?

A few folks, both in the comments and on Twitter, have pointed out that Respond.js, a cool little script from Scott Jehl, takes care of all this without you having to write a single extra line of code. Why don’t I just that?

In a word: control. As Scott notes in the documentation:

As you might guess, this implementation is quite dumb in regards to CSS parsing rules. This is a good thing, because that allows it to run really fast, but its looseness may also cause unexpected behavior.

There are enough things that go wrong when dealing with older browsers. Adding another dependency that have little control over just doesn’t sit well with me. But a lot of people like and use Respond.js, so I thought it was at least worth mentioning.

This section was added on December 14, 2013.

Things to consider

Does it add bloat to your code? A little. Is it a pain? Yep.

It’s worth considering whether or not providing the small screen layout is “good enough” for older Internet Explorer browsers before going down this path.