Don't Like It!
Ah, I see you've been redecorating...
Don't like it!
Welcome Console Plans Change History Downloads More Consoles Site Design About Scarfwearer

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:

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:

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