Component

Basic guidelines

Home page imagery

Large graphic images may be placed immediately below the site identity zone or the toolbar. See the Template Designer for ready-made design options.

Align the primary home page image flush against the navigation zone and the site identifier zone or toolbar.

Home page secondary links

Home pages often contain many navigation links. A secondary set of navigation links may be located outside of the primary navigation zone to help organize links.

Secondary links often work best if placed immediately below or to the right of the primary home page image.

Never place navigation links in the toolbar. The toolbar is reserved for site tools or utilities.
Simple home page designs using secondary links can be created using the Template Designer.

General content

Large graphics mean longer load times for many of your visitors. Do not create unnecessarily large pages that load too slowly for your visitors’ connection speeds. Even home pages may not need to be graphic-heavy to serve the site well.

Optimize college and other primary WSU home and key entry pages for search engines by including descriptive HTML text.

Content guidelines must be followed by colleges and academic departments. These guidelines include a standard set of navigational links.

Primary content zone background

The background color may be changed to any WSU Web palette color or Web tint.

A background image or gradient may be added to the background. The image must not interfere with text legibility or be a repeating pattern.

Align text and graphics with the established column layout parameters to support a consistent presentation across multiple pages.

Primary content zone text

The text color may be changed to any WSU Web palette color or Web tint.

Links must change color on mouse rollover and are not underlined.

Primary content zone border

A distinct border separating the right edge of the content zone from the browser window background must appear at all times.

A border may appear as a color shift from the content zone and the browser window background color, a 1-pixel line, dots, drop shadow, etc.

Toolbar (optional)

A horizontal toolbar for site tools or utilities is optional and appears immediately below the site identity zone.

Site tools or utilities are functions or links to important elements of the site that help visitors use the site (Help, Site Map, Shopping Cart).

See a listing of potential site tools or utilities

Never put site navigation links in the toolbar. Place these links in the primary navigation zone. Toolbar functions should not go in the primary navigation zone.

Pages with personal logins may include a personal identifier or greeting appearing at the far left in the toolbar once the visitor has logged in. The personal identifier may be bolded. Use the provided CSS class (toolbargreeting) to properly format the identifier.

Standard tool icons are being considered for the next phase of template development.

Toolbar links and text

The link text position, font, style, size, and spacing are set and must not be altered.

Link text should not be all capitals or all lower-case; text must be upper and lower case. (This is often called headline-style capitalization; for details on correct capitalization, consult the Chicago Manual of Style.)

Never distort the text, add shadows, outlines, or other special effects.

Align tool links flush right, with the far right link aligning vertically with the right edge of the last WSU global link.

The link and text color can be changed to any WSU Web palette color or Web tint, but all tools must use the same color. 

The optional personal identifier appearing on personal pages may be a WSU Web palette color or Web tint differing from the tool text color and may be bolded.

Links must change color on mouse rollover and are not underlined.

Toolbar background

The toolbar height is set and must not be altered.

The background color can be changed to any WSU Web palette color or Web tint.

A background image or gradient may be added to the background. The image must not interfere with text legibility or be a repeating pattern.

Breadcrumb navigation (optional)

Breadcrumb navigation may be used to show the link path and location of the page displayed. However, the primary navigation links have been designed to provide this information, so breadcrumb navigation may not add real value for the visitor. Before implementing breadcrumb navigation, consider if it will add enough value to be worth the required additional maintenance on each page.

Breadcrumb navigation links text

Breadcrumb links are positioned at the top of the primary content zone immediately below the site identifier zone or the optional toolbar.

Text size is “x-small”.

Link text must be upper and lower case.

Separate links with a “greater than” arrow symbol (>) and a space on either side of the arrow. Do not replace the arrows with icons, symbols, or other characters.

The link color can be any WSU Web palette color or Web tint.

Links must change color on mouse rollover and are not underlined.

Never distort the text, add shadows, outlines, or other special effects.

View implementation instructions and example

Alternate templates for wide content

Two alternate versions of the templates are available with wider primary content zones. These versions should be used rarely and only when absolutely necessary to accommodate content that cannot be formatted to fit within the widest standard template content zone layout.

Version two is the least preferred option.

1. Alternate template page without the primary navigation zone

This alternate version has a single column content zone that extends the full width of the template page. The primary navigation zone is not displayed. The page retains the standard WSU Web template width.

View implementation instructions and example

2. Alternate template page without the primary navigation zone and with a flexible primary content zone

Template page without the primary navigation zone and with a flexible primary content zone
This alternate version has a single column content zone that extends the full width of the template page. The primary navigation zone is not displayed. The page flexes to fill the width of the user’s browser window.

View implementation instructions and example