Effective web pages
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 these web authoring support pages you will find
ideas and guidance for effective web design. On this page we'll look at some of the
important topics, with links to fuller explorations where appropriate.
Contents:
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. They will often Google something, dip into a page listed on the search
results, and have a quick glance to see if it looks relevant. For these reasons
your pages have to be clear, skimmable and
inviting.
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...
[contents]
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.
[contents]
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.
- 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.
- Check your links: error messages put people off.
[contents]
Accessibility: how to cater for users with special needs
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.
They will also be search-engine friendly, ensuring that your
site is properly indexed.
All University web pages should meet minimum
accessibility standards.
[contents]
Speeding things up
If 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:
- How long should a web page be?
- 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.
- 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.
- SharePoint Designer and FrontPage helpfully specify the dimensions of images automatically.
- Big images and multimedia elements can be 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. SharePoint Designer and FrontPage include 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:
- JPEGs 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.
- 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 (SharePoint Designer and 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.
[contents]
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.
A 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.
- Bear 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.
Traditional 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 800 by 600 pixels.
- Check your pages with different web browsers - both
Mozilla and Internet Explorer as a minimum.
- 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. The
page looks best in Verdana, but we'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.
- Investigate some of the many sources of design and
graphics guidance on the WWW.
- Have I mentioned consistency?
[contents]
Seven ways to improve your website
[contents]