Nova-I.T.

Web site rebuild/upgrade to web standards

Skip down to:

Project notes

Project type

A tear-down and rebuild web design job, bringing web standards to a non-standards ‘old school’ site.

Web address

www.nova-it.co.uk

Requirements

The client was happy with the site’s existing look and feel, but was aware that it had some underlying issues. Built a few years earlier using out-moded table-layout techniques, the site was not very accessible to screen reader software and failed to scale properly when text was enlarged by the user.

All these things needed to be corrected, but the client was anxious to maintain the ‘panel in the middle of the screen’ look of the site together with the fixed height to width ratio.

Challenges

Built in an old-fashioned way, this was never going to be a ‘tweak’ job; the entire site’s code needed to be rebuilt from scratch in order to separate the content from the visual layout using semantic markup for the content and CSS for the presentational styling.

The code would have to be made as accessible as possible with under-the-hood additions that would benefit assistive technology users even if the everyday visitor would never see them. Every image would need to be recreated and the site would need to be constructed in such a way that it could scale in elegantly if the user chose to use a larger or smaller type size than the pre-set browser defaults.

And, of course, like all good web sites, it should be completely useable to somebody who has stylesheets turned off in their browser.

Solution

We extracted all the content from the site, which happily was not overly large — a couple of dozen pages or so — and started to use modern coding methods to recreate the outer façade of the original. It was a little like building a replica of a Model T Ford where everything under the metallic outer skin was a Toyota Prius.

Instead of fixing the site’s measurements in terms of screen pixels, we expressed all widths and heights in ems, a measurement of type size. Now, the dimensions of the site would be proportional to the text, so if the user chose to increase the text size in their browser, the site would expand accordingly and there would be none of the nasty visual crashing together that the old site exhibited under such conditions (see the images for this case study).

By the end of the process the client had a site that looked, outwardly, almost identical to their previous one… but now it was accessible, quicker to load, easier to maintain, and adapted nicely to the visitor’s chosen text size.

Images

Images

Click an image to open a larger version in its own window.

Before

screen shot of the client’s previous site with text at default sizes screen shot of the client’s previous site with text enlarged by the user By comparing these two screenshots you can see how the clients old site collapsed visually when the text was resized by the user.

The first image is the old site with default text settings on the user’s part.

The second image is the site when the user has enlarged the text in their browser.

Table-based layouts are notorious for this sort of catastrophic failure, especially when the table is rigidly held to a fixed height as was the case here.

After

screen shot of the client’s rebuilt site with text at default sizes screen shot of the client’s rebuilt site with text enlarged by the user By way of comparison, these two images show the site after being rebuilt by Shark Attack.

Again, the top image shows the page with default text size settings; the second one shows it with the text size enlarged.

What is not obvious from these scaled-down screen shots is that in the second image the entire site has scaled in the browser window. The height-to-width proportions have been maintained, the site has simply grown in all directions to accommodate the user’s chosen text size.

case studies

Copyright © 1999-2017 Shark Attack. All rights reserved.