How do you give your web pages enough impact to distinguish them from the millions of home pages scattered around the WWW? There are no hard and fast rules about what makes an effective web page, but there are lots of tricks of the trade that help separate the good ones from all the others.

Throughout this site you will find ideas and guidance for effective web design. On this page we'll look at some of the important topics.

How do people read web pages?

As web usability specialist Jakob Nielsen says, 'They don't.' (Alertbox, October 1997.)

People skim-read web pages, skipping from link to link, subtitle to subtitle. They use the 'Back' button a lot - particularly when confronted with long blocks of text.

How to adapt your writing and editing for the web:

Aim for a clear and direct writing style. Avoid long blocks of text, long paragraphs and long sentences. Break text up with subheadings and bulleted lists; sometimes careful use of graphics is better than text (although graphics aren't searchable, and they generally slow web pages down). Give readers' eyes convenient resting points: subheadings and lists do this; so does the use of bold to emphasise keywords (italics can be harder to read on-screen and they don't help skim-readers). Bear in mind that as links appear in a different colour they are eye-catching, so make the text of a link meaningful, rather than simply 'click here'.

Good writing for the web is more journalistic than academic in style: punchy, direct and structured so that information is delivered sooner rather than later. The 'inverted pyramid' technique used in newspapers is an excellent model: the headline and first paragraph should immediately answer the questions 'who, what, where, when and why?' Later paragraphs expand on these questions.

If your page doesn't quickly convince users that they've come to the right place they're likely to hit the 'Back' button...

Do your pages deliver?

People visit your web pages in order to find things out. If you don't tell them straight away that they have come to the right place they will usually leave...

Try to understand your target audiences: a typical academic department's website will be used by potential students, existing staff and students, fellow academics, and more. Each of these groups is likely to have different needs and expectations, all of which you should aim to satisfy.

Potential students want to know what courses are on offer, how good the department is, what facilities are available. They also want to know about finance, accommodation, the Students' Union, etc - subjects covered elsewhere on the University Website.

Existing staff and students should be able to use your web pages for administrative and contact information, reading lists and support materials, news, etc. (Potential students will also investigate these areas to find out what the department is really like.)

Academics from other institutions, the press, alumni and many others will use your web pages for a variety of reasons.

When you plan the layout, content and structure of your website you should consider the differing needs of all of these groups (see Recommended content for University web pages for a more detailed discussion of this area).

The top section of your main page is particularly important: effective web pages use that space to tell all of their target users that they have come to the right place. So try to work out what matters most to each group of users (course details, contact information, research activities, support materials) and mention it near the top of your home page.

Navigation: how people move around the web

The WWW is non-linear.

Some people will read this page from start to finish, just as they would if it appeared in a book. Indeed, some people will actually print it out to read.

Most people, though, work their way around the web in a far more haphazard manner.

After arriving at the top of the page (from any number of sources), they might click on a link that will take them part of the way down. After skim-reading the section that interested them, they might read on, or they might use the 'Back' button or the contents link to move to the top of the page. Alternatively, they might follow a link provided in the text, taking them to another area of the website, or to another website altogether. They might get partway down the page and then decide to follow a link from their Bookmarks or Favorites menu. And so on.

Coping with non-linearity:

Users might arrive from just about anywhere else on the WWW: tell them where they have arrived ('The Department of Whatever at the University of Essex').

Users might arrive at any point in your site, not just the home page: again, tell them where they are, and also give them a direct way back to your home page (this is a common problem with frames-based sites: users stranded with no way out because they have arrived at the 'wrong' point).
Users might arrive at your web pages when they're looking for another part of the University site: show them the way to the University home page.

Parts of your web page will, inevitably, appear elsewhere out of context. If someone bookmarks your page, for example, the page's title is taken as the default name for that bookmark - so use a meaningful title, rather than 'My Home Page'... Search engines will list your page title and a summary description of your page in their results listings: there are various ways you can influence how your pages are listed by search engines (see Part 2 of A web author's guide to search engines).
Learn how people read web pages and how you should adapt your writing and presentation to suit the medium.

Accessible design is good design.

Web pages that are accessible to users with special needs (the partially-sighted, for example) will also be accessible to users with slow modem connections, older computers, text-only web browsers, and so on. All University web pages should meet minimum accessibility standards.

Choose your colour schemes carefully:

Make sure there is good contrast between text and background colours. Avoid strongly patterned backgrounds.

Remember that a significant proportion of users are colour-blind, particularly red-green. Use alternative text (alt tags) for images. This helps people using special software to read the page aloud; it also helps users who have switched off graphic-loading, or with text-based browsers like Lynx. It's easy to provide alternative text for the images on your web pages: Some versions of FrontPage automatically put the image's file name as the alt text; you can change this to something more informative by editing the image properties (at the bottom of the Edit menu), and looking for the 'Alternative representations' options (hidden away behind the 'General' tab in FrontPage 2002).

If you're working in HTML, change the image tag to something like: <img src="dog.gif" alt="Photograph of my dog">

Make the text of your links meaningful when taken out of context (some text readers will read a page's links separately): it's not very informative if all your links are in the form 'click here for...'

Be wary of columns and frames, as these are particularly hard for some text readers to interpret. Frames should be avoided on University web pages.

If you must use frames on non-University sites, make sure there is a working no-frames alternative. (Frames - a technique for displaying more than one web page within another - will also make your site hard for search engines to index effectively. Frames Are Not Good.)

Imagemaps can cause problems for users who can't accurately manipulate a mouse, and for users with text readers. Provide alternative text-based links.

If you are using audio and video in your web pages, make sure you provide text transcripts and descriptions.

Validate your pages. Bobby is a web-based service that analyses web pages for accessibility to people with disabilities as well as their compatibility with various browsers.

The World Wide Web Consortium's Web Accessibility Initiative is an excellent source of guidance for accessible web design, if somewhat technical.

Speeding things up

f your web page takes more than a few seconds to load, people start to use the 'Back' button. A useful tip from Art and the Zen of web sites: try holding your breath for as long as it takes your home page to load.

One of the most important rules of web design is: keep your files sizes as small as possible. There are lots of ways of doing this:

Beware of the toilet roll effect:

Long, scrolling pages that go on forever. People don't read all that text, even if they wait around while the page loads. (but the search engines love it)

In particular, your home page should be compact: tell users what they're getting and provide links to the real content.

The next level of pages can be longer and slower: by that stage, users should be confident that the information is worth downloading.

Note: long pages are appropriate in some circumstances - a page like this one, for example, which you might want to print out for reference; course listings, handouts and reading lists are other examples.

Good writing style for the web helps your pages load faster, too: succinct, direct pages take up less computer memory than long-winded, verbose pages.

Speed up page-loading by providing layout information for images and tables.
<img src="dog.gif"> tells a computer that the page includes an image.
<img src="dog.gif" width="60" height="50"> tells the computer how much space to allocate for the image, allowing the rest of the page to load at the same time as the image. Similarly, if you specify the dimensions of a table the page will load more quickly.

FrontPage helpfully specifies the dimensions of images automatically. Big images and multimedia elements can be very effective, but they can be very slow to load. Rather than include them on any main pages, put a link to them: anyone who follows the link will be more likely to wait for the page to load and you won't annoy other users by slowing down important pages. FrontPage includes an option for generating thumbnail links to big images to help you with this.

Be wary of Java applets - some versions of Netscape lock up for tens of seconds while Java starts up and users either think their computer has crashed or get very frustrated while they're forced to wait... FrontPage's "hover button" option is an example of this: easy to add to a web page, but not a good thing.

Choose appropriate file formats for images:

PEGs are great for detailed photographic images with lots of colours. Highly compressed JPEGs lose quality: try saving JPEGs at different levels of compression to find a good compromise between quality and file size (or use an optimising tool like JPEG Optimizer).

GIFs are best for smaller images, or images with less detail and fewer colours - ideal for buttons, icons, graphs, etc. For smaller files, try reducing the number of colours in your GIFs: a three colour GIF is much smaller than a 103-colour GIF.

Use images at their actual size! Some web editing packages (FrontPage, for example...) make it easy to resize images on the screen: just click on the image and move the handles that appear at each corner. This specifies the width and height of the image in the web browser without affecting the file size, so you end up with a small image that takes ages to load. If you want your image to appear 100 pixels by 100 pixels, edit the image so that it is actually that size. Take a (slow...) look at the effect of this.

If you use FrontPage, keep an eye on the figure at the bottom right of the editing window: that gives you an estimate of how long it will take for the page to load over a 28.8kbs modem link.

Screen design: how to make your web page look good

Consistency; Your web pages should look as if they are part of a single unit, so there should be consistency of layout, colours, fonts, navigation, backgrounds, etc. This doesn't mean that every page must appear identical. Look at a well-designed magazine: the individual pages will vary, but in terms of design they are clearly a part of the same publication.

Make effective and selective use of graphics.

few well chosen graphics can make a big difference. A lot of badly chosen graphics can make a big difference, too... Again, aim for consistency. Use animations with care. What might appear clever and amusing the first few times, may well end up plain Rollover effects for buttons, however, can be very - but be wary of FrontPage's "hover button" option: this uses Java and slows some web browsers down disastrously...

Choose colours carefully.

ear in mind the needs of users with poor eyesight, colour-blindness, etc. Apply your colour scheme consistently throughout the site - don't use different colours for every page. Remember that colour (and underlining) often indicates a hyperlink, so don't change text colour and formatting unnecessarily and misleadingly.

Page design

raditional graphic designers have complete control over their work. They can specify dimensions, fonts, page size, colours and so on in the knowledge that the end product will look how they intended. Web pages, on the other hand, can be viewed in different sized browser windows; fonts specified by the web designer may not be available to all users; colours display differently on some computers, etc. For these reasons, web designers must be flexible:

Check your pages with browser windows set to different sizes. Wherever possible, you should make sure your pages work in a browser window of 640 by 480 pixels.

Check your pages with different web browsers - both Netscape Navigator and Microsoft Internet Explorer as a minimum.

For main areas of colour (text and backgrounds, in particular) use 'web-safe' colours - a selection of 216 basic colours that most web browsers and computers will display accurately.

Don't specify unusual fonts in your pages; if you do, make sure you specify a safe alternative (for sans serif, for example, Helvetica is common on Macs, Arial is common on both PCs and Macs).

Be prepared to accept that your pages will look different to some users. These pages use cascading stylesheets, so anyone using a modern web browser (versions 4 and above of Explorer and Navigator, for example) should see them as intended. The stylesheet for this page specifies Verdana as the main font, but it also specifies alternatives in case Verdana is not installed on a user's machine. Older browsers can't handle stylesheets, so this page will display in their default font. The page looks best in Verdana, but I've checked that it looks okay in any of these fonts.

Try to think in terms of the different areas of the page: a main heading area, a contents listing, the body of the page, a footer area. Each of these should appear to be a single unit, distinct from the other units on the page.