Web Page Design

Simple Principles and Concepts for simple informational web sites.

Contents

• Introduction
• Definitions
• Mechanical Principles
• Visual Principles
• Search Principles
• Coding Principles
• Example Home Page
• Example Web Page

Introduction

If you want your web site to be 'cool' or you are trying to impress or entertain then these principles are not for you.

HTML is ideal for word processing of simple presentations. These principles use HTML version 3.2 exclusively. Later versions introduced excessive complication. Web site design is to be compatible with all browsers.

Using simplicity makes direct coding of HTML reasonable. Word processors have a tendency to be excessively complicated and encourage outrageous presentations. There is also danger in becoming obssessed with excessive attention to the minute and unimportant details of style.

Definitions

Audience

The people you want to see the information on your web page.

Customer

The person who will be viewing the web page.

Home Page

The first web page of a domain URL. An example of a domain URL:

www.domain.com

This page is usually named 'index.html'.

Web Site

A collection of web pages available from the home page.

Web Page

A single HTML file.

Window

The visible display area of a web page. The web page content may not all be visible at one time. Additional content may require vertical scroll. The size of the window is a customer selected preference.

Mechanical Principles

Design for slow connections and overloaded networks.

• Use text where possible.

• Beware of large tables near the start of the page. Large tables might not display until the entire table is loaded.

• Minimize graphics. Minimize the size of graphics. GIF is usually more compact for drawings and cartoon like pictures. JPEG is better looking and usually more compact for photographs. BMP might be smaller for black and white or low color resolution.

• Don't put a whole book on one web page. Avoid creating huge web pages. More than about 10 vertical page scrolls is excessive. Create multiple pages that link to each other.

Design for a wide range of window sizes.

• Beware of size assumptions. The font size of text is variable depending on customer selection and DPI setting.

• Don't try to squeeze everything you can into a small window.

• Don't try to fill all the space of a large window.

• Do not attempt to force a column width on text. The customer will size the width of the window to their preference.

• Word wrap is your friend. Allow for it. Plan for it. Depend on it.

  Don't force word wrap to meet any specific column width. Especially don't use 'P' or 'BR' improperly. Beware that left or right align might look awkward with a large window. Complete testing with small and large windows will avoid these and most other similar problems.

• Avoid horizontal scroll like a plague. Your design must fit horizontally in the small window. Stack items vertically when needed.

• Vertical scroll is your friend. Allow for it. Plan for it. Depend on it.

  Don't try to force it. Don't ever insert excess vertical space. Double space is the most that should ever be used. The maximum separation is blank line, ruler, blank line.

• A graphics size must fit in the small window. Graphics designed to be full width must be less than 600 pixels wide. Graphics designed to have text flow on a side should be about 300 pixel's wide. Graphics should be about 400 pixel's high.

  Graphics must not look lost or misplaced in a large window. This is likely to occur with a full width graphic that is not centered.

Design for a stable web page.

• Avoid referring to graphics on a different web site. You can't control or adapt to off-site changes. Place a copy of the graphics on your web site.

• Refer to the pages of other web sites with the simplest URL possible.

  Example:

  <A HREF = "http://www.domain.com">

  Instead of:

  <A HREF = "http://www.domain.com/index.html">

• Place high-level web page groups in a separate directory accessible by only naming the directory in the URL.

  Example:

  www.domain.com/About/index.html

  Instead of:

  www.domain.com/About.html

Visual Principles

• Duplicate the title of the web page with an identical heading. 'H1' and centered is most appropriate.

• Make sure the title and heading match the text of the link that references it.

• Include site navigation links under the heading. You might choose to duplicate these at the bottom of the page. The minimum link is a return to the home page.

  A link to every page in a chain back to the home page is good.

  A link to next and previous pages when in a series is good. Some series of pages are designed to be read one after another like chapters in a book.

• Use the default font face as much as possible. Don't force your font selection on the customer. This is also not part of the HTML version 3.2 standard.

• Do not change the 'BASEFONT size'. Use the default font size as much as possible. Don't force your font size on the customer.

• If it is at all appropriate, use heading commands instead of font size changes as much as possible.

• Avoid changing the color scheme in the 'BODY' tag. Don't force your color scheme on the customer. If you do change it, then you should change all the settings to make sure they stay visually compatible. Color scheme compatibility is a complex subject.

• If you select a background image, be careful to minimize the associated problems of color incompatibility. You may need to change all the settings to make sure they stay visually compatible.

  The colors of the image should be chosen to be either very bright or very dark with only a small variation in the range of colors. This is necessary to distract as little as possible from reading the text. This is especially a problem with small text sizes.

Search Principles

Unfortunately, there is one group you don't want to be able to search easily. Spammers. You might choose to avoid placing a mailto or recognizable email address on a web page.

Possible substitute: "Webmaster at Domain.com"

Publicize your web page.

• Word of mouth publicizing.
• Newsgroup announcements.
• Links from similar web sites.
• Search placements.

Design for search placement.

1. Keyword design is the most important thing to do. Keywords are what your audience will use to locate your information. The web page title and subtitle are the first source for your keywords. After you define your keywords the title and subtitle may need to be revised to match your target keywords. Remember that each page on your site can have a different set of keywords.

2. Test your keywords in several search engines. Use several combinations of your primary and secondary keywords. Make sure the keywords turn up sites related to your information. Look at the source for the web pages and note how the keywords are incorporated. Study how the search engine displays the site.

3. Code the keywords into your page title and beginning headings. The page title will become the search title of your site. The heading information will become the descriptions of your site.

4. Submit your site to search engines. This will require research to determine how and what to submit.

5. Search regularly for your site. When you find your site be sure to select it and don't go back to the same search engine until after you perform a search through another engine. Remember that it takes days and maybe weeks for your site to appear. Use various keyword combinations. Don't search the same engine with the same keywords too often in the same day.

Coding Principles

I often use NotePad to write HTML code. Word processors create excess and unnecessary code. This results in code with problems and poor performance. Browser incompatibility is the worst problem.

• Do not use optional tags described as unnecessary by the standard. Examples: HTML, HEAD, BODY, /P, /TR, /TD, /LI...

• Most browser tags are placed on a line by themselves.

  The end tags for the font style and phrase elements often must appear immediately after the text. This avoids the appearance of an extra space.

• Block browser tags are entered after a blank line

• The element names in browser tags are capitalized.

• Place the name and intended location of the file in a comment at the start of the code. Good self-documenting code practice. It will reduce problems and confusion.

Example Home Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!"-- http://www.Domain.com/index.html" -->

<TITLE>
Example Home Page
</TITLE>

<H1 ALIGN = CENTER>
Example Home Page
</H1>

<HR size = 3 >

<P ALIGN = CENTER>
Person at Domain.com

<BR>
<A HREF="http://www.Domain.com">
www.Domain.com
</A>

<HR>

<P>
<TABLE align=center>
<TR>
<TD>
<A HREF="Example.html">
Example</A>
Revised 2004-02-27

<P>
<A HREF="Page2.html">
Page 2</A>
Revised 2004-02-20

</TABLE>

<P>
<HR>

<P ALIGN = CENTER>

This web site is designed to be compatible with all browsers
having HTML version 3.2 support.

<BR>
WebMaster: Web Designer

<BR>
WebMaster at Domain.com

<BR>
<A HREF="http://www.Web-Designer-Site.com"> www.Web-Designer-Site.com
</A>

<HR>
Revised 2004-05-05

Example Web Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!"-- http://www.Domain.com/Example.html" -->

<TITLE>
Example Web Page
</TITLE>

<H1 ALIGN="CENTER">
Example Web Page
</H1>

/<A HREF = "index.html">Home</A>
/Example

<HR size = 3 >

<P>
Informational text on a web site page.

<P>
<HR>
Revised 2004-05-05