General rules for designing web sites

When starting a web site, you are often not entirely clear about design and content, and even when you are, you still have to be prepared to revise both the idea and design several times before you are satisfied. The design of a web page in itself is a creative process, preferably bound by as few rules as possible, so good ideas can be realized. There are a few basic rules to be aware, if you have intentions of having a web site that reaches further out than the immediate circle of family and friends.

There are two reasons for someone visiting a web site: they seek information or they seek entertainment. If this isn't present, no-one cares to visit your site. Content is king, as they say. In the early years of World Wide Web, around 1996-1997, when people were just curious about the new mass media, you could get away with having a site with no actual content. If there was a site to look at, people would go there, because there wasn't that much to choose from. That is no longer the case. We have seen a web site before, and there is currently more than 900 millions to choose from. The three most important parts of your site is content, content and content.

A common misunderstanding is that if you use systems like Joomla and whatever else is around, you don't need to be able to program. If you can make do with using a template, you can get away with very little programming, and it gives you the illusion of getting away with the design easily. On the other hand, how cool is it to have a site that looks like thousands of other pages?

As soon as you are going to do something that resembles design, you need some knowledge about basic programming. The good part about leaning to program, is that it is quite easy to get started and put something together that looks cohesive.

Supposedly you can create file names and directories with spaces and special characters, e.g. the Danish letters æ, ø and å. Well, you can, but it is a very bad idea. Not all search engines can handle the spaces and special characters, and those that can, also get derailed from time to time and only get a part of the link indexed. It creates a lot of unnecessary error messages for the site and keeps the visitors away. Use the numbers, the letters a through z (both upper case and lower case) and the two lines dash, -, and underscore, _.

When you've gotten as far as generating a content that someone might be interested in, it is always a good idea to set up the pages so the visitors can find the other good parts of the site.

Experiments with tracking eye movements show that the upper part of the page and a part of the left margin is where the visitor looks first. Not all the way up to the upper edge of the page but around 5 centimetres from the top. Similar with the left margin. Not all the way out to the edge, but a couple of centimetres in. Basically like we look at a piece of paper with text. In these areas you have the reader's undivided attention, so here you place headlines and navigation panes, to help the reader find his way around the site. This is not a joke. Many owners/web designers forget to make a decent navigation system for their site, because they are so focused on generating content, that the visitors can't tell that you have more to offer than what is on the page they are looking at.

There is several ways of doing the navigation, depending on needs and personal preferences. The general rule that it has be visible and intuitively easy to understand. If you are in doubt, get someone to look at the site. If they can find their way around without any problems or instructions, it's fine, and if not, the navigation needs reworking.

You have two basic types of layout for home pages:

Head line			Head line
Navigation	Content/text		Navigation
			Content/text

Obviously, the field with the main text can be divided into columns and several smaller fields, if so desired. This is what is seen on many news sites. Some sites, e.g. many sites made with WordPress, has the navigation in the right side instead of the left. On this site the navigation pane is a bar under the headline field. When looking around the net, several variations of the two themes are seen. There is absolutely no reason to stick strictly to these simple designs, if you can make the site work better by changing them.

In the old days when we had 15 inch monitors and low screen resolution, page layout wasn't that much of a problem. There was always too little space, so it had to be used as much as possible. It wasn't necessary to consider a maximum width on what you were creating, because at best, 15 inches was okay, and there was absolutely no reason to use less than the full screen to view pages on.

From publications of books, the experience is that there is a physical limit to the width of a text before the reader have to move the head to read the entire line. In regards to modern monitors, full screen width is way too wide to be reader friendly, so make sure you limit the width of the text by defining a fixed width. Based on experience, 800-1000 pixels width for the text itself is a good start for an upper limit, but the right width varies a little, depending on the font size and font type, so you have to make a few test runs with different fonts and text widths.

What about the rest of the space? Use for something smart. Navigation pane, pictures, text boxes, adds, etc. There is a lot of useful elements to put there.

A common misunderstanding regarding how much text is supposed to be on a page, is that only very little text is allowed, because the readers aren't going to bother reading it anyway.

This is wrong for two reasons:

1. Search engines indexing pages and showing links to pages, when you are searching for something, favour pages with a lot of content.
2. People read long texts all the time, e.g. books, articles/news and instructions. What people don't feel like reading is text which is an incoherent, unstructured mess.

Structure with headings and subheading and eloquent language, without a lot of annoying misspellings, is what sells a page. In the early days of the net, it was entertaining to click your way between a lot of pages, and the new medium was a novelty. Today it is a professional tool, where visitors want to get a quick overview and find informations. Clicking through a lot of pages to find basic informations today, comes off as annoying and makes the visitors disappear.

A good rule of thumb: One subject, one page. If you have a lot of pictures so the page becomes sluggish, it may be a good idea to split the page up in several pages, but as a general rule: One subject, one page.

There is no real consensus on the use of colors. The most common opinion is that text is preferable as black on a white background. A part of the argumentation is that it comes off as more serious/earnest than the various other colors. This however, if most likely more a matter of some people having an narrow-minded idea about how a text should look.

Colors are fine. You have to give the colors some thought, however. Use colors for text and background that makes it easy to read the text. Black on light yellow background is fine, while orange on light yellow is a bad idea. Very bright and strong colors can be hard on the eyes, if there is a lot to read. Pages with text therefore have other requirements than pages with a lot of pictures.

The only way to this, really, is through experimenting. You'll discover, that many combinations works in real life.

The biggest part of a piece of text is that you can read it. The second biggest is that you can read long passages.

The use of fonts is something you have to put some serious considerations into. It can be tempting to try to break with the norm and do something with curly fonts that looks like handwriting or Gothic letters. for very short sequences, yes, good idea. Longer sequences, no! Focus is moved from the content to reading it being a challenge, and the whole idea and message in the text is lost.

Reading a page on a monitor is fundamentally different from reading on a piece of paper. One of the reasons that Times New Roman is often used in books is that fonts with serifs is easier to read for longer periods/many pages. In a monitor the text usually becomes a bit more grainy than on paper, you have another distance to the text than you normally have with a book and you are sitting differently. Here there is an advantage in using fonts without serifs, and preferably also fonts that are a bit open/wide e.g. Arial, Tahoma and Verdana.

Like with the colors: Test some ideas, and see what works for your site. You'll discover, that many combinations works in real life.

The short version: Don't!

The less short version: Use it with care. A few animations and effects is fine, it they contribute with something useful for the site, e.g. liven it up a little or direct the visitor's focus to a specific part of the page. Screens that looks like an anthill of moving parts (or Las Vegas if you like), comes off as noise. A good rule of thumb is one effect per screen, tops. Less is more as they say... Obviously, the sites attempting to look like Las Vegas, Los Xunguis, Where's Waldo etc. should just go ahead and use the effects by the dozens and only consider the placement of them.

If you don't have a specific idea about how you want the pages to look from the beginning, there is nothing wrong in looking at other sites an use their ideas. This goes for both inspiration for ways of doing things as well as determination of things you definitely don't want on your site. Both parts are equally important. It can be sites that have implemented ideas you are considering, where you can see how the idea actually works, before putting time and effort into doing it.

Using inspiration is also a good idea when you know how you want the page to look. By looking at the source codes (i.e. the HTML programming) on the sites containing the elements you want to use yourself, you can often pick up some elegant solutions and save time not having to reinvent the wheel every time you want to do something new. Many times the codes can be copied and used directly with just a change in the colors, font types, etc. to the ones you use for your own site.

There is always someone trying to be a smart-ass, cut corners and ignore common sense when making a site. Web design is based on three types of rules; those that can't be broken, those that can be bent and those that can be broken. Use common sense and see what other people do and don't do. If you break the wrong rules, and this is surprisingly easy to do by mistake, you are either completely ignored by the search engines or considered dishonest or inept, after which you are either completely removed from the search results or parked on page 1000 on the list of hits. To have a successful site requires some work, some knowledge and a few skills.