Skip to main content Skip to navigation
Brand Web

The following standards serve to provide a unified look and feel across the WSU web presence. They ensure that users immediately recognize the WSU brand and are rewarded with predictable and useful behavior as they navigate, search, and otherwise interact with your site.

The Spine

The spine is required on all WSU web pages. On site home pages only, the cropped spine may be used.

Full Spine

Cropped Spine

Positioning

Appears persistently at far left of established page width which is centered within browser window. Extends the full height of the window.
Appears persistently at far top left of established page width, which is centered within browser window.

Scrolling

When the spine extends beyond the window height it moves up and down along with the page scroll until the top or bottom is revealed. There is not a scroll bar within the spine. (Currently, an iOS bug requires an interim scroll bar solution.)

Dimensions

198 px wide on desktops, extending the full window height. For touch, on smaller devices, when the spine is revealed, the spine is 298px wide.
198 x 198 px on large devices. Once the spine is revealed on smaller devices, the behavior is identical to desktop views.

Edges

Right edge of spine must retain a visible edge. The left edge may be defined or undefined.
Left, right, and bottom edges of spine must retain a visible edge.

WSU Signature

Required

The version, coloring, size, and placement of each campus signature has been set and should not be altered.

Search, Contact, Share, and Print are strongly recommended and default icons and colors are required.

Contact

Contact provides a standard interface for listing appropriate primary contact information for the site owner. A unit name, address, email, and phone number should be included.

Share

By default Facebook, Twitter, and email sharing links are provided. A limited set of additional social channels are preconfigured and can be added.

Print

By default, the print tool modifies the page by removing the spine and adding a horizontal header before invoking the browser's print dialog. This default behavior can be overridden so that no manipulation occurs.

The Page

As with all WSU communications, the webpage on the whole should adhere to typography and color standards and reflect the visual tone descriptors.
The breaks of the Spine framework are roughly targeted at three types of device: desktops (large), tablets (medium), and phones (small). The framework is written so that a half-width (396px) of content fits a small device, a full-width of content (792px) fits on a tablet, and the spine and a full-width (990px) of content fit on desktop. Variables like device orientation and size may cause a view to spill into a larger or smaller size.

Full Spine

Cropped Spine

Small View

Page content and design are reformatted into a single column. Spine is slid off-screen accessible with the menu icon. A standard horizontal WSU signature appears at the top of the page in the same color scheme as the spine.
At the small view, the cropped spine reverts to the full spine and is off-screen. The full navigation is required when spine is revealed.

Medium View

The page's main content area displays the same as in desktop view. The spine is slid off screen.
At the medium view, the cropped spine reverts to the full spine and is off-screen. The full navigation is required when spine is revealed.

Large View

Full spine and page's main content area are visible.
The spine is cropped at 198px and shows only the WSU signature and tools. The page's main content area is fully visible and content and design can fill the full 990px width. On scroll, the spine becomes a 50px high, full window width band that remains fixed at window top.

X-Large View

To make the most of wide format, desktop displays, the maximum width of the main content area is available in increments of 198 pixels up to 1980px. However, x-large designs must achieve a strong presentation of the content at 990px.

Print View

The print tool creates a view of the page without the spine and automatically triggers the browser's print dialog. Invoking print directly from the browser or keyboard leaves the spine in place and the page view unaltered.

columns

The content area's default width of 990px is divided into fifteen columns of 66px each.

The main content area is comprised of twelve fifteenths, the spine occupying the left three columns.

  • the spine: 198px (three columns)
  • the page: 792px (twelve columns)

The cropped spine opens up an extra three columns or 198px within the main content area.

  • the spine: overlaid (no columns)
  • the page: 990px (fifteen columns)

Additionally, x-large sizes are available that extend the content area in increments of three columns (198px).

  • 1188 (15 col. + 3 col. spine)
  • 1386 (18 col. + 3 col. spine)
  • 1584 (21 col. + 3 col. spine)
  • 1782 (24 col. + 3 col. spine)
  • 1980 (27 col. + 3 col. spine)

responsiveness

Fluid

Content always fills the full width of the window up to the maximum set width, 990px by default. Fluid flexes and bends before it breaks.

Fixed

Content width (792px) is hard and fixed at large and medium sizes and breaks in half (396px) and stacks for phones and small tablets. Fixed is available for designs that benefit from consistency in position and proportion in all views. Fixed only folds, breaks.

Hybrid

The default. Using hybrid, the grid behaves according to fluid rules below 792px and to fixed rules above 792px. Hybrid breaks then bends.