Responsive Web Design and Accessibility
In our web development work, two concepts have become increasingly important to our clients and to us over the past year or two: responsive web design and accessibility. If you're not familiar with these ideas, or your own web sites and applications don't meet current standards for both, read on!
Responsive Web Design
Responsive web design is the practice of designing and developing a website that works as well in a desktop browser as on a tablet, smart phone or other size of screen. No matter how the user accesses the site, site elements and features rearrange themselves for best presentation at that size. This might involve hiding some elements or removing functionality that doesn't work well in one environment (such as removing pop-up windows on a phone view).
The screenshot below shows our new website as it appears on a phone or other small device. As you can see, the several columns of information are rearranged vertically for easier scrolling, the logo image is smaller, and the menu has collapsed, but is available with a click or touch.
To reduce cost and speed up development time, we often use all or part of a framework such as Twitter Bootstrap or Zurb Foundation. Both are excellent, customizable, responsive web frameworks with all the CSS and javascript needed to quickly spin up a site or apply to a web application.
Examples
You can experience responsive web design for yourself at any of these sites. If you don't have a tablet or phone handy to access them, just resize your desktop web browser to simulate one. As you make your browser narrower, watch how the site responds.
- Andornot's new website
- Provincial Resource Centre for the Visually Impaired
- DuPage County Law Library - using the Andornot Starter Kit
- Burnaby Art Gallery Collections - using the Andornot Discovery Interface
Accessibility
Accessibility refers to making web sites and applications usable by people of all different abilities. This includes people with visual impairments who rely on high contrast or screen reading software to access content, or who use only a keyboard or spoken commands for navigation.
In all our web projects, we aim to meet Web Content Accessibility Guideliness (WCAG) 2.0, Level AA standards. Using tools such as the WAVE Toolbar, and careful use of CSS and HTML, it's not too hard to meet these standards, or to get very, very close. It's more challenging when integrating a web application, such as a library catalogue, with an existing website that doesn't meet these standards. Often, though, this is an opportunity to help upgrade the entire site to be accessible to all users.
You can read more about a recent accessibility project in this blog post about the Canadian Conservation Institute library, and try out a fully accessible site here: http://library-bibliotheque.cci-icc.gc.ca/en/cci-icc/lib-bib/search-recherche/.
Making your website accessible to people where, when and how they want to access it is no longer a luxury or "nice to do if there's time" part of a project. With the tools available, it's often less effort to make a responsive website than a non-responsive one, and with ever more users not sitting at desktop PCs, it's imperative!
Andornot would be pleased to evaluate your current website, library catalogue or other web application and advise on how well it meets standards for accessibility and mobile access; just drop us a note and we'll set up a time.