Creating Web Pages Workshop

Return to Home page

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 both 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 scan-able. Allow readers a way in and out of text.

    • Use white space to separate clusters of information on the page.

  • Design for attractiveness

    • Use graphics to attract attention and balance the page - but keep it simple.
      www.clipart.com  -     numerous clip art images
      images.google.com  -  great image search site

  • Use color to attract attention - but keep it simple.
    To experiment with color, check out The ColorMaker at http://www.bagism.com/colormaker/

  • Provide consistency for related pages.
    Use common logos, buttons, header, footer, colors, layout.
    examples: www.slpl.lib.mo.us

  • Will the page be printed often? If yes, what will it look like printed?

  • Design for a horizontal medium

    • Use wide - not tall - graphics.

    • Use horizontal rules and swashes.

    • Avoid long lists of short lines.

    • Use tables to organize page contents.

    • Try to balance the page visually.

  • 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 Speed

    • Don't use large graphic files that take too long to download.

    • 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.

    • 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.

    • Provide easily used navigational buttons.

  • Design for Interactivity

    • Provide ways for users to get involved in the site.

    • Provide for easy feedback using a form or "mail-to" link.
      examples: http://www.stlzoo.org/

  • 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?

    • 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 someone who is color blind test your site.

  • Update! Update! Update!

Tables

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

Web Authoring and Editing Programs

There are several software programs available for writing and editing web pages. Check some out for yourself at ZDNet, Internet, Publishing Tools - http://www6.zdnet.com/cgi-bin/texis/swlib/subcat/internet.html?s=Publishing+Tools

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?

  • Mapping Your Web Site - How will you organize your pages?

    • Book?

    • Tree?

    • Spider Web?

    • Grid?

  • 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.

  • Use what works for you and your users. Logic must prevail!

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 competitive 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.

Top of Page
Return to Home page

University of Missouri Extension For information, contact:
Mary Ann Horvath, HorvathM@missouri.edu
Last Revised, 04/19/07

University of Missouri Extension does not discriminate on the basis of race, color, national origin, sex, religion, age, disability or status as a Vietnam-era veteran in employment or programs