When we design Websites for commercial or nonprofit organizations, it's very important that our pages be accessible to as many people as possible, and that they look the way we intended. Since people use a wide variety of computer systems and several browsers, this is a real challenge.

During the mid- and late-1990s, browser development went through a "wild west" stage of energetic and undisciplined development. Browser developers created new tags and features - for the convenience of designers and to provide incentives for people to use their browser, rather than the competition's. Unfortunately, this resulted in a hodgepodge of incompatible tags and unreliable rendering, frustrating both Web designers and the viewing public.

To combat the frustration, chaos, and anarchy, W3C was formed with a mission of creating standards that all browsers would use. The benefits of this effort have been felt in the early 2000s, but the people writing the standards have also created features that are really challenging for browser developers to implement. As a result, not all browsers can handle all the "standard" features, even though they try to follow the standards.

Bottom line? Web coders still have to design with an eye to compatibility. This module discusses the causes of browser incompatibility, and some strategies for designing compatible pages.

It's a constant struggle to produce good-looking Web pages while keeping them compatible with older browsers.

How far back should we test? How old a browser should we expect to support? I suggest no more than 3-4 years, especially since most browsers can be updated free of charge. Occasionally we find some browsers continue to be used in spite of their age. Netscape 4.x is an example of a popular browser that continued in use well after newer versions were available.

There are features of CSS that are extremely challenging for programmers who write browser software. One example is floating elements; another is fixed background images. Some features work in the body of a page, but not when they are in a table.

In addition to simply not implementing standards, browsers sometimes attempt to implement a standard, but have problems such as implementing the standard incorrectly, causing unpredictable consequences to other elements, or even crashing.

What is a "simpler" browser? It may be an older browser, or perhaps a special purpose browser embedded in another application. For example, Microsoft Word is able to render HTML pages, but it does so in a quirky way. The Blackboard electronic learning system's "Virtual Classroom" has a built-in browser, but it is extremely limited in its ability to render complex features.

Browsers that try to implement a standard may not interpret the standard in the same way as others. Of course, the authors of the standard try to eliminate ambiguity, but that's a challenge in itself, so browser developers may interpret the standard differently.

An example is the CSS standard that specifies a "fixed" background being fixed to the "viewport". This is probably intended to be the browser window; Internet Explorer 6.0 fixes the image to the element it is the background of.

This is a problem which was worse in the 1990s, and is improving - we hope! Implementing CSS2 has provided enough scope for creativity and challenge to the browser designers that there is less need to invent new standards.

So the main thing for Web designers is to be aware which features emerged from a particular browser in the "wild west" period, so they can be avoided. Examples include the <blink> tag (originated by Netscape).

Be aware of the problems noted in the previous section, and be careful to avoid features that aren't standard.

In the hurry to create a Web page, we often overlook the need to check our work in an array of browsers. Web developers need to keep the latest versions of the most widely used browsers, but also some of the older browsers as well.

Here are some browsers to check with:

1. Microsoft Internet Explorer, latest version (6.0)
   The most popular browser
2. Microsoft Internet Explorer, previous version (5.5)
   This may be the second most popular browser
3. Netscape Navigator, latest version (7.1)
   The leading alternative browser
4. Netscape Navigator, previous version (6.0)
   Still has a significant number of users
5. Netscape Navigator, legacy version (4.7)
   This classic is still used by a surprising number of people
6. Opera, latest version (7.54)
   Popular in Europe, this browser claims the best CSS standards compliance.
7. The AOL browser, latest version
   The Internet Service Provider with the largest number of customers usually provides its users with a browser that is customized to some extent.

If you've viewed your page in all the browsers on Windows, you should also view them on a Macintosh. Browser implementations can be noticeably different on Windows and Macs. The brightness of colors and the font sizes are aspects to pay attention to, as well as the whether the page is rendered satisfactorily.

To check browser popularity, you can view recent server statistics. All servers receive information from browseer requesting Web files in the HTTP headers, and this information is usually stored and analyzed by software designed to show interesting and useful information. One site that makes this information public is the University of Illinois at Champaign-Urbana - where the first graphical browser, Mosaic, was developed. Though not necessarily representative of browser use by the public world-wide, it is a helpful and interesting site: http://www.cen.uiuc.edu/bstats/latest.html#BrowsersDNS

One way to save time (and space on your disk) is to use the Delorie HTML Authoring Services page: http://www.delorie.com/web/. This offers several helpful features:

• Web page backward compatibility viewer: lets you choose older browsers and see how they would show your page.
• Lynx Viewer shows you how a text-only browser (or text-reader) views your file.
• Search Engine Simulator to see how a search engine looks at your page.

There are some very helpful Websites that keep track of compatibility. Here are some good places to look:

• Brian Wilson's Index D O T Html and Index D O T CSS. Interactive and rather complicated, but full of very detailed information. http://www.blooberry.com/indexdot/html/index.html
• Selectoracle: allows you to enter CSS rules, or the URI of a stylesheet. It then explains what each rule selects, and points out any problems. http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
• Centricle's CSS Filters: a table of some of the more advanced CSS rules and their implementation on both Mac and Windows systems. http://centricle.com/ref/css/filters/

It's often tempting when we see wonderful new features, to use them as soon as possible. Of course, experimenting with them is good - but we need to be cautious about using new features that aren't supported by browsers at least one generation back.

Similarly, features that allow us to be creative need to be viewed with some caution, and avoided if they aren't implemented the same in different browsers.

Especially important to avoid are the features that have quirky or buggy implementations in some browsers.

Check the listings above to see what's well supported.

Hopefully, you're already in the habit of validating your pages. This insures that they meet standards that are up-to-date and will provide uniform rendering well into the future.

• Validate page code at http://validator.w3.org/
• Validate stylesheets at http://jigsaw.w3.org/css-validator/

In addition to using the work of others, you can check browsers yourself to see how well they render CSS. You can do this at:

http://www.w3.org/Style/CSS/Test/CSS1/current/sec00.htm

This is a fairly long and complex process; be sure to read the introductory explanations first!