A useful tool for website development & cross-browser support

A major aspect of website design & development is cross-browser support: making sure your website looks and feels ‘roughly’ the same in different web browsers running on different operating systems.

At the moment there are 7 main browsers in popular use: Internet Explorer versions 6, 7 & 8; Firefox; Chrome; Safari and Opera - all of which have slightly different ways of interpreting web pages. Without a doubt the largest thorn in any website developers side is Internet Explorer 6 - initially released in 2001 IE6 now lacks the support of current web standards making it increasingly difficult for website designers so much so that some designers/developers now choose to provide no support for IE6.

The problem is; IE6 IS still being used (according to the w3schools.com browser usage statistics: IE6 accounted for around 10 to 18% in 2009.) yet regardless of whether or not website designers choose to ignore IE6, they should still accommodate for users visiting a site from the different, more up-to-date browsers.

I personally use Firefox whilst developing websites due to the brilliant add-on: Firebug which allows you to view the workings of a website such as it’s CSS attributes and then change them on-the-fly. IE8 also comes with a similar tool: the developer toolbar which will let you do pretty much the same thing.

Normally I would then see what the site looks like in Internet Explorer 8 to check that the design is compatible with that version. This is all well and good but how can I check to see what my site will look like in a different version of the browser or perhaps even more crucial: another operating system? The answer: Adobe BrowserLab.

Adobe BrowserLab enables you to see what your site looks like in a whole range of browsers allowing you to see if there are any problems or areas which need to be rectified. You simply login and type the URL of the site you wish to check into the field at the top and hit return. You can then switch between different browser versions to see how the site looks and even view two different browser versions side by side. The image below shows my homepage as seen by IE6 - as you can see; the borders around the images do not appear, not a major problem but I did have a problem previously with the navigation menu appearing halfway down the page!

BrowserLab is available either online or as an extension for Dreamweaver 4 and for me is an absolute essential tool for the website development process.

A final point on IE6 would be that website developers should ensure that people can, at the very least, navigate their way around the site without too much fuss. With many businesses still using Windows 2000 and as a result are forced into using IE6: there are still a lot of people out there using the browser. The bottom line is: accommodate IE6 users but reward users of more modern browsers by making the site as aesthetically pleasing as possible!