Web Design

The following are just some golden rules I've picked up as a website designer -- and as an irritated reader, looking at badly-designed web-pages.

Less Is More

A web-page is not a magazine page. The power of HTML lies in giving the user freedom to set up their browsing experience the way they want it to be. So instead of trying to force the page to look exactly the same in every single browser, down to the number of pixels it takes up on the screen, define as little as possible, so that the user can customize their viewing experience to suit them.

Advanced Features: Do Reward, Don't Punish

Many web designers love to use "advanced" features of the web, whether they be advanced CSS or using plug-ins or extras like JavaScript or Java. There's nothing wrong with using them -- provided that you consider them to be extras rather than requirements. If you require these features to use your website, then you are effectively punishing readers for not having/using them, and they will get annoyed at you and go away. (see note further on about JavaScript)

Instead, reward those readers which do have these extra features, by making your page prettier with these features, nicer, niftier and cooler; but no less functional if these features aren't there. Functional doesn't mean pretty, but functional does mean that it works without the advanced features.

Don't be browser-specific, Do use the standards

Accepted wisdom says write pages designed for the most popular browser, everyone else can go hang. Well, that used to be the accepted wisdom. Wiser heads are now saying that designing to the web standards will give you maximum exposure, since your page is more likely to work with more browsers, and it also makes the page easier to design.

This isn't to say that one can't use advanced features; but only if they are advanced standards-compliant features will they degrade gracefully and be future-proof.

No Frames, Maybe Tables, Yes CSS

Frames are the least portable method of layout; more browsers can't cope with frames than with other methods of layout. Tables are better than frames, because at least most browsers can still get at the content of the page, even if they can't cope with the layout. Cascading Style Sheets are best of all, for several reasons:

• they degrade gracefully
• they separate content from design, which makes it much easier to change the look of a page.
• they allow you to control more things in the design than tables do
• advanced CSS gives some really cool features

If you set one colour, set them all

However one sets the colours of one's text and background, remember to either set all the colours, or set none of them. A common mistake is to set the foreground colour (and the link colours) and not to set the background colour because one is using a background image. (In classic HTML, the attribute for background colour is BGCOLOR, while the attribute for background image is BACKGROUND) This is especially dire if the background image is black or very dark. Why? Because people without fast connections often browse without images turned on, and people who download pages to read later offline usually just download the page itself -- and if you have white text on a dark image, and there's no image, people will be looking at white text on -- a white background. A completely blank white page is... completely unreadable.

If this is the fault of the program you use to create your web pages, either (a) complain to the manufacturer or (b) use a better program or (c) learn HTML yourself.

Don't use pixel-lengths, Do use proportional lengths

Unless the width or height of the object is very small (like less than 10 pixels) then it is a Bad Thing to use pixels to set the width or height of the object. I'm not talking about images (it does make sense to set the width and height of images in pixels, because they are in pixels) but about the widths and heights of objects used for layout (such as table cells or divs). It is a Bad Thing to use pixels because you never know what sort of equipment your reader is using: what may look fine on your monitor (or on your page) may come out hideously long or truncated on someone else's. One extremely irritating example is table layouts done in pixels, designed to be printed on US Letter paper, which, when I try to print it out on standard A4 paper, has the last character of every line sliced off, because US Letter paper is slightly wider than A4.

According to the old conventional wisdom, that doesn't matter, because one should design for the majority, and the rest can go hang. Thing is, it's much better to design so that nobody hangs at all. Proportional lengths save all this second-guessing about what people are "most likely" to be using. That also makes the page easier to design.

What are proportional lengths? There are two kinds of proportional lengths: percentages and font-related. The percentage lengths define the length (width or height) as a percentage of the width (or height) of the parent element. Thus one can set a table to be 100% of the width of the page (or, strictly speaking, 100% of the width of the viewport); or a table cell to be 50% of the width of the table, or a horizontal rule to be 75% of the width of the page. These lengths are available even if one isn't using CSS.

Font-related lengths are related to the size of the default font. They come in two kinds: Ems and Exes. Ems are the height of a capital Em in the default font, and Exes are the height of a small Ex. Thus, if one gives a length in a number of Ems, then that length is directly proportional to the size of the current font. Therefore, if the reader sets their default font-size to be very large (or very small) then the object changes size accordingly.

Unfortunately, one cannot use font-related lengths without using CSS, so if one is determined not to use CSS, one cannot use this style of length.

Apart from the CSS issue, it may be more appropriate to use one or the other style of length: if a length has to be related to the size of the viewport, then a percentage length is the one to use.

Don't Give Fonts Point Sizes, Do use the font-size keywords

This is related somewhat to the "Less Is More" section. If you define the point-size of every single font you use, then there is no freedom for the reader to customize the page. Maybe the reader has bad eyesight and wants to crank up the font sizes to maximum: but if you have set the font size of body text to be 10 points, then they can't do that. Instead, set the font size of body text to be "medium" (which is what it is, accorting to the standards). Then you can set the other fonts to be larger or smaller than that, using the font-size keywords such as "small", "large", "x-large" and so on.

The beauty of this is that many browsers allow the user to set the size of what "medium" means, and thus they can make all the fonts in the page proportionally larger or smaller depending on what they choose for that setting.

One can also use percentages for font sizes. These, too, are better than setting an absolute point size.

Another thing that one can use is "em" sizes -- which are like percentages, only it's related to the size of the parent font.

Structure, Structure, Structure

It is unfortunate that one of the most popular word-processors produces HTML which concentrates solely on appearance, and completely ignores structure. Appearance is what the page looks like, structure reveals what it means.

Now, you may think that it doesn't make a difference whether the text "My Page About Trains" is put in a paragraph marked as being bold and with a font-size of 150%, or whether it is put in a H1 element, because in either case, the reader will be able to figure out that it's a heading, but that will only be the case if they are looking at it in a graphical browser. Even if you only want to cater for graphical browsers (ignoring text-only browsers, blind people, and mobile phone browsers), there's another class of "reader" which you will be concerned about, and that's search engines.

Search engines aren't going to pay any attention to whether the text is in bold, or the font-size is 150%: the text has been declared as being inside a paragraph, so it is "obviously" only body-level text, not a heading. Tough if search engines weight words more when they're inside headings, this particular page won't have "trains" weighted as being an important word, because it isn't inside a heading element.

If in doubt, "what" before "how". Say what an element is, in preference to saying how it is displayed. Less is more. Separate content from design.

Alt for Images

There is one attribute of IMG elements which many people don't seem to know about, and that's the ALT attribute. This defines ALTernative text to be displayed when the image is not able to be displayed. This will happen when people are using text-only browsers, are surfing with images turned off for speed, or are blind people using text-to-speech programs. Now, if the image in question is just there to look pretty, then you could justifiably set the ALT attribute to an empty string "". But if, as often happens, the image is the "label" of a link, it is very important that there be some actual text associated with it, or the reader may not be able to click on the link at all!

(Take a look at for a CSS alternative to using "button" images for navbars.)

Don't assume the Reader has JavaScript, Do provide alternatives

Some pages have set up all their page-navigation to be done with clever JavaScript scripts, forgetting that

• not all browsers support JavaScript
• many readers turn off JavaScript for security reasons, or to avoid those extremely annoying pop-up advertisements

This doesn't mean you shouldn't use JavaScript at all, but it does mean that you should always provide plain ordinary links for navigation as well, as a fallback for readers that don't use JavaScript. Remember, reward, don't punish.