When designing a new website or developing a theme for a blog, it is very important to test how it looks in multiple browsers. This is especially so for older versions of Internet Explorer, which are known to cause coders a multitude of problems.
There are a few major players in the browser market – Internet Explorer, Firefox, Chrome, Flock, Opera and Safari. There are a few other browsers around, but none with the market share of these six. At the very least you should make sure your designs work on the six just mentioned.
How to test your design on older versions of a browser
If you are using Internet Explorer 7 or any version of Firefox (the two most popular browsers) you could be blissfully unaware that your site does not display properly in other browsers (such as IE6).
Johann C. Rocholl has put together a website which will test your site and display the results on-screen in the form of screenshots. The site is BrowserShots and it pools together a number of distributed computers to run the tests.
It checks your site against many different browsers, versions and operating systems (including browsers you are unlikely to have on your computer unless you are an internet old-timer or a true geek).
The results are sometimes surprising. I use the site regularly and have come across many problems which I would have otherwise been unaware of.
A bit more about BrowserShots
The first thing to realise is that BrowserShots will only show you what your site looks like in the browser. It does not suggest or offer advice on ways to fix any problems that may occur. It is up to you to find that out.
BrowserShots offers a free service which allows you to run a test for one page without having to register, if you register, you can run more tests, but there is a limit to the amount of screenshots produced in any 24 hour period.
If you need to do a lot of testing, you can buy a “priority processing” package which costs $29.95 for a month or $180.00 a year.
Running the tests
You can run a test for any webpage. All you have to do is enter the URL in the text area.
Select the browser versions you want to test and change any of the options which apply to your test. These include screen resolution, colour depth, JavaScript, Java and Flash.
The graphic below shows the default state.
If you plan to run a lot of tests in a short period, it is best to untick the browsers you do not want to test as this saves on your free daily allowance
You can do a mass choice for operating systems, but not for browsers – if you just wanted to test how a site looks in Explorer, you would have to tick each Explorer box and untick the rest.
(click the image for the full version)
Once you have done this, hit the submit button and sit back and let BrowserShots go to work.
This is what you should see when your report is running:
It can take a few minutes before you start to see the results, and you need to refresh the page to see them, but this is how they look:
Each of the screenshots is clickable. Doing so will take you to a large version of the page to allow closer inspection. If you click the picture once again, you will be able to view the png file in all its glory.
I hope you enjoyed this post and found it useful. If so, please consider tweeting it or sharing it in another way.
Subscribe to the RSS feed
This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.