Websites designed with users in mind

Case study: Surfability website redesign

Just like any other company, we must revisit our own web presence on a regular basis in order to keep it fresh, to update content and to ensure that current best practice techniques are being employed effectively. At Surfability we are always learning, always improving, and it is vitally important that our website serves to demonstrate our skills and reflect the current 'state of the art'.

Problems with the old site

The old surfability website was released in July 2002 and was designed with usability and navigability in mind but, unfortunately, insufficient thought was given to its accessibility to disabled users and handheld devices. Web pages were laid out using complex, nested tables, which had the desired visual effect but made the resulting HTML code dificult to read.

The overly complex code presented an obstacle to screen readers and search engine robots reading our web pages, both of which had to wade through a long navigation bar on each page before getting to the content. This resulted in a lower search engine ranking and, more importantly, a tedious browsing experience for any blind users visiting the site.

Furthermore, certain design features, such as the practically redundant navigation bar at the top of the page, required a mouse to be used. These features were not very helpful to visitors with restricted motor control and other physical disabilities.

Benefits of the new website

After about a month of intensive R&D, our new, improved website was released in February 2004. It benefits from:

• Tables no longer being used for layout so that visitors using a screen reader can quickly get to the content.
• A home page which is less of a site map and is more focussed on our core specialities.
• A simpler, more corporate look-and-feel, with fewer colours.
• A revised hierarchy and file structure with yearly news archives, and a clearer separation of our general ITC solutions and web improvement services.
• Additional content that provides visitors with a better understanding of what we do and why we do it.
• XHTML standards-compliant, accessible web pages that adhere to WAI guidelines and satisfy the requirements of the 1995 Disability Discrimination Act.
• Access keys which can be used to navigate to some pages within the website.
• The addition of an 'invisible' link at the top of each page so that users of screen readers can quickly jump to the site navigation bar.

Comparing the old and new websites

The two sets of images below show how our old and new websites appear in both a standard visual web browser and a text-based browser, which uses the alternative text for images as defined in the web pages, and therefore provides sighted users with a rough approximation of how a screen reader would read out the web page to a visually impaired user.

Images of the old website

Screenshots for the old "about us" page are presented below:

• 
• 

Sighted users might find the text-based version quite acceptable, but a blind user would have to 'tab' through all the entries in the navigation bar before getting to the content of the page itself, and they would have to do this on every page in the site.

Images of the new website

Screenshots for the new "about us" page are presented below:

• 
• 

The new website has as many graphical features as the old website, but it is much easier to read in a text-based browser and, consequently, much easier for screen reader users to navigate and listen to.