How to Use Responsive Web Design to Support Old Browsers

Contributing Editor

In my previous article, Is Internet Explorer Development Really a Waste of Time?, I hinted that it’s possible to support older browsers without significant development effort. In this tutorial, we’re going to create a simple web page which works in all modern browsers as well as IE8, IE7, IE6 and possibly earlier versions.

Before we start, please note that we’re not aiming for pixel perfection or identical functionality. That will never be possible, so don’t even bother. However, we’re NOT going spend any time testing, fixing or hacking IE bugs and the page will still work.

The Objective

This is the design we’ll attempt to create in modern browsers:

designclick any thumbnail to view the full-sized screenshot…

It’ll never win any awards, but contains typical components such as a header, footer, content, sidebar and drop-down CSS menu. Note that the header and menu are fixed at the top of the browser window.

design in IE6Assume we coded this page using standard HTML5 and CSS. IE9 and 10 will work as we expect but, even though this is a simple design, IE6 fails to render the page correctly. The layout breaks because the floated elements trigger IE6′s double-margin bug. The menu appears in the wrong place (display: fixed is not supported) and it’s unusable because IE6 does not allow :hover or :focus on elements other than links.

While we’ve all encountered worse issues, the site is fundamentally broken.

design in IE7IE7 fares better but its weird margin handling causes the titles to be cropped.

We could fix this with conditional CSS or an IE7-specific hack, but life’s too short for that sort of nonsense!

design in IE8IE8 is acceptable. They layout and menu work as we expect and we’re only missing a few CSS3 effects such as rounded corners and drop shadows. I’m sure XP users stuck on that browser would be more than happy.

Responding to the Problem

Let’s consider Responsive Web Design. RWD uses media queries to apply styles depending on the browser’s width or height. For example, this link will apply the definitions in mystyles.css if the page width is 600px or greater:


<link rel="stylesheet" media="screen and (min-width:600px)" href="mystyles.css" />

RWD is generally used to support mobile browsers. Your desktop design is simplified for small screen devices, e.g. the layout is linearized into a single column and features which rely on hover effects are adapted for touch.

Unfortunately, some mobile browsers don’t implement media queries. This means we can’t rely on using a desktop design then simplify it when a small screen is detected. But we can switch it around, i.e. we start with a baseline mobile design and only apply desktop layout effects when the browser supports media queries and the screen dimensions become large enough to be practical.

This is referred to as “mobile first” and has become a best-practice technique for developers implementing responsive sites.

Guess which other browsers don’t support media queries? Why couldn’t we use a simpler mobile layout to support IE6, IE7, IE8 and any other legacy browser. Linearizing the layout will immediately solve most IE-specific issues.

The Solution

Let’s look at the demonstration page which supports IE6+, mobile devices and all modern browsers…

The page uses two stylesheets:

  1. simple.css — our basic mobile/legacy browser layout
  2. complex.css — overrides simple styles for the desktop layout

The simpler styles are always loaded:


<link rel="stylesheet" media="all" href="simple.css" />

We then use a media query to load the complex layout if the screen width exceeds 800px. IE6, 7 and 8 will ignore the declaration:


<link rel="stylesheet" media="screen and (min-width:801px)" href="complex.css" title="complex layout" />

Here’s where the magic comes in: we use a conditional stylesheet to load the complex styles in older versions of IE which support the desktop layout:


<!--[if (IE 8)]>
<link rel="stylesheet" media="screen" href="complex.css" title="complex layout" />
<![endif]-->

In this case, I’m only happy to support IE8. The layout won’t be responsive but, since IE8 does not run on mobile devices, we know this must be a desktop user with a reasonably large display. Were I prepared to live with the IE7 margin quirks, I could have used if (IE 8)|(IE 7) in the conditional comment.

That’s all we need other than the HTML5 shim…


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The result: our demonstration page works everywhere! Fire up your old copy of IE6 or IE7 and you’ll see this design…

design

It’s not as pretty, but it’s far more usable than before.

If you’re already supporting mobile devices, this technique won’t require additional development. If you don’t have a responsive design, you will require a simple mobile stylesheet but that’s a minimal effort for the number of mobile and legacy browsers you’ll be supporting.

Easy. Or certainly easier than fixing old IE bugs or persuading millions of users to upgrade their browsers.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like A Crash Course in Mobile Web Design.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://notengoidea.com.ve/blog Hugo Cabrera

    Hi thanks for that!!! I really appreciate it!!!

  • http://164a.com Eric Daams

    Great fresh approach to an old problem. I like the fact that you’re effectively killing two birds with one stone: get a responsive theme with backwards compatibility thrown in for good measure.

    Eric

  • http://metaflood.com Metaflood

    Appreciate the article. I hadn’t thought of combining Media Queries with an IE8 Conditional comment. Simple, and yet totally workable for many situations. Thanks!

  • Manish

    Explained in a very well manner. I have been hearing mobile first approach since last year, but no one has explained it so beautifully.

    I was planning to redesign my website. This article has come at right time.

    Hats off !!!!

    Manish

  • http://www.dewargreen.com/ Tim Green

    Thanks Craig – Lovely clear explanation (and implementation) of mobile first.

    • http://www.optimalworks.net/ Craig Buckler

      Cheers Tim – great to hear from you.
      You can sell it as a bonus feature to all your clients now!

  • Michael Sullivan

    Interesting approach, but I think you could run into a bit of complication if the site design uses background images (some still do….) They don’t work so well when applied to both a mobile and full size site.

    Also you could have a problem with multi-column designs and those pesky Old-IE bugs due to padding and margin issues.

    But for a single column / image-light design this works well.

    • http://www.optimalworks.net/ Craig Buckler

      It’s not a problem. If you’re using large backgrounds or multi-column layouts for mobile devices, you’re really talking about modern smartphones with reasonably large screens. You’re certainly not considering a 3-year old Nokia feature phone.

      You can therefore implement three (or more) responsive layouts:
      1. A single-column, no-background version for old mobiles and IE6/7.
      2. A slightly more complex version for smartphones. Since they will understand media queries, you can set a min-width of 0px and the styles will be applied.
      3. A multi-column desktop layout when the width exceeds 800px or whatever is practical.

      The other benefit of this approach is that older browsers may be running on slower connections — especially on mobiles, but there are likely to be IE6 users out there using dial-up too. They won’t load the complex stylesheets so they won’t use large backgrounds and sap the bandwidth.

  • Suman Mishra

    Thanks Craig for sharing an excellent article on Responsive + Mobile first..

  • Len

    Craig, that right there is one elegantly approach to an ugly problem. Thanks!

  • http://levelonewebdesign.com Thomas Jay

    Very nice approach Craig. I hadn’t considered attacking this issue from this perspective. Quite elegant and it seems like it would work quite nicely. Thanks for sharing as always! I always enjoy your articles.

  • http://axiscms.eu it

    Good article! I’ve used this approach about a year now and it works very well. For IE8 I use this script to make it support media querys http://code.google.com/p/css3-mediaqueries-js/ In case of js disabled it will fall back to mobile layout.

    • http://www.optimalworks.net/ Craig Buckler

      That shim is certainly viable if you want media query support in IE8. Personally, I wouldn’t bother — IE8 users will be using a PC and some of these libraries slow older IEs to a crawl.

  • Andrew Croce

    Hi Craig,
    This is a great solution, but I might have found a bug, maybe just a fluke:
    I had your example layout opened in a Firefox tab (since 15.0.1). After a system reboot, and Firefox updated to 16.0.1 before launching, and then reloading the saved tabs, the legacy single-column layout was displayed!
    This was corrected by simply reloading the page, so I don’t know if this can be replicated.
    Other than that, it seems to work perfectly! I’ll definitely try this technique on my next project.
    Thanks for putting this together!

    • http://www.optimalworks.net/ Craig Buckler

      Hi Andrew. I have seen this before in Firefox and it appears to be an issue with the browser’s caching of RWD pages rather than this particular technique. I can only guess that it’s caching the basic CSS but not that loaded by media queries.

      I have seen mentions that it’s caused by AdBlock plus — are you using that? Bizarrely, it’s doesn’t happen every time. Perhaps it only affects the page if you have that tab open as the browser restarts? As you say, a refresh fixes it.

      • Andrew Croce

        It happened again (and again, a refresh fixed it), when Firefox reloaded the tab after closing the browser overnight.
        It has a built-in ad blocker, but I don’t think it’s AdBlock plus, just the one that ships with Firefox.

      • http://www.optimalworks.net/ Craig Buckler

        Correct me if I’m wrong, but Firefox doesn’t have a built-in blocker (there’d be outrage if it did!)

      • Andrew Croce

        It’s a popup blocker, actually: nothing fancy, it just bars popup windows (most of the time) and asks whether I want it to be shown.

  • Kazuhito

    HTML5 shim should not be included via Googlecode directly for some reasons …

    • http://www.optimalworks.net/ Craig Buckler

      Which are?…

  • http://accessibleweb.eu Richard

    The big issue for me with this solution is that these drop down menus are not accessible to keyboard only users. It is certainly possible and desirable to make drop down menus keyboard accessible.