Tips for clear websites
This guide assumes you have some knowledge of how web pages work. However, it does not go into detail about HTML (Hyper Text Markup Language) (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 your goal.
A website is a means of communication, not a way of showing off your technical ability.
When someone visits your site, it should immediately be clear:
- who your site belongs to;
- what purpose your site serves; and
- how to contact you.
If, for your contact details, you are tempted to put only an email address and no phone number or postal address, remember that:
- you may be asked for these details regularly through emails, so you will waste your time replying; and
- giving a phone number and address will not only reassure visitors that you are a genuine organisation, it will also make you appear more approachable.
The way you organise your site will depend on your content. If your content can be divided into logical groups, divide your site into different sections. For example, a high-street shop could have:
- news (press releases, archives, updates);
- store information (local branches, opening hours); and
- other information (financial reports, contact details, legal information).
No matter how you organise your site, try to make sure that:
- the structure of your site is as logical as possible; and
- there is a guide to the site, or a 'site map', for people who can't find what they are looking for.
Remember that people may not always enter your site at the home page (the 'front' page that people get when they type your website address). For example, they may follow a link from one website to a specific page on your site, or they may have found a specific page through a search engine.
This means it is a good idea for every page on your site to have a clear link to:
- your home page;
- basic information about your organisation or subject (often called ‘About us’);
- a guide to pages on the site (a 'site map'); and
- contact information for you or your organisation.
A good guideline that many web designers follow 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 creating a site from scratch, you should probably plan it on paper first. It can be a lot harder to rearrange your pages once your site is up and running.
Remember that most web designers and graphic designers work on screens that are larger than those used by most other people.
If you decide to set the width of your pages, try to avoid making it more than 960 pixels wide.
Anything larger than this will mean that your readers may have to scroll from left to right and back again as they read down the page.
However, good practice nowadays is to have a ‘responsive’ web site design, as more and more people are accessing the web on devices such as smartphones and tablets. A responsive website is one that displays its content in a format that is appropriate to the size of screen available.
Try to imagine whether people visiting your site are likely to print off pages (if in doubt, assume that they will). Your users will not appreciate printing empty pages when they're trying to print key information, or printing items which are useless on the printed page, such as menu links.
If you plan to use a style sheet to decide how your site looks, the best way you can do this is with a customised print CSS (Cascading Style Sheet). This excludes items which are pointless when printed such as menus and logos.
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 another popuar browser such as Firefox or Google Chrome. In the early days on the internet, some of these displayed pages very differently. Nowadays however, most browsers conform to a common set of standards, and are (largely) what is known as standards-compliant.
Even so, it is still a good idea 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 whether you want to keep it, and how many people will lose out if they can't 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.
Frames are now largely an historical aspect of website design. In the past, many sites used 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 have now largely been replaced by style sheets to control presentation and layout. We strongly advise you to avoid frames.
Although you can use colour to make pages more attractive, don't overdo it.
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 give it a more professional look.
If your design software allows it, stick to what are called 'Web Safe' colours. These colours 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 Computer.
Make sure your foreground/background colour combinations contrast enough so that your users can easily read your text. A trend in recent years has been to use low contrast colour combinations, in particular mid-grey text over a light grey background. These often look visually attractive, which is presumably why some website designers seem to like them. However, if no-one read your content, your web page is just wallpaper. You can now use a number of online tools that will check that your website’s contrast meets common standards.
Also, be careful if you use blue text. Many people will see this as a link to another page, so it may cause confusion.
For sections of text, it is best to stick to a familiar, common font. 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 well on screen. This is because on paper you are looking at ink, while on screen you are looking at shining light.
- It can be difficult to control the exact size your text appears at 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.
- It is usually best to use what is called a ‘font family’ in your style sheet to define what font will be used on your site. This lets you choose a main font, but also lets you set a list of alternatives in case a person visiting your site does not have your main font available on their screen.
- Try to avoid using underlining for emphasis. This will confuse many of your visitors, who will see this as a link.
- When you use pieces of text as a link, try to avoid using the words 'click here'. This is because people with poor eyesight 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 tell them what the link is for. Instead, use text for the link that says what the destination of the link is.
You should use thumbnails if you use pictures for decoration rather than information. Thumbnails are small copies of a picture that a person can click on to then see a full-sized copy. Thumbnails will save your readers from having to download unwanted images.
Always remember to use the alt attribute to include alternative text with the picture. This is a piece of text that appears in place of the picture if a person has their computer set to not show pictures.
It also allows people who are using screen readers to know what the picture shows.
It is worth noting that alt text is considered one one the most important accessibility features of the internet, whilst at the same time being one of the most poorly implemented.
Try to understand what your users will think when they see a picture (and remember this can be different for the same picture used in different contexts) and use alt text that provides the same information. You should never use the filename of the picture, especially when that filename is something like pict4567.jpg.
If your design package allows it, make sure you set the height and width of the image (in pixels). This means that when the page loads, the computer will leave a space for the image and load the text first. People can then start reading the page without having to wait for the image to load.
Animations and sound
Don't use pointless animation - only use it for a practical reason. You may feel it's necessary to use animation, but that will depend on the content of your site. Animation on a graphic design studio site will probably be far more suitable than animation on a financial-news site.
Remember that most web designers have better computers and faster connections to the internet than many people visiting your site will have. What takes a couple of seconds to load on your computer will take longer for many people. In general, your website should avoid using Flash, a once popular technology that is now not supported on mobiles. If you want to include videos you should use HTML 5.
Don't use too much animation unless you you know your users have up-to-date computers and browsers. And, if you use an animated ‘splash page’ (we advise against), always give your users the option to avoid the animation and go straight to the rest of your site.
The final rule - hiring professional and freelance designers
If you hire outside help for your site, remember to follow one golden rule. The designer is there to produce what need, not use your site to show off!
Plain English Campaign owns the copyright to this guide. You can save one copy of the guide to disk, and print one copy out for your personal use. You must not make more than one copy without our permission.