Different operating systems, browsers, screen resolutions and plug-ins cause can sometimes websites to load completely differently than expected. Things to take into consideration when dealing with compatibility are:

  • Test your design in different browsers. Make sure it looks good on the popular ones: Internet Explorer, Netscape Navigator/Mozilla, and Opera.

  • Test your design in different screen resolutions. If the design scrolls sideways on an 800x600 pixel resolution, fix it. 800x600 is still thought to be the most common resolution. Instead of setting table widths to pixels, set it to percentages. That way it will always fit, on any resolution.

  • Keep in mind that if your site uses an uncommon font that a user does not have installed, it will show up as their default font, usually Times New Roman. It is usually best to stick to common fonts, such as Arial, Verdana, Courier New, Comic Sans MS, etc. If you want funky titles or something, make them into an image and put that on the page.

  • Use web-safe (non-dithering) colors as often as possible. To test your colors, set your computer to 256 colors only. Another way is to press "print screen" on your keyboard and paste it into a graphics program, then decrease its colors to 256 (Standard/Web Safe).

  • Try to steer clear of new plug-ins that most people will not have installed; as more often than not if they've never heard of it before, they won't want to install it, so will leave your site. Macromedia's Shockwave & Flash plugins, however, have become very popular and are now found on most computers, so it is usually harmless to make use of them.

  • Limit the use of browser-specific functions, such as the infamous <blink> and <marquee> tags, CSS filters that only show up on IE6+, etc. If you simply must use them, ensure that this usage has no negative effect on the page in browsers that do not support these functions.