1.0 Purpose

Cross-platform and cross-browser support are very important to reach the largest possible audience and organizations want to link tightly to all their customers and suppliers over the internet.

This paper presents a set of suggested coding conventions/guidelines for browser independent authoring.

2.0 The Problem

Here are some of the key sources of difficulty:

4.0 Links

Certain characters are reserved and can not be used in URLs without encoding (in hexidecimal format). Some browsers may handle some of these characters properly, but this does not indicate that these characters are safe to use without encoding in all browsers. For example, spaces are special characters that aren't allowed in URLs without encoding them to %20. Internet Explorer users will not catch this problem, but Netscape and many other browsers will, so you should be especially careful to encode these properly. In general, you should avoid the use of characters in your file or path names that may require encoding and you should always encode a character if there is some doubt as to whether it can be placed as it is in a URL. As a rule of thumb, any character other than a letter, number, or any of the characters $-_.+!*'(), should be encoded to their hexidecimal equivalents

5.0 Proper Graphics Usage

5.1 Using Colors on Web: Microsoft Windows Provide 256 different colors while Mac operating system supports only 216 colors out the windows 256 colors. To ensure that your graphics display correctly on all plateforms, you should use colors out of 216 colors avialable on all plateforms.

5.2 Use ALT attribute with IMG tags: Use the ALT parameter in your <IMG> statement to provide a text placeholder for the image; for example:

<IMG SRC="home.gif" ALT="Click here to go to home">

ALT tags have two advantages:

The browser will load the text first, so readers can start reading while they're waiting for the full graphic.
You can provide information to readers who are browsing with graphics turned off.
5.3 Using Image Maps: Make sure that text navigation links or a textual site map is available to make the entire site available to users without images.Using textual navigation or separate graphics may be a viable alternative to using image maps entirely. Indicate in the ALT text for any image mapped graphic that it is an image map
You can provide both a server side and a client side image map, and you should do so whenever possible, since some browsers only support one or the other. You can do this by including both the ISMAP and USEMAP attributes in the image which you are using for your image map

5.4 Include WIDTH and HEIGHT attributes with <IMG> tag: Some browser formats the page with text first and adds the graphics later. If you don't specify the size of your graphic, the browser will have to reformat your page when it downloads the graphic. This results in an annoying screen flicker. If you specify WIDTH and HEIGHT then most of the browsers will reserve that much space for the image to be downloaded and screen flicker is avoided.

5.5 Specifying Colors: Use the hexadecimal color codes (such as "#FF0000"), and not the names of the colors (such as "red"), as some browsers don't support the color names.

5.6 Screen resolution: If you're targeting a more general audience, stick with designing for an 640x480 resolution screen for your web pages.

6.0 Proper Table Usage

6.1 Using nested tables:Some browsers (for example, Mosaic) give some problems in case of nested tables. So you should be careful while using nested tables.

6.2 Lay out text and images before adding table tags: You can ensure that your table data is complete and in the right order if you finalize the table text before you add the formatting tags. This method may also help you realize that you didn't need a table to present the information after all. Use tables for data, which is what they were meant for, not for layout.

6.3 Avoid specifying sizes in <TD> tags: Fonts and sizes may be different on readers' systems, so specific <TD> size parameters can result in truncated text.

6.4 Using color attribute with <TD>: Many browsers don't support cell background colors, so if you're using this feature, choose your colors cautiously. For example, white text on a black background will display correctly with Internet Explorer, but will disappear (because it will appear white on white ) in Netscape Navigator 2.0 as table background feature is not available there.So if you're using color in your tables, choose light backgrounds and dark text.

7.0 Proper Frame Usage

If possible avoid frames in the first place. Most of the features of frames can be made available by proper usage of other HTML tags like table. The main problem with frames is that when a user is viewing a page with frames on a browser which does not support frames, then only a blank page gets displayed. This might confuse the user.To avoid this problem use the tag <NOFRAMES> to display information to the user.

For example the following code will work perfectly in a browser which supports frames
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" name="left" >
<FRAME SRC="page2.htm" name="right" >
</FRAMESET>
</HEAD>

But in a browser which does not support frames only a blank page will be displayed .Instead if the following code is used then the user at least gets the message "Your browser does not support frames!".
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" NAME="left" >
<FRAME SRC="page2.htm" NAME="right" >
</FRAMESET>
<NOFRAMES>Your browser does not support frames!</NOFRAMES>
</HEAD>

In some browsers like Netscape once the <BODY> tag has been encountered in a document, the browser assumed this is a normal Web document, and would then ignore any <FRAMESET> definitions.

This meant that the following HTML

<HTML>
<BODY BACKGROUND="clouds.jpg">
<FRAMESET cols="150,*">
<FRAME SRC="links.html" NAME="links">
<FRAME SRC="content.html" NAME="content">
</FRAMESET>
</BODY>
</HTML>

would produce a perfectly valid page using some browsers. However, if this page were viewed with either Internet Explorer 4.0 or Navigator, only the cloud background image would be displayed. To make the page work properly in those browsers, you would need to move the <BODY> description below the <FRAMESET> description.

8.0 Using The <OBJECT> Tag

Cover all your bases. You can support multiple browsers simply by adding complementary HTML tags to your <OBJECT> statements.

Here's your typical <OBJECT> tag for placing an object (in this case, a Shockwave control) on your page:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT= 100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
</OBJECT>

Some browsers will display it and will download the control if it isn't already on the system. Other browsers, however, do not understand the <OBJECT> tag and will not know what to do with this syntax.

A better approach would be to use:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE= "my_movie.dcr">
<EMBED SRC= "my_movie.dcr" ALT= "CoolShockwave Movie" WIDTH=100 HEIGHT= 100>
</EMBED>
</OBJECT>

The <EMBED> tag we've added above allows browsers that don't support <OBJECT> to find and display the Shockwave control.
For browsers that don't support either tag (for example, Apple browsers) you can add a <NOEMBED> tag with a replacement for the control (for example, an image that illustrates the control) :

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<EMBED SRC="my_movie.dcr" ALT="Cool Shockwave Movie" WIDTH=100 HEIGHT=100>
</EMBED>
<NOEMBED>
<IMG SRC="my_image.gif" ALT="Cool Shockwave Movie" WIDTH=100 HEIGHT=100>
</NOEMBED>
</OBJECT>

If you have a Java applet that performs the same functionality as the Shockwave control, here's how you can provide access to it:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<APPLET CODE="my_applet" WIDTH=100 HEIGHT=100>
<IMG SRC="my_applet.gif" ALT="Cool Java applet" WIDTH=100 HEIGHT=100>
</APPLET>
</OBJECT>

Again, the IMG statement provides a static image to be displayed in browsers that support neither objects nor applets.

Thus if any other tag can be used to perform even part of the functions that the object tag does then it is advisible to use other tags along with the object tag.

9.0 Using Scripting

9.1 Java is not entirely stable on some platforms:Keep this in mind before you add Java code to your pages, and be sure to test your code on various browsers (see Testing your pages).

9.2 Some Browsers do not support scripting: For example, the AOL browser does not support Visual BasicŽ Scripting Edition (VBScript) or JavaScript, so try not to make it mandatory for viewing your site. Make sure that your site functions (at least at some level) without the scripting code.

9.3 Declare your scripting language. If you don't specify the scripting language you're using in the <SCRIPT> tag, for example:

<SCRIPT LANGUAGE="VBScript"> ... </SCRIPT>

the browser will assume the default language set for the browser. Since scripting languages use different syntax, you may end up with scripting errors.

9.4 Use comment tags. Delimit your script with comment tags:

<SCRIPT LANGUAGE="VBScript"> <!-- ... --> </SCRIPT>

Otherwise, your script will be displayed as text in browsers that don't support the <SCRIPT> tag, and Netscape Navigator will attempt to read the code as JavaScript, resulting in syntax errors.

10.0 Style Sheets

One way to deal with cross-platform, cross-browser issues is to provide a plain, default style sheet for all browsers that doesn't specify font sizes or any of the more elaborate attributes. Then you can use scripting to find out which browser the user is using and then serve to that browser a different, more elaborate style sheet which will be compatible to it.

11.0 Testing Your Pages

Finally, test your Web pages using as many browsers as possible, especially:

Mosaic provides a good "safety" test -- if your pages work in Mosaic, they're likely to work in the majority of browsers. Lynx is a text-only browser, so it allows you to ensure that your site works with graphics turned off.

12.0 Practical Considerations (Source: Project VWO)