Basic guidelines:

• Put your most important information first so that your readers don't have to scroll to find key information. People speed-read web pages, and often don't view the whole page if the first part they see is not of interest. Don't put your most current news at the bottom, put it at the top.

• Use bulleted lists to identify important points.

• Use generous amounts of "white space" (the blank space that surrounds the pages content.) It makes the page easier to read.

• Choose your fonts carefully. Most browsers will default to Times or Courier. If you choose a font for your page that is not available on a student's computer, their browser will automatically display in the default font. Limit your fonts to no more than 3 on a web page. Use bold or italic for emphasis.

• Use navigation buttons or arrows to assist your visitor in finding the information they are looking for quickly. Providing a menu-like linked overview for long pages allows visitors to quickly find information.

• Always post the date of your updates close to the top of the page so visitors can easily see if new material has been added since their last visit.

• Remember to spell check your files!

 
 

 
 

Use of Color & Backgrounds

• Develop a color scheme for your web site and stick with it throughout the site to provide continuity and ease of navigation.

• Use complimentary colors. Avoid odd combinations of colors that are distracting from your message or make reading your message difficult.

• Cooler colors such as white, blue, purple, and grey work great for large areas. Use red, yellow, orange, & magenta for highlights.

• Dark backgrounds with white (reversed type) can be very attractive, this combination can be hard on the eyes for pages that contain information that must be accessed frequently or contains a large amount of type. These pages often prove difficult to print as well. An example of a black background that would be hard to print is at The Graphics Ring

• Patterned backgrounds are available for your web site. Just be sure that if you use a patterned background that your message is still very clear.

• Check the results in several different browser formats if you use a patterned background, and on different computers if possible. Remember that someone using an old VGV monitor that shows 16 colors is going to see something quite different from someone with a high resolution color monitor.

   
   
  

Use of Graphics

• Graphics should enhance your web site, not detract.

• Abide by copyright requests. Many sites allow you to copy and use their graphics. Be sure and provide a link back to the site and get permission when needed.

• Avoid animated graphics on pages that your visitor might print. These graphics will often confuse the printer and cause multiple pages with illogical characters to be printed.

• Keep the total size of all graphics under 64K to minimize visitors waiting for pages to load. Smaller is definitely better.

• Use a .gif graphic instead of a .jpeg whenever possible. Some browsers will not recognize the .jpeg format.

• Check your graphic size at: NetMechanic Image Optimization to reduce file size or GIFCruncher a GIF Compression Tool

• Need graphics? Try Web Graphics and Image Resources for all sorts of links to backgrounds, clip art, animated gif's, and image editing tools.

 
 

Using Frames

• Frames can provide additional functionality for a web site allowing you to display several web files at once. Remember that some browsers are still not frames-compatible and some people find them difficult to use. If you use frames for your site, offer an alternative site without frames.

• Frames are somewhat annoying unless they are done very cleanly, which is usually not the case. If you insist on using frames then release the frames if you link to somewhere off your page.

• Don't trap people in your frames when you send them to an outside URL. It's easy enough to let them out of your frames by using the "target=_top" name in the link attributes. If you feel you have to do frames then use the "target=_top" and let people out of your frames when the go to an outside link.

• For an example of "trapping" the visitor,
  check out HTML - The Mining Co.

• If people are linking to your pages, be sure to have your actual URL address somewhere on each page. This allows people to figure out where you are, and go directly to you. If you need a Stop Link program to prevent your pages from becoming trapped, you can find it at: http://www.chickasaw.com/~waedens/html/stoplink.html

 
 

USE OF TABLES

Tables work differently in Netscape and Explorer. For example, the navigation table at the bottom of this page looks best in IE. Some of the colors used in the table don't show up in Netscape. So, make sure your "look" works in both Netscape and Explorer. That's where a sample page where you test your fonts, backgrounds, images and basic schematics of your site will save you lots of time.

USING SPECIAL EFFECTS

Web pages should be designed for dual browser platforms, so that they can be viewed equally well with the two major browsers, Netscape 3.0 or with Internet Explorer 3.0. JavaScript, Java, Active-X, and original animation should be used only when they are the most effective approach.

ADDING SOUNDS

Sounds on a web page really don't serve much purpose except to increase the time it takes to download the page. Avoid them unless the sounds are a feature of your site - like birdcalls or a wildlife identification quiz.

 

SAY SOMETHING ON THE PAGE!

Basically give your page some substance! Internet is a tremendous learning tool for everyone. Consider making a section of your page where someone has the option to learn something.

Local Information: Give them a reason to bookmark your page. Visitors will read anything if it is new or interesting, but they will bookmark something that is useful to them.

 

For additional help in web page design,

you will find a great many resources at:

• Design tutorials: The HTML Writers Guild,
• Graphics: Web Designer's Paradise,
• Basic HTML by LawSearch