Web Style Guide

Every official page on cwu.edu's domain must:

1. Use a consistent navigation scheme throughout the site
2. Use the official Central Washington University's page header and footer elements
3. Use colors and fonts as specified in the Web Style Guide
4. Webpage, folder, and file names should all be lower case with dashes use to separate them. Example: www.cwu.edu/new-students/fall-orientation, orientation-org-chart.pdf etc.
5. Appropriate domain names* and vanity URLs must use dashes to separate words (example: cwu.edu/sociology/page-title) While this may make some URLs longer, this naming convention makes navigation easier when it’s applied consistently across the CWU's domain. Vanity URLs must be requested via a project request form from the web services office. All vanity URLs must comply with these naming convention. Domain names will not include www.
6. Every Web page must include a contact email address that is actively monitored, a phone number or both at the bottom of the left hand navigation column. Other contact information may be included. The department or unit must take responsibility for any communication the page may generate.

Every university webpage contributes to the user’s perception of the university. To ensure a unified web presence, official pages of the university must appear to be visually related in order to preserve and promote the university’s brand identity.

It is expected that official pages adopt and adhere to the guidelines presented here in order to provide consistency.

Style

Rather than attempting to develop a style for your website, or webpage the graphic and editorial style for your site should evolve as a natural consequence of consistent and appropriate handling of your content and page layout.

Some things to avoid in your designs:

1. Importing graphics or other elements from another website (this includes google image search) or print publication that you or your office did not produce
2. Choosing an eccentric layout over a conventional one
3. Images taken with low resolution camera, poor lighting or composition
4. Large text blocks
5. Excessive use of one type of content assets to publish content (buttons, accordions, tables, etc).
6. Use tables for layout/design purpose

Instead of the items above, do:

1. Use bullet lists instead of large blocks of text
2. Break up text with subheadings, images, or both
3. Use a variety of content assets to build and publish your pages
4. Appropriate images (composition, resolution, etc)
5. Use keywords in 3% - 7% of the content
6. Follow accessibility guidelines

The best style is one that the user barely notices because everything about the website is logical, usable, comfortable and visually appealing to the eye.

A word about simplicity

Clear and consistent website design benefits everyone, but for some users it is critical.

Inconsistency can cause vision impaired users to become disoriented or lost on your site. Other users will simply get frustrated and abandon your page—users with cognitive difficulties such as memory or learning disabilities, the frustration is magnified. To avoid this, follow these best practices:

• Use simple language
• Apply navigation consistently throughout your website
• Use a clear design with minimal but highly functional page designs

Before you use a button

Buttons are used to indicate to the user that they can perform an action. Thusly, buttons should be kept to a minimum. Do not use buttons as a substitute for a link.

Best practices for buttons:

• Buttons indicate a call to action—Apply, Register, Accept, etc.
• Buttons are not appropriate for linking to another page, website, or document. Use a text link instead.
• Button text should be as short as possible (20 characters or less) and written in sentence case.
• A button's call-to-action (CTA) should make it clear to the user the specific action they will take when clicking the button—(example: Apply to CWU, Download a Syllabus, etc.)
• Avoid generic call-to-actions such as "Submit", "More", "Click Here" etc.
• Button text must NOT be set in bold (do not use the classes "large").
• Buttons in the content area of a page, must not expand the width of the content area (do not use the class "expanded").
• Button's text must NOT break into two lines
• Limit the number of buttons in the content area of a page (more than four buttons in the content area of a page is not appropriate)
• Limit the number of primary buttons (yellow) in the content area of a page to one (1).
• Limit the number of secondary buttons (red) in the content are of a page to no more than two (2).
• Buttons on the left navigation must be solid color buttons (no outline version)
• Buttons on the left navigation must use the class "expanded".
• Left hand navigation is limited to two buttons only.
• Only one colored button may be used (primary / yellow or secondary / red) on the left hand navigation. The second button must be neutral (gray)
• If a Give button is used on the left hand navigation, the second button must be neutral (gray).

Exceptions must be approved by the web services office.

• The “Give” button resides on the left column ONLY on all websites.
• If there is a need to link to a give form/page on the content area of a page, it must be done using a text link.
• The “Give” button reside immediately below the academic menu in websites using the 2016 Drupal theme, and immediately below the left hand menu in websites using the 2019 Drupal theme.
• The “Give” button is set in a solid green color (HEX #155724) with white text and a "give" icon to the left of the text.
• The "Give" button is never set in primary (yellow), secondary (crimson), or neutral (gray) colors.
• The “Give” button opens a modal (pop-up) window on click (if the site does not have their own “give form” the modal will open the college “give form”, if the site has “give form” then modal will open the site/department/program's “give form.”)
• The “College Give Page” will continue to exist, and site owners can continue to promote the “College Give Page” (with all the funds listed) on any page using a text link on any page.
• Links to the “College Give Page” may NOT be set using a button.
• The “Give” button's CTA will be “Give to <dept. name/college name /program name>”
• When the "Give" button's CTA breaks into two lines, the CTA will be “Give to Department", "Give to Program", or "Give Today."
• The “Give” button will use the “type-give” class.
• No other buttons may use the “type-give” class.

Any video or multimedia, whether produced internally or by an outside vendor, should aim to meet professional standards.

To create the most professional and effective video, we also recommend following industry-standard best practices and guidelines as closely as possible.

Before You Make a Video

Know the Stats

• Sometimes no video is better than poor quality video.
• 77% of viewers stopped a video due to poor quality.
• 85% of people expect TV-like quality for every video they see online.
• 62% of consumers develop a negative perception of your brand if you publish a poor quality video.

(Source: Content Marketing Institute)

Is Video the Best Medium?

Consider if the information would be more effective presented in a different format, such as a webpage, a graphic, or another visual medium.

Do You Have Time for a Video?

It takes a lot of hours to plan, shoot, and edit a quality video, many times spread over several weeks. Start thinking about your video project two or three months ahead.

---

Minimum Accessibility Requirements

For Any Video

• No flashing or strobe effects.
• Graphics added in post-production must not overlap the area where closed captions appear.
• Typography must be legible.
• Any text overlays must meet WCAG contrast standards.
• Any text must be on the screen long enough to be read.
  • A good rule of thumb is to read it out loud two times, and leave it on the screen for that long.

For Video with Visuals and Audio

• Video must have closed captions.
• Video must have a proofread transcript.
  • The transcript must be a text file (.doc, .docx, .txt).
  • You may use a PDF file if the PDF file has passed accessibility check
• Transcript example

Images should be used sparingly on a page, and only when they compliment the content. Images that are poor quality, obvious stock images, excessively large, or distasteful must not be used.

When choosing an image make sure it is in the appropriate size and aspect ratio. Follow these guidelines when adding images to your website:

• Images should not be used to display text content, only photos and figures. When this is not possible, you must provide a text alternative that is accessible and searchable. This is different than adding ALT tags to images—which you must also do.
• One large picture is better than several small ones.
• If you use more than one image, one image should dominate, either by size or apparent size (ie, a close-up draws more instant attention than a wider shot).
• The higher the level of the page in the hierarchy, the more important it is to include an image. Top-level pages should have content relevant images.
• Size: Images that float left or right in the copy should be between 300 and 400 pixels wide. Images that fill the entire width should be set to 100% wide and the height should be deleted so the image proportions are maintained.
• Don’t add any borders to images.
• Accessibility: Properly name images, add Alt tags & descriptions to each uploaded image.

Introduction

The purpose of descriptive links is to provide users with the proper context of where clicking the link will take them. Screen reader users often navigate websites going from link to link, using the tab key (or shift-tab to go backwards), so providing links that make sense is vitally important and necessary. There are two main concepts to consider with descriptive links: writing link text and screen reader behavior.

WCAG 2.0 States

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

Writing Link Text

In most cases, the proper link text is probably already in your content, and it just needs to be emphasized as the link. Extraneous words used as links such as; "click here" or "more" should be avoided in most situations, although if you dive into the WCAG guidelines on descriptive links you'll learn a lot more.

Use this: Learning what to write as proper link text can be confusing, but you can learn more by visiting Descriptive Links Accessibility.

Instead of: Learning what to write as proper link text can be confusing, but to learn more click here.

Screen Reader Behavior

Screen reader software announces the presence of a link, so you should not include in links words such as "link" or "website" in the link text. Doing so would provide unnecessary redundant information.

Imagine the following items are being read to you as screen reader software would. Which example would be easier for you to understand out of context?

• link https://www.cwu.edu/web-services/web-style-guide
• link click here
• link Learn more about descriptive links

Resources & Tools

• Universal Usability Descriptive Links
• WebAIM Link Text and Appearance

Using links effectively can help improve the user experience and can boost our rankings in Google and other search engines.

Writing link text

Aside from proper nouns, link text should always be lower-case and accurately describe the page or resource it is linking to.

Remember that users should easily understand where they’re going and why if they click on a link. If a link is accurate, descriptive and specific, it will help all users, including those using assistive technologies, to better understand our content.

Best practice

• Use the language of your audience – avoid jargon, branding or marketing-speak.
• Try to include link text at the start of the sentence or paragraph so it is easy to scan.
• If your link includes a call to action, make sure to include the verb in the link text (e.g. 'Subscribe to our newsletter', not 'Subscribe to our newsletter').

---

Internal and external links

Links can be internal or external:

• Links that send a user to other pages within your website are internal links.
• Links that point from your website to another domain are external links.

Only link to external or third-party websites when there is a clear user need. There are a number of risks associated with external links.

External websites can change without notice. The links can break entirely, or end up linking users to irrelevant or incorrect information.

Before linking off-site, consider the following:

• Have you been fair and impartial in choosing which website to link to?
• Are there other websites that provide similar or better content?
• Is the third-party website free to access?
• Is the site authoritative and trustworthy?
• Does the third-party website work on mobile devices?

Try to avoid linking to commercial websites and never link to a site in exchange for a reciprocal link or payment.

When linking to external websites from any page, make sure that the page is using the following disclaimer text somewhere on the page or on the site.

---

Linking to documents

When you link to a non-HTML resource (for example, a PDF or Word document), you must include the document type* in the link text. For example:

• Download the undergraduate guide (PDF, 800KB)

This will ensure a user knows what to expect when they click the link. In general, try to avoid linking to documents hosted on external websites.

*As of October 2020 - this is handled automatically when you create links to non-HTML resources.

Icons should always be used thoughtfully and minimally to aide in visual understanding. It is best-practice to include text with your icon to indicate its meaning. There are very few globally understood icons. For more information on using icons properly, please refer to this Nielson Norman Group article.

The most important thing to remember is that icons should support your content, not replace it—when used properly, they should add additional value to your page and eliminate the need for your visitors to overthink the action they are about to take. Keeping this in mind, icons also have the potential to confuse visitors. When using icons follow these guidelines:

Icons should enhance your content by creating visual interest.
Icons should be directly relevant to the information you’re communicating and be used to compliment content, not distract from it.

Do not use icons as a central or large graphic element.
Icons should only be used to supplement a fact, header, or text block. They should not be used as the primary visual.

Icons are not for unit identification.
Icons should not be used alone or combined with college, department, or program names to form a logo.

Scale icons proportionally.
Icons should always remain at the same scale in relation to each other to create a consistent look. The stroke weight should also be scaled proportionally with the size of the icon. Do not add additional stroke weight to the icon.

Do not attempt to create your own icons.
If existing icons do not meet your needs, please contact web services office.

In addition to the general guidelines above:

• Don’t use icons strictly for navigation, rather use them to assist visitors by directing them to content they may find important.
• Don't use the same icon to communicate a different action or metaphor
• Use icons that are familiar to your users.
• Do not use icons with conflicting meaning.
• Don’t redefine the meaning of an icon.
• Use the same color or color scheme for all your icons.

When naming files and folders, follow these rules:

Do:

• Use only lowercase letters, dashes and numbers.
• Underscores are permitted, but dashes are suggested

Don't:

Do not use special characters in a file name. These include:

• Spaces
• Hashtag
• Ampersand (&)
• At (@)
• Dollar Sign ($)
• Slash
• Period
• Comma
• Parenthesis

Do's and Don'ts of Naming Files and Folders

NO	YES!
NO presidents - message -2016.pdf	YES! presidents-message-2016.pdf
NO Presidents- Me ssage-2016.pdf	YES! presidents-message-2016.pdf
NO Presidents - Message - 2016 - - - New.pdf	YES! presidents-message-2016-new.pdf

Links can do more harm than good to a page if not done properly.

In order to get the authoritative links that search engines respects and sustain the page's search engine rank, you need to concentrate on getting contextual links (i.e., links surrounded by relevant content). Contextual link building is the quickest way to boost your page or website's search performance.

Anchor Text

Anchor text is the clickable text in an HTML hyperlink that links two web pages together. Search engines use the anchor text on one page (plus the content surrounding it) to determine the context of the page being linked to.

Site visitors use anchor text to preview what the link destination may be. Take this page from the Admissions website, in step 1 we’ve used a clickable anchor text link to link to the application for admissions:

Visitors to this Admissions page know that by clicking on the text “application for admission,” they’ll get directed to, CWU's application for admission.

The anchor text should set clear expectations for readers. Using specific anchor words that describe the content being linked to provides a positive experience for users. This is the reason why "Click Here", "Here", or any other vague anchor text should be avoided.

Link guidelines

• Do not use "Click Here", "Here", or any other vague anchor text as anchor text.
• Do not use links on a page that stand alone outside any context.
• Buttons should be kept to a minimum.
• Do not use buttons as a substitute for a link.