YaleSites 2016 Theme Upgrade

What

If your YaleSite is currently using an older theme, consider upgrading to one of the YaleSites 2016 templated themes.

Why

Moving your site to a newer theme will improve the look and branding (consistent with newer Yale websites), make it more mobile friendly, and improve the accessibility of the site.

How

Upgrading a theme is typically done on the development (DEV) site, (dev.sitename.yale.edu). That way you can see your content displayed with the new theme before the world does and make any necessary adjustments.

First you need to request a site refresh. That means all content on the production site will be copied to the development environment at the time the refresh is executed. The newest themes along with the 2016 theme module will also be added to DEV.

Once you enable the module and 2016 theme on DEV you can see if any layout adjustments need to be made. Once those who approve the site do so, you can submit a Go Live request. 

IMPORTANT NOTE: Whenever content is copied from one site to another it replaces what’s there. For this reason we recommend a content freeze until the Go Live request is complete. If you need assistance with this process please reach out to yalesites@yale.edu.

Accessibility Issues and Tools for YaleSites Themes

Testing for Accessibility

Check Mobile Menus

Be sure menus that use the Superfish module display properly on a mobile phone.

Color Contrast

The 2016 themes were designed with WCAG 2 level AA requirements for color contrast in mind. If a site has a lot of styling added, CSS rules may need to be disabled or adjustments made to avoid color contrast and issues.

Tools and Best Practices

WebAIM Contrast Checker

Download Colour Contrast Analyser

Use the eyedropper tool to select foreground and background colors. The WCAG 2 levels for normal and large text show with check marks which levels pass, and which fail to meet the requires minimum aspect ratios.

  • WCAG 2 AA = 4.5:1 for normal text.
  • WCAG 2 AA = 3:1 for text for large text
  • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.