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 the Laws of UX. 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.