Internet Master
Session 6 - Designing Web Pages

References : 
"The Whole Internet" by Kiersten Conner-Sax & Ed Krol.
"Web Page Design" by Mary E. S. Morris and Randy J. Hinrichs
"HTML for the World Wide Web" by Elizabeth Castro
"Web Page Design Cookbook" by William Horton, et al.

Web References

Review: Web Pages

Web Page Show and Tell

  • Demonstration of Class members' web page projects

Tables

  • Basic Table Elements

    • Table tag
      <table>........</table>

    • Table row
      <tr>........</tr>

    • Table cell
      <td>........</td>

    • Other attributes can be added, such as border,s cellspacing, cellpadding, colspan, rowspan, align, bgcolor attributes.

For more information on table tags, check out "The Bare Bones Guide to HTML - Tables" at http://werbach.com/barebones/barebone.html#tables.

For practice on developing HTML tables, check out the Table Tutor at http://junior.apk.net/~jbarta/tutor/tables/index.html.

Web Page Planning Considerations

For more information on Web page planning, see the "WWW Project Development Guide for Extension Groups" at http://outreach.missouri.edu/webteam/docs/guide.html.

  • Housing your Home Page
    • Where will it be stored?
    • How much will it cost?
    • How do I get it there?
  • Web Page Responsibility
    • Who's responsible for the content?
    • Who's responsible for the page design?
    • Who's responsible for updating?
  • What's Your Content? If there's no content - there's probably no need for a site.
    • Who are your users?
    • Is it content that they want?
    • Is it current? If it's out of date, it's not valuable.
    • Is it accurate?
    • Are links appropriate?

Designing Your Pages

  • Design for readability
    • Use good contrast between background color and text.
    • Black on white or light color is easiest to read.
    • Don't SHOUT unless it's appropriate. ALL UPPERCASE or red text may attract attention but are difficult to read.
    • Don't use background patterns or keep them subdued.
    • Remember your text-only users and use "alt" attributes to keep your site usable for them.
    • Don't just fill the page with gray text. Make the page scannable. Allow readers a way in and out of text.
    • Use white space to separate clusters of information on the page.
  • Design for a horizontal medium
  • Design for Easy Understanding
    • Know who your users are and write for them. Write clearly, in short sentences.
    • Avoid acronyms and jargon unless your users will know what they mean.
    • Use active voice.
    • Use lists, charts and tables when appropriate.
  • Design for Efficiency
    • Don't use large graphic files that take too long to download.
    • Easy to navigate - Limit the number of needed clicks.
      General rules of thumb:
      • 3 clicks maximum to get to the important or commonly used information.
      • 4-5 clicks should take users to 80 percent of the documents that they want to use.
      • 7 clicks maximum to get to any document on the site
    • Divide page into zones so users can easily identify where to scan for the information they want. Use tables and lists to group information.
    • Don't overload one page with information. Break it into chunks.
    • Put the important information first. Try to make your opening page less than one screen.
    • Shorten your text. Use short paragraphs. Use wide margins.
    • For long pages, use links in a Table of Contents to connect the user to the information they're seeking.
    • Provide visual cues and easily used navigational buttons.
    • Make your page easy to maintain
  • Design for Interactivity
    • Provide ways for users to get involved in the site.
    • Provide for easy feedback using a form or "mail-to" link.
  • Design to Meet Your Goals
    • What is your most important message?
    • How can you make sure your users find what you want them to find?
    • Is it easy to maintain?
    • Test! Test! Test!
    • Test the site with different browsers.
    • Test all links.
    • Check for spelling and grammar.
    • Is the content correct? Appropriate?
    • Have your coworkers test your site.
    • Have your mother test your site.
    • Have Don (or someone else who is color blind) test your site.

  • Consider the disabled when designing your web material.

    The person viewing your material may:
        Be visually impaired and cannot see graphics
        Be hearing impaired and cannot hear sound
        Have a slow connection and cannot download large files
        Have a physical limitation that keeps them from navigating without clear instructions
        Have a learning disability

    See the following sites for help on evaluating your material for the disabled:

       Information and Access Technology Services - University of Missouri
             Testing Web Pages for Accessibility     
           http://iatservices.missouri.edu/adaptive/testingaccessibility.html
      
       Web Accessibility In Mind:  Webaim
           http://www.webaim.org/

       Bobby
           http://bobby.watchfire.com/bobby/html/en/index.jsp

     

  • Update! Update! Update!

Discussion - What are some of the differences between print and web?

How do you move your web page files to the Web server?

Demonstration of File Transfer Protocol using WS_FTP

Reading:
"The Whole Internet" - Chapter 13

Why would you want to use audio on your page?

  1. Help convey your message.
  2. When it is practical to do so.
  3. It can dramatically increase visitor interest.
  4. It can stimulate powerful emotional synaptic responses.
  5. Can give your web site a comptetitive edge.

Examples of using sound

  1. Hear what our customers are saying about our ______.
  2. Listen to how quiet our dishwasher is compared to other brands.
  3. This type of child's cough requires an expectorant.
  4. Listen to this hot new release.
  5. A message from our director.
  6. An interview with _______.
  7. Click here to play the background music for this page.
  8. This week's spring planting tip.
  9. Kids, click here to have this page read to you.

Resources for adding sound

How to embed sound in your web site: http://www.dezines.com/midi/

DeZines:adding wave files: http://www.dezines.com/midi/wave.htm

Assignment

Home | What Is I-M? | Course Schedule | Handouts & Homework | Students & Graduates | Regional Sites | Volunteers | WWW Resources | Trainer Resources
For more information, contact:
Don Day - daydr@missouri.edu
Mark Stewart - stewartm@missouri.edu
Revised 09/30/99