I have written this document to help reduce the amount of issues we have recently come across. It is important to address issues like load time, cross browser compatibility, and other technical design issues.



The following Best Practices have been developed in order for us to maintain our reputation for producing quality web sites, and reduce technical problems. Please follow them and contact me if you have any questions.

You can no longer assume that every web visitor is using the latest version of Microsoft Internet Explorer. In fact, you can't even assume that someone is using IE at all. Consider all of the various versions of browsers in use, and the fact that more and more people are turning to Firefox as well as MAC operating systems. The need to design for cross-browser compatibility has never been greater. Here are the basic cross compatibility rules that must be followed:

?Avoid using browser-specific tags.

?Check your design with the latest versions of all major browsers as well as one or two previous versions.

?Use Style Sheets, XML preferred, in order to assure a more compatible design across multiple browsers.

?View the site design with images turned ?off? so you can see how your site will appear to people who use text-based browsers and automated screen readers like those used by the visually impaired.

?Take advantage of the ?ALT Text? tag so visitors who choose to surf with graphics off, or cannot see graphics for any other reason, know what each image is supposed to represent.

?Design Element Considerations

In addition to the general guidelines discussed in the previous section, it is important that special attention be paid to each of these essential design elements:

?Special Encoding Requirements

There are a number of special characters that cannot be used in a linked URL without being specially encoded in HEX characters. Although some browsers will automatically compensate for improperly coded characters, many will not.

A good rule of thumb is to encode any character that is not alphanumeric. The following characters MUST be encoded:

$-_.+!*'() plus any spaces.

?Case Sensitivity

although a server issue and not a browser one, most server software is case sensitive. Always create links using file names that match the case of the actual file that is being accessed. That way, even if the target server is not case sensitive, no maintenance will be required should the site be transferred to one that is.

?Color Issues

every monitor and color card displays colors differently. You can never assume that the shade of blue you are seeing will match the shade of blue that a visitor sees. In addition, not all browsers are capable of handling the text definition for a color. Use the HEX color definition codes instead of the corresponding words.

Avoid using the FONT color tag. Not only is this tag depreciated in current Web standards, but many users with color blindness, or those with other visual problems, set their own default colors which they will not appreciate being overwritten by your choices.

When specifying colors for any design element, put the tags into your CSS file rather than in the HTML directly.

Use only ?Web Safe? colors that can be seen by anyone whose monitor and video card supports only the basic 256 color cube.

?Graphic Design Considerations

In order to assure compatibility across all graphic-enabled browsers, use only GIF, JPEG and PNG formats. . Keep in mind that some browsers are eliminating support for GIF files due to patent issues affecting the underlying LZW compression process.

PNG is an acceptable substitute for GIF. Other formats, including PICT, BMP and XBM are not widely supported yet.

?Fast Page Loading Considerations

Specifying the WIDTH and HEIGHT attribute for every graphic file allows the page to load faster because the browser can reserve space for the slower loading graphic files while it continues to render the textual portions of the page. Slice large images to speed up loading time.

?Screen Size Considerations

Never design a site with specific page height and width hard coded. Users with older monitors and video cards will not be able to easily view certain screen sizes, and other users have to stay within specific screen size settings due to default font size or other reasons. Screen sizes are also limited by people who use WEB-TV and similar services or who surf the web using handheld devices. Instead of defining absolute pixel sizes, use percentage settings whenever possible.

?Cascading Style Sheets

Cascading style sheets provide a greater degree of control over site design by keeping layout and content separate. A well-designed CSS also speeds up site loading time. Visit this site for an in-depth look at how to construct and use a CSS properly.

Current best practices dictate that the use of the TABLE tags are replaced with CSS table substitutes.

?Cookies

Although the concern is generally unwarranted, many people have turned cookie acceptance off on their browsers. IE ships with a highly-restrictive cookie acceptance policy as its default.

Consider avoiding cookie use altogether and never require the acceptance of cookies in order to view any portion of a web site. If cookies are being contemplated to track login status, consider using SESSION ID's or other appropriate cookie alternatives.

If you do use SESSION tracking, NEVER hard code a SESSION ID into any link. Doing so can compromise the site's security or the security of an individual user. The most common way that SESSION IDs get encoded into links accidentally is when the developer copies and pastes a link from their own browser that is already displaying a SESSION ID.

?JavaScript Considerations

JavaScript is not supported by all browsers and those that do support JavaScript often implement that support differently. Many current browsers block JavaScript and require the user to click on a warning dialog box in order to allow JavaScript to execute. This warning box intimidates many users. A great number of users turn JavaScript support off completely.

If you do use JavaScript, be sure to fully implement the NOSCRIPT tags to hide the JavaScript code from non-compatible browsers.

NEVER use JavaScript to affect a browser redirect. This is a form of search engine ?trickery? that can get the site banned by Google and others. Speaking of redirects, always use the HTTP 301 Status code and Location header to handle permanent page or site redirection. There is no search engine penalty incurred with this method.

Keep in mind that these best practices represent the minimum quality standards that we want to code to. Remember, when in doubt; choose what's best for the user who is visiting the site with the lowest level of available technology.