e-skills UK Guide

Designing a website

How to design a website

Designing a website can be a complicated and involved project that can draw upon a number of experienced technology and design professionals. Alternatively it is easy to put together a simple website using one of the many tools available.

This is a business IT guide and we are not trying to tell you in detail how to build a website. Rather we are trying to help you make informed business led decisions to enable your business to succeed using Information Technology. This guide will point out the major areas you need to consider when building a website and will give you pointers to obtain further information.

By carefully designing your own website: it is possible for you to save money on website build costs and make money by creating an attractive portal for your business.

Types of websites to consider

There are differing levels of complexity when creating a website. Anything other than a basic website is not considered suitable for self development unless you have significant IT expertise or you have that expertise available in your business. For more details take a look at choosing someone to build a website and buying a website Guides.

You should consider building your own website if:

• You have sufficient IT skills
• There are plenty of people who would be willing to give you a helping hand at little or no cost
• There are some off-the-shelf solutions which you could take up quickly
• Developing a basic website is likely be quicker than getting one built for you – but bear in mind the quality of what you can produce
• The way the website is structured and managed means that it will only ever be simple
• You only want a simple few pages

A note on graphical design

The look and feel of a website is crucial to its success. Unless you can create a very good look and feel to your website you are better asking a professional to do it for you. A badly designed website WILL damage your brand. At the very least they can create the basic colours and design guidelines for you to then update. Remember, not everyone has a good eye for design, and certainly not many small business owners have this ability – but their friends and colleagues are too polite to say so! To find out how to select a professional to help you take a look at the choosing someone to build a website guide.

Web content - the words

The open-ended nature of the web gives companies a new freedom to give more and more detailed information to their customers. While each page added to a brochure adds to the printing and distribution costs, there is no such limit on web pages.

The decision therefore changes from ‘what to include’ to ‘where to stop’. You should understand your objectives from the website, and establish your content to meet those objectives. If you just intend your web page to be a place to direct prospective clients who want to find out more about your company, your content might reasonably fit into several pages. If you choose to add case-studies and press-releases it may run to twenty or thirty. If you wish to include a catalogue of your wares or a technical support database, it will be many dozens.

People approach the web differently to how they approach printed documents. If you find that your documents are running on to many pages, you should consider summarising them or breaking them up into several shorter pages. That way people can choose to read as much or as little information as they choose, without being confronted by a daunting wall of text. ‘Scanning’ is a common way of viewing web pages – skipping thorough content in search of relevant information. For this reason you should summarise the content of longer pages at the top, and consider highlighting highly useful material in some manner.

Accurate and current content is a primary concern. If information on your website is outdated, it may mislead your customers. Ensure that you plan for regular updating of content that is liable to change, or limit the information on the site to that which is unlikely to need regular amendment.

You should also bear in mind the legal status of any content on your site. If you wish to use words or images from outside your company, you should confirm explicitly that their author permits it.

Content checklist

• Ensure that your content is sufficient to meet the objectives of your website, not too little, and not too much.
• Is the information ‘web friendly’? Is it broken into easily-digestible chunks, each no more than a few screens long?
• Does everything in the site serve a clear business purpose?
• Does all the content reflect well on your company?
• Is all the information accurate and up-to-date? How long is it likely to remain so? How do you plan to update obsolete content?
• Is the content well-written, grammatical and legal?

Website aesthetics

The most common mistake first-time website developers make is to produce a visually crowded site. The symptoms of this include repetitive or dark backgrounds which make the text difficult to read, animations, particularly flashing ones which distract the eye from the copy, and colour selections which clash with each other and do not put the visitor at ease. As in content, less is often more.

This guide cannot teach you all about aesthetics, which is why it is important that you visit plenty of other websites and try to understand what works visually, and what doesn’t.

Try to select a visual style that is appropriate to your business and clientele. A surf-shop would necessarily have a different visual style to an undertakers or a toolmaker.

Finally try to design your visual style around your site structure, and make it easy to navigate and find information.

Aesthetics Checklist

• First, read and note the paragraph above that discusses graphical design
• Is the design clean and clear, and the text easy to read? Do the colours selected complement each other?
• Does the design fit with the image of your company?
• Does it resemble your printed materials such as stationery or brochures?
• Is most of the text black on a light or white background (the most comfortable combination for reading)
• Has the site got flashy or distracting animations, particularly on pages with text to read?
• Has the site got visitor counters on its pages? This is a sure-fire sign of an unprofessional site.

Site structure checklist

• Does all of your planned content have a logical ‘home’ within the site?
• Can you draw the structure simply on paper? If the resulting structure is illogical or different material is scattered throughout the site, the site may need a rethink.
• Is your site structured in a way that will make it easy to add new information?

Site structure

Website structure is something which many inexperienced developers do not devote a significant amount of attention to. This can have a negative impact on the site’s effectiveness and make the site difficult to maintain or expand.

You can represent most websites as a hierarchy, with the home-page at the top and various other pages like ‘contact’, ‘about’ and ‘products’ underneath this. In some cases you may have another layer of pages under this, for example, under ‘products’, there might be a page for each product.

If you are producing the website for yourself, it should be easy to draw the structure of the website with a flow-chart-like diagram. If you are working with a contractor, such a diagram should be produced, so you can check that the structure works before anything is built on it.

Structure your site according to how visitors are likely to access information. This is not necessarily how you might store information internally or how your business is structured. For example if you have two or more divisions which have similar functions, consider an integrated website that presents the activities of both, rather than making a user select a website specific to the division before they know which they actually want; this is promoting your internal structures ahead of ease of use.

This hierarchy is likely to be reflected in the menus used to access the pages. A logical structure is an important component of a highly usable, easy to navigate site. You should consider how the website might expand in future, and how you would store the likely additional information. If you have to redesign all of the menus or move items around, then it could be more costly or confusing than it needs to be. This principle is sometimes called ‘extensibility’ in the jargon of websites.

Usability

Usability means the ability of users to find and use the information they need. Usability touches on many of the other disciplines here; a webpage which presents 20 screens full of text without paragraphs or headings is not usable, because the content is not web-friendly. A website which is structured in an ad-hoc fashion by many hands is likely to have poor usability because there is no consistent structure or navigation.

Usability checklist

• How many clicks do you have to make to access any given page having landed at the homepage of the site? Over three and your structure and navigations may be too complex.
• Is a consistent menu used across all pages of the site, which directs users to the main categories of information?
• Is the site consistent with how users are used to experiencing the web?
• Are links underlined and do they change colour when you have visited their page?
• Do you get some visual feedback when you move the mouse over a menu button?
• Are pages suitable for scan-reading? Are they concise, and do they use headings to denote sections and highlights to draw attention to important information?
• Has your designer suggested a ‘flash intro’, or have you requested one from your designer? The evidence is that these actually frustrate users more than they help them.
• Does the site anticipate and answer users’ questions? A common mistake is to omit any pricing information.

Accessibility

Accessibility is making sure that your site is viewable by the maximum number of people. This might mean people with certain types of internet connection, computers or web browsers, or it might mean people who are partially sighted or even blind.

Many people in Britain have broadband internet connections now, but a sizeable minority is still using the standard dial-up modem, which is much slower. If your website is an international one, you may find that the proportion using dial-up in some countries is even higher. When you’re designing or approving a website for your company, check that the site works effectively over a dial-up connection. A benefit of doing this is you may well save money on hosting charges if your website is optimised for compactness. If your website is slow to load, you should look to improve components such as image compression.

In addition, pay some attention to the range of different web browsers that people are using. If you only have one browser, the chances are it is Microsoft Internet Explorer, but there are a number of other browsers people use to access the internet, including Firefox, Netscape, Safari and Opera. The best thing is if the website displays identically on each system, and the best way you can do this is by making sure that your web-pages are well-written.

The Disability Discrimination Act applies to companies' web presences, and one aspect of that is design of websites which work for people with reduced or no sight. Partially sighted web-users often use their screens at high levels of magnification (so the website should scale elegantly to low resolutions). They are also likely to increase their font size (so you should allow font scaling in your web pages, even if it does allow users to spoil the ‘look’ of the page by doing so) and favour high-contrast images.

Blind users of the internet do exist, and typically they use a piece of software called a ‘screen reader’ – which dictates the content of the screen to them, or a Braille display. For these to work well, you should avoid using graphics to represent text or menus (since the screen reader cannot read the contents of a graphic) or if you must, make sure that any text presented there is also included in the ‘alt tags’ of the image.