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.

The Provincial Resource Centre for the Visually Impaired (PRCVI) has launched a newly designed and built website. The site features up-to-date resources for teachers of the visually impaired, parents, and school district personnel working with blind and visually impaired students in British Columbia.

The previous version of the website was in use for about three years, and was mostly generated from a DB/TextWorks database using canned queries for content for individual pages. While this unique approach allowed staff to use a program they are quite familiar with to update content, it didn't provide the level of control over page content that was needed.

The new version is a traditional website - several dozen pages in a three-level hierarchy. The site is a responsive HTML5 design built from the Bootstrap framework and designed to work equally well on both desktop browsers and mobile devices. It has also been tested to meet Web Content Accessibility Guidelines, which is especially important because PRCVI serves visually impaired users.

PRCVI continues to offer a library catalogue and database of vision teachers and other contacts through Inmagic DB/TextWorks and WebPublisher PRO and interfaces built from the Andornot Starter Kit, all tightly integrated into the new site.

"We are delighted with the newly upgraded and enhanced PRCVI website - Andornot have done a spectacular job, they were able to accommodate all our requirements and offer great suggestions at the planning stage.  We were so pleased with the initial design presented we needed to make very few changes. Now the website is so much easier to use, more visually appealing and inviting to our clients. Great job." Says Chris Marshall, Manager, Provincial Resource Centre for the Visually Impaired (PRCVI) and Accessible Resource Centre-British Columbia (ARC-BC).

Contact us to discuss upgrades to your website to meet current standards for accessibility and mobile access.

The Accessible Resource Centre – British Columbia (ARC-BC) is a collection of alternate format materials of recommended resources for the British Columbia K-12 curriculum that serves every school district in the province.

ARC-BC is managed by the Provincial Resource Centre for the Visually Impaired (PRCVI) and works in consultation and partnership with BC school districts, other alternate format producers, and publishers to provide recommended and requested materials in a timely manner.

ARC-BC collects, produces and distributes high quality digital and alternate format materials for use by students with perceptual disabilities as a service to BC school districts. Educators in all school districts are able to search this online repository or "digital library" to find and download alternate format resources related to the BC curriculum.

By providing alternate format versions of the standard print materials used in the BC curriculum in a centralized, coordinated and secure manner, BC educators are able to quickly locate and acquire the alternate versions needed, without having to scan and edit the materials while ensuring they adhere to copyright law.

Andornot worked with ARC-BC staff to specify, design and develop the first version in 2008. Numerous changes and enhancements have been made every year since, to improve workflow and resource access for users and ARC-BC staff.

The public face of the site gives participants a fast and flexible search, a shopping cart for downloads, and a personal area to manage their account profile, search alerts, and download history. Digital resources can be downloaded in a variety of formats for students with perceptual disabilities, and participants have the opportunity to improve the collection through the submission of new or improved material.

On the admin side, the site features online data entry with advanced file upload, user account administration, and site activity reporting.

From a technical perspective, the system consists of a .NET web application and MS SQL back-end, as well as full text searching using Apache Lucene.

Contact Andornot to discuss development of custom applications such as this.

If you are developing a digital library that caters to not only the various needs of your target audience but also to their differing abilities and use of adaptive technologies, then here is an online tool for you. The ATRC Web Accessibility Checker is an experimental service provided by the Adaptive Technology Resource Center (ATRC) at the University Of Toronto. It is also a model system that demonstrates how web pages can be checked for accessibility problems. The accessibility checks in this system are based upon the proposed Open Accessibility Checks (OAC), a universal series of tests that may be applied to HTML pages to determine their compliance with accessibility standards. This accessibility checker also supports W3C's Evaluation And Repair Language (EARL) standard.