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).
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.
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> <!--[if gte IE 5]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> </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> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> </code>
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.
- Jennifer Sullivan Cassidy’s CSS Standards Compliance in Internet Explorer 7
- Internet Explorer 7 and CSS 2.1 compliance
- W3School’s Browser Statistics
- How to Use Different CSS Style Sheets For Different Browsers And How to Hide CSS Code from Older Browsers by Christopher Heng