Association Web Style Guide

1. Identification

1. Association web pages consist of a standard "top" and "bottom" template with the individual page content in the middle. The standard "top" of the page consists of the category banner and navigation buttons. The category banners correspond with the eight navigation buttons and information sections of the Association Web Site and are found at the bottom of every page. It is imperative that the creator of a new page choose the appropriate category for the page.
2. All Association web pages created or modified after January 1, 1998 will include the tag:

<LINK REV="made" HREF="mailto:...">.

3. All Association web pages will include a last modified date. This serves as a versioning mechanism as well as assuring the reader the information is current. Also, it makes it easier to cross-check pages between the main server, the mirror, and the test server.
4. Wherever possible, use long formats of the date, such as May 6, 1996, or 6 May 1996. Short dates like 5/6/96 can be misinterpreted in other countries.

 

2. Links

1. Avoid creating nondescriptive links such as "click here" and "select this". Use meaningful text that flows smoothly within the context instead.
2. Make the hyperlink text not too short or long. Also, be careful to avoid including extraneous punctuations with the links, such as ending colons, periods, etc.
3. Avoid using different texts for the same link, at least not on the same page.

 

3. Navigation Controls

1. Provide a small set of consistent navigation through the top and bottom banners. Consistent controls breed familiarity on your readers with your pages, allowing them to more smoothly cruise through your site.
2. All graphics icons used to represent will have descriptive text on the icons, or a text alternative to the icons should be provided.

 

4. Graphics

1. GIF images are the preferred format. In certain photographic instances, a JPEG format may be used.
2. The Association Web site does not used PNG.
3. The use of smaller graphics is preferred to larger ones. This reference to size is in terms of number of bytes, not necessarily physical dimensions.
4. Set the size of any embedded graphics image by specifying the HEIGHT and WIDTH attributes.
5. Supply a text description of the graphics in the ALT attribute.
6. If your image maps contain multiple links, try creating images with clearly demarcated areas that suggest the different links.
7. Most readers probably have machines with lesser graphic capabilities than a developers. Design for the lower, if not lowest, common denominator. Resolution of 640x480 pixels and 256 colors are fair assumptions.

 

5. Page Layout

1. All page backgrounds should be plain white with no background image. This is more consistently displayed and does not interfere with reading text.
2. Create titles for at least all of the top main pages.
3. The first page of every main section includes appropriate "META" tags to help define the abstract, content, keywords, etc. to be used by the search engines which honor such tags. The keywords are repeated in a comment in the body of the page, since some search engines stil use4 that mechanism. Commonly used META tags include:

<META NAME="KEYWORDS" CONTENT="...comma separated list of words ...">

<META NAME="OWNER" CONTENT="...an e-mail address ...">

<META NAME="ABSTRACT" CONTENT="short description">

<META NAME="DESCRIPTION" CONTENT="longer description">

<META NAME="ROBOTS" CONTENT="NOINDEX">

4. If you are embedding multimedia files such as audio, video, or animation for downloading or playing in-line, indicate the file sizes so the readers can decide beforehand if they would prefer to wait. Also, name these files with the standard extensions so they can be easily interpreted.
5. Use blinking text rarely, if at all.
6. The content of each page is formatted (wherever possible) according to the prevailing HTML standards as set forth by the World Wide Web Consortium (W3C). Currently the Association site follows the HTML 3.2 Reference Specification but we continue to avoid certain constructs which prevent all browsers used to access our pages from being able to view the content. In addition, pages are routinely tested with a variety of browsers on several platforms, and new pages, substantially re-worked pages, and all scripts should always be tested before posting to the public server. Pages should be spell-checked before posting.
7. The best tool within HTML to create decent looking layout is the TABLE, and it is best to not to force some physical effects with the logical constructs available, such as using the different header tags to change font size, or using extra blank lines and white spaces to force spacing.

 

6. Page Logic

1. All Association templates are built with the use of "server-side includes". for example:

<!--#include virtual="/include/top_ii.html"-->.

2. When image maps are use,both client-side and server-side image maps are implemented in order to ensure they may be used by the majority of browser software.
3. The Association uses a specific Body Tag that looks like this:

<BODYTEXT="#000000"BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#551A8B" ALINK="#EE0000">

4. All Association pages should be built for fast downloading. Total size of all elements on a page should be limited to 30-40K range. Occasional exceptions can are permitted. Pages with photos should consist of links with descriptions to individual photo pages.
5. Page headings should start with the <H2> tag instead of the larger <H1> tag. These headings can be either left aligned or centered.
6. Displayed below are the 8 "top" elements of a page and its corresponding"include" tag:

 

<!--#include virtual="/include/top_adv.html"-->

<!--#exec cgi="/cgi-bin/conftop.cgi"-->

<!--#include virtual="/include/top_el.html"-->

<!--#include virtual="/include/top_ii.html"-->

<!--#include virtual="/include/top_ms.html"-->

<!--#include virtual="/include/top_pub.html"-->

<!--#include virtual="/include/top_vend.html"-->

<!--#include virtual="/include/top_ss.html"-->

 

The "bottom" template looks like this and has the following "include" tags:

 

Send email to Association or to the Webmaster

©Copyright 1996 Association. All rights reserved.

 

<!--#include virtual="/include/bottom.html"-->

<:!--#include virtual="/include/copy.html"-->

Please provide us feedback about our web site
Send email to Interex or contact the Webmaster
©Copyright 1999 Interex. All rights reserved.