October 3rd, 2001

Departmental Web Page Standards

 

Introduction  | Goals  | Responsibilities  | Requirements  | Home Page Standards  | General Page Standards  | Resources

Introduction

University policy requires that official web documents published by any sub-unit of the University follow certain standards which are intended to promote web site usefulness, accessibility, and good practice. An `official web document' is defined as one that "That purports to speak for the university and its official units, programs and departments." Such web materials include those typically housed in the www.uwm.edu/Dept/ directory tree or in similar areas.

Unofficial web materials, including personal web pages, pages in the /Org/ or /StudentOrg/ areas, and course materials, are not required to follow these standards. However many of the General Page Standards discussed later in this document represent sound practices that are equally applicable to many types of web materials.

Goals

These standards are established in an attempt to achieve specific goals:

• To provide complete, correct, and current information to our web visitors.
• As a public institution, we are obligated to make our information equally accessible to all persons, including those with disabilities, either physical or technical. Campus web page authors should therefore avoid design choices that create difficulties for persons with physical disabilities, including those who use assistive technologies (such as screen readers used by persons with visual impairments), or who may not have the latest computer technology or high speed Internet access.
• All official UWM web material should be identifiable as being a publication provided by the University. The distinction between official and unofficial content should always be clear.
• The quality of our web publications reflect on the image of the University. Web content should have a professional appearance, provide user friendly tools to aid the viewer in making use of the site, and avoid those features that are known to distract and annoy visitors.

Creative design is encouraged, but only when it can be accomplished without sacrificing of any of the above goals.

Responsibilities

The responsibility for maintaining UWM's web presence is distributed and highly decentralized.

Ultimate responsibility for the campus web presence rest with the Provost who appoints a campus Webmaster to oversee the operation of the web site under the direction of the Assistant Vice Chancellor for Academic Programs & Technology. Support of the hardware and software for the main campus web server is assigned to Information and Media Technologies. Editorship of the `campus level' web content rests with University Communications and Media Relations within University Relations.

All departments and similar units are required to have a presence on the campus central web server which is in compliance with these standards. Individual division heads are ultimately responsible to see that their respective unit's web content is current, correct, functional, and standards-compliant. They are also responsible to insure that adequate staff and financial resources are allocated to web activities to create and maintain a professional web presence for their unit. Divisions may centralize web support at the divisional level or delegate responsibility to departments and other sub-units.

Web page authors are responsible for insuring that the pages they create fully comply with the standards described in this document, follow any divisional or departmental standards, and observe copyright regulations, all local, state, and federal laws, and University policies.

Requirements

Design requirements for official web pages can be thought of as two-tiered:

• Specific content requirements for high visibility `home' pages. The following Home Page Standards must be followed for the types of high visibility pages enumerated below. (These Home Page Standards are optional for other official web content.)
• A set of general design principles that apply to all official pages. The General Page Standards discussed later in this document apply to all official web content.

Home Page Standards

For the purposes of this standard, a home page is considered to be:

• The top level entry page of any division, department, center, institute, laboratory, or other sub-unit of the University.
• The top level page of any other web content that has an independent identity. E.g., any program, certificate, grant, project, activity, publication, etc.
• Any page that, by its nature, is likely to be book-marked or linked to from outside of the University. E.g., information intended for the general public, information likely to be book-marked by prospective students, pages likely to be linked to from other universities or professional societies, etc.
• Any content to which the department wishes to have links created to from campus-level pages.

All such home pages must follow these guidelines:

1. They must reside on the central campus (Alpha) web server.
2. The home page of an entity should be the `main' page in the directory housing the related material, in a file named "index.html". Links created to these pages should be to the directory name (including the trailing `/'), not to the file name.
3. UWM's Brand Identity Program Graphics Standards Manual considers these home pages to be the electronic equivalent of a publication's cover and must follow similar design parameters. This requires that either the UWM "Preferred Signature" or the UWM "Vertical Signature" (UWM logo and University name) be at the top of the page and that it take prominence over the identification of the page's unit, group, or activity.

   Preferred Signature Graphic	Vertical Signature Graphic

   
   
   

   The Signature Graphic should be sized so that the text height of the `UWM' portion of the Signature is no smaller than the height of the unit's name or other identifying text. If any other logo appears on the page, it must be no larger than 75% the width of the Signature Graphic.

   University Communications and Media Relations maintains examples of suggested HTML for including the shared copies of the various UWM Signature graphics in a web page.

4. A home page must include, near the top of the page, the proper name of the unit or activity the page relates to. If this name is presented in the form of a graphic image, the text must also be coded in the image's ALT field.
5. Each home page must include complete how-to-contact-us information, including all the appropriate of: Mailing address, physical address (building & room), phone, fax, and email address. This may either be on the home page itself or by means of a prominent `Contact us' link to a separate page. (Note that this is in addition to the page maintainer's email address, described below, which should be on each page and might or might not be the same as the unit's `Contact us' email address.)
6. Each home page should provide links to the UWM home page and to the home pages of any other higher level units, such as division and department pages.
7. UWM departments, centers, and higher level units may request a short-cut URL of the form www.department.uwm.edu as an alias for their unit's main home page. However, UWM entities are not permitted to advertise non-.edu URLs, such as .com, .org, or .net address, as paths to official UWM web materials.
8. Follow the General Page Standards discussed in the following section.

General Page Standards

The following standards apply to all official UWM web pages:

1. Content other than official UWM pages should not be housed in departmental web page areas:
   • Content speaking for any other organization, including professional organizations, may only be housed on the UWM server by specific prior agreement and is only allowed in the www.uwm.edu/Org/ area. A decision to grant an outside organization space on the UWM web server will be made based on UWM's contractual and/or professional obligation to the organization.
   • Content speaking for a student organization should be housed in the www.uwm.edu/StudentOrg/ area. Any SOAR-recognized student organization may request space there.
2. Once a set of web pages has been published, maintainers should avoid reorganizing the material in ways the change the file names of any part of the material. There is no way to judge how widely existing URLs have been book-marked or linked to from other locations. Arbitrary name changes will cause content to `disappear'. If a name change is unavoidable, always `cover' any prior file names with working pages directing the viewer to the new location.
3. Certain `canon' documents are maintained as a single official copy on the web server. Departments are not allowed to replicate or restate information available in canon documents (e.g., course offerings and admission, major, and degree requirements) but should rather create links into the relevant portion of the official document. Canon documents include the Undergraduate Catalog, Graduate Bulletin, Schedule of Classes, all official UWM and UW system policies, and official institutional data and reports.
4. Sponsorship and Advertising: Generally, University web pages (including course materials) may not include any paid external advertising. However, there are cases where a unit may acknowledge support from an external entity. There is specific University policy that governs what may and may not be included in such an acknowledgment. Units wishing to make such acknowledgments within their web materials must follow the relevant guidelines in UWM's Policies and Guidelines Concerning the Electronic Publication of Information
5. HTML Standards: Pages may be created using either the HTML 3.2 or the HTML 4.0 standard. However not all browsers support all 4.0 features. Therefore, pages should avoid dependence on HTML features beyond the scope of the HTML 3.2 standard. I.e., web pages that do use features beyond the scope of HTML 3.2, such as JavaScript or Cascading Style Sheets, should be designed to also display and function properly, without loss of content or navigation, on vanilla 3.2 browsers.
6. All pages should include the complete set of high-level HTML elements (e.g., <DOCTYPE>, <HTML>, <HEAD>, and <BODY>). The HTML tag should include the `language' attribute, which provides useful clues to browsers for hyphenation, rendering special characters, speech synthesis, etc. For an English language document, this would be <HTML LANG="en">.
7. Each document's <HEAD> element should contain a meaningful and concise <TITLE>. This is the name the page will be indexed under when book-marked by a viewer and is what appears in the browser's `Go' list. For home pages, this should be a short form of the name of the unit or activity owning the page. Starting home page titles with `UWM ...' will be helpful for off-campus persons who might book-mark the page.
8. Do not use FRAMEs. They create unnecessary problems for some browsers, they interfere with book-marking of pages, and they limit the ability to cross-link material. (To enforce a common look-and-feel across a set of pages, consider INCLUDEs.)
9. Every web page should contain a date of last update in the footer. This should be coded as actual document text (not computed via JavaScript or other means). The month may be either spelled out or abbreviated, but not expressed as an integer.
10. Every web page should provide a means to contact the page maintainer, such as via a MAILTO link in the footer.
11. Avoid design elements that are known to irritate the viewer and that detract from the professional appearance of the site. E.g., gratuitous animation, unsolicited audio, blinking or flickering images, flashing text, scrolling `message bars'. Avoid do-nothing `splash' pages that do not add meaningful content.
12. Avoid internal acronyms and abbreviations. Use full departmental, building, and other names. Include area codes in all telephone numbers.
13. Linking:
    • Consider what related material the reader is likely to wish to visit next, and provide direct links to such content.
    • Provide in-line links to other web content mentioned in your text.
    • When providing links from UWM official pages to any off-site or unofficial on-site content, be sure your surrounding text makes it clear that the viewer will be leaving UWM's official publication.
    • Provide warnings text, indicating size and type of file, when linking to video, audio, or other specialized content.
    • Provide warnings on links that will lead the viewer to restricted pages where they will need to know a password to continue.
    • Use meaningful, descriptive linking text on all links. I.e., avoid the use of "click here".
    • When linking to a top level `index.html' page, create the link to directory name (including the trailing `/'), not to `index.html'.
14. Tables: When displaying tabular data, use the proper <TH> and <TD> elements to distinguish heading and data items. In more complex tables, include appropriate additional HTML (e.g. <THEAD>, <TBODY>, <THEAD>, <COLGROUP>, etc.) to ensure the relationships in the table are properly conveyed.
15. Using color:
    • Use foreground/background color combinations that have contrasting brightness (not just contrasting colors).
    • Avoid `wallpaper' backgrounds in text display areas. A background's obtrusiveness varies widely depending on the viewer's equipment and also creates problems for persons with certain vision problems such as color blindness.
    • Do not rely on the color of an icon or text as the only way some information is conveyed. If color is a key, ensure that there is also an alternate clue to meaning.
    • Never render text over a photograph or similar image.
16. Using images:
    • Images should always include an appropriate ALT field that conveys the same information as the image. For images containing text, this should mimic that text. For images used as bullets, horizontal dividing bars, and the like use an ASCII equivalent as an ALT field. For decorative images that do not convey page content, use ALT="".
    • For figures, graphs, and other images too complex to fully describe with an ALT tag, also include a LONGDESC tag containing a complete description of what the image is intended to convey to the viewer.
    • Whenever possible, utilize images of not more than 600x400 pixels. Larger images will require scrolling for many viewers.
    • JPEG format should be used for photographic or scanned images. For icons, business graphics, maps, and other diagrammatic content with relatively large areas of solid color, GIF format is best.
    • Use of `progressive' JPEGs and `interlaced' GIFs is encouraged for larger images, as this allows viewers to decide early if they need to wait for the entire image to load before moving on.
    • Always supply correct image WIDTH and HEIGHT parameters.
    • Consider utilizing clickable thumbnail images to access larger images.
17. Using Images Maps
    • When using image maps, be sure the clickable areas will be visually obvious to the viewer.
    • Use client-side rather than server-side image maps whenever possible. If you must use server-side maps, provide an alternate, text-based route to the material accessed via the image map.
    • Include ALT tags on all AREA elements.
18. Reliance on PDF format documents is discouraged by the the World Wide Web Consortium due, in part, to the accessibility problems they create, particularly for persons with physical limitations. PDF documents can also often be much larger (slower) than the HTML or text equivalent. Use HTML or text format wherever possible. Where PDF format is used, it is good practice to provide an alternate copy in HTML or text format.
19. Avoid distributing documents in vendor-specific formats (e.g. MSWord®, WordPerfect®). Such files are only accessible to viewers who happen to have that particular software (and often version) available on their system. Most word processors are able to export HTML (or RTF which is easily converted to HTML). Publishing the HTML version makes the document universally accessible.
20. Multimedia: The use of audio and video content should be done in a way that is accessible to persons with either sight or hearing impairments. This may require providing an audio description of the video content or text-based captioning to insure that both the sight and hearing impaired will have complete access to the content.

Resources

The following are some miscellaneous items that can be useful when creating web content.

• There is a campus email list used for keeping those people maintaining official web pages informed regarding campus web happenings. To subscribe, mail from your usual email account to "listserv@uwm.edu" a message with an empty subject and containing the one line "subscribe websmith Your Name".
• University Communications and Media Relations provides a set of template designs that may be used as a starting point by designers wishing to create pages that follow the `look and feel' of the campus-level pages. Schools, colleges and departments are encouraged to use these templates so that visitors will have a more unified experience at UWM's web site. These are available in both HTML and in Macromedia Dreamweaver format at http://www.uwm.edu/News/Template/.
• University Communications and Media Relations has also provided a set of standard University logo images available to use on official pages. It is recommended that authors access these images using the HTML fragments provided below rather than make their own copies of the images. Using a shared copy improves browser response as the browser will not need to re-fetch the shared images likely to be already in its cache.
• Complete details of the rules governing use of UWM's logo and identifying elements are to be found in UWM's Brand Identity Program Graphics Standards Manual.
• Although following the General Page Standards will help a great deal in making pages accessible by persons with handicaps, there is much more information available on this topic. Those wishing to learn more are encouraged to visit the World Wide Web Consortium for their very complete Web Content Accessibility Guidelines 1.0 and Techniques for Web Content Accessibility Guidelines 1.0 documents.
• Using an HTML validator, such as Bobby, can help in both insuring your pages do not contain non-standard HTML as well as checking for common problems for persons with handicaps.
• Viewing your pages with a text-only browser, such as lynx (available on the campus Alphas), can give some idea as to how your pages will function on low-end browsers as well as those used by the sight impaired. (A good way to check for missing ALTs on images, non-functional image maps, etc.)
• There are a number of HTML-related utilities installed on the Alphas that can be useful when creating web pages:
  • weblint - An HTML syntax checker
  • tidy - An HTML syntax checker and reformatter
  • html2ps - Converts HTML to PostScript format
  • rtftohtml - Converts Rich Text Format (RTF) to HTML
  • texi2html - Converts Texinfo format to HTML
  • pod2html - Converts perl .pod files to HTML
  • mhonarc - Creates an HTML version of an email archive