Style Guide for Howard University Web Pages

See Also...

•	Web Resources, Policies & Guidelines
•	World Wide Web Policy

Last Revised: October 2000

Overview
Howard University Site Structure
Design Guidelines for all Howard University Web Pages

Overview

The purpose of this style guide is to provide professional consistency, unified identity, and aesthetic appeal to the Howard University Web site.

Back to the Top

Howard University Site Structure

Howard University Main Web site
The entry-point for all external, public audiences. http://www.howard.edu

Howard University School Web site on the main HU server
Example: Graduate School (http://www.howard.edu/school/gsas)

Howard University College Web site on the main HU server
Example: College of Arts and Sciences (http://www.howard.edu/college/cas)

Howard University Department Web site on the main HU server
Example: Department of Economics (http://www.howard.edu/dept/economics)

Howard University Office Web site on the main HU server
Example: Office of the President (http://www.howard.edu/office/president/)

Metasearch
Some engines look for of "Metatags" in the HTML of Web sites to search them. This allows Web site owners to specify what their Web site contains. The following two metatags are placed between the <head></head> tags in the HTML. These allow your Web site to be searched by Metatag searching engines.

Back to the Top

Design Guidelines for all Howard University Web Pages

Howard University Official Colors

Howard University uses specific colors for pages maintained by the Web Team. These colors most closely match the Pantone Matching System (PMS) colors used in print publications at the University. The colors are as follows:

General Page Setup

It is recommended that you use a white background and that you do not use a color or repeating image for your page background. This will help keep Howard University Web sites alike, and help the readability of the page.
Try not underline a word if it is not a link. While that may be the proper way to handle it in print, underlining is intended to identify a hyperlink on the Web.
If you wish to have a link open in a new window, use the target property and not javascript.
An example of the HTML for this looks like so: <a href="http://www.cnn.com/" target="_blank">CNN.com</a>
Wherever possible, left-align bodies of text more than a few lines. Center or right-aligning text causes readability problems.
It is recommended that you do not place a hit counter on your pages from outside sources. The page is then required to contact this outside source to retrieve the hitcounter image. Depending on the layout of the page, this may even cause the Web page not to display at all till the hitcounter image is loaded.
Fast animated gifs or blinking text are distracting. Use animated GIFs sparingly but you must avoid blinking text at all costs! It is very hard to read.
Unless absolutely necessary, never use all CAPS.

Checking Content and Spelling on a Page [Required]
You should always check your content for grammatical and spelling errors. Pages should be proofread regularly. If you are using a Web page editor (Eg. MS FrontPage) then use the spell check feature included in the program before you publish pages to the public.

Keep the content of your site current! A university Web system must provide current information for the users.

Hyperlinks, particularly to servers outside the Howard University, should be checked regularly to repair broken links and avoid "404" error messages.

Never Remove HTML pages
In the WWW many people can have links to any of your Web pages. If you move, rename or delete on of your files, it may cause someone's link to become invalid, and if that invalid link is detected, it might take a lot of searching by that person to find the new link (if one exists). To solve this, it is recommended that you place a notice that the page has moved, or has been deleted. The process to rename, remove or delete files may be complicated at first but it will save you the hassle of dealing with angry users who want to know what happened to the resource they were trying to access from an outside site or from a printed publication.

To move, or rename a Web page (eg. change Style.htm to StyleGuide.htm) do the following:

Copy the original file and rename or move it to its new name or location.
Replace the original file with a page that will inform the person the page has moved, and then forward them to the correct URL.
Use a text editor (eg. Notepad in Windows) to open the original file. Remove all the text in the file, then paste in what you copied from the Web Page Forwarding HTML Generator. Then save the file and test it out.

To remove a Web page you really are going to disable it. To disable a page do the following:

If you haven't already, create a "Page Removed" page that will inform users that the page has been removed and then give them options of where to go next. Here is an example.
You now need to replace the file you want disabled, with a page that will forward the user to the "Page Removed" page.
Use a text editor (eg. Notepad in Windows) to open the file to be disabled. Remove all the text in the file, then paste in what you copied from the Web Page Forwarding HTML Generator. Then save the file and test it out.

Tables
Use tables to align images and columns of text on the page. Tables, form fields, or text boxes nested within the table template may not extend beyond the fixed 600-pixel width of the table. A way to do this is to set these nested tables to 99% or 100%, rather than trying to calculate pixels.

Avoid setting cell height on any tables. If you are using a table cell to hold space between cells, use a single-pixel gif to hold the height of the cell. (Use http://www.howard.edu/images/space.gif, and set the image height to the desired height in the HTML. This is the only instance you should ever resize images in the HTML.

Left and top align text in all table cells. Right or bottom or center alignment is acceptable within a well-planned design if it adds to text and table readability or page function. Generally, center alignment is hard to read. Example of options:

Top and left-aligned	Top and center-aligned	Top and right-aligned
Bottom and left-aligned	Bottom and center aligned	Bottom and right-aligned

JavaScript
JavaScript may be used on Howard University Web pages.

Java
Java technology is not recommended for Howard University Web sites. If the Java application provides some sort of vital service, an alternative must be given.

Flash™
Pages created with Flash must have browser type and version detection, Flash version detection, and a no-Flash page option.

Absolute Links and Relative Links
A relative link is one with part(s) of the address not specified in the URL. For example, if the server is not specified in the URL, the Web browser uses the current page's server location. The unspecified part of the URL is written with "../" which is read as "go up a level within this Web site." If the file is ever moved to another server, there will be no hardcoded reference to the old server, and links will not break. Use relative links within your Web site.

An absolute link is one with all parts of the address specified. For example, the server is specified, and the names of all folders within the path are also specified. Use absolute links to link off of your site.

When you create a new site or redesign a site on a development server, be sure that you are using relative links within the site. If absolute links are hardcoded to the development server, these links and graphics will all break once the site is loaded onto the live server.

Americans with Disabilities Act Compatibility
Public Howard University Web pages should be designed in a way that ensures the content is accessible to the widest possible audience. Please refer to the Web Content Accessibility Guidelines published by the World Wide Web Consortium.

Using PDF, HTML, Microsoft Office Documents
Whenever possible, convert text information into HTML. Your pages are searchable this way. Documents that need to be printed in their exact format (application forms, for example) should be made into PDF. Original document files that require original programs to open them should not be used on the public site.

Page File Size
Keep your download time low. The Web page itself should be kept below 40K, otherwise the page needs to be divided in some way.

Setting Image Sizes
HTML pages that have image sizes coded into the page will load faster. It is highly recommended that all images on Howard University Web pages have images with set sizes. Set image size in the HTML, but do not use this feature to resize your images. Use it to set the existing size only. You must use a professional image editor such as Adobe Photoshop to resize your images, or hire an outside vendor to do it for you.

Back to the Top