Platforms & Apps

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 W3schools.com, 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)
 window.open('http://siteurl.com/ie6.html','mywindow','width=920,height=700','scrollbar=yes')
 else if (ieversion&gt;=5)
 window.open('http://siteurl.com/ie5.html','mywindow','width=920,height=700','scrollbar=yes')
 }


 }
 &lt;/script&gt;
</code>

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;
 &lt;![endif]--&gt;
</code>

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;
 &lt;![endif]--&gt;
</code>

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.

Resources

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x