Tuesday 23 June 2009

Check your web design in different browsers online

Check what your website looks like in multiple browsers and versions with browsershots.org.

Different browsers render HTML differently. For example when I make a simple table in one of my posts so I can put an image with a caption under it hovering on the right hand side, I invariably find that it looks different in Firefox and Internet Explorer. See a comparison below:

Blog table in FirefoxBlog table in Internet Explorer
Blog image in Firefox 3
- lovely space around the copyright
Blog image in IE 7
- horrible text coming too close to bottom of copyright

Now this becomes quite a serious problem if the difference between browsers renders some functionality or usability of your website unusable.

It's therefore important to check on building a new website how it renders in other browsers, something I’ve done in the past by having a number of browsers installed on my PC. There are also a number of programmes that allow you to have multiple versions of different browsers installed at the same time - for this exact purpose.

That is a bit of a hassle though, and browsershots.org makes this easier. You just have to wait for an hour or so. The site provides a quick view, as below, and also the option to download all screenshots in a handy zip file.

This blog seen in multiple browsers on Browsershots

Problems
  • As it works on a page by page basis, if you want to check multiple pages you will have to wait each time for them to upload all the screenshots - which can be up to an hour and a half depending on how many different ones you want.
  • You're only allowed 100 shots in a 24-hour period. I've just done 37 so you can see how quickly you could use up your quota.
  • Both these problems don't exist if you pay for the priority service at €21.95 a month.
Related posts
SEO problems of white text on a dark background (Jul 2008)
What font / text size online and how to set it in the CSS (Oct 2008)
Improve and check your website's readability (Mar 2009)

1 comment:

Unknown said...

Hi,If you are trying to create contrast with fonts you should avoid using two very similar font faces in Web Design Cochin and sizes. The similarity of the fonts tends to create confusion and blur the design.Thanks......