The Arts

  Human Resources

  English Preparation

Style Guide for Home Pages

The University of Scranton
Home Page Style Guide


The following material is intended to help faculty, staff, students, and university departments develop attractive, effective, and efficient home pages.

The General Style Guide Information provides general guidelines important to all web site developers. Advice concerning fonts, layout strategies, and net etiquette are included. A relevant excerpt of the University of Scranton Code of Responsible Computing is appended.

The General Graphics Guidelines provides specific suggestions concerning the use of graphics, such as file size and color recommendations in order to make the web page legible and easily loaded.

The University of Scranton Departmental Style Guide provides highly recommended guidelines for developing departmental home pages. Following these guidelines will provide an identifiable University of Scranton appearance to a department's web page. These guidelines are not intended for personal home pages where individuality should reign.

A link to a web and HTML glossary is included to aid in understanding some of the necessary jargon used in the guidelines.


General Style Guide Information
Resumé Rules Apply to Home Pages: Keep Them Simple And To The Point

Font Sizes and Font Styles
  1. Change font sizes for headers only, do not mix font sizes in text.

  2. Try not to use more than 3 font sizes in your document (main headers, secondary headers, and text).

  3. Avoid using <H1> for long titles. On some browsers, a 5 word title in <H1> can take up half a screen. The smallest header size recommended is <H5>.

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
  4. It's best not to use an image of letters (just to have a special color or font) when plain letters will do.

  5. Be sparing with italics <I> and emphasis <EM> since they can be difficult to read.

  6. Use blinking text rarely, if at all. It is a novelty for those who like it, but a source of distraction and irritation for those who don't.

Layout Styles
  1. When presenting a series of data, use a list instead of text. HTML lends itself to list-oriented layouts.

  2. Do not use an imagemap when a list will do. Imagemaps were originally designed so that you can click on parts of an image (like a map or floor plan) which contain information that can not easily be defined as a list of words. Lists are quicker to load, easier to read, and easier to understand.

  3. Use images with prejudice. They take a long time to load and can make your page look very busy. Thumbnails (reduced-size images linked to full-size images) are also not recommended for the same reasons.

    If you wish to show a lot of images, you can always link to them from your page so that visitors have the option to look at them or not-- this is especially important if your page contains information (like a phone number or e-mail address) that someone may wish access to quickly.

  4. If your home page relies heavily on images, turn off your image capabilities and review it to make sure that it makes sense without them.

  5. Go easy on the crazy background designs and loudly-colored lettering.

  6. Remember that some of your visitors will be using black & white monitors. If your title is embedded in an image, be sure to create enough contrast between the lettering and the background to allow it to be read.

  7. Feel free to use all of the gimmicks available to you to make your page look its best, but remember that not everyone is using your browser or type of machine. While designing your layout, keep in mind that centering, backgrounds, cell-padding in tables, and the display size of an image, are specific to certain browsers.

  8. While selecting font styles, images, and background patterns, always err toward the conservative.

Construction Etiquette: Remember, The Whole World Is Watching

  1. Whether you are designing a home page for the first time or making radical changes to an existing home page, always practice on a test home page first. This will allow you time to rearrange your layout, receive feedback from others, and double-check your links. When you are happy with the results, you can move it to the public domain.

  2. It is suggested that you put a signature which includes an e-mail address and date at the bottom of every page.

  3. According to the University of Scranton Code of Responsible Computing, you should not:
    • Knowingly run or install on any computer system or network, a program intended to damage or to place excessive load on a computer system or network.
    • Violate terms of applicable software licensing agreements or copyright laws.
    • Deliberately waste computing resources.
    • Harass others.
    • Mask the identity of an account or machine.
    • Post materials that violate existing laws or the University's codes of conduct.

  4. Content must also fall within the guidelines outlined in the document, Code of Responsible Computing.


General Graphics Guidelines

  1. Do not exceed 480 (or 6.67 inches, 480/72ppi=6.67) pixels wide by 324 (or 4.5 inches, 324/72=4.5) pixels for the finished size of images and graphics. (Based on the default size of Netscape browser window size on the 13-inch monitor.)

  2. Never exceed 40K in the sum of all the pictures appearing upon a single homepage. (This allows the graphics to download quickly. 40K-100K can take 30 seconds to one minute to load).

  3. Keep your palette simple by choosing only 8-16 bit color. Do not use more than 16 colors on each page (the standard for 8-bit imagery). You might want to design with the colors available to windows users or test the colors you pick on the windows.

  4. The colors used in Adobe Illustrator files should be selected from either the spot color or Pantone palettes.

  5. Don't use CMYK-generated blends. They tend to become blurry when converted to Gif. Make sure the 256-color pallettes used in your images always include any special custom colors you have selected, plus balck and white.

  6. Scan all color images as 254-bit, 72-dpi TIFF images.

  7. Duotones look good online and compress well.

  8. Alwyas indicate file sizes adjacent to downloadable files in their native format as long as possible before converting to bitmap in Photoshop.

  9. Keep in mind legibility of typefaces you are using on screen.

  10. Make it easy for viewer to navigate backward and forward from each page.

  11. Don't have more than 5 screens per page. The ideal is 2-3 screens per page.

  12. Every page should have:
    • copyright
    • pointer back to the home page
    • time stamp
    • e-mail address (this usually is included at the end of page)


June, 2002

Search / Site Map / Ask Scranton
My.Scranton / Campus Contacts

Disclaimer: The University of Scranton does not endorse views or opinions
found on pages directly or indirectly accessed from our Web site.

© 2010 The University of Scranton