Designing and Building an Accessible, Responsive,

University Website Template… Together

Craig Hyatt @chyatt

Randy Oldham @roldham

Background: AODA

What is AODA? Accessibility for Ontarians with Disabilities

Act Provincial legislation (June 2005) Mandatory accessibility standards to

improve life for people with disabilities One of the Integrated Accessibility

Standards is dedicated to web accessibility: Information and Communication Standards

Enforces WCAG 2.0 A and AA compliance by set dates

Background: WCAG

WHAT IS WCAG? Web Content Accessibility Guidelines versi

on 2 Developed by the

W3C: World Wide Web Consortia They create the standards which guide

and govern the entire internets… all of the internets: HTML, XML…

The take home: The Provincial Government pointed to worldwide standards to ensure accessible websites

AODA Compliance Date…

Beginning January 1, 2014: If you launch a new public website or

your existing site undergoes a significant refresh, the site and any of its web content published after January 1, 2012, must conform to the World Wide Web Consortium Web Content Accessibility Guidelines (WCAG) 2.0, Level A (*specified public institutions)

An Example…

Library Website

Last redesign: 2007 UG template changed Had ballooned to 75,000 HTML files No… I’m not joking… Horribly non-compliant with AODA Hand-coded HTML and Coldfusion Decided to redesign, make AODA

compliant, and migrate to Drupal While we’re at it… Make the website mobile-friendly!

Opportunity for Collaboration

One little problem…we’d never created a Drupal template, let alone a responsive one…

OPPORTUNITY FOR COLLABORATION!

UG central IT provider (CCS) had created the non-responsive Drupal template already used across campus

CCS already working with other clients to help make their hosted sites AODA compliant

Collaboration

CCS & Library both under CIO umbrella

Requested support from CIO/Chief Librarian (REBECCA GRAHAM)

Project approved! The Library, with our UX expertise, partnered with CCS, with their Drupal expertise and extensive experience with UG customers

Mobile Web Design

Two main ways developers make websites mobile-friendly:

Serve up an alternate website

Make the website RESPONSIVE

Two Mobile Methods

Method 1: Serve up an alternate website

m.something.com

A completely different website

Pain to maintain two websites

Different user experience

Two Mobile Methods

Method 2: Responsive Web Design ‘Mobile first’ Design entire website to meet user

needs…succinctly Website detects the screen size of the

device you’re viewing it on, and optimises the display of content for that device’s screen size

No content REMOVED…display is OPTIMISED

No need to maintain two separate sites (example)

DEMOS

Cornerstone Template

Header Challenges

Header Solutions (1/4)

Header Solutions (2/4)

Header Solutions (3/4)

Header Solutions (4/4)

Mega Menu

Keyboard Navigation

Twitter Integration

YouTube Integration

CSAHS

“Users commented how the new mega menu made it easier for them to find what

they were looking for, faster.”

Designing and Building an Accessible, Responsive,

University Website Template… Together

Craig Hyatt @chyatt

Randy Oldham @roldham