Web Services

Web Services Internal Development Standards

Navigation Elements

Left-Side Main Navigation Bar

All Web Services pages will use a standardized left-side navigation bar. This navigation menu may expand, contract, or have pop-up submenus, but the main top-level elements in the menu will NOT change throughout the site (in order to prevent confusing the user as to where the menu option they clicked on disappeared to). Though a consistent left-hand placement may seem boring, it reassures users as to the location of the main navigational choices.

Though left-hand navigation bars on older pages are implemented using image rollovers, all sites shall implement left-hand navigation bars as text-based unordered lists, using styles to manage the appearance of the text and rollover effects. See the Theatre Arts site and the IMC site for examples. Text-based navigation requires less bandwidth to download, has greater accessibility, and is much easier to maintain and update.

Bread Crumbs

Bread crumbs track a path through a Web site, allowing users to backtrack at any point, and providing them with a reference point for their location within the site. Ideally, the path that is tracked is the path of links that the user followed to get to their present location. However, tracking such a path requires server-side scripting and dynamically generated pages and would in many cases be a very complicated and circuitous path.

Where feasible, all pages will include bread crumbs (located along the right edge of the page below the page banner) that track the logical location of the current page within the site. The path should appear as: Home | Dept | Subdirectory | Page, where "Home" is a link to the CSU, Chico home page, "Dept" is a link to the department's home page, "Subdirectory" is a link to the parent directory (or directories) of the current page, and "Page" is the title of the current page (bold text, no link).

At present we use either hard-coded bread crumbs, a JavaScript function, or Collage (if the site lives in Collage, of course) to generate the bread crumb path.

Hard-Coded Bread Crumbs

Hard-coded bread crumbs should be used when the JavaScript bread crumbs (see below) will either not work or will not provide an "intelligible" path (i.e., one that is easy for the user to understand). The following example shows how the bread crumb code appears:

<div class="breadcrumbs"><a href="http://www.csuchico.edu/">CSU Chico</a> | <a href="../index.html">Web Services</a> | <a href="index.shtml">Standards</a> | <strong>Navigational Elements</strong></div>

JavaScript Bread Crumbs

This function is called "breadcrumbs"; a sample resides in the "http://aphid.csuchico.edu/tlpvirtual/atec/_scripts/scripts.js" file. The following example shows how the function is used.

<td colspan="2" class="breadcrumbs">
   <script language="JavaScript" type="text/javascript">
       breadCrumbs("http://www.csuchico.edu/","/","index.html","None","None","None","0");
   </script>
</td>

The breadcrumbs function is actually a Dreamweaver extension and is available for download at http://www.kaosweaver.com/extensions/details.php?id=6.

Top

In-Page Navigation

For long web pages (more than two screens tall), in-page navigation should be provided. For the rationale behind providing in-page navigation, see "Dealing with Long Pages".

In-page navigation will consist of a hierarchical "table of contents" at the top of the page, linking to anchors placed with the topic headings in the content below. The table of contents should be in the form of a bulleted list and should appear directly under the <h1> title at the top of the page. This page is an example of how on-page navigation should be implemented.

Back to Top Links

On long pages with multiple headings, links to the top of the page should be placed periodically on the page. The standard link text will be "Back to Top" and link to an empty anchor. The empty anchor automatically jumps to the top of the page.

Typically, these links will be placed at the end of each main topic section (typically, these are the <h2> level tags). However, some judgment should be used. There is no reason to place "Back to Top" links after every section if the sections are very short. On long pages, there should always be a Back to Top link placed at the bottom of the page.

Use the following guidelines in placing "Back to Top" links:

  • Links will only appear at the end of main topic sections (<h2>)
  • Subsections (h3, h4, etc.) will not have Back to Top links
  • Links will be placed at the end of the sections
  • Links should be spaced out to appear no more often that about every screen and a half (given a 1024x768 monitor)
  • Short sections do not require Back to Top links
  • Short pages do not require Back to Top links
  • Long pages (over two screens tall) should have a Back to Top link at the end

Here is an example of the Back to Top link:

<a href="#">Back to Top</a>

'Home' Links

Any link to "Home" must be a link to the University home page. Links to your department or unit home page should say something like "Math Home", "Human Resources Home", etc.

It is vital that references to "Home" refer only to the University home page unless it is modified with another word.

Back to Top

Links to Files

Web sites often have links to files that are not Web pages, including PDF files, Word documents, Excel and PowerPoint files, etc. The standards affecting those links are as follows:

  • A link to any external file type must indicate the type of file in parentheses after the link
  • File types will be referred to as follows
    • Adobe Acrobat: (PDF)
    • Microsoft Word: (Word)
    • Microsoft Excel: (Excel)
    • Microsoft PowerPoint: (PowerPoint)
    • MP3: (MP3)
    • QuickTime movie: (QuickTime)
    • Windows Media file: (Windows Media)
  • All files 1.0 megabytes or larger will have their file size (in Mb) appended to the link (to warn and accomodate users with low bandwidth connections)

Back to Top