Testing your site in different browsers

Updates have been a little slow lately, I’ve been working on a new portfolio site and setting up my own Ubuntu server at home (which there will be a guide on sooner or later), I’ve also been working on a few more, longer posts for this site. I’ve also been debating whether to try out some video tutorials but I’m put off by the thought that a lot of viewers might not be able to understand my accent!

Anyway, on with the post. A while ago I wrote a guide on installing multiple versions of IE on your computer for testing purposes.

Since then there have been a few changes, first off IE8 has been released and a few more programs have been developed. I’m going to go through a few options you have when testing your site.

Spoon Browser Sandbox

The first program I want to mention is the Spoon browser sandbox. For me, this is a fantastic idea. The first time you visit the site it will ask you to install a Firefox addon (if you’re running FireFox, I’m not sure what it does for other browsers). Then it will show you a fantastic list of browsers (IE 6,7,8; FireFox 2,3,3.5; Opera 9,10; Safari 3,4 and Chrome) all you do is click on the thumbnail and it launches the browser straight from the web.

Unfortunately, I couldn’t get this to work with IE8 when I tried (the browser launched and then just closed again) but it did work with Safari so I’m guessing it’s either a bug with the IE8 installer on their site or something up with my computer so I’d love to hear how it works for you guys.

IE Tester

IE Tester is a program designed just to test sites in different versions of IE. It lets you look at your site in IE 5.5, 6, 7 and 8 which is really more than enough. The program is a little buggy and does close every now and again but it is free and I’m sure they’re looking at fixing these little bugs. I would advise you download the DebugBar aswell as you need this to view the source of the page you’re looking at.

Browser Shots

This site takes the idea of cross browser testing from a slightly different angle. Instead of installing a program on your computer it takes your web URL and opens it in a number of different browsers on a number of different operating systems (you can select which ones when you add your site).

The downsides of this site are that it isn’t instant and you only get to see a screenshot rather than the actual page. On the other hand, you get to see your site on different operating systems so if you’re on a Windows PC, you could check your site out in Safari on OSX which really is invaluable if you don’t have access to multiple operating systems.

Litmus

So far all of the options I’ve looked at have been free so to balance the whole thing out I’m going to look at a paid option (they do have a free package aswell). Litmus is an online application that lets you test how your application or website looks in a load of different browsers in either OSX or Windows. Similar to Browser Shots, Litmus will show you a screenshot of your site in the different browsers.

Litmus really does have some awesome features that makes paying for the app worth it if you’re serious about your application or if you’re a designer/developer. First of all, you can get screenshots of sites that are password protected, just enter a username and password the application can use and it will do the rest. Litmus will also generate a nice compatibility report that you can use to explain your findings to your boss, client or whoever!

Finally Litmus will also let you test how your emails will look in different email clients such as Outlook, Thunderbird, Apple Mail and some more. It also does web based clients like GMail, Yahoo Mail, AOL, Live Mail/Hotmail and a few others.

Conclusion

Hopefully now you will have a good idea of different ways to test your site in different browsers and even on different operating systems.

I’d love to hear how you’re getting on with the software I mentioned above or if you have any other suggestions!