Scoobyphotos.com | Blog

I have a confession to make. I have been gulity in the past of ignoring a large number of web browsers that are in wide spread use around the world. If you had found your way to scoobyphotos.com twelve months ago, using netscape, opera, mozilla, or one of the many other browsers out there, you would have found an unuseable site.

I had committed one of the most common web design mistakes, I had only catered for Internet Explorer. Although IE is one of the most popular browsers, it is not the only one, and designing specifically for one browser can result in a web design that is broken and unuseable on all the other web browsers out there. To give you an idea of how important those other browsers are, currently around 60 percent of scoobyphotos.com visitors are using IE6/AOL9, 8 percent are using firefox, 6 percent; are using netscape (v4!), the other 22 percent are split across different versions of IE, Netscape, Mozilla, Opera, Safari, Avant, Camino, and AOL. The surprising factor is that Netscape users don't appear to upgrade to newer versions, sticking with the relatively old version 4 (current Netscape browser is up to version 8).

The main issue here is the way in which the different browsers have implemented and adhered to the web standards. Web standards are set out by the World Wide Web Consortium (w3.org), but these guidelines have not been followed to the letter. The result is web browsers that behave in different ways when presented with the same information. An example of different browsers interpreting the guidelines differently is the box model, where Internet Explorer applies margins to the inside of the box, other browsers apply margins to the outside of the box. These subtle differences are the key factors in a website designed on one browser leaving you visitors frustrated and unable to enjoy your site.

So how do you ensure that your website is compatable with the main web browsers? The first task is to determine which browsers you are interested in, and which versions of those browsers. IE5.5 behaves differently to IE6, so you need to decide if you are going to cater for people using older browsers, or if you are going to concentrate on the current versions.

Once you have decided which browsers and versions you are going to design for, you then neeed to install all those versions on a test machine. If you've only got one PC, it is relatively easy to install different browsers on the one machine, but trickier to install different versions of the same browser, as old versions tend to be removed when a new version is installed. I've got around this by having a dual boot machine, with older operating systems and older web browsers installed, allowing me to test sites across various combinations of os and browser versions.

With your test machine/s setup and ready, you then need to start testing you site against all your test parameters. The easiest method at this stage is to have a checklist, which you can tick off each browsers against your test page. Hopefully you are checking compatability before you have rolled your design out across you whole site, as this makes making changes much easier if you only have to apply them to one test page as opposed to hundreds of pages. This website has some useful links about the various browsers, and what you need to know about cross-platform design.

It is now that you start finding out what works and what doesn't. If everything looks fine across your key test parameters, you may be happy to leave well alone and accept that the odd piece of text might not be quite lined up exactly, but its close enough to be acceptable. On the other hand, if your site falls to pieces you are going to have to start taking it apart and fixing it.

How you go about fixing the site is going to depend on how badly its broken, and how the site is built in the first place. In my case, the site was built using tables, which is now considered a bad form of design, so I took the opportunity to redesign the whole site using CSS, which allowed me to separate style from content, and ensure that my design worked across multiple browsers. I managed to achieve this using just one style sheet, but you have the option using this method of having a style sheet per browser, by using some simple scripting to determine which browser the visitor is using and then supplying the relevant style sheet.

There are hundreds of tutorials on using CSS, and a number of sites using CSS very effectively. One such example is cssZenGarden, which promotes the use of style sheets by allowing vistors to download the site content and create their own style sheet. This site is worth visiting to look at what some people have created using the power of CSS (a personal favourite is Pinups).

If you don't have the luxury of being able to separate your content and style (a thoroughly worthwhile endeavour, but does require your site to be rebuilt from the ground up), you will have to use a process of trial and error to find what is breaking your site. This can be a long process, and I would recommend backing up your work prior to making any changes, as you may find a change makes things worse rather than better.

Remember, although it may appear to be a laborious task, once your site is compatable across multiple browsers, you are opening up your site to a number of new visitors, all of whom are potential repeat visitors, and may recommend the site to friends.