RiceInfo World-Wide Web Style Guide

http://riceinfo.rice.edu/web/style.html

This document is intended to serve as a style guide for people who publish information on the World-Wide Web at Rice University. It has been formatted as a single document to make it easy to print out. This document consists of three sections:

Required: rules which must be followed by every WWW publisher at Rice
Encouraged: principles of good World-Wide Web style which are strongly encouraged
Optional: the "RiceInfo look", for web authors who wish their documents to mesh stylistically with the core of RiceInfo

This document is not intended to teach the basics of publishing on the World-Wide Web, such as HTML (Hypertext Markup Language) or how to create your own pages on WWW servers at Rice. For introductory material on those topics, see Selected WWW Documentation (http://riceinfo.rice.edu/about/index.html#WWW).

If you have questions about this document or the World-Wide Web, please contact riceinfo@rice.edu.

1. Required

Rice policy and the law: Every World-Wide Web publisher at Rice University must obey the Rice University "Appropriate Use of Computing Facilities" Policy (832-99) (http://www.ruf.rice.edu/~presiden/Policies/General/832-99.html) as well as all applicable state and federal laws.
Copyright: Of particular concern is copyright law. Contrary to what you may see other people do on the World-Wide Web, it is generally not legal to publish the work of others online without their permission. For more information, see Copyright issues for WWW publishers at Rice (http://www.rice.edu/about/copyright.html).
Proprietary information: In addition, every web publisher at Rice must take care not to permit site-licensed information to "leak" off the Rice campus. An important example is the information in proprietary databases licensed by Fondren Library and the passwords used to access them. If you must post site-licensed information or passwords in your web pages, be sure you understand how to restrict access from off-campus. Consult the document An Introduction to WWW Access Control (http://riceinfo.rice.edu/web/access-control.html) for more information.

2. Encouraged

Good web style is a complex subject, incorporating general principles of good writing style and good visual design as well as technical matters specific to the World-Wide Web. Here are a few of the most important (and most often overlooked) recommendations.

Sign and date your pages.
Users need to know whether a web page is up to date and where to send corrections and questions. Be sure to include other pertinent e-mail addresses as well: a departmental web page should include not only the maintainer's e-mail address, but also contact information for key staff in the department.
Be sensitive to users of different web browsers.
Make sure that you don't unintentionally cut off your audience by using new HTML features or other formats which can't be handled by all browser software. The degree to which you need to stick to lowest-common-denominator HTML may be determined by your audience: if you only intend to reach users at Rice you may choose to use new features associated with a particular browser, but if you intend to reach a worldwide audience it may be best to conform to a more widely accepted standard.
Standards and software on the web are constantly changing, so specific recommendations may quickly go out of date. Here are a few:
- As of this writing, most users at Rice can view Netscape extensions to HTML, but many off-campus users (especially subscribers to online services such as America Online or CompuServe) cannot.
- Of particular concern are Netscape or HTML 3 tables, which many browsers don't support at all.
- Most graphical browsers support inline JPEG images, but a few older browsers only support inline GIFs.
- If you wish to reach the widest possible worldwide audience, it is best to stick to standard HTML 2.0.
- If you prefer to balance portability with the most widely used features of more recent HTML extensions, a good compromise is the proposed HTML 3.2 standard (informally known as "Wilbur").
Examine your web pages on a variety of platforms.
A page which looks great using the computer on your desk may look terrible in another environment. If you wish to reach a wide audience, be sure that your pages can be viewed under a variety of circumstances: on small screens, on black and white screens, on older or poorly-tuned monitors, and with text-only clients such as lynx.
Check your HTML with an HTML validator.
Use of an HTML validator can catch mistakes in your HTML which you may miss with the naked eye or which your particular browser may hide from you. A validator can also ensure that you conform to a particular version of HTML, such as standard HTML 2.0 or the common extensions in HTML 3.2. Some online HTML validators are listed in the Selected WWW Documentation (http://riceinfo.rice.edu/about/index.html#webval) document.
Be careful about your image size and color requirements.
Make sure that you use large images only if they are worth the wait: downloading each 10K may take 3 seconds or more for a 28.8 kbps dialup user and 10 seconds or more for a 9600 baud dialup user. You can limit the size of your images by reducing the number of colors and the image resolution. As of this writing a good rule of thumb is to use a resolution of 72 dpi and Indexed Color mode, which permits a maximum palette of 256 colors (although it would be best to use fewer).
Don't use distracting or illegible backgrounds.
Almost any background image will make your text illegible on some monitors. Solid colors with highly contrasting text are safer, and the standard grey is safest of all. Aside from degrading the legibility of your text, a very busy background may make the user weary of reading your page.
Include context in the <title>.
Users may come to a page from anywhere, especially those who use a search engine. Don't use a title like "Courses Offered" when you can provide context with a title like "Courses Offered (Dept. of Such-and-Such, Rice University)".
Provide links among related pages.
If you maintain several pages as a group, each subsidiary page should include a link back to the main page. For example:
```
   <a href="http://foo.rice.edu">
   <img alt="&lt;-" border=0 src="http://riceinfo.rice.edu/images/back.gif">
   Back to the Foo pages</a>
```
Don't say "click here".
Highlight the titles of documents you link to or other key words in your text instead.
Provide text alternatives for images.
For the benefit of users of non-graphical browsers like lynx, as well as for users of graphical browsers who have image loading turned off, always use the alt option of the <img> tag to specify text which can be used in place of the image. If no textual equivalent is available, use an empty pair of quotes. Examples:
```
   <img alt="Help" src="http://foo.rice.edu/help_button.gif">
   <img alt="" src="http://foo.rice.edu/pretty_picture.gif">
```
Use a spell checker.
Running straight HTML through an ordinary spell-checker is not advisable, but you can preview your page with a web browser and then cut and paste your formatted text into a word processor to check the spelling there. For Unix users, the following command-line method will work as well:
```
   lynx -dump http://foo.rice.edu/mypage.html | spell
```
Don't abandon your web pages.
People turn to the World-Wide Web for current information. Don't think of producing a web page as a one-time task but as an ongoing project.
When in doubt, keep it simple.
Part of the interest in the World-Wide Web is certainly its "gee whiz" appeal, but last year's exciting gimmick may be next year's yawner. If your purpose in putting information on the web is to communicate factual information, you may wish to choose a straightforward, sober style rather than the latest fad.

3. Optional: the "RiceInfo Look"

The "RiceInfo look" has been developed collaboratively by the staff of Information Systems and University Development, with oversight by a committee drawn from throughout the university. It is intended to present a dignified and attractive image for Rice University as would be expected for any official University publication, whether on paper or online.

To conform to the "RiceInfo look", web authors should follow the encouraged guidelines above. In particular, they must be aware of their intended audience and choose HTML features accordingly: for a broad world-wide audience, they should be conservative in their use of browser-specific HTML features such as tables; for a primarily on-campus audience, features requiring a more modern browser (e.g. Netscape) are acceptable.

The "RiceInfo look" is required for the top two levels of RiceInfo (i.e., the main pages linked to from http://riceinfo.rice.edu) and is encouraged for other official documents such as departmental web pages. It is not encouraged for unofficial pages such as personal home pages; if you don't speak for Rice or one of its departments, please don't use this style (although you are welcome to use the "navigation bar" imagemap).

Elements of the "RiceInfo look"

A white background. Although background colors are a Netscape extension to HTML, they do not appear to cause problems for older browsers.
```
   <body bgcolor="#ffffff">
```

A Rice University header image.

   <img alt="" src="http://riceinfo.rice.edu/images/ri_header.gif" align=middle>

A "navigation bar" imagemap referring back to the top RiceInfo page and to key navigational aids.
```
   <a href="http://riceinfo.rice.edu/cgi-bin/imagemap/images/navbar.map">
   <img src="http://riceinfo.rice.edu/images/navbar.gif" border=0 ismap
    alt="[Back to RiceInfo]"></a>
```
(The alt="[Back to RiceInfo]" label helps users of some non-imagemap-capable browsers such as lynx; even though a lynx user can't see the imagemap as a whole, he or she can select the "Back to RiceInfo" item to go to the imagemap's default URL, which is the top RiceInfo page.)
On a very long page, you may wish to repeat the navigation bar at the bottom of the page.
A title in <h1> format.
```
   <h1>Your Title Goes Here<h1>
```

Date, attribution and contact information at the bottom of the page.

   <hr>
   <address>
   -- For more information about the Department of Foo contact
   <a href="mailto:foo@rice.edu">foo@rice.edu</a>.
   <br>
   This page maintained by <a href="http://foo.rice.edu/~jdoe>Jane Doe</a>
   (<a href="mailto:jdoe@rice.edu">jdoe@rice.edu</a>).
   <br>
   Updated: 1999.12.31
   </address>

A Rice University copyright notice. This may include a link to the generic RiceInfo copyright notice (http://riceinfo.rice.edu/about/cr-notice.html), although care should be taken that the license granted by the generic copyright notice applies in your case.
```
   <font size=1>
   <a href="http://riceinfo.rice.edu/about/cr-notice.html">
   Copyright 1999 Rice University</a>
   </font>
```

Combining the elements on the page

Here is the HTML for a sample page combining the elements above. You can use the cut-and-paste feature of your windowing system to copy this HTML into a text editor.

(Note that Netscape is sensitive to newlines and spaces among these elements. In order for the banner and navigation images to line up properly, you may need to format your HTML exactly as shown here.)

<html>
<head>
<title>
Your Title Goes Here (Rice University Department of Foo)
</title>
</head>
<body bgcolor="#ffffff"> 
<center>
<img alt="" src="http://riceinfo.rice.edu/images/ri_header.gif"><br>
<a href="http://riceinfo.rice.edu/cgi-bin/imagemap/images/navbar.map"><img src="http://riceinfo.rice.edu/images/navbar.gif" border=0 ismap alt="[Back to RiceInfo]"></a></center>
<center>
<h1>
Your Title Goes Here
</h1>
</center>
<p>
The content of your page goes here.
<p>
<hr>
<a href="http://foo.rice.edu">
<img alt="&lt;-" border=0 src="http://riceinfo.rice.edu/images/back.gif">
Back to the Dept. of Foo</a><p>
<address>
-- For more information about the Department of Foo contact
<a href="mailto:foo@rice.edu">foo@rice.edu</a>.
<br>
This page maintained by <a href="http://foo.rice.edu/~jdoe">Jane Doe</a>
(<a href="mailto:jdoe@rice.edu">jdoe@rice.edu</a>).
<br>
Updated: 1999.12.31
</address>
<p>
<font size=1>
<a href="http://riceinfo.rice.edu/about/cr-notice.html">
Copyright 1999 Rice University</a>
</font>
</body>
</html>

Here is how the page would appear:

Your Title Goes Here

The content of your page goes here.

Back to the Dept. of Foo

-- For more information about the Department of Foo contact foo@rice.edu.
This page maintained by Jane Doe (jdoe@rice.edu).
Updated: 1999.12.31

-- Prentiss Riddle and the RiceInfo support team (riceinfo@rice.edu). 1999.02.23