Professional Development Committee, Spring Technology Workshop
The Elements of Creating a Web PageHomePreviousNext



Whole site design

Page design

  • Page size
  • Layout
  • Backgrounds
  • Typography

    Color and Graphics




    Site map

  • Page Design -- Layout

    Simple is often best!

    Readability issues
    Remember the reverse pyramid approach (important information at top of page) and other guidelines from the field of human-computer interaction.

    Create a consistent page layout

    • a typographic hierarchy for site elements (headings, subheadings, body text)
    • Create economically-sized navigational aids and use them consistently; for longer pages, repeat them at top and bottom, or at meaningful intervals
    • Use horizontal rules (<hr>) sparingly
    • Consistency is good, but make sure pages or areas do not look identical; add contrast (such as running headers) to differentiate sections
    • create and use page templates to enforce a consistent page layout
    Grids and columns
    If you need to place text and graphics in a grid formation, or want a columnar display, use HTML tables. Avoid using frames.

    Use good html
    Good HTML syntax makes it easier for users to adjust the look of the screen (e.g., larger print, color contrast, etc.). When possible, use logical elements (for example <strong> instead of <b> for boldface). Only use logical elements for what they represent (for example, avoid using <cite> to indent a paragraph). Note: wordprocessing and page layout programs hat convert files to HTML generally don't use good HTML syntax.

    Layout tricks (Web Wonk Tips for Writers and Designers)

    Comments? Contact:
    Julie Wetherill
    Copyright 1998, Harvard University. All rights reserved. Revised March 1998TopPreviousNext