Practical Ecommerce

Web Design Tips: Compatibility with Older Browsers

As web technology advances and development standards evolve some web browsers are falling behind. Many lack the ability to support new technologies and file types or even provide the best available user experience. These lagging browsers put ecommerce businesses in something of a quandary. How do you offer customers the best possible user experience without leaving some of those customers behind?

In this edition of Web Design Tips, a recurring Practical eCommerce feature, I will (1) introduce and explain the trouble with old and noncompliant browsers and (2) describe two ways to manage browser compatibility issues, particularly for older versions of Microsoft’s popular Internet Explorer web browser.

Video: Two Ways to Mange IE6 Browser Problems

The Problem With Noncompliant and Outdated Browsers

Thankfully there are a lot of web browsers available to suit the tastes and web surfing habits of just about any consumer. I like Mozilla Firefox and Google Chrome. But I have friends who swear by Maxthon, Opera 9.6, or Safari (Safari 4 does have some nice features). And about 44 percent of Internet users surf using one of three available versions of Microsoft’s Internet Explorer (IE).

While I like all of that variety, having so many browser options can be troublesome for web designers and developers since each browser could render your web site differently. What’s more, as browsers change and improve over time they begin to manage JavaScript, deal with server calls, or render images differently, making it even more complex to design websites that look good on most browsers. And while Firefox, Opera, and Google Chrome all do a great job of keep users up to date, some browsers don’t offer automatic updates, so that some users are still puttering around the web in IE 6. And this is the problem with older browsers.

Even some newer browsers can pose a problem when they do not comply with commonly agreed-to standards. For example, the World Wide Web Consortium (W3C) is a standards body that brings together stakeholders, develops standards, and does a good job of trying to make life easier for the web coding community.

Unfortunately, not every browser complies with the W3C standards. For example, Microsoft has consistently chosen to ignore many aspects of the W3C standard, making its browser harder to work with. And although the CSS3 working group has made a lot of recommendations, almost no browser fully supports what will soon be the CSS3 (Cascading Style Sheets 3) standard.

Both old browsers and noncompliant browsers make the web designers’ job harder, especially if that web designer is a sole proprietor or ecommerce do-it-yourselfer.

Applying the 80/20 Rule

The first step toward solving old browser or noncompliant browser problems is to apply the 80/20 rule, known as the Pareto principle. Basically, 80 percent of your online store’s business comes from 20 percent of potential customers. We’ll apply that principle loosely and argue that we only need to focus on the most popular browsers so that we won’t drive ourselves crazy redesigning an online store for the two guys using an old version of the Konqueror web browser (actually a fairly good browser). Instead we’ll focus on the top browsers.

According to browser statistics from, 45.5 percent of Internet users surfed with a Firefox browser in January 2009, making Firefox far and away the most popular single web browser. Some 25.7 percent of Internet users in January 2009 browsed using Internet Explorer 7 (IE7), and 18.5 percent of Internet users had Internet Explorer 6 (IE6). So if we design for Firefox, IE7, and IE6, we can safely reach 89.7 percent of Internet users. And since Firefox is one of the most compliant browsers around, when we design for Firefox we get good renderings in Google’s Chrome (3.9 percent of Internet users) and Opera (2.3 percent of Internet users) too.

Firefox is Easy, IE7 Not So Much

Designing for Firefox is easy. Just follow the W3C standards and you should have no problem with the leading browser.

IE7, which lacks some W3C compatibility, won’t cause you huge problems, but it does have a relatively long list of noncompliant behavior. These behavior problems include:

• The Peekaboo Bug—a float bug that is caused by how IE7 manages the box model
• The Border Chaos Bug—negative margins for consecutive boxes makes IE7 scramble the box borders
• The Double Float Margin Bug—IE7 doubles the margins on floated elements

IE6 is Troublesome, Too

Since it was introduced in 2001, IE6 has become something of a rendering nightmare. My pet peeve with IE6 has to do with this browser’s inability to render alpha transparency in .png files. As image files go, the .png is pretty powerful and a godsend for developing stylish websites. It offers the best looking transparency available for the web, and for many images (particularly heavily edited images from Adobe Photoshop or Illustrator) it produces smaller files than .jpg or .gif. But much to my chagrin, IE6 sucks the life right out of transparent or semitransparent .png files.

Fix No. 1, Use JavaScript and Encourage Visitors to Upgrade

Having explained the old browser and noncompliant browser problems at some length, I want to turn our attention to two tactics for handling these browser issues. First, we can use a JavaScript to identify which browser a site visitor is using and then kindly ask them to upgrade their browser.

As an example, here is the JavaScript that I use on one of my own websites to redirect IE5 and IE6 users to a message about upgrading their browser.

<code>&lt;script type="text/javascript"&gt;
function detectBrowser()
if (/MSIE (d+.d+);/.test(navigator.userAgent)){ //test for MSIE x.x; var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion&gt;=8)

 else if (ieversion&gt;=7)

 else if (ieversion&gt;=6)'','mywindow','width=920,height=700','scrollbar=yes')
 else if (ieversion&gt;=5)'','mywindow','width=920,height=700','scrollbar=yes')


This script does nothing if my visitor is using IE7 or the newer IE8, but if a visitor is using IE5 or IE6 a new window opens. That window explains that the browser they are using is too old and offers links to a newer version of Internet Explorer and to Firefox.

Use An IE-Only Conditional Comment

A second way to manage older version of Internet Explorer is to use a conditional comment to point your site visitors to an IE6 safe CSS style sheet. This feature only works in Internet Explorer (other browsers ignore it), but again since we are really only worried about Firefox and Internet Explorer an IE-only fix will work for us.
The code for this fix looks something like this:

<code> &lt;!--[if gte IE 5]&gt;
 &lt;link rel="stylesheet" type="text/css" href="iespecific.css" /&gt;

The first line of the code <!--[if gte IE 5]> seeks to identify any browsers greater than or equal to (gte) IE5. When it identifies one of those browsers it loads a special IE-centric cascading stylesheet.

If we wanted to target just IE6 we could use:

<code> &lt;!--[if IE 6]&gt;
 &lt;link rel="stylesheet" type="text/css" href="iespecific.css" /&gt;

By pointing an IE user to a separate CSS, we have a couple of options. We can either design two versions of our page, the regular W3C compliant page and an IE friendly page; or we can use the IE-specific CSS to display an otherwise hidden element that asks users to upgrade, as we did with the JavaScript solution.

Summing Up

Old and noncompliant browsers create challenges for web designers, but focusing on just the most popular browsers we found two ways to address the issue. Although neither of these solutions are a cure-all, they do make designing for browser compatibility more manageable.


Armando Roggio

Armando Roggio

Bio   •   RSS Feed


Sign up for our email newsletter

Get the Practical Ecommerce RSS feed

Comments ( 2 )

  1. SliveRock March 12, 2009 Reply

    There is something that must be considered when using the W3C’s browser usage statistics as a guideline… they use their own visitors browsers for the stats, and the W3C a website visited mostly by web professionals… A demographic that is more likely to be using an up-to-date or standards compliant browser than others.

    I would recommend using you’re own site statistics to decide how best to handle IE6’s deplorable behavior. For example, some industries might be selling to up to %40 IE6 users (seriously, I’ve seen it first hand), a situation where I know I wouldn’t want to be alienating anyone by asking them to upgrade. But, if you have a very tech-savvy, hip clientele that is likely to be doing regular upgrade maintenance on their software, then your numbers may be low enough to disregard entirely… as fixing for IE6 can be as much as %20-%30 of the time spent on a web project.

  2. Armando Roggio March 13, 2009 Reply

    Good points. I appreciate the comment. I have found a lot of parallels between the W3School’s numbers and the traffic reports for my own sites, and I had the impression that they used more than just there own servers for the data (I am checking into it). But there can certainly be differences by industry, which I believe is what you’re getting at.

    Because of your comment, I went to my analytics software. I have a few dozen active domains. And I certainly see variation from target audience to target audience.

    As an example, I have a couple of domains that attract the early adaptor crowd. Those sites had just 7.19 percent of visits from IE, and less than 1 percent from IE6. Firefox accounted for 65 percent of my traffic, and Safari had 19.69 percent.

    My online toy store received 20 percent of its traffic from IE6, but Firefox was still the top browser with 47 percent.

    A site focused on parenting that I designed for a client, had 52.38 percent of its visits from Firefox and 44.44 percent of visits from IE7.

    Preactical eCommerce gets about 47.69 percent of its traffic from Firefox. 28.41 percent of our traffic came from IE7, 10.65 percent used IE6, and 6.73 percent used Safari.

    So yes there can be variations.