The plain English guide to designing clear websites |
|
This guide assumes some basic knowledge of how web pages work. However, it does not go into detail about HTML (the coding used to write web pages). It aims to provide guidelines rather than instructions. The golden rule of good websites is to decide what you want your site to do, and then use technology to achieve this goal. Too many designers find out everything technology can do and then try to think of something to do with this technology. A website is a means of communication, not a way of showing off your technical knowledge.
Navigation When a visitor comes to your site, it should be clear straight away:
If you are tempted to put only an e-mail address and no phone number or postal address, remember that:
The way you organise your site will depend on the contents. If your content can be divided into logical groups, divide your site into different sections. For example, a 'high street' shop could have:
However you organise your site, try to make sure that:
Remember that visitors may not always enter your site at the homepage (the 'front' page that people get when they type your website address). For example, they may be following a link to one of the other pages on your site, or they may have found another page through a search engine. This means it is a good idea if every page on your site has clear links to:
Try also to find a way to make it easy for visitors to find which parts of your site you have changed recently. A good guideline that many web designers use is that you should be able to get from any page on your site to any other page on the site with no more than three clicks on your mouse. One site that shows it is possible to present a huge amount of information in a way that is easy to navigate is the BBC News site. If you are about to begin a site from scratch, don't be afraid to plan it on paper first. It can be a lot harder to rearrange your pages once your site is up and running. Page design Remember that most web designers and graphic designers work on larger screens than many ordinary internet users. If you decide to fix the width of your pages, try to avoid making it more than 800 pixels wide. Anything larger than this will mean many web users have to scroll from left to right and back again as they read down the page. Try to imagine whether people visiting your site are likely to print pages. If there is a page particularly likely to be printed, try to fix the width of the page so that it can be printed on A4 paper without chopping any of the page off. Browsers A browser is the program that people use to view your web pages. Most people will be using either Internet Explorer (which comes with Windows) or Netscape Navigator. However, the two can display pages very differently. Both programs are updated every so often, so older versions may also vary. There is no easy answer to the problem of different browsers. The best bet is to try your web pages on as many different browsers as possible. If there is a feature on your website that doesn't work on a particular browser, or on older editions, you will have to decide how important that feature is to you, and how many people will be losing out if they cannot use it. If you already have a website up and running, you should be getting 'access log' reports from your internet company. These can show what proportion of your visitors use a particular browser. Another tip is to try to check your pages on a machine using America Online (AOL). This is a popular way of accessing the internet, but it has a few quirks that can affect how people see and use your site. Frames Using frames on your site has advantages and drawbacks. It can be useful if you have a straightforward site with distinct sections. Many sites like this use a frame on the left of the screen as a menu, and put the various pages in a bigger frame on the right of the screen. Frames can cause problems with computers running older browsers. Frames can also cause problems if you are relying on a search engine for people to find your site. If you do use frames, remember that you cannot rely on people being able to use the 'back' and 'forward' buttons on their browser. Colours Although you can use colour to make pages more attractive, be wary of overdoing things. You can often achieve a very effective design with just black, white and one or two other colours. If you use a consistent colour scheme throughout the site, it can make for a professional look. If your design software allows it, stick to what are called 'Web Safe' colours. This is a range of 216 colours that are virtually guaranteed to look the same on all computers. This can avoid any confusion, for example when your corporate logo suddenly appears in a different colour on an Apple Macintosh! Take particular care in using blue text, as many visitors will see this as a link to another page, so this may cause confusion. Text For sections of text, it is best to stick to familiar, common fonts. There is no right or wrong choice, but you need to bear a few things in mind. What works well on paper will not always work the same on screen. This is because on paper you are looking at the ink, while on screen you are looking at shining light. It can be difficult to control the exact size your text appears on every screen. However, as a general guideline, a line of text (whether in a column or across the whole screen) should not run to more than 70 characters. If your design software allows it, use what is called a 'font group' or 'font face' command. This lets you choose a main font, but also lets you set a list of alternatives in case the visitor does not have your main font available on their screen. Try to avoid using underlining for emphasis. This is because many visitors will see this as a link and become confused. When you use pieces of text as a link, try to avoid just using the words 'click here'. This is because people with visual difficulties often use a screen reader, which converts the text on a website to speech. When somebody uses a screen reader to choose one of the links on your page, they will only hear the words used for the link. Just hearing 'click here' will not give any idea what the link is for. Pictures If you are using pictures for decoration rather than information, use thumbnails. These are small copies of a picture that the visitor can click on to then see a full-sized copy. This saves them having to wait for unwanted images to download. Always remember to include an 'Alt Description tag' with the picture. This is a piece of text that appears in place of the picture if the visitor has their computer set to not show pictures. It also allows people with visual problems who are using screen readers to know what the picture shows. Make sure the resolution of the image is no more than 72 dots per inch (dpi). This is all that is needed for computer screens. Any setting greater than this will make the page needlessly slow to download. You can change the resolution in most graphics programs. You can also get special 'optimisation' programs which will automatically alter your picture to the best settings for using on the web. If your design package allows it, make sure to set the height and width of the image. This means that when the page loads, the visitor's computer will leave a space for the image and load the text first. The visitor can then start reading the page without having to wait for the image to load. Animations and sound There is nothing wrong with 'bells and whistles' on your site, but be very wary of animation or sound that is there purely to show off rather than for a practical reason. This will depend on the content of your site - a graphic design studio's site is far more suitable for animation than a financial news site. Many websites now use a 'splash page'. This is a page that appears when somebody goes to your site. It displays a large image or animation and then takes you to the homepage (the heart of your site). This is useful if you want to create a particular image or impression, but it is a bad idea if the page takes a long time to load. Remember that most web designers have better computers and faster connections to the internet than many ordinary visitors to your site. What takes a couple of seconds to load on your computer can cause a frustrating wait for many people. In particular, animations using a technology called 'Flash' can cause problems, as at the moment many internet users do not have this technology. It is relatively simple for the visitor to download software to allow 'Flash' animations to run. But people get extremely frustrated when they have to download software and see how clever your animation is before they can even get into your site. Be very wary of using too many animations unless you are sure your visitors will have up-to-date computers and browsers. And if you do use an animated 'splash page', always give people the opportunity to skip past the animation and go straight to the rest of your site. Professional and freelance designers If you do hire outside help for your site, remember to work to one golden rule. The designer is there to produce what you have asked for, not to use your site to show off what they can do! |