The Personal Disquiet of

Mark Boulton

The new Snooch - the solution

– November 17th, 2003 –

The solution to the problem.

How I did it and why I did it - the way I did.

So, there was a brief. (there should be a link in “related posts” on the right, if there isn’t there’s still bug testing to do ;-))

First off, there was information architecture. I adopted a UCD approach to the design of this site, thought of my audience and tried to adopt some simple navigational models on which to base the site. Having decided on Movable Type as the engine to drive the publishing, there is a certain amount of navigational stuff associated with Movable Type. Luckily for me, Movable Type is used throughout the world by designers like me, so the navigational models in these types of sites are pretty consistant.

After I.A, came the initial design phase which included a bit of working with the “brand” and taking the snooch design forward. I wanted a simple structure relying on strong type, colour and navigation to carry the content. Work is currently ongoing on the portfolio section, it’s proving a bit tricky.

Once the design was finalised I began building the client side prototype for make sure the css implementation was correct. There are a number of cutting edge css techniques emplyed in the site, and a few planned. The navigation model uses a moving background image within a masked div, using the css box model. Works really well and most importantly it’s markup is semantically correct. Which bring’s me neatly onto the XHTML.

The templates use XHTML and Movable Types tags to build the content. The tags are coded semantically so that if this site was to be read through a PDA or by a screen reader, the order and heirachy with which the document is authored will be retained. Basically, it’s removing nonsensical gubbins from your markup - such as content and presentational stuff.

- XHTML & MT Tags - Client side code.
- CSS - handles design and presentation.
- MT - Handles content.

So, now i’ve got the basics done i’ll be adding the other sections along with some useful functionality (both client side and server side). If you got any suggestions for improving the site, let me know.

Filed in: markboulton-co-uk.

Further reading