Web Site Design: Rules of Thumb

Style Consistency

You will probably want to create a rudimentary template of the essential elements of each page—headers, text, navigation bar, banner, etc. This could include:

A link to U.C. Berkeley's home page
Department banner: polisci.gif with link to www.polisci.edu
Navigation bar/menu: can be text, buttons, or image map, but whatever it is, it should be consistent throughout the site (note: front page can—and probably should—be different)
Content/Style: up to department. However, it's not a bad idea to use the spell-checker feature of your page editor (Dreamweaver has one) to check for typos.
Name of person responsible for site: preferably with e-mail address too
Date last modified:
optional, but recommended

Navigation

This is related to consistency. Every page should tell the viewer 1) where they are and 2) where they can go. You can't assume that users will always enter through the "front door"; sometimes they may stumble into the middle of your site as a result of a search or a link from someplace else.

If your site is small, you can list all of the pages in a menu. If the site is large, you may want to group the pages into a few main categories, each of which will have its own menu and a link back to the home page.

You can use graphics (buttons, image maps, etc.) instead of plain-vanilla HTML links if you like. Whichever you choose, you must make it very clear that these are clickable links. Many pages have graphics that look like buttons, but don't do anything when you click on them. Conversely, many links are not obviously clickable, because they blend in too much with the surrounding page.

Also, be sure that your link system visually matches the site. You don't want your buttons to be too large and overwhelming, and they should be easy to read. Also, make use of the ALT tag, so that if someone has an older or text-only browser, they will still be able to understand your site. If you use image maps, be sure to also provide a list of links in HTML somewhere on the page as an alternative.

Fonts and Readability

Fonts can make a big difference to the readability of your page. (Imagine reading a web page that is entirely in a script font!) This is a very detailed area, so rather than say too much about it myself, I am going to point you towards some type tutorials on the web:

Yale C/AIM Web Style Guide: Typography

typoGRAPHIC

Unfortunately, your choices are rather limited when it comes to type styles. Although we have a large collection of fonts here, most people do not. However, you have more control over the appearance of your page than it appears at first glance.

The secret is that you can specify families of fonts. Using the font tag, you list in descending order of preference the fonts you would like the page to display in:

<font face="Verdana,Arial,Helvetica,sans">Your text here</font>

This means, "Display this text in Verdana. If you don't have Verdana, use Arial. If you don't have Arial, use Helvetica. And if you don't have any of those, please use some sans-serif font."

In general, the fonts that are widely available on people's computers are Arial, Helvetica, New York, and Times. There is also a new set of fonts, especially designed for screen viewing, available for free from Microsoft and distributed with most versions of Windows.

Page Design

Short and Sweet (which this page isn't!)

Reading material on a computer screen is hard on the eyes, and evidence suggests that most people scan quickly instead. It's best to have short units of information in relatively narrow columns, rather than long, dense, wide pages. Make generous use of headings and subheadings to organize and divide your material.

When you first get the course materials from the professor you are working for, they may be quite long or all on one sheet. Read through them carefully. Keep in mind: what works in print does not necessarily work on the web. Can they be organized differently? Is any information missing? Would different categories work better? There are no hard and fast rules, but there are guidelines to help you make these decisions. Take a look at the book Information Architecture for the World Wide Web for more information on this topic.

Page Size

It's important to keep in mind that not all monitors are the same size. The most common monitors in use are 14- or 15-inch ones, and you'd be surprised at how many are still set to 640 pixels wide by 480 pixels tall.

This is particularly a problem when you have an image on your web page. Many of us have put together a page with a banner on top and the class information underneath which looks great here in the lab, and then tried looking at their page somewhere else, only to find that the image crowds out everything else.

To avoid this problem, you can put all the text in a 1-row, 1-column table set to a width of 620 pixels or less (the extra 20 pixels allow for the border of the window). When you design banners, try to keep them fairly short (100-200 pixels tall). If you want to use an image map, of course, that can be larger, but again, it's best to assume that people have small monitors.

Backgrounds

You may be tempted to use background images in your website. Tread carefully. Backgrounds are very hard to use well, and while they rarely enhance a web site, they can really damage it. An overly colorful or busy background can make a page hard to read or to print.

However, backgrounds can be useful if you want to enhance a navigational column on the side of the page. If you do use them, be sure to keep in mind that they tile, or repeat, accross the web page. If you don't want the background to repeat, you must save it at a size that is larger than the largest possible monitor (I recommend 1400-1500 pixels wide). For example, see Emedia's page at http://www.emediaweekly.com/. Notice the olive-green band on the left side of the monitor? If you view the green band directly in Netscape (http://www.emediaweekly.com/images/emediabg.130a.gif) you will see that although the image is quite wide, it's only one pixel tall. It is tiling from top to bottom, but thanks to its width, it won't tile left to right, and there's no annoying green band on the right side of the page.

(For an example of a site that doesn't do backgrounds well, check out C/net news.com.)

Graphics

It's a sure bet that at some point, at least one of the images you have created will need to be changed in some way. Whenever possible, copies of the original working files should be saved in their original formats (Photoshop, Illustrator, etc.) This is because when a file is saved as a GIF or JPEG, it is compressed, color information is discarded, and it cannot be easily modified.

If you used text in your graphics, be sure to record what fonts you used and in what point size. Make sure that it's a font that others who might need to maintain your page will be able to get hold of easily! Imagine having to add a button to your navigation bar and discovering that the type doesn't match.

Other Resources

Alertbox

Yale C/AIM Style Guide

Web Site "Look and Feel"


email kjfalk@sims.berkeley.edu