Follow this Blog!

Mar 20, 2010

f Comment

Cross Web Browser Compatibility Guide - Achieve 97% Penetration Rate just by Testing a few Browsers!

Amazon I've had my share of testing and debugging browser compatibility issues, and I'd like to share my experiences with you. I'll also tell you how to test browser compatibilities efficiently.

To what extent is cross browser compatibility testing considered "enough"?
====================== UPDATE ======================
According to NetMarketShare as of 2013/6/19, roughly

55.99% use IE (Microsoft Internet Explorer)
20.63% use Firefox
15.74% use Google Chrome
5.46% use Safari


22.99% use IE 8.0
15.39% use IE 9.0
10.38% use Firefox 20
9.85% use Chrome 26.0
9.26% use IE 10.0
6.03% use IE 6.0
4.66% use Firefox 21
3.66% use Chrome 27.0
3.18% use Safari 6.0
...

==================== END UPDATE ====================

The technical answer is it is never enough not because there are too many browsers but because there are too many versions of each browser and too many possible addons and plugins that can be installed on them. Since we can never catch every fish in the ocean let's just focus on the big ones shall we According to NetMarketShare as of 3/20/2010, roughly

60% use IE (Microsoft Internet Explorer)
25% use Firefox
7% use Google Chrome
5% use Safari

But this data is not enough - You need to know what VERSIONS of each browser you need to test. Again according to NetMarketShare as of 3/20/2010, in the descending order of percentage, roughly

24.5% use IE 8.0
17.5% use IE 6.0
15.5% use Firefox 3.6
12.5% use IE 7.0
6% use Firefox 3.5
5.5% use Google Chrome 4.1
4% use Safari 4.0

Therefore I'd say the extent of testing these browsers is considered enough.

That's still a lot! Any way you can cut the list down?
I totally understand your position, and I can tell you what browsers I test my websites on. I test IE 6.0, latest version of Internet Explorer, latest version of Mozilla Firefox, latest version of Google Chrome, latest version of Safari. That's it.

I don't test Firefox 3.5 because the main difference between 3.5 and 3.6 is speed, as Mozilla claims. Therefore there's no much look-and-feel or layout difference between the two. I picked FF 3.6 because it really is much FASTER than 3.5!
On the other hand, the main differences between IE7 and IE8 are the new features that IE8 offers. They both comply with DOM Core, DOM HTML, etc. although IE8 complies better with CSS 2.1 selectors and declarations.

If you don't use any crazy CSS selector such as :before and :after then you should be fine. My websites are not that CSS crazy and I can get away with it. If your websites are CSS mad then you need to test both IE7 and IE8.

Testing IE6? How do I install IE6 on my Windows XP PC?
Simply download the Multiple IE application from TredoSoft and it allows you to test IE3, IE4, IE5, IE6. Once you install go to Start -> All Programs -> MultipleIEs -> Internet Explorer 6.0.

How do I install IE6 on my Windows 7 PC?
Please read How To Install Internet Explorer 6 on Windows.

IE 6.0 is so old school, can I skip it?
NO YOU CANNOT. I can't stress enough that you MUST test IE6 because it is still widely used, and it is VERY problematic. One of its most serious bugs is that you cannot use mouse to select text of some of the webpages.

IE6 is still quite modern and supports basic W3C standards. You can use Prototype, JQuery, etc. and sometimes it won't work in IE6 without tweaks. Once you make sure your website renders fine in IE6 you can almost rest assured that it renders fine in the remaining major browsers If somehow you cannot install Internet Explorer 6 on your Windows refer to How to install IE6 so you can test your website to solve this issue!

Any reference you recommend?
Yes I recommend QuirksMode.org as it lists all the browser quirks in nice graphs. You can find out which CSS and DOM aspect is supported by which browser and which version. It's EXTREMELY useful.

If you have any questions let me know and I will do my best to help you!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael