Make your mobile first design look just fine in Internet Explorer 8

Doing responsive design the mobile first way and having to deal with legacy desktop browsers, that do not support media queries, can be a pain. There are several approaches that we can take. One is to simply not care. Just let your mobile design stretch beyond the point of ugliness in widescreen browsers, that do not get your media queries. Until today, I’ve been taking this approach on my blog.

If you, however, do care about the look of your page in legacy browsers, one option is to use a polyfill like Respond.js. Generally, I do not like this approach. That’s because your page will initially render as an overly stretched version of your mobile design; then blink and bounce into your desktop design, as the javascript polyfill executes.

Alternatively, you could serve a fallback style sheet to legacy desktop browsers, that will apply your desktop design outside of media queries. However, this has the downside of having to maintain two separate style sheets.

Or we could utilize the fact that IE8 and similar browsers do not support media queries. Here’s how:

/* Constrain width of body in browsers lacking media query support */
body {
    max-width: 32em;
    margin: 0 auto;
}

/* Reset body properties for browsers with media query support */
@media only screen and (min-width: 1px) {
    body {
        max-width: none;
        margin: 0;
    }
}

That’s it. IE8 and other legacy desktop browsers, that do not support media queries, will now render a horizontally centered version of your mobile design. While browsers with media query support will render your page as usual.

Mobile design in IE8Dekstop design in modern desktop browsers

IE8 (first image) renders the page’s mobile design, while modern desktop browsers render the desktop design based on media queries (second image).

Is this the optimum design for a widescreen IE8? Probably not, but it is good enough. This is what IE8 understands, so let’s keep it that way. We need to move beyond doing all sorts of hacks and extra work to make our sites look the same in old and modern browsers. Truly, this is about making things work and look alright in legacy browsers, so that we can move on and focus on making something awesome for more modern browsers.