Skip to main content

Guidelines and Best Practices

Accessibility

All websites must meet our accessibility guidelines prior to launch. You must run your .sandbox site through Siteimprove and the site must have zero A or AA accessibility errors.

Comment Your Code

The WVU Design System is built on open iteration and collaboration. In order to follow this principle, others who build WVU websites might want to use your code and easily adapt it to their own needs. Or if you leave WVU, the person who must take over your sites will want to know how and why you coded your sites like you did. This requires you to include extensive comments in your code that make it easy to understand.

Content

To understand how to better plan, write, and manage content, you can do no better than to reference 18F’s content guide.

Design and Layout

All pages must contain a masthead, navigation, and footer. Your masthead must contain a logotype or wordmark, displayed at the top left. Your website should have a clearly defined set of navigation links near the top of the page that remains consistent throughout the site. In general, follow the same rules in the WVU Brand Guide when designing individual elements. Below are some common pitfalls and suggestions.

Typography

Body copy should not be on a textured or colored background. It should be dark gray on a white background for easier readability. If text is over a photo, crop the photo in a way that makes the text more legible or use a vignetting effect.

Create a large enough contrast in scale between elements to create a strong visual hierarchy. For example, use the wvu-shout and/or display-* utility classes on a headline to grab a viewer’s attention. If two elements should not compete for attention, consider creating more contrast in scale between them.

Don’t center large bodies of text. This can cause the eye to lose track of where each line begins as the user reads the text. Use less text or left-align it.

Layout and Spacing

Use the grid to align elements and create unity. Page elements should not look like they are floating or crashing into each other. Keep spacing consistent and avoid visual tension. The outer container width of all page elements is set in the variables file in the WVU Design System theme. The max container width is 1400 pixels. You should not change this width.

Your site layout should have a balance of positive and negative space. It should not look cluttered so as to hinder legibility or the visual hierarchy. Components (horizontal page sections) should generally use the same top and bottom padding py-5 for their outer containers.

Follow gestalt principles of design. For example, group elements according to the law of proximity. Users perceive a relationship between items that are grouped together. If a headline is disjointed from its description and call to action, users will not perceive these elements to be related at a glance.

Texture and Graphics

Subtle gradients, highlights, drop-shadows and reflections can give your site a polished look. However, overuse of these effects can cause visual distraction and dilute the overall WVU brand, and should generally be avoided. The elements on your site should not be styled with thick borders, rounded corners, or other arbitrary styling. Stay within the framework.

Naming Conventions

When writing code, WVU Design System components do not need to be namespaced. This is because the system is primarily utility-based, and there is no need to identify individual components in order to style them with CSS. However, if you want to namespace components, we recommend using the BEM format (Block, Element, Modifier) with a wvu- prefix.

For example, if you have a block (we call them “components”) you’ve named hero and you want to style an element inside the block named title, you might add a class to that element called wvu-hero__title. If you want to add a modifier class to that element that changes its color to blue, you might add another class called wvu-hero__title--blue.

If you are a CleanSlate developer, editable region names should also follow this format. For example, if you have an editable region that allows the content editor to edit only the h2 element of a wvu-hero component, name the region wvu-hero__h2.

Supported Web Browsers

Supported web browsers include the latest versions of Internet Explorer (IE 11), Chrome, Safari, Edge and Firefox. We do not include support for IE’s compatibility mode, and no longer support depreciated versions of Internet Explorer 6, 7, 8, 9 and 10.

Supported browsers specifically refers to any sites in CleanSlate content management system or any web applications made by University Relations – Digital Services — unless otherwise listed.

Usability & Performance

At WVU we value usability and performance over flashy javascript components or animation. Use Google Page Speed Insights to evaluate your site’s performance. No WVU web page should score worse than 80 when checked with this tool.

What about scrolling?

Doesn’t all my content have to appear “above the fold”? No. Your most important information should appear near the top of your page. However, screen resolution and browser viewport dimensions vary from computer to computer. Generally, users expect to scroll and it is best to meet user expectations. To learn more, see Luke Wroblewski’s article There is No Fold.

Can I have a slideshow?

There are many reasons you shouldn’t include a slideshow on your site. Users only tend to click on the first panel that is displayed, they frustrate users, and even though many slideshows technically meet accessibility guidelines, they really aren’t accessible.