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:

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.

"I followed your link and saw your new(?) site design -- gorgeous! Really splendid navigation and great use of CSS in a standards-compliant package.

Your site represents a model that others in the group should be aware of!"

Dennis Kessler, e-Government consultant, RocketSurgery.

Navigation bar

6 Beaufort Court
London E14 9XL
Tel: 020 7093 6190