| WorkShark Attack: a design studio

Skip down to:

Project notes
Images

Project notes

Project type

Web site design.

Website

www.dommee.co.uk

Requirements

Dom Mee’s web site was several years old, inflexible, and entirely built using tables. With a national US tv appearance coming up he rightly anticipated a surge in traffic to the site, and wanted to make sure that the site was up to the job. What began as a request to simply update some information ended up, three days later, and after much discussion, as an entirely redesigned and rebuilt site.

Challenges

The biggest challenge here was the intensely tight deadline. Three days is not much time in which to take an existing site and completely redesign it. But the TV appearance was not going to move in the schedules, so that was all the time that we had.

Solution

Shark Attack had already been talking to Dom about merging his existing web site and his Typepad blog into a single online entity. When this redesign came along there clearly was not enough time to undertake such a far reaching set of changes, but we did decide to set the scene for the evolution of the site at a later date.

As a result, the site is laid out in a blog-like manner, even though it is in fact a collection of static pages. We dropped the pre-existing ‘DM’ monogram — Dom had always thought that it looked like the Dangermouse logo — but retained the use of the vivid ‘life-jacket’ red as an accent colour. Everything else became cool blues, white and off-whites, with gradient of the page background designed to invoke the idea of the drop-off into deep, oceanic water.

Of course the site is built entirely to web standards with accessibility touches such as skip links placed first in the source code, suport for keyboard navigation,

When Dom decides to make the move from a static site to a fully dynamic blog or CMS-based approach, the layout that he now has should serve him well as a starting template with only minor tweaks required. In future-proofing the site in this way (as well as by building to web standards with al the benefits thereof) we think that we pulled a pretty good rabbit out of the hat for Dom in only 72 hours.

Back to tabs

Images

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

Before

The funny thing is, this screenshot looks fine. As is the case with many web sites built using ‘old-school’ techniques, a casual glance will reveal very few indications of the problems under the surface.

Closer examination, however, told a different story. The original site’s meta data showed that it had been built with a WYSIWYG ‘drag-and-drop’ style editing application that predated the wider adoption of web standards, and so the code that the application created behind the scenes was less than elegant. Tables, non-accessible images standing in for text, missing ALT attributes, fixed height boxes that could not expand if text size was increased… all these had to go.

After

This is the site after Shark Attack rebuilt it from the foundations up. The blog-like layout was intentional, as this static site was intended to be a half-way house en route to becoming a dynamic database=driven one.

The layout was made elastic; that is, the dimensions are linked to the text size the entire layout expands or shrinks as the text size is increased or decreased by the user.

Back to tabs