Glossary Confused by computer jargon? Look it up!

Shameless plug Now available!

Articles - Ten-minute guide to setting up a WAP site - Talk like your boss: new developments in managerese - More...

Development -  File handling in the Linux kernel -  Java development for the Sony-Ericsson P800 - SunONE Application Server 7 FAQ - More...

Linux -  Using Linux with the Treo 600 - Linux on the Tecra M1 - Some notes on openzaurus - More...

Download - Java stuff - Linux stuff - More... (Please read the download policy)

Home automation - The X10 system - Linux TW723 driver - More...

The K-Zone - K-Zone computing - K-Zone law - K-Zone education and science - K-Zone motorcycles - K-Zone DIY - K-Zone railways - K-Zone martial arts - About the author - K-Zone home page

Computing	New developments in managerese	Setting up a WAP site	Secure Web servers
E-commerce snakes & ladders

here are a lot of ugly Web pages out there. Very often the ugliness results from the use of features that are commonly thought to be aesthetic but, in practice, aren't. On other occasions pages are ugly because of the author's lack of knowledge of basic typographic techniques. It's important to understand that Web pages are a method of communication far closer to print than people like to think. Printers have had several hundred years to figure out how to present text and pictures, and Web page authors should pay attention to them.
       This article gives some ideas about how an ugly Web page can be transformed into quite a pleasant one, without too much work. I'm not setting myself up as a Web style guru -- there are plenty of those about -- and if you don't think the ideas I present are helpful then don't use them. It's up to you. In order that you can compare the effectiveness of the different techniques to be discussed, I will present the page in its various stages of transformation.
       This article is about page design; it does not even begin to address the bigger and more subtle issue of site design. Of course, good sites start with good pages.

Getting started
e'll start by taking an example of a page that has just about everything wrong with it. I created it for this demonstration, but it's not very different from hundreds of others you will see on the Web. Here's the original page It's so ghastly that almost anything we can do to it will be an improvement.
       But we'll start my making a simple adjustment that will bring about an immediate and radical improvement: get rid of the textured background. As backgrounds go this one isn't too bad: at least the edges of the background tile match up properly. However, it doesn't do anything to improve readability (when did you ever see a book with a patterned background?). In addition, the file is about 23 kB in size, which will take a couple of seconds to download if the viewer is using a modem connection.
       So, after this simple correction, the page now looks like this. Doesn't it look better? Whatever you think to the aesthetics, you've surely got to agree that it's easier to read.
       Next, we'll blitz the horrible rulers. The examples here are particularly unpleasant, but even subtle ones break up the flow of the text and distract the reader's attention. Why do people use horizontal rules at all?
       One reason is that traditionally HTML has not offered a reliable way of performing a standard `paragraph indent'. If you look at almost any printed book you will see that paragraphs are indicated by a simple indentation of the first line. There may be a small amount of space between paragraphs, but nowhere near as much as a whole line. In HTML, because we haven't been able to do this, people have got used to using a blank line to denote a paragraph break. This means that we need something bigger or bolder to denote a break between sections (we can't use blank lines because we've already done that for paragraph breaks). So the temptation is to use a ruler.
       The other, less creditable, reason is because they're a gimmick, and people can't resist using gimmicks. But decent Web pages shouldn't rely on gimmicks for their effect.
       So after eliminating the rulers, we end up with a page like this.

Basic layout considerations
ypographers tell us that people are most comfortable with reading text that has about 12 words to a line. Apparently, up to about 20 is acceptable. After that, it starts to become uncomfortable to read. The page we are discussing here has about 30 words to a line but, worse than this, the text goes right up to the edges of the page. Books never do this; there's always a margin at both the left and the right-hand sides. This helps to separate the text from anything else in the reader's field of vision. On a Web page, this means the screen background and any other applications that are lurking nearby.
       So the next thing to do is to give this page left and right margins, and try to get 12-20 words on each line. This is tricky because we can't be sure what fonts the browser is using, so we'll have to guess a bit. Lets say each word has about 5 letters, add one for the space between words, and that gives us 72-140 characters per line. Let's take a figure mid-way between these two extremes: 106. The default setting for most Web browsers gives characters about 5 pixels wide, so we need the main text area to be about 500 pixels in width. We can get this effect using a table. Of course, tables are designed for showing tabular material, but they work perfectly well as a scheme for laying out text. We'll need to specify the widths of the columns in pixels to get the right effect. In HTML, we need something like this:

<table border=0>
<tr>

<td width=120>
&nbsp;
</td>

<td width=500>
Put all the text in here....
</td>

</tr>
</table>

<table border=0>
<tr>

<td width=120 background=bookreview_fill.gif>
&nbsp;
</td>

<td width=20>
&nbsp;
</td>

<td width=500>
Put all the text in here....
</td>

</tr>
</table>

Headlines
o far we've got a page that is basically acceptable, and a huge improvement on the original. However, it's not very eye-catching, and the large expanse of blue isn't doing very much. What we need now is a nice, attention-grabbing banner headline. But we want it to integrate neatly into the rest of the page.
       There are many ways to do this, but in this example we'll put the banner at the very top of the page, and lay it out across the border between the blue and white areas. The page now looks like this.
       It's technically quite fiddly to get this effect; we've approached the problem here by creating a table with two rows and three columns. The top row contains the banner, and the bottom row contains the text. Both rows contain an empty white cell in the middle. The banner is made in two parts: the word `Book' and the word `review'. Both have been made as GIF image files using Adobe's PhotoShop. To get a smooth outline to the text, the characters have been anti-aliased. This process introduces intermediate colours between the text and the background. Although this improves the appearance of the text, it does increase the size of the GIF file. If your page contains many such images, a compromise must be sought between the image size and the text quality; in this case we only have two images, so it wasn't such a problem. We've had to use some other tricks to get tables cells to maintain the correct sizes as the page is re-sized; look at the HTML source for details.
       We'll also move the author's details out of the main body of the text and into the blue margin, to balance things up a bit. The page now looks like this.

Finishing touches
ooking at the page in its present form, you might be wondering if those rows of bullet points are really contributing anything. They don't add much to the organization of the ideas, and they do look a bit ugly. Bullets are OK, but they need to be used carefully. So we'll try the page with most of them removed, and see how it looks.
       To draw the reader's attention into the text, we'll adopt the standard typographer's trick of starting each section with a big capital letter. These are called `drop capitals'. The only reliable way to generate drop capitals in HTML is to use small images with text wrapped around them.
       So this is the final result.

Further work
e're now at the point where the page is basically sound; there's more to do, but we're reaching the top of the effort-reward curve for this page. We will have to work quite hard now to get even small improvements.
       One further improvement might be to format the section headings to use the same typeface as the banner headline, or at least something nicer than the browser's default font. Because we can't predict the fonts that the viewer's browser will have available, this is a bit of a gamble unless we make the headings as image (GIF) files. Lots of people do this, but it does add to the download time, so you need to consider it carefully.

And finally...
ood Web page design requires considerable attention to detail. Issues of layout, image quality and typography have to be juggled with download times, files sizes and browser compatibility issues. I have heard reports that there are people offering Web site design services for £10 per page. It's worth asking whether they will be producing pages like this or like this.