designing and building an accessible, responsive, university website template… together craig...
TRANSCRIPT
![Page 1: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/1.jpg)
Designing and Building an Accessible, Responsive,
University Website Template… Together
Craig Hyatt @chyatt
Randy Oldham @roldham
![Page 2: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/2.jpg)
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
![Page 3: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/3.jpg)
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
![Page 4: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/4.jpg)
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)
![Page 5: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/5.jpg)
An Example…
![Page 6: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/6.jpg)
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!
![Page 7: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/7.jpg)
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
![Page 8: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/8.jpg)
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
![Page 9: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/9.jpg)
Mobile Web Design
Two main ways developers make websites mobile-friendly:
Serve up an alternate website
Make the website RESPONSIVE
![Page 10: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/10.jpg)
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
![Page 11: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/11.jpg)
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)
![Page 12: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/12.jpg)
DEMOS
![Page 13: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/13.jpg)
Cornerstone Template
![Page 14: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/14.jpg)
Header Challenges
![Page 15: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/15.jpg)
Header Solutions (1/4)
![Page 16: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/16.jpg)
Header Solutions (2/4)
![Page 17: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/17.jpg)
Header Solutions (3/4)
![Page 18: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/18.jpg)
Header Solutions (4/4)
![Page 19: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/19.jpg)
Mega Menu
![Page 21: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/21.jpg)
Twitter Integration
![Page 22: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/22.jpg)
YouTube Integration
![Page 23: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/23.jpg)
CSAHS
![Page 24: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/24.jpg)
“Users commented how the new mega menu made it easier for them to find what
they were looking for, faster.”
![Page 25: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/25.jpg)
![Page 26: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/26.jpg)
![Page 27: Designing and Building an Accessible, Responsive, University Website Template… Together Craig Hyatt @chyatt Randy Oldham @roldham](https://reader035.vdocuments.us/reader035/viewer/2022062516/56649dc45503460f94ab72ef/html5/thumbnails/27.jpg)
Designing and Building an Accessible, Responsive,
University Website Template… Together
Craig Hyatt @chyatt
Randy Oldham @roldham