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 ensure your designs work on these browsers.
How to test your design on older versions of a browser
If you are using version 7 of Internet Explorer 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. 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 website is BrowserShots and it pools together a number of distributed computers to run the tests. It checks your site against many different browser versions and operating systems (including older versions of browsers which you are unlikely to have on your computer).
The results can be a real eye opener! I use the site regularly and have come across many problems which I would have otherwise been unaware of.
A little bit more about BrowserShots
The first thing to realise is that BrowserShots will only show you want 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 thumbs which can be produced in any 24 hour period.
If you need to do a lot of testing, you can purchase a “priority processing” package which costs $29.95 for a month or $180.00 a year.
Running the test
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 inlcude 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.
You can do a mass selection for operating systems, but not for browsers – if you just wanted to test how a site lools 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 site back and let the backend do its work.
This is what you should see when your report is running:
It can a little bit of time to start to to get results back and you need to refresh the page to see them, but this is what it will look like:
Each of the screenshots can be clicked. 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 actual png file in all its glory.
Related posts:
- Another attack warning for Internet Explorer
- Can’t login to Google AdSense?
- How to Find Out Which Pages From a Website Have Been Stumbled
- Recording data associated with your website or blog
- Get an alert by email or SMS when your website goes down
- Why Firefox should be your default browser
- Plan the directory structure of your website before you start building it
- Google Chrome is now available in beta for the Mac
- Don’t Give Up On Your Website or Blog!
- No! You don’t need to submit your blog or website to Google
