Portland Community College | Portland, Oregon

Every page contains the same header navigation. There are three components:

  • PCC Logo - Links to www.pcc.edu
  • Helper Nav - Provides users with access to homepage, the search engine and a campus oriented contact list.
  • Global Nav - Direct access to the top level pages of the site hierarchy.

Provided by the JavaScript, the 'crumbs' reflect the folders above the current page so that a user can theoretically backtrack. They will not display if the user has scripts turned off. Because they reflect folders, every folder must contain an index page, or the user will land on a 404. The folder names are determined by converting hyphens to spaces and capitalizing each word (ie. /academic-programs/ = Academic Programs). Name variants can be hard coded into the script if needed.

  • Use for upper level navigation - Sidebar navigation can be used to link to the upper-level pages from other upper-level pages and the index (sister-level page navigation). Bottom level pages should not be included, or include the sidebar. From those pages the user can make use of the back button or breadcrumb navigation.

  • Use for most important resources - Along with providing general navigation, it is permitted to include links to resources (documents, other sites) that users will need to access directly from the index and upper-level pages.

  • Multiple Menus - It is possible to divide the e sidebar navigation into multiple menus. Each menu is defined by an <h3> heading and an unordered list. The Menu headings should not be links. All list items must be links.

Content Navigation

The navigation that you provide in the body of the page is often the most important. Many users have a tendency to first scan the content of a page, often overlooking other navigational elements. Your links should be clear and well defined:

  • Avoid linked images as the only path to a goal page. Our images do not show any hover or active state. If an image is a link, additional text link options should be provided.

  • Link text should be descriptive of the page it points to. Do not use "click here" as link text. Re-phrase the sentence if necessary to incorporate the link. Make sure the the link spans an appropriate number of characters. Notice how "allowed file type" is link below, rather then just the word "file" (or conversely, the entire sentence).

  • Give links a title if further description is needed. The title attribute can be used to provide more information about a hyperlink.

  • Make links to non-HTML documents obvious. It can be incredibly frustrating to have your browser download a file, when you simply expected a new page. It is even worse when you don't notice the download, or do not own the correct software to open the file. First check to make sure that you are linking to an allowed file type. Next, include text that specifies what kind of document the user should expect. For links to PDF documents, a notice is automatically applied using CSS (Currently only works standards compliant browsers).

  • Use related pages for important items that do not have to directly do with the content of the page. Users will reach these links after scanning the rest of the content. They are you last, best hope of directing them to the information that they need.

  • Make sure that you also understand the technical guidelines for linking listed in the development standards.