Have you ever tried your website on a PC that is not the one you normally use and found that the design doesn’t look as good for some reason? Perhaps the column sizes are out, the navigation just doesn’t seem to fit or the page appears too big or too small for the screen? It could be that you haven’t tested your web site for different browser compatibility and have just assumed that site will appear as good as it does on your browser of choice, on any of your visitor’s browsers of choice. That is a big mistake as there are many browsers in common use along with many variations of the same browser, all with different quirks that can affect the look of your page. While some of the issues won’t be a big deal – such as the page appearing a little too small when viewed in Netscape Navigator for example – other issues will be more serious and could result in the loss of a visitor.
Even if you checked your website for browser compatibility at the design stage, it’s worth going back and redoing as new browsers are launched. The most recent advent to the browser market was Google Chrome and if you haven’t already done so, it’s a good idea to check that your site is compatible with the latest incarnation of Google’s browser software. Particularly if your site is an ecommerce one, a poorly rendered site can have a direct impact on your bottom line. Run through this check list to be sure you have the basics of browser compatibility covered:
1. Make accessibility a design feature
If you prioritize building an accessible website throughout the design process, you will have fewer problems when checking for multiple browser compatibility. Although all websites need to have flashy features that make them stand out and retain the interest of the user, sticking to the simplest version of the needed code and using plain HTML over more complex programming languages will make it more likely that your site displays correctly over numerous browsers and browser versions.
2. Use a code validation tool at the end of the design process
Even if you’re sure you have adhered to W3C codes of practice and have used the cleanest code possible to design your website, running each page through a proper code validation tool takes the guesswork out of the design process. It will also catch the smallest mistakes that you may easily have missed when checking and re-checking your own coding. Code validation is very easy to do and can be checked against the industry standard free of charge at http://validator.w3.org/. Simply input your web address and wait for the report to flag up possible conflicts.
3. Make use of the expertise of others
If you have gone as far as identifying a problem with your site but aren’t sure how to fix the issue for a particular browser or platform, you can ask the wider internet community. One of the specific aims of Google’s Doctype service is to provide a library of test cases for checking cross-browser and cross-platform compatibility. Licensed sections of code can be found here, along with code provided by other users with similar problems. You need to use a Google account to log in as with all Google tools but once there, will find a helpful community who have ‘been there, done that’. Go to http://code.google.com/doctype/
4. Test as much as you can
It is often not possible to have different versions of a browser installed and running on the same machine – for example an earlier and later version of Internet Explorer . Unless you have the luxury of being able to install one browser or version of browser on a series of other machines, actually checking how your site appears yourself on other browsers will be tricky. Fortunately, there are a number of free apps you can download which will give you this facility without the hassle of installing and uninstalling dozens of browsers. Try http://spoon.net/browsers/ for example which allows you to run any browser and gives a screen shot of how your site appears in each. It currently supports Internet Explorer, Firefox, Safari, Chrome and Opera. Similarly, http://browsershots.org/ will give you a screen shot of your page 800×600 and 1024×768 resolution on a plethora of browsers on Linux, Windows and Mac.