Browser Compatibility issues have always been one of the major problems when designing a website. The fact that there are so many browsers on the market and nearly of them have different layout engine, which render webpages slightly different from each other. You just need to take a look at this list to get an idea of the many browsers which are available on the Internet.
Where Firefox, Google Chrome, Safari have been improved drastically for better website rendering, the Internet Explorer line of browser has been the bête noire of web designers. Internet Explorer always had a long history of bugs, bad rendering and more. However, with later versions of internet Explorer, Microsoft has been trying hard to improve things. If you look at the browser market share for June 2009, you will see that Internet Explorer is no longer that dominant force in the browser market. It’s decline has been steady, but still it has a sizeable grip on some users. You can check the latest browser market share for the last month below or get up-to-date statistics here.
A website gets visitors from many different platforms (desktop PC, notebook PC, smart phones, etc), and we need to do our maximum to ensure that the website we are creating renders properly for every user so that it is readable. There are several things that need to be taken into account for cross-browser testing of a website. You need to test the website on different screen resolutions (640×480, 800×600, 1024×768 and 1200×800), different browsers (Firefox, Chrome, Safari, Internet Explorer, more) and on different Operating Systems (Windows, Linux, MAC OS, etc). Following, now, is a list of handy tools to help you rigorously test your website.
Browsershots is one of the best web-based tool to check cross=browser compatibility issues for a website. You just need to feed the website address and select the appropriate options from the many available and you will get screenshots for the in-test website. When submitting a new website, it will be placed in a queue and you will have to wait until your request is processed. You can bookmark the result page to come check if the screenshots are ready later. After the screenshots have been generated, you can download all the screenshots at once in a zip file. Browsershots supports the following browsers among others: Epiphany, Firefox, Konqueror, Opera on Linux and Firefox, MSIE, Opera, Safari, on Windows and Firefox and Safari on Mac OS and more.
netrenderer is another web-based tool which allows its users to test website in different versions of Internet Explorer. At the time of writing, Internet Explorer 5.5, 6, 7, 8 were supported. netrenderer allows you to render a website in one browser version at a time.
Litmus provides free and paid plans for cross-browser testing solutions. With the free plan, upto 50 tests can be made monthly and only Internet Explorer 7 and Firefox 2 are supported. However, with the paid solution, 24 browsers are available for testing with unlimited monthly tests.
Browser Photo, a commercial web-based tool from NetMechanic allows you to see how your website looks in 24 different browsers across different platforms. It can also catch HTML errors in your website which will probably cause incorrect rendering across browsers. You can access Browser Photo from anywhere with an Internet connection.
BrowserCamp provides free screenshots for the Safari browser only on MAC OS. You can get screenshots of your website at different resolutions and in either PNG or JPG format. However, if you want to test for other browsers, you need to pay for it. It then enables you to get screenshots for the Firefox, Safari, Shiira, Camino, iCab, SeaMonkey, Demeter, Flock, Sunrise, Netscape Navigator, Opera and Internet Explorer browsers.
BrowserCam is a commercial cross-browser testing suite which provides a 24hr free trial, limited to 200 screen captures. Using BrowserCam, you can take screenshots of your websites across different browsers and Operating Systems. BrowserCam also provides screenshots from mobile phones like Iphone OS 3.0, Android 1.5, Blackberry, Windows Mobile 5.0 and 6.1. There are loads of other features to check out at BrowserCam’s website.
BrowserPool is a commercial German service which allows its users to easily view how their website look on different browsers on different OSes like Mac OS X, Linux, Windows 98, Windows 2000 and Windows XP. The browsers which you can test your website in are: Internet Explorer, Firefox, Opera, Safari, Mozilla, Konqueror, Netscape 4, T-Online, Lynx, Amaya, Camino, Shiira and Dillo.
CrossBrowserTesting.com is a commercial tool, with limited free access for 5 minutes, which allows you to test your website on different browsers and different operating systems. You can many different configurations options for the environment you want to test out your website within. You can check out the demo to get a better idea of how CrossBrowserTesting.com works.
Microsoft Expression Web SuperPreview is yet another commercial desktop product from Microsoft which enables you to check how your website looks in different browsers and do it from your desktop itself. Microsoft Expression Web SuperPreview aims to provide a unified interface for cross-browser testing, eliminating the pain out of it.
Adobe Browser Labs is a commercial web-based tool from Adobe which allows you to get cross-browser screenshots for your website. You can test your website on these following configurations: Firefox 2.X and 3.X (Windows XP and Mac OS X), Internet Explorer 6.X and 7.X (Windows XP) and Safari 3.X (Mac OS X). At the time of writing of this post, Adobe was providing free limited accounts for testing purposes only.
Xenocode Browser Sandbox is a web-based tool which allows you to test your website for cross-browser compatibility issues in different browsers like Microsoft Internet Explorer 8, Internet Explorer 7, and Internet Explorer 6, Mozilla Firefox 3 and Firefox 2, Google Chrome, Opera, and Apple Safari. You need to download the browser plugin for it to work.
CloudTesting is another commercial web-based cross-browser testing tool which allows you to test your website in Internet Explorer (6, 7 & 8), Firefox (2.0, 3.0 & 3.5), Safari (3.2 & 4.0), Google Chrome (2.0 & 3.0) and Opera (9.6 & 10.0). There is a 7 day free trial available from their website.
Multi-Safari is a free desktop application for Mac OS X which enables you to run different versions of the Safari browser on the same OS. You can then test your website at ease from your desktop using Multi-Safari.
ieCapture is a web-based application which allows you to view your website in the lastest Internet Explorer version. It only support IE as web browser.
Multiple IE is similar to Multi-Safari (reviewed above). It is a desktop tool which enables you to easily install multiple versions of Internet Explorer on the same computer and OS. You can thus test your website in the different versions of IE available on your computer.
IETester is a free Windows application which allows you to test your website in different versions of Internet Explorer. You can have these configurations: IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, 7. The download package is of 24MB in size.
DotMobi Virtual Developer Lab is another free web-based tool which allows you to test your website on mobile browsers. You get access to 100s of different mobile phones which will report how your website looks in them. However, you need a credit card to be able to use this service.
iPhoney is a free tool which allows you to test your website and see how it will look on an iPhone. You can download it for free from their website and it is open source, released under the GNU GPL.
Additional Resources & Further Read
Here are some other resources which are related to cross-browser website testing:
A downloadable archive of web browsers. There, you will find nearly all web browsers the Internet has know available for free download.
How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)
A guide on how to check cross-browser compatibility from thesitewizard.com.
This article points out the differences on how Windows and MAC OS renders webpages.
An article with practical tips on what to take into consideration when doing cross-browser testing.
Tips on setting up Internet Explorer on MAC OS X and getting Internet Explorer browser testing done for your website.
A set of browser tests to determine if your browser is upto standards in webpage rendering.
If you have anything to add to this list or an opinion, feel free to drop a comment below!