We've moved!

TechKnack.blogspot.com has officially moved to TechKnack.net. You should be redirected in 3-5 seconds. Thank you.

March 16, 2008

Browsershots: Mass Website Testing

Add this post to Del.icio.us. Del.icio.us (0 saved)

In the world of Web 2.0, cross-browser compatibility is a necessary evil. With different browsers, different versions of different browsers, and different operating systems with different versions of different browsers, you can rarely predict how your visitor might be viewing your site (unless, of course, you're developing for a tightly controlled intranet, where everyone uses the same OS and browser). Unfortunately, it's rarely, if ever, possible or sensible to test your site on even the major browser/OS combinations, let alone every conceivable combination.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

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.

The process is very simple: point your browser to BrowserShots.org, enter your website's URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click "submit". Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue. In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post :) ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don't have to wait for the whole batch to finish). Refresh your "Website Overview" page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; "factory", sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can't check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

No comments: