CUL Web Design Document

CUL Web Design Guidelines

Version 2.0 --- May 19, 1997

Please send your comments to Patricia O'Neill, peo1@cornell.edu

Introduction
The Design Subcommittee of the Cornell University Library WWW Implementation Committee had several charges including:
- The development of a set of unifying features (color, logo, type sizes and styles) to be used on the various library web pages.
- The development of templates for new owners of web pages to use as models.
The following document incorporates the recommended design elements and standards, including some templates. It is not the intention of this group to state that these elements will remain constant. One of the reasons we chose the WWW format is that changes will be relatively easy to incorporate. The "CUL WWW Design Guidelines" should be considered a document under continual review.
Note: Links labelled [Yale] connect to the relevant section of the Yale Style Manual.
Return to the Table of Contents
General Site Design Considerations [Yale new] [Yale old]

REQUIRED:
1. Use of any and all images, designs and text copied from other sources (including WWW sites) must adhere to copyright and licensing guidelines. More information on Cornell's guidelines on copyright may be found at: http://www.cornell.edu/Computer/responsible-use/#copyright
2. Design Web pages to accomodate text-only and non-table browsers.
  1. Include alternate text [ALT] descriptions of images in the IMG SRC tag.
  2. Use a text-only browser, such as Lynx, to check page layout and function in the text-only mode. Pay special attention to forms and tables.
  3. Use BR or P tags when needed to clarify table entries for non-table browsers.
RECOMMENDED:
1. Plan the overall structure of your site to maximize ease of use.
2. Limit the size of individual pages or provide internally-linked tables of contents and returns. Consider breaking pages longer than two or three screens into a set of smaller, linked pages. [Yale new] [Yale old]
3. Use small graphics and a consistent color to identify all of the documents of a Web site.
4. Provide visual consistency across related documents by using a style sheet or template.
Return to the Table of Contents
Web Site Maintenance
1. Plan on how revisions will take place (schedule for updating, who has responsibility). Before each semester, at the minimum, authors should review the Web site, revising pages, updating links, and removing dead links.
Return to the Table of Contents
Web Page Design
1. Entire Page
  1. Use metatags in every document (HTML, HEAD, BODY).
  2. Provide clear, descriptive document information (i.e., metadata) in the HEAD section. For example, page titles [inside TITLE tags] should reflect page content. [Details to be added from Metadata Group]
  3. Identify the library unit and the Cornell University Library prominently at the top and/or the bottom of each page. Example: Music Library, Cornell University Library.
  1. Create a short, simple home page that does not require a lot of scrolling.
  2. Use the most widely acceptable form of tagging (i.e., HTML 2.0) whenever possible. For example, prefer header tags (H1, H2, H3) to FONT tags for modifying the appearance of text.
  3. Follow principles of good typographic design for the computer screen. [Yale new] [Yale old]
    1. Provide visual contrast between blocks of text and surrounding blank space
    2. If graphics are used, select them sparingly to enhance or clarify the content of the document
  Return to the Table of Contents
2. Top of the page: Banner and navigation tools [Yale new]
  1. Use a version of CUL banner graphic on home page.
  2. For each page except the home page, use text or a small graphic to identify the unit responsible for the page, and make it a link to the home page.
  1. When using an internally-linked table of contents, place it directly below the banner, so it appears on the first screen.
  2. Use next/previous page links for linear Web document structures.
  Return to the Table of Contents
3. Middle of the page: document content
  1. Indicate restricted access where appropriate.
    [Consider using the "C" icon to label resources restricted to Cornell users only; a "globe" icon is also available to indicate resources open to use by the general public. See Image and Icon Collections for examples.]
  2. Spell-check and proofread documents to insure correct spelling and grammar.
  1. Avoid graphics on the home page that take a long time to download. [Yale new]
  2. Specify height and width of graphics [in pixels] to speed downloading. [Yale new] [Yale old]
  3. Include a warning statement if link will lead to a very large document or image [larger than 100K].
  4. Include return links to a table of contents at the top of the page at breaks in the text for longer Web pages.
  5. When establishing links using a mailto hypertext reference (HREF), use the e-mail address as the link. For example, insert "to ask a reference question, contact olinref@cornell.edu" instead of "to ask a reference question, click here" or "to ask a reference question, contact Jane Doe."
  Return to the Table of Contents
4. Bottom of the page or Footers: Navigation tools, attribution, revision date [Yale new] [Yale old]
  1. All pages: provide author's name and e-mail contact address (or webmaster@cornell.edu, it isn't necessary to have specific personal name).
  2. All pages: provide last revision date of the page [month day, year]. [Yale old]
  3. On the home page: provide a link to the CUL home page. Consider using the recommended footer format (right now at http://www2.englib.cornell.edu/%7Eat11/logos/cul/gifs/long/).
  4. On the home page: give the surface mailing address.
  5. On the home page: include the full URL of the page.
  6. On all other pages: provide a link to the home page.
  1. Include the full URL of the page in the footer of each page so that the source may be recoverable if the item is printed.
  2. Include copyright mark and year, (if/when appropriate).
  3. Link to CUINFO, to the Cornell Library Catalog, and to other pages within your Web site where appropriate.
  Return to the Table of Contents
Templates: Examples of Page Layouts
1. Home Pages
2. Intermediate Page
3. Document
Return to the Table of Contents
Links to Icons and Images for Use in CUL Web Pages
Return to the Table of Contents
Forms
BASIC PRINCIPLE: When designing a form, keep in mind who will be filling it out and who will be handling the output. Make the form easy to use for both library patrons and staff.
REQUIRED:
1. Include a brief description of the form's purpose near the top, where it will be immediately obvious. The depth of description will depend on the form; it will vary from brief (example: the renewal form) to more detailed (example: the ILL form), as needed.
2. Use labels for the form blanks that make it clear what information should be entered.
3. Make sure that the information being asked for is not unreasonably difficult for a patron to find. For example, before requiring information from a bibliographic record, make sure that the information is normally available to the public.
4. Make form blanks large enough to contain the information to be entered.
5. Have both a "Send Request" and a "Clear Form" button at the bottom of the form.
RECOMMENDED:
1. Use a pulldown menu to make it easy to select from a group of choices (such as in choosing among different libraries at Cornell).
2. Include example entries where there might be doubt as to what information should be entered in a form blank.
3. Include form blanks for needed address and demographic information (such as email, name, ID number, etc.) as appropriate for the form's purpose.
4. Test the form with library patrons, to be as sure as possible that it is understandable (while recognizing that there are many different kinds of patrons and you can't please all of the people all of the time).
5. Show the form's output to library staff who will be receiving and working with it, to be sure that the output is complete and useable.
Glossary of Web and HTML Terms

Revised January 19, 1998
Michael Engle, moe1@cornell.edu
Design Subcommittee, WWW Implementation Committee
Cornell University Library

URL: http://www.library.cornell.edu/design/dsigndoc.html

CUL Web Design Guidelines

Table of Contents:

Introduction

General Site Design Considerations [Yale new] [Yale old]

Web Site Maintenance

Web Page Design

Entire Page

Top of the page: Banner and navigation tools [Yale new]

Middle of the page: document content

Bottom of the page or Footers: Navigation tools, attribution, revision date [Yale new] [Yale old]

Templates: Examples of Page Layouts

Home Pages

Intermediate Page

Document

Links to Icons and Images for Use in CUL Web Pages

Forms

Glossary of Web and HTML Terms