White Papers Quick Selection:
How to Play a CD on Grandpa's Phonograph
(or, Web Design and Browser Compatibility)
By Dan Rouse
In an age where many web browsers have sizeable footholds in the market, it is a necessary requirement for web designers to test their designs across multiple browsers to ensure they will render correctly (or as close to correct as possible) for the largest audience possible. The question is what browsers and what versions of those browsers need to be tested?
Here at Commareus, we test on Firefox (1.5 and 2) Internet Explorer (6 and 7) the latest versions of Opera and Safari. As you'll read below, this puts visibility at an estimated 98%. Of course, if a client requests it, we can create a web site that will work in older browsers if the intended audience is likely using older software.
There are several websites available that report browser usage statistics. Of course, these statistics have to be taken with a grain of salt. Many of these site’s browser statistics are generated by the users that visit the site. More than likely, these users consist typically of web designers and “web heads” that are more prone to use newer or alternative browsers than the average web user. Some of these sites even admit that their browser detection methods are not perfect and do occasionally report the wrong browser (Opera in fact identifies itself as Internet Explorer on purpose, to circumnavigate code on some websites that would try to block it from accessing the page [4])
To get as close as we can to the general outlook on browser usage, we will roughly average the usage statistics from W3CSchools [1], Browser News [2], and The Counter [3]. Here’s what I came up with:
| Browser | Source 1 | Source 2 | Source 3 | Source 4 | Source 5 | Source 6 | Source 7 | Averages |
| IE7 | 28.0% | 31.0% | 28.0% | 20.0% | 17.0% | 18.0% | 19.2% | 23.0% |
| IE6 | 45.0% | 47.0% | 61.0% | 49.0% | 63.0% | 32.0% | 37.3% | 47.8% |
| IE5 (windows) | 1.3% | 0.5% | 1.1% | 17.0% | 1.0% | 1.1% | 1.7% | 3.4% |
| IE5 (Mac) | 0.1% | 0.5% | 1.1% | 0.3% | 1.0% | 0.1% | 1.7% | 0.7% |
| Gecko based (ex. Firefox) |
22.0% | 15.0% | 8.2% | 11.0% | 14.0% | 40.0% | 34.2% | 20.6% |
| KHTML based (ex. Safari) |
1.6% | 4.8% | 1.4% | 2.7% | 3.3% | 4.5% | 1.7% | 2.9% |
| NN8 | 0.2% | 0.2% | 0.2% | 0.2% | 0.1% | 0.1% | ||
| Opera | 1.3% | 0.9% | 0.1% | 0.7% | 2.1% | 1.0% |
Source 1 – EWS
Source 2 – Net Applications’ Market Share.
Source 3 – Pitt County, North Carolina website.
Source 4 – USGS server
Source 5 – sites that use a hit counter.
Source 6 – upsdell.com (Browser News)
Source 7 – W3CSchools
Again, these statistics are by no means completely accurate, but give only a ballpark forecast of the more or less current trends in browser usage as of June 2007. With only a quick glance, it becomes clear there are two major contenders, Internet Explorer (6 and 7) and Gecko based browsers (Mozilla Suite, Firefox, Camino, Netscape 6, etc.) Ensuring your site renders correctly in these two browser sets makes your site visible to roughly 95% of the web population. Additional testing in Opera and a KHTML based browser, like Safari, brings the total in the neighborhood of 98%. Of course, depending on the intended audience, testing requirements can change quickly. If you’re designing a site for a senior center, whose computer labs still run IE5, you would surely want to ensure your design works properly in that browser as well.
Attempting to break this 98% compatibility wall can be difficult, time consuming, and expensive. Parts of the remaining 2% are older browsers with poor or no CSS support, security issues, and countless bugs (some documented, some not [6, 7]). Often the amount of work required to twist and mangle your code in a way that makes it workable in these browsers isn’t worth the energy without sufficient reason to do so.
So which browsers should you test in? Firstly, choose a browser that sticks closely to CSS standards [5], like a browser based on Gecko (Firefox). Although IE7 is much better when it comes to CSS and web standards compliance compared to its predecessors, it’s wise to do the bulk of your initial testing in a browser other than IE as it will help to guarantee your code doesn’t end up being IE specific. Doing so will hopefully save you headaches down the road. I find it’s smart to test in IE 6 and 7 as you go along to catch potential problems before they get too far out of hand. Finally, Opera and Safari testing tends to be relatively painless. Similar to Gecko based browsers, their engines stick closely to published standards, and probably won’t present many coding issues or rendering differences.
To wrap up, multi-browser testing is a crucial aspect of web site development, the breadth and complexity of which is determined by your intended audience, and the project’s budget. It has been my experience that testing in Firefox (1.5 & 2), IE7 & 6, Safari, and Opera puts accessibility somewhere close to 98%. In the swirling, dizzying, living thing that is the web… I believe that’s a very respectable number.
- W3CSchools - http://www.w3schools.com/browsers/browsers_stats.asp
- Browser News - http://www.upsdell.com/BrowserNews/stat.htm
- The Counter - http://www.thecounter.com/stats/2007/June/browser.php
- Opera Useragent - http://www.opera.com/support/search/view/570/
- Web Devout - http://www.webdevout.net/browser-support-summary
- Position is Everything - http://www.positioniseverything.net/
- RichInStyle.com - http://www.richinstyle.com/bugs/
______________________________
Dan Rouse is the Art Director at Commareus, a company that specializes in tableless CSS and tasteful Flash. Dan is a graduate of the Graphic Design Program at The University of Massachusetts Lowell. His email is: dan@commareus.com
