Page Design
Essential Information
Any page on the Tufts University's Veterinary School's site may be accessed via the home
page, but many times pages are accessed via search engines, other web sites, or other
referring pages. Therefore each page needs to contain essential textual and
navigational information which allows it to act as an independent document.
Head of Page
The top banner of each page is used to bring continuity to the various pages of the web
site, as well as indicate the main topic of that particular web page. The banner, button
bar, and sidebar links should be within the top four inches of the page, the most crucial
in terms of quick, easy reference.
Body of Page
The body of each page contains pertinent information and appropriate links for that
document. Text should be concise, but kept to one or two screen lengths. Most
viewers will click away if it is much longer.
Bottom of Page
The footer of each page contains the basic links back to the origin of that page.
Additional information such as the author or contact person, as well as the department
information with which the author is affiliated, the date of last revision, and a
statement of copyright may be added according to the needs of individual groups.
Text and Graphics
Browsers display special non-standard text fonts in various ways. Use of the
following standards may optimize the intended effect regardless of the visitor's browser
type. All graphic images must interlaced gif89, gif, or jpeg format. Use
height and width tags to allow the user to see the basic page layout quickly. Also,
for those with text only viewing, use ALT tags to describe each graphic.
Font Face and Font Size
A minimum of two fonts is standard: Verdana (10) for the majority of the
body, Arial (12, 14, and 16) for section headings and sub-headings. In choosing font
size, remember to consider the maximum amount of information which can be displayed
clearly and effectively on the screen.
Color
Use color sparingly. Black is the most commonly used because it is legible on
all light backgrounds. Keep site graphic colors consistent. Standard hypertext
links are: hyperlink = blue(#336699), visited hyperlink = purple, active hyperlink =
orange(#ff9900). However, you may want to choose colors that complement your pages, just be
consistent.
Tables
Keep tables consistent in size and format. Relative pixel dimensions will ensure that your text and graphics are displayed the same on
any size screen. Borders, padding, and spacing should be used for ultimate visual
presentation. Adjust cell spacing if cells or columns seem too close. Follow
the same format from page to page with regard to horizontal and vertical alignments.
|
