Earlier this year, the McGill Universities Health Centre Libraries launched a new website with a fresh, modern design. At the time, Andornot updated the library catalogue we host with a matching design.

As is often the case with a new website launch, after 6 months of real-world usage and feedback from users, a modest tune-up is often needed. With changes occurring to the main MUHC Libraries website often, rather than recreate them each time in the hosted catalogue, we took this opportunity to rebrand it with a simpler design, but to use a responsive web framework. With this, the site is as accessible on a smartphone or tablet as on a full-size desktop web browser. 

The library’s book catalogue is available directly at http://muhclibraries.andornot.com/Books/Default.aspx or though the MUCH Libraries website at http://www.muhclibraries.ca  As before, it’s available in both English and French, shows Google Book covers when available, and offers users a selection list to save or email records as they search. The site now also includes up-to-date loan information, pulled directly from the underlying Inmagic Genie system. The entire interface is built from the Andornot Starter Kit.

Contact us to update your search interface to a responsive one, accessible from any device.

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.

Hip, hip hooray! Break out the bubbly! Andornot has launched a new website for… ourselves!

If you’re reading this blog post on our new site, you can see the fruits of our labour for yourself, and perhaps nothing more need be said. However, since this was long overdue, and a long process, perhaps you’ll indulge us and let us tell you the full story.

Why We Did This

All year long we work with you, our clients, to update your websites and applications. We’re usually very pleased with the results and love to talk about our work. Alas, we don’t always have time to practice what we preach and somehow never quite got around to updating our own website. We’ve always been good about blogging, tweeting and emailing about topics and projects we think you’ll be interested in, but a website re-fresh was somehow put off for another day. Does this ever happen to you? 

Finally we reached the breaking point: our somewhat older eyes could no longer read the text on our site, with its rather small font size! It had to go, and along with it, an aging design. It was time for something new.

How We Did This

We spent some long sessions discussing the look we wanted and came up with a list of other websites that we liked.  We all have very strong opinions, but fortunately we all agreed that we wanted a simpler, minimalist style.  Ted hand-crafted the layout and design based on our overall design goals, and using the Zurb Foundation responsive web framework. This ensures the website is as usable and readable in a desktop web browser as on a tablet or iPhone, as this is part of our standard approach to web design now.

We continue to use the Umbraco Content Management System and blogengine.net to manage our site and blog, both hosted in our data centre. Ted built up the new site in each of these web applications.

After seeing our old content in our new design, Jonathan revised the site architecture and rewrote much of the content. He tried to provide clear and concise descriptions of the key solutions, products and services we provide, as well as incorporate details of projects from our blog that will be of interest to you.  

Peter re-jigged the popular Andornot Search Cannery Wizard for the new site, so it continues to help you created canned queries into Inmagic WebPublisher PRO databases and the Genie integrated library system.

Kathy reviewed, critiqued and niggled over formatting and content changes just as with all the designs since the very first Andornot website 18 years ago.

And together, many months later, we pushed the big red button and pulled the large silver lever to launch the site. Hence the champagne.

What Came Before

Thanks to the Internet Archive Way Back Machine, we have a collection of previous versions of our site.

Remember that the design of these older sites are the product of their times, much like your high school yearbook photo. They’re embarrassing, but nostalgic.

How you Can Do This Too

Hire Andornot and relax.

or

• Get yourself a content management system; it really does make website management easier. 
• Make a short list of sites you like, for both their design and their content. 
• Find a designer to create a look unique for you (or purchase and tweak one of the many excellent pre-created design templates). 
• Find a developer to craft the HTML and CSS, and integrate it into your content management system or build up static web pages.
• Review, revise and rewrite your content to be sure it speaks to visitors/users/staff.
• Launch!

Let us know what you think of the new site, and please feel free to comment on any of our blog posts and subscribe to our newsletter. If you need assistance updating your own website, we’d be happy to help!

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.

Although much of our work is with databases and web search applications we also help clients with other information organization tasks. Recently we were approached by the Harry Lash Library at Metro Vancouver to help redesign an intranet site. 

The Problem

Metro Vancouver has an extensive SharePoint-based intranet with detailed team sites for the many departments and groups within the large organization. The library's presence was small, with a large amount of information crammed onto a few pages, and library staff, as in many small libraries, had more urgent priorities and an intranet redesign never quite made it to the top of the daily task list (sound familiar?). This meant that the website was stale, visually unappealing, and lacking a lot of useful information that staff had been accumulating over the years.

The Solution

Library staff approached Andornot to help move the intranet redesign forward. We met with staff to understand their goals for the site – what sort of information they want to provide Metro Vancouver staff, what resources they manage and services they provide, and how they’d like to present themselves to Metro Vancouver.

Based on these meetings, we drafted a new site architecture – a two-level, 15-20 page organization of content that describes who and what the library is, the many print and electronic resources it manages, and the services it provides to Metro Vancouver staff. We also included topic pages for specific departments within Metro Vancouver to guide staff to resources of greatest use to them, including materials within the library's Inmagic Genie catalogue.

Working within the existing SharePoint site, we created the pages from the new hierarchy and populated them with content. This included newly-written and assembled materials, as well as information that was previously buried in other documents. In particular, we developed canned searches into the catalogue for journal titles by subject, replacing a labour-intensive, stand-alone list that had existed on the previous website.

 

 

Once the new site was about 80% complete, we scheduled a round of usability testing. We invited staff from a few departments to preview the new site and assigned them information discovery tasks. We watched as they navigated the site and noted where they had trouble, then modified some aspects of the site to smooth over the rough patches. This level of usability testing is simple to perform, but provides valuable feedback. A more extensive survey of the information needs of Metro Vancouver staff is also planned.

Once the site was as close to complete as possible (and of course, it will continue to evolve), the library held a launch party, complete with muffins and cupcakes, in the library.

 

 

"The launch went really well – we had almost 70 people! I'm really glad we did the launch as a way of 'marking' the event. People really seemed to like the website and I picked up a few suggestions for content." says Thora Gislason, Metro Vancouver Corporate Librarian.

 "I owe you both a huge thank you for that initial meeting that got me motivated and to Jonathan for drafting the navigation, doing the usability testing, and kick-starting the population of content!!"