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
-
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.
-
Search
- Search provides results for the entire wsu.edu domain, local site, WSU A-Z Index, and faculty/staff and student directories from a single input. A custom search solution can be used instead, but within the spine the standard search styling is 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.
-
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
-
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.
Themain
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.
FixedContent 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.
HybridThe default. Using hybrid, the grid behaves according to fluid rules below 792px and to fixed rules above 792px. Hybrid breaks then bends.