Web Workshop: Web Design Guidelines

Web Design Guidelines

Design guidelines are not meant to be policy, but merely design guidelines
Content Architecture Navigation Maintenance Style

Content - what must be included

Give your page a title. This will be viewed in the browser window at the top as well as showing up on some search engines. The title should be as short as possible but fully informative and specific ("CCSF Calendar of Events, 2000" is preferable to "Events"). The title should also use a Heading tag to help facilitate indexing by search engines.

All sites should have a link back to the CCSF home page.

Let your reader know when the document was last modified: This page last modified on 05/8/02

Allow your visitors to contact you. This contact is used often for users to inform you of a problem on your site as well as request information. Make sure that the address is not only given, but is linked to make it easier for your users to contact you.
     Example: For more information contact the Webmaster@ccsf.edu
     Here is the code for the above link:
     <a href="mailto:Webmaster@ccsf.edu">Webmaster@ccsf.edu</a>

Provide alternate contact information such as name, address or phone.
     Example: For further information contact City College of San Francisco , 415-239-3000

Don't put information out unless it is ready: Avoid Under Construction! Everything on the web is always under construction to some extent. If pages aren't ready, don't link them. If you want viewers to see the pages you plan to add, you can always list the text for links in progress without making them active.

Any listing of outside links should include the following disclaimer:

     "This site contains links to other Internet sites. These links are not endorsements of any products or services in such sites, and no information in such site has been endorsed or approved by this site."

Develop meta tags with keywords and descriptions within the homepage to allow search engines to better register the site.

Student Data is confidential and should not be put out on the web.

Don't link to another site just because it exists. Make sure it provides content that your users will find beneficial.

NOTE: Remember, if your content is good people will come back. The highest compliment you will get as a web designer is to have your page added to a person's bookmarks or favorites.

Architecture - how it fits together

Keep a scheme in mind (alphabetical, chronological, numerical, categorical)

Plan for the future: Develop directory structures with future plans in mind. People who bookmark your site will not be happy if you are continually moving your files around.

Navigation - how things have to work

Place most meaningful content first.

Make sure each page has relevancy.

Keep pages short to minimize excessive scrolling. If pages are long provide a "table of contents" links and "return to top" links.

Name your pages in a form that is as short as possible without becoming cryptic. Consistent use of lower case letters will allow for easier browsing and searching. Use of uppercase is acceptable when it allows the file to be more easily recognized such as "StudentInfo.htm".

On Pages of more than two screens, include navigation at both the top and the bottom of the page.

Link names should reflect the target page not "click here" or "let's go". Write about your subject as if there were no links in the text. Example... "The Online Testing Information Page is maintained by the Distance Learning Department" is preferred over "To get to the Online Testing Information Page click here".

Try to avoid using "Previous" and "Next" as it implies that the users started at one point and is going to a set destination. It is more desirable to use something such as "On to Chapter 5 - The early years" or "Back to the Index Page"

You should be able to scan the links and learn about their destination without too much reference to the surrounding text.

Highlight the text that is different in a group of links. Example...

Applications for Enrollment Applications for Scholarships Applications for Transcripts Applications for Financial Aid is better than	Applications for Enrollment Applications for Scholarships Applications for transcript Applications for Financial Aid
or better yet eliminate the redundant prefix text!

For complex sites, include a site map.

Make sure there is a link back to the homepage on every page.

Remember that search engine "spiders" or "robots" visit sites and catalog each and every page. This means that a user might get to one of your pages through a search and not through the main index. Make sure navigation is clear.

Make sure that all Links are "Relative URL's" when possible. If your file is in the same directory as the current file you do not need to include the entire path. For example if you are working on the index page and are creating a link to the information page and both files are in the TEST directory on the "www.ccsf.edu" server. You should use <a href=information.htm> not
<a href=http://www.ccsf.edu/test/information.htm>.

Try to avoid changing the color of links on a page. It can lead to undesirable results and create difficulty with some users.

On long multi-page documents make sure to provide feedback as to where the reader is within the flow of the document.

Pages using frames should be very careful not to nest frames within frames. Keep all pages within one browser window to avoid confusion.

Style - how we want it to look

Screen Layout
Keep your main design within 640 x 480 pixels. Many people are still using a screen resolution that shows only this area.

Keep things consistent.

Develop an identity for the site.

Strive for simplicity, don't over-design.

Engage the user. Most people will give you about 20-30 seconds then move on.

Don't assume that other people will have the same equipment and browser preferences that you do. Many people use large fonts, turn off graphics, have old computers and browsers, and override color and font settings in their browsers. Make sure you are accessible to as many people as possible.

Preview your finished content on another system different from your own to see how it translates.

Be aware that just because your word processor is able to convert your document into HTML format, that doesn't mean that it is necessarily a good web page. Make sure you look at the web page from a "web design view" not from a "successful conversion" view.

Text
Usability testing shows that people don't like to read web pages. And will most often just skim over material looking for what they need. Keep text blocks small and easy to read. Short well written material with good navigation will attract the biggest audience.

Avoid things that blink or move unless they have a very good reason for being there.

Use a font optimized for the web such as Arial, Verdana, or Georgia.
Avoid exotic fonts:Remember if the user does not have the font installed on their machine it will not show up on the web page.

Placing text in a table with the width set to 95% will keep the page formatted in different size monitors as well as avoid "bleeding" to the edges of the monitor.

Make sure to spell-check your work. If possible have someone unfamiliar with the site read the material for content, grammar, and spelling.

Don't use the <BLINK> tag. Most people find it very annoying

Color
Limit colors to two or three complimentary colors.

Use high contrast between text and background. For example, the best contrast is black text on a white background. Some other good choices are dark blue, dark green, or black text on a tan/beige, light blue, or light gray background. ... Also, remember that while white or yellow text on a dark background does provide good contrast, it is hard to print.

Good Contrast Examples:

Black Text Dark Blue Text Dark Green Text	Black Text Dark Blue Text Dark Green Text
Black Text Dark Blue Text Dark Green Text	Black Text Dark Blue Text Dark Green Text

Bad Contrast Examples

Black Text Dark Blue Text Dark Green Text	Black Text Dark Blue Text Dark Green Text
Black Text Dark Blue Text Dark Green Text	Black Text Dark Blue Text Dark Green Text

Avoid busy backgrounds.Background images which confuse the eye and make text difficult to see will discourage viewers from reading your content.

Which one is easier to read?	Which one is easier to read?
Which one is easier to read?	Which one is easier to read?

Icons
Be consistent in your style and functionality

Terms
Use language that is appropriate for your audience.

Keep everything clear and concise. Don't overdo your text.

Avoid acronyms, jargon, and slang that might not be understood by international visitors.

Graphics
Don't use gratuitous graphics. Use images that pertain to your subject and your message. Make sure it's essential to the presentation of your material.

Use Animations sparingly and only if they can be justified. Don't put a flashing image on the screen just because you have one. Make sure it has a reason to be included. When overused animations distract from the message of your page.

All photos and graphics should be in GIF or JPEG format. These formats have been developed for use on the web and provide the best results with minimum file size. As a general rule use the JPEG format for photos or images with a lot of colors and the GIF format for simple images with fewer colors.

Avoid using images to replace words. The more images you have the slower your page will load.

Don't use large images unless necessary. Resize graphics or provide thumbnail graphics that lead to the larger image.

Limit total graphic size of page to 30-50K or less to minimize loading time

Make sure that all images have HEIGHT and WIDTH attributes in the image tag. (This is done automatically by most HTML editors) This allows the image to load faster.

All icons and images must have an alternate text attribute in the image tag to make them accessible to text-only & special needs users. The alternate attribute should summarize the content or purpose of the image.

Use the same graphic elements on different pages so that they will not have to be loaded over again for the next page.

Warn your audience if you are going to a graphic intensive page. That will allow them to decide if it's worth the wait for them.

Be careful to avoid images with a lot of color gradients. As a rule they will have larger file sizes.

Quality
Verify your HTML code and make sure it works.

Write for all browsers, not just your favorite one. Pages should be compatable with Netscape 3, Internet Explorer 3 and up.

Maintenance - what will change in the future

There is nothing more annoying than broken links, dates for events that are long past due, and dated information. Pages must be kept up to date. Take advantage of our our search engine to notify you when you need to update your pages by using its Email Notification Service

For more information visit the following sites:

Yale C/AIM Web Style Guide

Web Design Degree