I wanted to write a little about the web design of this site, as it has also been the result of some serious thought.

HTML provides considerable freedom in site design, but this freedom comes at a price: chaos! Over the years user interfaces have been steadily improving, with consistency and predictability and efficiency as major goals.

Web pages are being designed by a very much larger number of people generally focussed on the content rather than considering the user interface aspects. The result is that we see a lot of websites that are close to unusable, even when produced for a serious purpose. To those of us who have spent a long time in user interface design and construction before the web, this is... well... exasperating. I don't claim to be a big expert in these fields, but I certainly want to avoid the worse excesses that can be seen on sites such as Web Pages That Suck!.

So here are my guiding principles:

Visual clarity

It's important not to allow the need to make an exciting visual impact override the reader's ability to actually understand what they're looking at. A busy background image draws attention away from the message on the site: background colours need to be cooler and less saturated than foreground colours, and there should be good contrast between the two.

Motion on the page draws the eye, so it should be drawing it to whatever is most important on the page at the time. On some sites, this is the advertising, but in most cases motion on a page has negative value!

There should be a clear distinction in kind between content, decoration and controls. Content is the stuff that actually varies from page to page and actually tells the user something, decoration is there to make the page attractive to look at. Controls are there for the user to interact with. On the chaotic web it can be difficult at times to even identify the controls on a web page, and while you can make a game of doing so, most people will not want to.

Navigation

With any website that's more than a single page with no links the user needs to be able to find their way around, and find their way back to things. A site needs to be organised, and if it is of any size then a hierarchy is going to be the way to go. It's quite easy to lose your way in a hierarchy if the levels are not clear, so if the levels have different meaning, they need to look different, and if not they should look similar.

Generally with a website, you want to be able to:

quickly get a good idea what's on the site
keep track of where you are in the site at any given time
be able to move efficiently from one place to another
bookmark interesting areas of the site for later perusal or communication with friend

I've seen sites built entirely in Flash, or with frames which make it impossible to bookmark pages or send them as a link to a friend, or link into them from another site. This seems to me to disable a lot of the value of a website by making it difficult to refer to.

Consistency

If a site gets large, it's important that it be consistently designed. Otherwise the user's focus is on the inconsistencies, rather than the message that the website is trying to communicate. In a sense the user has to 'learn' a website, so it's a good idea to make it possible to navigate it with a relatively small investment in knowledge - particularly in today's busy world where people don't have much time for non-essentials.

Technical simplicity

Many websites use new or proprietary technology that is not universally or even widely supported. This is fine for a website with a small or targeted audience, but is otherwise a lose.

The first version of my website used pretty much bare HTML and, as a result, when mobile web browsing came along it was possible to read it quite well on a phone. If it had been designed with Flash, this would not be the case.

For this new version, I've introduced a little CSS, both to dress up the appearance a little, but also to clean the HTML, which is now much, much smaller. I've been able to use decoration to make the navigational structure much clearer, rather than obscuring it still further.

A benefit of using CSS is that most of the layout information is now in one place, rather than being sprinkled all over the content. This makes it easier to make site-wide formatting changes, and also means that I no longer need special web-editing tools. This version of the website was built with an ordinary text editor.

Bugs

Already I notice that CSS support between browsers is still woefully inconsistent, even after several versions. I've had to include browser-specific stylesheets to work around bugs in the various versions of browsers.

Alas there are still some things that I haven't been able to work around:

Internet Explorer 5 will randomly resize images at times: if an image looks squashed when you load a page, load it again and it will likely correct itself.
Internet Explorer 6 will sometimes insert random amounts of white space into the page. Reload the page and the problem will vanish.
Windows Media Player 11 will not work correctly in Firefox: it squashes the video horizontally. I recommend viewing the movies directly from the links.
Firefox 3.0.x will sometimes stretch the tabs on some pages to be much wider than necessary. Who knows why?

There are a number of other smaller issues that I've not enumerated.