Website Style Guide

Look and feel

There are specific templates that have been created to keep consistency of the WOU brand. If you are going to use the Divi Builder and want to add more than just basic words to a page you will need to use these templates.

Colors

Color is one of the most important elements of the Western Oregon University identity system. Red and white are the official primary colors. WOU gray and silver are optional colors. If you choose to change colors of table backgrounds and what not, below are the colors to choose from.

Primary colors Secondary colors
WOU RED
HEX: #db0a29
WHITE
HEX: #ffffff
WOU BLACK
HEX: #000000
WOU GRAY
HEX: #c4c6c8
WOU SILVER
HEX: #a7a9ac

Typography

Headings

  • Use headings in chronological order (h1, h2, h3, h4)
  • If you want to change the font you can use either Montserrat or Caveat
  • Stick with our color pallet
    • Black (#000000)
    • Gray (#73777b)
    • WOU red (#db0a29)

Images

Recommended Image Size:

  • Banner Images: 2000×1500 (height can be adjustable)

  • Square: 1500×1500

  • Vertical: 1500x1800

  • Horizontal: 1500×1100

File Types:

  • Save images in .jpg, .gif, or .png format only.

  • .pdf, .psd, .tff, and .doc files aren’t web-compatible.

Steps:

  1. CLICK HERE to sign up or log in to Canva (it’s free!)

  2. On the top left corner, click on the teal button, “Create Design” for the dropdown

  3. Click on “Custom dimensions” and put 2000×1500, and click on “Create Design”

alex-sardi-blog-canva-resize-3-scaled.jpg

4. Name your file “Banner Images 2000×1500” and you can use this for all your banner images on your website
5. On the left, click on “Elements”
6. Under “Grids” click on the single image element

alex-sardi-blog-canva-resize-1-scaled.jpg

7. On the click, click on “Uploads” and upload an image of your choice
8. Drag and drop it to the image element on the artboard
9. Resize if necessary

alex-sardi-blog-canva-resize-2-scaled.jpg

10. On the top right corner, click the “download” icon and download as .PNG
11. Add to your website

 

Page layouts and templates

Homepage

Using the Divi Builder: must utilize these templates. You can pick and choose which sections you would like to be added.

Using the standard WordPress Block either: Homepage Option 1 or Homepage Option 2 and needs to have more content than just the slideshow of images at the top. Here is a tutorial on how to modify the widget areas for the homepage. Here are other basic tutorials on how to edit your WordPress site.

Section Tempalates (Divi)

You can use any of these templates for different sections of your site.

Navigation styles

Top Navigation

Must all fit on one line. You can tighten up the space in-between the tabs by following these few simple steps.

Left Nav

The left nav is optional but if used the max amount is 8.

Web Accessibility

    Introduction

    Western Oregon University web accessibility guidelines have been created to fulfill Western Oregon University’s ongoing commitment to establish and maintain a learning environment with minimal barriers. In order to achieve such an environment, these guidelines have been designed to provide accessible web material and digital content to persons of all backgrounds and abilities.

    Legal Requirements

    Web accessibility guidelines have also been created to meet ethical and legal standards set by Section 504 of the Rehabilitation Act of 1973 and Section 508 of the Rehabilitation Act Amendments of 1998. These laws prohibit Western Oregon University from discriminating against individuals with disabilities and require all material intended for presentation to the general population to be presented in an accessible format for anyone.

    Full details on best practices

    Best Practices to Address the Needs of Persons with Disabilities:

    Auditory Impacts or Deafness:

    • Provide transcripts of audio content and Closed Captioned or Full Text transcripts for video materials where applicable.
    • Transcript of audio descriptions (for persons who are DeafBlind)
    • 3Play Media (http://www.3playmedia.com/): cost-effective technique for Captioning video content.

    Cognitive Impacts:

    • Do not use flashing or strobe content.
    • Disable auto-play on media.
    • Provide easy-to-use controls and navigation schemes.
    • Employ consistency in labeling and navigation, where possible.
    • Use the clearest, simplest language appropriate to the content.
    • Provide control over all time-based media (i.e., slideshows).

    Visual Impacts and Blindness:

    • Use well-structured and semantic HTML.
      • Here’s an example: imagine you have a heading for your website that says “Welcome to My Awesome Recipes!” Instead of using `<div>Welcome to My Awesome Recipes!</div>`, you would use `<h1>Welcome to My Awesome Recipes!</h1>`. The `<h1>` tag tells the browser (and anyone reading the code) that this is a very important heading.
        Using the right tags makes your website code cleaner, easier to understand, and even helps things like search engines and screen readers for people with visual impacts understand your website better!
    • Use meaningful ALT attributes on images.
      • Adding “alt text” to your images is like giving them a short, descriptive caption so people who can’t see them still understand what they’re about.
    • Do not use tables for layout purposes.
    • Use headings in chronological order (think if someone had the page only displaying in a list format)
    • Label all form elements.
    • Properly linearize content, especially forms to ensure a logical flow of information that can be easily understood and navigated by assistive technologies and keyboard users.
    • Provide sufficient contrast between foreground and background elements.
      Vischeck (http://www.vischeck.com/): Simulates colorblind vision.
    • Use appropriate font types, proper spacing, and use of bold, italic and color to make the content easier on the eyes to read.
    • Avoid using pop-up windows.
    • Do not use Flash™ for navigation and avoid using it in other places, where possible.
    • Provide access keys and “skip to content” links.
    • Use WAI-ARIA landmarks where possible.
    • Position hidden content of-screen instead of using “display:none.”
    • Provide additional guidance and controls using of-screen content (i.e. descriptions of the page layout and available access keys).
    • Provide transcripts of audio content and Full-Text transcripts or Captioning for video materials where applicable.
    • Do not use flashing or strobe content.
    • Provide easy-to-use controls and navigation schemes.
    • Employ consistency in labeling and navigation, where possible.
    • Use the clearest, simplest language appropriate to the content.
    • Provide control over all time-based media (i.e., slideshows).
    • Audio descriptions.

    Non HTML documents

    Many types of document types may not be accessible to screen readers including the following:

    • Images
    • PDF’s
    • Word documents
    PowerPoint
    • Flash or streaming video

    Sometimes the software used to create specific file types includes features which allow a user to add accessibility functionality. The problem is that many times using these features properly takes longer than creating the original document.

    The easiest method for making a document accessible is to copy the text from the file and paste it into a standard web page. This is especially true for Microsoft Word files with minimal formatting and imagery. Documents designed with page layout software such as InDesign or Quark many times depend on graphic elements to convey their message appropriately. The design staff within the Marketing & Communication office at Western Oregon University will assist individuals wishing to convert graphic layouts of marketing material into an accessible webpage.

    Where to check pages for accessibility

    Development tools

    While creating websites, developers throughout the WOU –System should adopt and exceed the web standards established by the Worldwide Web Consortium (W3C) for the creation of online content. Specifically consult the W3C’s page on accessibility (http://www.w3.org/TR/WCAG/)

    Web applications and tools for webpage managers include:

      Additional Resources

        Reference material

        Section 508
        Disability Info.gov

        Contact

        For website accessibility issue with Western Oregon University’s website contact the MarCom office | 503-838-8215.

        For accessibility related services contact Office of Disability Services | 503-838-8250.

        Linking out to other sites

        If you are adding content to your site that is repetitive and already exists on another WOU site, please link to their page so we can eliminate duplicate information and needing things to be updated in two separate places.