How do your pages render in different browsers

During the last few years I have created many Web sites and one of the critical things I have come to realize is that sites render differently in different browsers - sometimes disastrously differently. Of the browsers that your users are mostly likely to be using, IE6 was a horror for misinterpreting CSS styled sites that rendered perfectly in Firefox. At the other extreme, the fonts commonly found in a Linux distribution are different from those typically found on a Windows computer and unless you specify them in your CSS font specs, typography is likely to be different between, say Firefox running on a PC and Firefox running on Ubuntu Linux. This may not matter too much in terms of being able to read the text, but it may not be so good as far as maintaining corporate identity standards.

I quickly learned that during development it was vital to keep checking how a site rendered in multiple browsers (and on the same browsers running on different operating systems). Having said that, there are an awful lot of browser variants out there and several operating systems.

A great tool to help with this problem is browsershots.org. All you need to do is enter the URL of the page that you want to check and then make a selection of the browsers you want to check against.

Browser alternatives to check your Web page against

Browser alternatives to check your Web page against

Currently the following, very comprehensive selction is supported:

Linux

Dillo 0.8, Epiphany 2.22, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 1.2, Flock 2.0, Galeon 1.3, Galeon 2.0, Iceape 1.1, Iceweasel 3.0, Kazehakase 0.2, Kazehakase 0.4, Kazehakase 0.5, Konqueror 3.5, Minefield 3.1, Mozilla 1.7, Navigator 9.0, Opera 9.25, Opera 9.50, Opera 9.51, SeaMonkey 1.1,SeaMonkey 2.0,

Windows

Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 1.1, Flock 1.2, Flock 2.0, K-Meleon 1.1, Minefield 3.1, MSIE 4.0, MSIE 5.0, MSIE 5.5, MSIE 6.0, MSIE 7.0, MSIE 8.0, Navigator 9.0, Opera 9.23, Opera 9.24, Opera 9.25, Opera 9.26, Opera 9.27, Opera 9.50, Opera 9.51, Safari 3.0, Safari 3.1, SeaMonkey 1.1, SeaMonkey 2.0

Mac OS

Camino 1.6, Firefox 2.0, Firefox 3.0, Safari 2.0, Safari 3.0, Safari 3.1, Safari 4.0

Once you enter your URL and made a browser selection the tool goes and creates screen shots of your page in each browser/OS combination.

BrowserShots processing your site against the selected browsers

BrowserShots processing your site against the selected browsers

This can take some time, but once complete the screenshots are displayed on the Web page.

Your Web pages renders differently in different browsers

Your Web pages renders differently in different browsers

By hovering over each image you will see a larger version. You can also double click on an image to see a larger version.

Browsershots is a great tool for doing an audit of your current sites, or for helping during the initial design phase.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Leave a Reply