Having built the first draft of a website, I usually do a standard test in this order:

• 1) check on windows XP if the CSS renders ok in I.E 6/7, Firefox, and Safari.
• 2) jump onto a Mac and check if the CSS renders fine
• 3) jump onto Linux and check if the CSS renders fine

As you can imagine, a total pain. Anyways, I was just informed about an online tool over at browsershots which makes screenshots of your web design in different browsers. It’s all very cool and clever.

All you need to do is slip in the url of your site, select the browsers/Operating Systems that you want to test on, hit the submit button, and voilà. The result is that you get a screenshot of what your site will look like from all the browser and Operating System combinations you ticked.

Granted, it’s not the perfect solution because a virtual screenshot will never beat actual testing, but it definitely helps pick out obvious visual problems. I wouldn’t use this tool to completely abandon actual cross-platform testing, but it’s a helpful tool.

Don’t know what I’m talking about? Then just try it out yourself.

What is cross-browser testing?
It’s when you test to see if your website works on different opertaing systems (i.e. Windows/Linux) and different Browsers (i.e. Internet Explorer/Firefox), and not just the environment you’ve been building the website in.

The problem is each browser renders CSS uniquely, and on top of that, the same browser on different Operating Systems renders CSS uniquely. For example, I’ve noticed that Firefox on Windows renders CSS differently to Firefox on Linux. What’s even more frustrating is that different versions of the same branded browser renders CSS uniquely (e.g I.E 6 does it differently to I.E7). It’s madness.

During the development of this site I’ve had to constantly cross browser check against Firefox, I.E, Windows, Linux and Mac. I just hope I’ve managed to kill the major cross-browser/platform bugs.
My problem is that I use Firefox by default, and when I start getting into a decent rhythm of work, I forget to check my work on other browsers. So after I think I’ve done some decent CSS, when I go to check it on I.E it looks like crap. So then I have to spend the next hour cutting through my code trying to debug.

If you’re a developer, which browsers do you validate your work with, and which Operating Systems? Or perhaps you’re a little bit rock n’ roll and don’t bother. I envy you people.

Urgh.