> On the web > About CSS and RWD: what about IE-first?

About CSS and RWD: what about IE-first?

About this article

An article by Stéphane

Published on 22 July 2013

Short URL:


This-first and that-first. We’ve chosen a middle way.

At a project recently we’ve had to cater for IE7 and IE8 (yes, still, as our client is worldwide and can’t ignore corporate customers — and the Chinese market is important for them) yet the designs were responsive and had been customized for wider screens (wider like 1920px).

So we had to take a step back and decide on the strategy. We had a quick mental ninja adjustment that went like this :

  1. we have to be responsive
  2. we have 6 breakpoints – it’s a fairly design-intensive website, going from 768px up to 1920px
  3. but we cannot serve wide designs to IE7 and IE8 considering most of them are by nature certainly on older computers, so we expect them to have smaller viewports than more modern user agents (we cannot back it up with research, agreed, but let’s go with it)
  4. also, we cannot serve crammed pages for the simple reason that IE7 and IE8 don’t understand media queries and we wouldn’t care, so we had to target a smaller viewport than 1920px as our starting point
  5. luckily, we have a separate set of mobile designs and pages (big site, intensive design, user experience optimization) so we won’t rely on mobile-first content and cannot serve ‘dumb’ mobile-like pages to such a large group of users
  6. of course we need to minimize the number of HTTP requests as we’re going to have a whole lot of other assets to download (think rich imagery)
  7. we cannot rely too much on JS libraries to polyfill IE’s not being responsive as we have a whole lot of javascript already

So we ended up deciding to neither go mobile-first nor desktop-first, but middle-way-first, so to speak. Or IE-first as it is easier to pronouce.

We’ll provide the site with a defaut 1024px design, assuming IE7/8 will be on screens around these sizes, and media queries for below 1024 and above 1280.

IE-first. What do you think? Would you have the same approach?

PS: thanks to Marie for the feedback


    • 22 July 2013

    Did you play around with IE conditional comments to load your IE7/8-only CSS? Other browsers ignore them, so no additional requests, and IE7/8 will ignore media queries, sparing them the request(s).

    Also, on #3 you can identify viewport sizes (for IE7 and IE8) with research. Research from the site audience, in fact. I wrote up how you can add script to your page to track viewports using Google Analytics, though it’s no good for getting data before you add the script:

    Reply to Adrian Roselli

    • 22 July 2013

    Adrian: Actually we did want to play with conditional comments, but we ended up not using them as we would still call two CSS’s: ie.css and a generic style.css.

    Come to think of it we could also compile a separate, IE-specific CSS. I’ll think about it, thanks for the suggestion (we’re using LESS, so I expect we’ll have to jump through a few loops, but thanks nonetheless).

    As per viewport vs. screen size, I’m with you on this point, although in this special instance we don’t have access to this info, it wasn’t recorded (stats tools used were out of the box).

    Reply to Stéphane

    • 22 July 2013

    Hi Adrian!

    Yes you’re right, we could use a specific stylesheet for IE thanks to conditional comments.

    However, beside the fact we didn’t want to force old IEs to load two stylesheets, I can see two problematics:

    * I can’t see how we could generate a specific stylesheet for IE with LESS, using a similar approach than Jake Archibald’s with Sass. Without such a trick, I can hardly imagine how complicated it would be to create, on one hand, a full media query powered CSS, and on the other hand, a CSS without any media query. Any tips on that matter?

    * Targeting only IE with the no-media-query CSS would exclude the other potential browsers that do not support media queries either. I can’t think of any at the moment, though smile

    Reply to Marie

    • 22 July 2013

    Marie :

    I don’t use LESS or SASS, and I have managed to pull it off. I don’t know the scale of the site nor the volume of CSS, but if the CSS you use for the IE7/8 layout matches one of your media queries, just copy-paste that into your IE-only CSS file. I know it’s a bit manual, but you can lean on version control, server-side includes, or other techniques to mitigate that.

    You can prevent old-IE from downloading all the other CSS just by wrapping all of it in a query selector (media: screen is a good start and doesn’t block any print styles you create since I am sure you would have those load separately anyway).

    Whether or not you exclude other potential browsers can be answered pretty quickly by looking at your logs. If you have a year-long span of no non-MQ browsers (I am just pulling that number out of nowhere, your time span may be different) then perhaps you can ignore them.

    Or simplify it — use the same rules you used to decide to no longer support IE6.

    Reply to Adrian Roselli

    • 22 July 2013

    I have the same approach for some web sites : a kind of "desktop first made for IE", and MQ for others. It avoids polyfills.

    If the design allows to style using percents, the website stretches itself, so IE users can take advantage of higher resolutions. The advantage of 1024 px is that you don’t have problem on an iPad... in landscape.

    Reply to Nico

    • 23 July 2013

    “and cannot serve ‘dumb’ mobile-like pages to such a large group of users”

    This made the sound of sand on my teeth when eating clam chowder.

    1. You can
    2. Mobile-like pages are not necessary dumb
    3. What the large group of users thinks.

    More explicitly, I have very often heard that users do not like minimalism, simple, FROM Web designers and clients, BUT never I heard that from actual users. Each time I look at people who are not geeks surfing (parents and friends), they like it simple even if ugly.

    Yes a user on a lab test will say "Oh beautiful", but on a long term usage, a simple version might be preferred. One good thing though about responsive design is that we can resize the window for making the design… dumb wink

    PS: all of that to moderate depending on your own projects, constraints, etc, which are not really known in that blog post wink

    Reply to karl

    • 23 July 2013

    karl : Yes, hence the quotes around ‘dumb’. The design constraints on this one project are very important, we usually can simplify the experience more than that.

    Reply to Stéphane

    • 23 July 2013

    I often do this.
    Copying the 1024px layout in a separate IE 7 - 8 CSS file called with conditional comments doesn’t seem efficient to me (more files to load, a hassle to maintain).
    I’d rather have the 1024px layout as a base, avoid loading heavy resources in it so that mobiles don’t have too much to load, and use MQ for smaller (mainly for layout) and bigger screens (for layout and high-density resources).

    Reply to Soph

    • 25 July 2013

    Working right now on that same issue. We plan to support IE8 in the next few months and here is how we did it (It’s inspired from Jake’s method):

    The goal for us is to keep it mobile-first so we can drop everything related to IE8 easily when its market share drops below 1-2%.

    Reply to Kaelig

    • 25 July 2013

    I forgot to mention that we plan to serve a different CSS file to IE<=8.

    We will concatenate all our CSS files together and activate the "old-ie" mode in them, resulting in a rasterized IE8-friendly unique stylesheet.

    Reply to Kaelig

    • 8 August 2013


    I totally agree with your method.
    I never get the point of the mobile first approach and adding an other css for old ie.
    it’s not good for performance.
    I use the exact same thing as you : a defaut 1024px design (960px), and media queries for below 1024 and above 1280.

    I would like to add that I don’t use "global" breakpoints too.
    I prefer a per module breakpoints.
    Header or main navigation don’t need to have the same breakpoints as the content, the footer or an other part of the page.
    each part or module should be adapted according to it’s content or design.

    For this I use a slightly different version of the Chris Coyier technique

    @mixin above($device-width)
    @media screen and (min-width: $device-width)
    @content ;

    @mixin below($device-width)
    @media screen and (max-width: $device-width - 1)
    @content ;

    and use it like this

    @include below(980px)

    @include below(480px)

    @include above(1200px)

    for sure I can also create some main breakpoints in variables


    and use

    @include below($medium)

    I will be very glad to hear your thought about this.

    PS: sorry the braces don’t work on comments

    Reply to jeremy castelli

    • 8 August 2013

    Sorry, the link I posted is no longer valid. Here is a link to the solution we came up with:

    Reply to Kaelig

    • 8 August 2013

    jeremy castelli : I’ll fix the braces, sorry, my CMS works too well sometimes wink

    Reply to Stéphane

    • 9 August 2013

    Stéphane : merci, ce sera plus lisible

    Reply to jeremy castelli

Who are you?
Your post
  • To create paragraphs, simply leave blank lines. All outgoing links will feature an attribute rel="nofollow". Please do not spam.

This is the Desktop version Show the Mobile version