Web Site design is very similar to developing any large organized project. As blueprints are useful and go through several iterations prior to the product physically being constructed, a well planned web site requires the same effort in its planning stages. Create an abstract template (blueprint) for your site detailing the main aspects and goals of each section. Establish the preliminary links where needed. It is within this stage where the designer has the most flexibility to make changes and mold the site to fit the established goals. Once this stage is completed and construction begins, further changes can cost time and effort to implement.
In designing a template there are two main areas of concern dynamic vs. static data.
Any content information that will be changing at an undetermined rate or frequency should be isolated from the static information and be a link destination. This isolation results in much faster and easier maintenance for the administrator. The ability to change a single reference or replace entire text within a single document with little or no secondary results should be the goal of the design. As the site grows, it becomes intertwined with link references and is much more unforgiving of changes. By anticipating the needs and areas of the most potential growth, the site designer can limit the harmful consequences of every change. Changing a single filename or link reference can have the effect of requiring changes to every single page in the site. Obviously, on a large site, this can be disastrous.
Any information which will never (or very seldom) require changes. Navigation menu-bars, directory structures, and filenames fall into this category. If a navigation menubar is included on every page, and a change to any of the above listed topics is required, every single document must have the new changes incorporated. Adhering to the use of accepted HTML standards here is essential. If a single page is used as a boiler-plate, and an error is found at a later time, every page must be changed to correct the error.
A relatively short and uniform page layout will aid users in navigation and lend the site a unique personality. Also, organize your pages to maximize the user's ease of finding things. The traditional hierarchical structure is a good starting point. Provide search facilities whenever appropriate.
Example of Page Layout Template: template.html
<!-- Comments -->
<!-- Filename: template.html -->
<!-- Created by: B. Cortez -->
<!-- File Revision Level: 1.4 -->
<!-- Topic: Central Computer HTML Style Guidelines Template -->
<TITLE>Template Home Page</TITLE>
--|Navigation Menu Bar|--
<H1> Main Header (or Logo)</H1>
Introductory paragraph with plentiful keywords
<H2>headers or definition lists</H2>
Information Contact Lists
[IMG Icon with ALT text] signature
<EM> Page update information</EM>
Comments: Comments are not displayed in the browser but add significant value to the work by providing background and administrative information, labeling information so that developers know who wrote it, why, and any special considerations for it. Each comment block must be bracketed between comment delimiter tags <!-- (text) -->. At a minimum, every HTML document should contain a comment with the initials of the person who prepared the document and significant dates associated with its creation.
Title: Very often this attribute is omitted because it doesn't appear on the displayed document. But the document title is the text which is saved as a bookmark. Choose the page title with great care as this single line of text may be the only entrance description in someone’s bookmark file. If the text is meaningless as a standalone line, the bookmark (along with your link reference) may very well be deleted from the user’s bookmark file.
Navigation Menu Bar: Provide a menu navigation bar (remember to offer a text navigation bar as well), to enable readers to quickly access the main entranceways to your pages. Locating the navigation bar at the top of the page allows a more rapid access to the various areas of the site than if it is located at the bottom of the page. If the navigation bar is at the bottom of each page, the user must wait for the page to load as well as scroll down the page to access the navigation bar.
Main Header: Usually contains the same text as the title. Use <H1> only once per document. A graphic logo (for further information on graphics, see the graphics section) can also appear at this point.
Introductory Paragraph: Make this a concise statement of the purpose / content of the page or site. People or automated information gathering programs may index this text. The first paragraph is the most likely place for harvesting keywords. To let that person or program categorize your page or site most effectively, choose the introductory words carefully.
<H?> Headings or <DL> Definition Lists: The function of a home page is to introduce and guide readers to the varying sections your site has to offer. The home page is typically used as a main entrance page, therefore, it may be useful to enumerate your offerings under clear headings. Lists help focus the user's attention on a series of bulleted items easing the tendency to overload the reader with large amounts of information. The available choices appear in unordered list (which also helps illustrate suggested spacing above, below, and between list items). Keep the content per page to a screenful if possible. The need to continually scroll up or down a page will get tedious and straining for the user.
Headings (as well as titles) should be as descriptive as possible, because some Web searchers use this information as a means of indexing document content. For example, "Section 1" won't be meaningful, "Development of Thematic Guides" might be. Don't embellish, it is pointed out that "a heading element implies all the font changes, paragraph breaks before and after, and white space (for example) necessary to render the heading". Extra highlighting elements are discouraged, therefore. The HTML specification points out that a heading should not be more than one level below the heading which preceded it. That is, <H3> should not follow <H1>, etc. Use headers sequentially. Always use heading levels in order, with one heading level 1 at the top of the document, and if necessary several level 2 headings, and then if necessary several level 3 headings under each level 2 heading.
Icons: A few simple but meaningful icons can help people navigate your pages. Incorporating at least one for your home page is most useful. Create a company information page, listing any awards or certifications presented, corporate affiliations, as well as a company history. Give the reader a chance to understand where the company has been and where it is heading. This historic data may be invaluable to a user searching for company information. Providing statistical information on site usage is entirely optional, however to the webmasters, finding out information on users and browser types can be invaluable.
Contact Lists: A section listing the key employee contacts, possibly including a link to a personality page for each individual. Each personal page can contain a; photograph, statement from the person, short history or background, qualifications, etc. This is an excellent way to personalize the contact giving the reader a chance to get to know the person prior to initial contact or continuing contact.
Signature: Provide a means for users to comment on your page or site, offer problem reports, gain further information, etc. A signature is minimally the creator's e-mail address or a link to an e-mail form addressed to someone appropriate.
Page Update Information: As an option, located at the bottom of the page, include a date of the most recent time it was updated by the author. This is used to inform users of the frequency and accuracy of the current information. The documents can form some impression of the authority of the document (i.e. how recent it is, and how reliable the information provider is). Also, when dating a document, try to avoid ambiguous formats. For example, both the month/day/year and day/month/year format are used on the web -- the situation of needing to know if "4/2/94" is actually April 2 or February 4? One solution to this is to use the name of the month (or an abbreviation), e.g.: Sept. 19, 1995
This document was produced using HTML Transit