Web Design

Ugly, but Beautiful

Why do my pages look so ugly? Well, there are reasons for that. And the main reason is not that I am unable to design more vivid, colourful and dynamic pages - although that is probably also true. The main reason is that I have very strict priorities when designing my pages:

  1. Contents
  2. Usability
  3. Accessibility
  4. Simplicity

These priorities are often co-operative and seldomly conflicting, but when they are, I will always prioritize contents over usability, accessibility over simplicity etc. With the little spare time I have for my web site, this leaves little or no room for playing around with the more fascinating aspects of layout. Below are a few details about my priorities:

Contents

If a message is worth passing on to others, do it no matter what the form. There is so much essential information that is never published on the Internet. Not because the information owner does not want to, but because publication is considered too complicated. It's not. It's people who make it difficult, particularly with strict requirements to the layout of the contents.

If I have e.g. a lengthy article in a somewhat complicated Word document, I'd rather convert it into a PDF document than omit publication. A PDF document on the Internet has a low score on usability, but the information is there which is what matters the most.

On the other hand, I hate all those design heavy web sites with no or little contents. "Under Construction", they say. I'd say they spent their limited funds and intellectual capability on the wrong priority.

If you have contents to show, do it. If not, don't.

Usability

Usability is about enabling your visitor to fulfil his or her task on your web site. It sounds simple and the usability guru Jakob Nielsen even refers to usability engineering as the art of simplicity. But usability requires some serious considerations and it certainly has its do's and dont's.

A visitor should be able to find the contents that is relevant to him or her. This means that you should always link across your site to related info. Do not be afraid that hyperlinks break the reading. You cannot control the way the user navigates your pages. If you do, the user will probably leave your site looking somewhere else. So apply hyperlinks wherever possible.

Search is essential if you have more than a few pages. Search engines are very clever nowadays and half of your visitors probably ended up at your site using a search engine like Google. So I have a search box in the navigation bar on top of every single page. I also have a specialized search page describing and giving access to the three search engines whose services I use.

Breadcrumbs (a navigation path from your home page down to the actual page) is useful because you never know how a user ended up on a particular page. Perhaps the user came from a search engine or was given a link by a friend or was refered to your page from another site. A breadcrumb provides the visitor with your understanding of the context of the actual page. I use a breadcrumb in the navigation bar of every page, but breadcrumbs have to be complemented by other navigation means as your conception of the context is not necessarily the same as the user's.

Don't use frames. Frames are evil. Frames are web designer drugs, but all drugs have bad side effects. The side effect of frames is that it breaks the user interface. You cannot bookmark a frame page. If you are accessing a frame page from a search engine, chances are that you will see the page out of its context. If you try to print a frame set, you will probably get a negative experience. Nowadays, you can hardly find any professional web site (one that makes money out of its presence and services on the web) based on frames, but unfortunately a lot of amateurs are still trying hard to give users a bad experience on their frame based sites.

Don't mess around with the user interface. A visitor on your site is exactly that: A visitor. If you are shaking hands with new visitors in your house using your left hand, they will probably be unconfortable and leave your house soon. The same thing on your web site. Do not change the appearance and function of links. Do not remove underlines or change the colours of links. Do not launch new browser windows. Do not change the user's window size. If you do any of this, you will probably confuse your visitor, and for what reason? In fact, as an author one may even benefit from questioning the term 'visitor' as the following quotation by Eric Bohlman shows:

I think there's a fundamental difference in mental model between the "standards" crowd and the "dee-zyner" crowd: the former think that when the viewer browses their work, they, the authors, are guests in the viewer's space; the latter think that the viewer is a guest in the author's space.

I assume you have guessed by now that I do not belong to the "dee-zyner" crowd :-)

Accessibility

WWW is a fantastic medium. All thanks to Tim Berners-Lee and others who realized that you need only a simple language and a simple way of jumping between pieces of information to connect the whole world. Let's leave it like that, shall we?

HTML is the language of the web. It is intended for conveying information and its structure to the user. As soon as you start to make layout in HTML, you are making prerequisites on behalf of your user. If you are using a fixed font type and/or size, you are making assumptions about your users' screen quality and viewing capabilities. I cannot convince my father's widow about the fantastic revolution of the web because she is an older lady of 88 who cannot read the small fonts of most web pages.

I don't change your font style or size. You know better than I what you are able to read. I don't use fixed width pages. You know better than I what page width you prefer. I don't implement layout in tables (at least not in my recent pages) because this locks the presentation to particular media and often to particular browsers. I don't use coloured backgrounds and text, because screens have low contrast. Most of my pages are viewable on cellular phones, they are viewable in a text-only browser and they can be printed without losing contents or structure, even though I do not use a separate print stylesheet.

Simplicity

The funny thing about simplicity is that it mostly comes by itself if you obey the guidelines I have described above. If you avoid doing the things that will give your viewers a bad experience, your pages will be simpler for you to write and simpler for your viewers to read. And you will have more time to write the essential contents. Beautiful, isn't it?