Saturday, August 1, 2009

18+ Handy Tools To Check Cross-Browser Compatibility Issues

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 – Cross-Browser Testing Tool/Suite/Service

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, KonquerorOpera on Linux and Firefox, MSIE, Opera, Safari, on Windows and Firefox and Safari on Mac OS and more.

 

netrenderer – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/Service

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 – Cross-Browser Testing Tool/Suite/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:

 

Evolt Browser Archive

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.

 

Font Smoothing, Anti-aliasing, And Sub-pixel Rendering

This article points out the differences on how Windows and MAC OS renders webpages.

 

Five Simple Tips For Browser Compatibility Testing

An article with practical tips on what to take into consideration when doing cross-browser testing.

 

Screencast: Install Internet Explorer on OSX using VirtualBox (updated X2)

Tips on setting up Internet Explorer on MAC OS X and getting Internet Explorer browser testing done for your website.

 

AcidTests

A set of browser tests to determine if your browser is upto standards in webpage rendering.

 

Conclusion

If you have anything to add to this list or an opinion, feel free to drop a comment below!

4 comments:

  1. This is a very valuable post. Thanks for sharing your informative write up. Great list of resources.

    ReplyDelete
  2. This is a good site and the blog contains nice informative topic..really too much useful.Thanks for this post.
    web designing company

    ReplyDelete
  3. Hi,For having no knowledge of Web Design Cochin she did a great job but just could not maintain the website the way it needed to be maintained. Her ranking was poor, about page 12 so she needed SEO services as well.Thanks...

    ReplyDelete