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
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
A link to a web and HTML glossary is included to aid in
understanding some of the necessary jargon used in the guidelines.
Resumé Rules Apply to Home Pages: Keep Them Simple And To The Point
- Font Sizes and Font Styles
Change font sizes for headers only, do not mix font
sizes in text.
Try not to use more than 3 font sizes in your document
(main headers, secondary headers, and text).
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>.
It's best not to use an image of letters
(just to have a special color or font) when plain letters will do.
Be sparing with italics
<I> and emphasis <EM> since they can be difficult to read.
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
When presenting a series of
data, use a list instead of text. HTML lends itself to list-oriented layouts.
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.
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.
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.
Go easy on the crazy
background designs and loudly-colored lettering.
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.
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.
While selecting font styles,
images, and background patterns, always err toward the conservative.
Remember, The Whole World Is Watching
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
It is suggested that you put a
signature which includes an e-mail address and date at the bottom of every
- According to the University of Scranton
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.
Content must also fall within
the guidelines outlined in the document,
of Responsible Computing.
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.)
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).
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.
The colors used in Adobe
Illustrator files should be selected from either the spot color or Pantone
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.
Scan all color images as
254-bit, 72-dpi TIFF images.
Duotones look good online and
Alwyas indicate file sizes
adjacent to downloadable files in their native format as long as possible
before converting to bitmap in Photoshop.
Keep in mind legibility of
typefaces you are using on screen.
Make it easy for viewer to
navigate backward and forward from each page.
Don't have more than 5 screens
per page. The ideal is 2-3 screens per page.
- Every page should have:
- pointer back to the home page
- time stamp
- e-mail address (this usually is included at the end