Tips for Designing Web Pages

Interactive Table of Contents

1. Planning a Home Page
2. Place Emphasis on Reader and Learning
3. Help the Reader Process the Information
4. Create a Site that Loads Quickly
5. Maintain a Consistent Layout/Design
6. Use Boldface to Emphasize a Point—Not Underline or Italics
7. Do Not Use All Caps
8. Color Scheme
9. Do Yourself a Favor‚ Make the HTML Code Easy to Read and Maintain

Planning a Home Page¹

• What is the purpose of this Web page/site¿
• What audience am I trying to reach and how does this affect my page/site¿
• What information am I trying to convey¿
• How will I organize the information¿
• What should the home or top page have on it to attract visitors¿

Place Emphasis on Reader and Learning

• If readers will be printing your pages, use dark letters on a light background
• Use only graphics and sound that enhance your content
• If content is time-dependent, date-stamp the page
• Keep the page current

Help the Reader Process the Information

• Use Bullets to make points
• Use Numbers to indicate a process or sequence
• Place important information at top of page
• Use boldface to highlight critical information
• Use headings and grouping information to aid in page navigation
• Use internal links to aid in page navigation
• Be clear! Avoid vague words¹
• Use simple language. Avoid extra words.¹
• Use consistent terminology throughout the page/site¹
• Check your spelling and grammar—the world can visit your site¹
• Keep it Simple—no extraneous visual information

Create a Site that Loads Quickly

• Line art and black and white images load quickly; Java or sound files do not. Use only those graphics which enhance your content.
• Provide alternative text. Remember that some people never turn on images.

Maintain a Consistent Layout/Design

• It is easier to navigate familiar pages and readers can find what they need more quickly
• Include navigation buttons or links. Keep them current!
• Use horizontal rules to separate sections of the page
• Vary the text alignment to provide cues regarding the type of information being displayed (ie, Title, description, etc). In addition, different alignment visually breaks up the page making it easier to read.
• When the page layout changes significantly, the reader thinks they've left your site
• Include a way back to the home page on each page and place it in the same location on each page¹

Use Boldface to Emphasize a Point—Not Underline or Italics

• Underlined text implies a hyperlink
• Italics can be difficult to read
• Don't overdo emphasizing or formatting of text¹

Do Not Use All Caps

• The All Caps style slows reading time because it doesn't provide the visual cues the reader has been subconsciously trained to expect
• The All Caps style is considered visual shouting on the Internet

Color Scheme

• Select an attractive color scheme and stick with it throughout
• Generally a light colored background and dark letters are preferred
• Limit yourself to 3 or 4 colors for text (heading, basic text, hyperlink, and visited links). This isn't the time to try out every crayon in your box!
• Use colored text sparingly, color implies text has special meaning
• Colored text creates a cognitive and perceptual load for readers and slows reading time

Do Yourself a Favor‚ Make the Code Easy to Read and Maintain

• Make tags consistent. Use either all upper case or all lower case. It makes them easier to identify.
• Use blank lines to separate the code for unrelated items. In general, if a blank line appears on the page, then a blank line should be in the code.
• The code for items displayed on a new line of the page should also be placed on a new line
• Use indenting (extra spaces) to indicate nesting levels (scope) for related items
• Pair tags properly or they may not work as expected. {<TAG1><TAG2></TAG2></TAG1>}
• The outermost tags should be those that affect the placement of text on the page. Tags that change the characters' appearance should surround those characters and be placed within the location tags. {<P><B>associated text</B></P>} or {<H1><I>associated text</I></H1>}
• Don't put blank spaces between tags and the text associated with them. If spaces are necessary, place them before the starting tag and after the closing tag.
  {text  <TAG>associated text</TAG>  text}
• Don't let the code run off the screen. Some editors don't support wordwrap so editing may involve a lot of scrolling.
• Try out the Web Page in more than one browser¹