Quattro Design Architects are a multiple award-winning architectural practice, based in Bristol and Gloucester. They have a special interest in sustainable design, housing, health, community and education projects. Their clients include local and regional governments, national agencies and education authorities amongst others.
The initial brief asked for a conversion of the original site 'as is' to current accessibility standards for disabled and non-disabled visitors. The original design for their web site was visually strong - it was a product of intensive input by the directors who are all architects and designers in their own right. So the visual design was already done. Unfortunately, the distinctive visual design was delivered by an interface built with Flash and HTML tables / frame sets. That meant that much of the site was hidden from search engines, users could not easily bookmark the individual pages, usability was sacrificed to design and accessibility support for disabled visitors was nil. This was a direct contrast to the qualities of the business itself which is noted for multi-purpose, sustainable, accessible architecture.
The new site needed to be accessible, keep the existing design framework and be easily updated. After an audit of the original site we identified the following questions that we needed to answer:
It sounded like a challenge so we took it. In collaboration with the Directors we developed a brief that defined how the site would change dramatically behind the scenes but retain the visual appeal they had worked long and hard to create. Development commenced.
The colours, typography and fundamental layout of the web site were reproduced in semantic XHTML and CSS to the WCAG (Web Content Accessibility Guidelines) standards from the World Wide Web Consortium. That answered the first question: Accessibility was now supported in compliance with:
Not only would disabled or imapaired users benefit but non-disabled users would also benefit from an easier-to-use interface and easy-to-find content. The only remaining issue was the contrast of red on gray text for the logo but as this was a key part of the original design Quattro decided to retain it. Users who found the contrast difficult also were provided with access to a plain text version of the same page that they could swap between.
During that initial design phase the existing content was inserted in to page 'blanks' so we could precisely match the new pages to the original layout elements that were to be retained. Original CSS styling had to be developed based on existing techniques from the excellent web standards community that delivered complex layouts like the project areas links: On the home page they feature a hyperlink image replacement within multiple unordered lists to achieve the layout required. Using techniques like these with others written just for Quattro, page templates were designed that would eventually be populated with information and images from the content management system.
The usability of the web site was changed dramatically. Extraneous splash pages were removed. Flash menus and 'calls to action' were rebuilt in XHTML and CSS. Click-throughs to reach the content were reduced by 75%. Key accessibility and usability functions were included like inline text-zoom and plain text versions, a site map and site search facility and contextual links on every page. The second question was answered.
The content management system (CMS) was built specifically for the Quattro site based on our existing AMOS applications. AMOS produces content that is easily found by search engines. Costs for Quattro were dramatically reduced by repurposing existing functionality to power the projects database, news and other content. The content was then revised by Quattro internally, with new projects being added and various edits taking place site-wide.
The new site is fully editable on every page with information on every aspect of Quattro's work, its methods, qualities and clients. The projects database has the ability to display results in many different ways and the content can be updated quickly and easily with the aid of a detailed step-by-step guide. The guide and the CMS were both created to make site maintenance fast and simple for all the stakeholders within the company. The third question was answered too with new content also added to bring the site up to date.
So now, clients and visitors to quattrodesign.co.uk can search for, find, access and use the information faster and more easily. Disabled accessibility is fully supported as far as possible within the existing WCAG guidelines and the brief. We've taken a design and reworked it to be editable and future proof for the benefit of all.
The final stage of collaboration with Quattro means advising on ways of communicating the changes to clients and drawing up a plan for potential future development of the content, the marketing and the design of the web site. Expect to see more great content from Quattro in your browser soon. This what Hugh Nettlefield, Director of Quattro had to say about us:
Quattro are very pleased to have been working with Grow Collective; we have been able to build up a brilliant and really effective working relationship, even though our demands have been quite difficult at times. Our needs and requirements have been understood and interpreted well. We are delighted with our new website which has undergone complete reconstruction and is now fully accessible and easy to navigate.
Thanks goes to Greg and Tom of Coast for the invitation to do the project, and special thanks go to Hugh Nettlefield, Director of Quattro Design as our main liason with the practice for his positive collaboration throughout.
Use RSS to be notified when we publish an article. What is RSS?