1 / 27

Designing and Building an Accessible, Responsive, University Website Template… Together

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)

calum
Download Presentation

Designing and Building an Accessible, Responsive, University Website Template… Together

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham

  2. 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

  3. Background: WCAG • WHAT IS WCAG? • Web Content Accessibility Guidelines version 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

  4. 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)

  5. An Example…

  6. 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!

  7. 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

  8. 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

  9. Mobile Web Design • Two main ways developers make websites mobile-friendly: • Serve up an alternate website • Make the website RESPONSIVE

  10. 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

  11. 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)

  12. DEMOS

  13. Cornerstone Template

  14. Header Challenges

  15. Header Solutions (1/4)

  16. Header Solutions (2/4)

  17. Header Solutions (3/4)

  18. Header Solutions (4/4)

  19. Mega Menu

  20. Keyboard Navigation

  21. Twitter Integration

  22. YouTube Integration

  23. CSAHS

  24. “Users commented how the new mega menu made it easier for them to find what they were looking for, faster.”

  25. Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham

More Related