How to view your website in 53+ browsers on 3 major platforms in mere minutes with zero effort.

Though current statistics indicate that almost 62% of web users are surfing the web with some version of Internet Explorer (reaffirming that I always find myself in a minority) with Firefox coming in a distant second at around 28%, web designers need to be aware that users will be viewing their websites in a huge variety of web browsers each running on a wide cross-section of platforms. Safari and Opera are the only other browsers to regularly make the top stats lists, but there are literally dozens of browsers and platforms available.

As a business I keep close tabs on my usage statistics and sure enough, most users are visiting with some version of Internet Explorer or Firefox. Because getting my product into the marketplace is so crucial, however, I can’t afford to alienate the minority of users hitting my server with less-than-popular browsers. I need to assure that everyone receives roughly the same experience with only minor variation – if any. Some businesses by their nature may attract the minority browser – and everyone should know what the usage patterns for their websites are – and a designer can never assume that visitors are receiving the same experience that they are.

Short of running multiple systems with multiple boot options each running different OS’s and browser versions, or setting up complex and tedious virtual systems and emulators, how can a designer be certain that their website looks as intended in a cross-platform environment? My own personal approach is to first make certain that the variety of processing occurs server-side and that I deliver a minimum of code that needs to be interpreted client-side. Then, I visit browsershots.org.

What is Browsershots?

In the creator’s own words:

“Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.“

Simply visit the website, submit the URL that you’d like to test and select from any or all of the platforms and browsers available. Platforms include Linux, Windows and Mac OS, naturally, while the over 53 browsers include multiple versions of not only the major players but the more minor ones as well, and some decidedly obscure browsers are among the mix.

No need to test them individually, as you can submit your request for all of them at once and the results will be compiled and displayed directly on the Browsershots page in thumbnail format. Roll over each thumbnail for a slightly larger peek at how your URL appears in each given browser, or click them for a higher resolution image complete with all of the details regarding platform, browser and version. For safe keeping, you can download the whole lot of results as one zip file, including all of the high res screen shots. The site isn’t graphically pretty, but it’s extremely functional.

It should be noted that Browsershots provides only screenshots, it is impossible to test functionality. I myself discovered with one of my own sites that as a result of some transparent png’s and the way in which I made them backward compatible with older browsers, everything looked fine from IE version to IE version, but in actual fact my scrollbars were inoperative in older versions of IE – something that I could never tell from the Browsershots service.

Nonetheless, for checking visual layout it’s second to none. There are fee-based services that are available to provide the same functionality and more (see end of article for links), but for a quick, powerful and dead simple way to assure that your website appears as intended – a way which avoids the tedious setup of emulators and separate systems – Browsershots is the way to go. It also operates on the principles of distributed computing and community support, something in which I strongly believe.

Fee-Based Cross-Browser Testing Tools

-Browsercam
-Litmus
-NetMechanic

###

tags: browsershots, compatibility, firefox, graphic design, ie, internet explorer, web browsers, web design, websites

This entry was posted on Sunday, March 16th, 2008 at Mar 16, 08 | 7:19 pm and is filed under Just Noumenon Posts, Miscellaneous. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.