How not to design a Web page

The World Wide Web is one of the great wonders of our world

The World Wide Web is one of the great wonders of our world. Notwithstanding the hyperbole, it's arguably one of the biggest, most imaginative, most global construction projects ever undertaken by humans.

The down side, though, is that Web publishing today suffers from many of the ailments of the desktop revolution a decade ago. In design terms, Web pages can range from the grotesque and unbelievable to the bizarre and unprecedented, and while rules are obviously there to be broken, often it's worth knowing that they exist.

Here is an A to Z of some of the Don'ts of Web page design, including our latest Computimes "Arrgh" rating (on a scale of one to 10)

Aims

READ MORE

What's the overall goal of your site? Spell it out for your own benefit, and avoid those bland and meaningless generalisations such as "To Be On The Web" or "For Customer Support".

Arrgh factor: 5.

Alt

Last week's article about the tag for graphics left out one important feature. What happens when visitors to your site have chosen the "graphics off" option in their browsers? The tag also has an "Alt" attribute, to provide alternative text if the image isn't loaded. For example, if the image is of Jack Charlton, the HTML would read something on the lines of

alt=["]Jack Charlton mugshot["]>

or

alt=["](pic of Jack Charlton)["]>

Alexis Donnelly from TCD's Computer Science department sent us an email reminding us that besides being "useful to people who, for time reasons, prefer to surf with graphics turned off", it's also "a quick, neat way of conveying info to surfers who are blind". We'll return to this accessibility issue again.

Arrgh factor: 7.

The tag is the Web's equivalent of garlic and crucifixes in a Hammer horror film. If you want to be really tasteless, put a tag straight after the end of your tag, and a tag just before the tag. If you're using Netscape, this will make your entire page flash.

Arrgh factor: 10.

Backgrounds

As we hinted last week, new Webmasters can be quickly seduced by fancy background graphics or background colours - so much so that they forget that the text is no longer readable. Pages which are impossible to read often use backgrounds almost the same shade as the text.

Arrgh factor: 9.

Common denominators

Are you catering for average Web users, who haven't rushed out to install the latest Web browser and grab every plugin available? Or are your pages saying "Netscape 5.0 beta enhanced if you don't have Java/Shockwave/ActiveX tough - get lost"?

Arrgh factor: 5.

Feedback

Your pages should always have some contact info - preferably with a

type tag around it. Interactivity is easily the most abused word on the Net, but are your pages just a printed brochure transferred to the Web ("shovelware")? How do they exploit the medium's specific interactive features?

Arrgh factor: 9.

Gimmicks

Get a "hit counter" for your site by all means (we'll explain how next week), but do we really need all those awards and other self-congratulatory nonsense such as boasting that your page is in the "top 5 per cent of Web sites". If there are over 100 million Web pages (and who is counting?) being in the top 5 per cent means you are among the top five million - hardly an elite little club. Come up with a gimmick alright - but an original one.

Arrgh factor: 4.

Icons

Don't use navigational icons without accompanying text, unless they are wonderfully self-explanatory.

Arrgh factor: 6.

Italics

Try to avoid using italics when unitalicised text follows it (in some browsers, the space between the two sets of words can get lost). Or add extra space (type the six characters   to achieve this)

Arrgh factor: 4.

Less is more

Use fewer words. Your company's Web site or your new electronic publication might indeed have space for far more words than a printed magazine, but this only adds to the bytes your readers must download. It makes it harder to work out the priorities of the information.

Arrgh factor: 8.

Links

Don't have meaningless or tautological links such as "more information HERE" (what kind of information?) or which say "here" or "CLICK HERE", or that have the URL (the Web address, as in "http://www.... ") as the name of the link. Never give a page whose sole purpose seems to be to link to another page which only links to yet another page (don't laugh - this has been a feature of the official Irish government Web site!). And avoid the opposite too - "orphan" pages with no links anywhere else.

Arrgh factor: 8.

Pictures

On the Internet a picture is worth far more than a thousand words. It can hog valuable bandwidth and take months to download. And too many images on a single page will probably result in visual clutter, noise - in other words, non-information. Whenever you do need to use very large images, warn users (instead of whisking them away to that 740k MPEG sound file of your new baby or the fuzzy 180k "Welcome" message and mugshot of your college/company/country President).

Arrgh factor: 7.

Planning

An amazing amount of Webmasters clearly just splatter their code onto the pages without doing any initial planning. Instead, it pays to start off with a very large piece of paper: make a sketch or map of the overall sections and how they might link together, what sub-directories you will have to allow for and so on.

Corporate sites also tend to mirror the company's internal organisation, but the way they organise your organisation probably won't fit with the way their visitors look for information. Remember too that the deeper your sub-directories go, the more cumbersome the URL that people will have to type - go for a more "shallow" structure.

Arrgh factor: 8.

R&D

Research and develop. Adjust and test. Adjust and test your pages till you think they are perfect and bug-free. Test-drive your pages on - different browsers (e.g. on both Netscape and Internet Explorer); - different versions of each browser; - different machines: - a slow to medium-speed (eg 14.4 kbps) modem rather than the very fastest one in the shop or office; - different "test drivers" or guinea pigs such as your friends. Listen carefully to any of their criticisms. And don't stand over them giving directions on how to use the pages - this should be self-evident in the page design.

Arrgh factor: 10.

Special effects

Overdoing the whizz-bang factor is a serious weakness of Web design today, and is reminiscent of the worst excesses of nouveau cuisine, or the typomania of the desktop publishing revolution a decade ago.

Arrgh factor: 7.

Spellings

Don't forget to spellcheck it! If you don't know how to use an apostrophe, use a language which doesn't.

Arrgh factor: 0.

Under construction

Never ever use those "Under construction" or "At Work" signs. The Web is under construction every second of the day and night.

Arrgh factor: 12.

Updates

Don't just leave your page for months on end without updating it.

Arrgh factor: 7.

Window size

Most users hate having to resize their windows horizontally to see very wide graphics. Equally, many readers hate scrolling down through miles of text. Try chopping it up into more manageable pages. Last week's Computimes referred to how Tripod (www.tripod.com) has given away free Web space to 845,000 members, with over 1.4 million pages. That means that a good half of the users only have one Web page, and many of these are simply too long. Often as a site expands there's the temptation to keep adding to this one page rather than splitting it up into a series of shorter linked documents.

Arrgh factor: 9.

Your message

Have something original to say, rather than just giving links to other people.

Arrgh factor: 9.

Zzzzzzzz!

Never use the phrases "Welcome to. . ." (totally redundant), "the Information Superhighway" (cliche, hyperbole) or "- please click here!" (be a bit more subtle than that).

Arrgh factor: 20.