Old browsers and support - how to warn users that their browser is unsupported

There are still people out there with outdated browsers. The biggest sinner is internet explorer. From most of the browser statistics I have seen, IE8/IE9 is still 2-4% traffic. This might not sound like a lot, but if you are running a site with millions of users, this is in the thousands. The reason why there are still so many users on old browsers, is that they do not auto-update. So what are your options when it comes to old browsers?

Making your site compatible

You could make your site available to them. Meaning you will have to write your site like it was back in those days. IE8 and IE9 does not support a lot of modern browser functions. Which means you will need javascript libraries to fill in the gaps. You cannot use modern css, even though some is supported in IE9. The biggest drawback of making your website ie8/ie9 compatible is the development cost (or time). You can get far with older browser by writing your html correctly and using javascript libraries like modernizer and html5shiv.

Warning your users

What I have seen on many sites is a warning for older browsers. When a user hits the site they are greeted with a pop up or a message at the top. This message is usually in red or yellow to show it's importance. This is the method I use on my blog which reads: "Warning: You are using an older browser. You may not be getting the full experience of this site. If you wish to take full advantage of this site please upgrade to a modern browser". Whether you think the users browser is legacy or deprecated I think you should give them a fair warning.

My website actually does support internet explorer 9. However I do not wish to think about IE9 when developing new features. The reason it works is mostly because of standardization.

The code for my browser warning is below. It shows the error message at the top of the page if you view in internet explorer 9 or lower. It is simple and just a couple of lines of code.

Html

<!--[if IE 9]>
    <div class="container">
        <div class="deprecated-browser-warning">
            <strong>Warning:</strong> You are using an <strong>older browser</strong>. You may not be getting the full experience of this site. If you wish to take full advantage of this site please upgrade to a <strong>modern browser</strong>.
        </div>
    </div>
<![endif]-->

CSS

.deprecated-browser-warning{
	text-align: center;
	background-color: #FF8181;
}

Why not both?

There is also in between of the two methods. Make most of the site available to your users. But give them the warning at the top of the page that you only partially support their browser. You can then fix the features you find essential on your site for older browsers. This will make your site available to more users in little time.

Always remember to keep your user group in mind. This blog for example is about technical items. Most of my users will be using fairly modern browsers, or be able to switch to one. But you also have to consider your situation: if this was an ecommerce site, the 2-4% might mean 2-4% more money.

You should have some tracking in place for your website, so that you know who your users are. Tracking also tells you their browser, screen size, and operating system.

Whatever you do, have a strategy!. I hope this post helped you, let me know in the comments if it did!