Resources

Local Style Standards

It is important that our departmental web pages present a consistent, professional appearance using techniques suitable for all modern browsers. Local standards, in conjunction with common sense and generally accepted good practice, help us achieve this.

This page documents the style rules for the department's fourth-generation website, first installed in July of 2006. The design (including organization, layout, graphics, and styling) was created by Godat Design.

Scope

These rules apply to public pages that represent the "official" face of the department on the web. Specifically, they apply to pages in the following web directories: colloquia, computing, courses, general, graduate, intranet, news, personnel, policies, research, resources, undergrad. Content editors decide what appears on a web page but are responsible for adhering to these standards.

These rules can also be used as guidelines by individual publishers who wish a compatible appearance for their own unofficial pages. A standard template is available, with instructions, for creating compatible pages.

Additional considerations apply to Events & News items and the front-page feature columns.

Layout and Organization

A uniform page layout is used throughout the official web. A standard header contains links to the major sections of the site. The header also contains logos and links for the department, college, and university, and a large image that varies by section.

Each section has a landing page that is reached by selecting the section's link in the page header. The landing page provides an introduction to each section and contains a menu of pages in the section. The landing page also has a secondary image that is not repeated on the other pages of the section.

Most pages, including the one you are now reading, are interior pages. These pages use a single column for simplicity; and for readability, the column is relatively narrow. Interior pages share the header image and menu of their containing section.

The header images, as well as the secondary images on the landing pages, appear for graphic effect; they have no deeper significance and are assigned somewhat arbitrarily. All of them, though, are derived from current or past projects in the department.

Style Issues

There are many on-line and printed publications that discuss good web style. Editors are expected to follow accepted practice; this section can only highlight a few significant issues.

The most important concept is: trust the style sheets and don't get fancy. All of our pages should look alike; that's the idea of a standard style. While this may get boring to those of us who see the pages every day, it makes easier reading for our viewers.

Most interior pages, including this one, consist entirely of paragraphs and headers. Italics and boldface can be used within paragraphs, sparingly, for emphasis; do not use them for a header effect. Do not specify fonts or colors or type sizes.

Use headers properly. Each page should begin with a single H1 header with text identical to the entry, if there is one, on the right-side navigation menu. Sections within a page are introduced by H2 headers. Subsections, if needed, use H3 headers. Finer subdivisions than that should almost never be needed. Don't apply centering or other styling to headers.

Give each page a proper title suitable for bookmarking. The title should be similar to the H1 header although it may need additional context because it must stand alone, unaccompanied by a section name. For some philosophy, see this W3C style tip.

Don't use clip art, flashing or scrolling text, animation, or other special effects. Have fun with these on your personal pages, but not on the official pages.

Lists, tables, and block quotations are fine, although most pages don't need them.

Use standard American English, with good grammar and proper punctuation.

Usability Issues

Do not change file names unnecessarily. Changing a URL invalidates old bookmarks and the output of search engines such as Google. It is better to completely replace a page. If you must delete a page that has been around for any length of time, provide automatic redirection to the closest current replacement to mitigate bookmark and search engine problems.

Do not link to Microsoft .doc files; Microsoft Word is expensive, and not everybody owns a copy. If something cannot be published as a web page, produce a PDF file and link to that. Append "(PDF)" to the link so that viewers are not taken by surprise if they follow it.

Implementation Mechanics

File Names

Maintain consistency in file naming and directory organization. Follow existing precedents when adding a new member to a family of pages or directories.

Do not use spaces within file names; they make it difficult for the webmasters to use Unix tools. Embedded hyphens or underscores are acceptable. Short, concise names are best.

Page Validity

Every page should be legal HTML and capable of passing a mechanical validator such as those provided by W3C or WDG. Except for archival pages (such as last year's colloquia announcements), links should be kept current.

Page Structure

Files for official web pages do not contain code for the page header, but instead use server-side includes to incorporate a master copy. This means that the page files are not legal and complete HTML by themselves, but only in the larger context.

Editing Software

Macromedia Contribute is recommended but not mandated for editing web pages. This application preserves the server-side-include structure; usually produces valid HTML; and prevents many style violations. It is capable enough for almost all our needs.

To create a new page using Contribute, connect to the website and navigate to an interior page in the same section. Select New Page and start from a copy of the existing page.

Exceptional Situations

The Web Czar is authorized to grant exceptions to these rules.

Minor deviations may be allowed when they improve the presentation and are not at odds with the overall design. In particular, a variant page format is available when warranted for an interior page that requires a wide table or image.

Major deviations may be required for web areas created by specialized software that is not easily configured for the standard style. Examples would be photograph galleries and database interfaces such as the "knowledgebase" or meeting room schedules.