Page Design Tips

HSBC, MFI, Royal Mail, Tesco, Yahoo!

There is no right or wrong way to lay out your web page, if you like the look of it then it must be OK!

Have a look at how other people have arranged the text and graphics on their web pages, if you see what you think looks like a good layout you can use it as a guide to how to arrange things on your pages.

See how the professional web sites opposite have common layout characteristics, but they are uniquely identifiable.

The name of the web site is at the top of page, this will confirm to the person visiting the page that they have arrived at the right place!

They all have clear navigation hyperlinks at the top and / or left margin of the pages.

The guidelines below should give you a basic idea!

grapes

Page Layout

Keep the basic layout of your pages the same, using the same graphic elements and colour scheme to maintain a consistent appearance.

If the layout is consistent the viewer can navigate more easily. For example, if you put a block of hyperlinks to other parts of the site at the top of one page - don't make people search for them by putting them at the bottom of another page. You can use tables to hold your text and images in place, or you could use frames pages, but that's another story.

Remember to leave some space on the page; think of a web page like a page in a magazine, that has some text, some images and some space. This avoids the page looking crowded, allows the visitor's eyes chance to rest and makes the page look more interesting.

notepad

Spelling and Grammar

One of the most common mistakes in web page design is incorrect spelling or grammar. However well written or cleverly designed your web pages are, they will be spoiled by any spelling mistakes. Your web design software may include a spell checker and a grammar checker. You could write your content in your preferred word processor, use the built in checking facilities then copy and paste the text into your web document.

colour bug

Readability

Research has shown that people scan web pages, instead of reading them like a conventional printed document, so it is useful if you highlight words or phrases to help people find the information they want.

For example:

hyperlinks are usually displayed in a different colour to the main text and underlined, therefore a hyperlink to a related page or item will draw attention to itself.

Lists - Bulleted or ordered (numbered):

  • make information easier to find; and
  • make information more readable.

Bold sub headings can also help.

Highlight headings or important points with a border or background.

People dislike scrolling down long web pages, so limit the length of the document. If you must make a particular page very long consider putting a content listing at the top of the page with hyperlinks within the page to the relevant sections. You can then also add hyperlinks at regular intervals to navigate back to the top of the page.

screen

Images and Hyperlinks

If you use images as hyperlinks make sure that your images look like something that can be clicked on, this is easy if the image looks like a button. You also need to make sure that it is obvious what the link is for. To help identify the image as a hyperlink use the alt="description" attribute of the <img> tag to describe the target.

It is usual to put border="0" in the <img> tag for an image that is a hyperlink, to stop the image having an outline. But sometimes it can be desirable and useful to allow a border, like the first example below. You can always put a text link as well as the image. It is common to put a block of text links at the bottom of a page if the main links are images. The examples below should give you a few ideas.

(The hyperlinks are for demonstration purposes only and are not functional.)

next click to send e-mail HOME next -->
NEXT
person

Content

Keep the content of your web site relevant and up to date, this will give visitors a reason to visit again. Think about putting a feature on your home page that you can change periodically. You might highlight a specific section or page of your web site and include a link to the page and a relevant image. Next time the same person visits if you've changed the featured item the site will look like it is still active and being kept up to date. If you let people know that you intend to add new features or improve your web pages they are more likely to visit again!