Other pages in this series: 1. Overview | 2. Preparation | 4. Launching | Business models
Having chosen an appropriate size range for your site, the next step is to devise its information architecture: in other words, what each page will contain, and how it will link to other pages. With up to about 10 pages, the simplest method is to link every page to every other, often using a navigation bar ("navbar") across the top of the page, or in a column on the left-hand site. With larger sites, subheadings will be needed - and unless you are very careful, many visitors will fail to find the information they're after.
When every page is not linking to every other page, a good planning method is to draw a tree diagram of the site - beginning with the home page, which will link to a number of main pages, each of which will link to a number of others on related topics. A good design tool is a whiteboard, on which you can show each page as a small box with a title, with lines between the boxes denoting links. Keep revising the arrangement till it is as logical and obvious as possible. A little user-testing goes a long way, in this process. (User-testing is something Audience Dialogue can do for you - it's becoming a major part of our work. The larger the site, the more worthwhile user-testing is.)
By "design" here we mean the look of each page. You'll have noticed that most sites have a standard look, with the navigation elements, type font, colours, etc the same on each page, or each group of pages. The purpose of this consistency is to remind visitors they're on the same site - or maybe on a different part of it, and above all, to help them find their way to the information they need.
When the navigation system has been worked out, it's good to have a professional graphic designer produce a template for the site. However, try to find a designer who understands that design for the web is different from design for print. On the web, visitors will use different computer systems, different browser software, and different sized windows. If the designer insists on visitors seeing the site exactly as he or she sees it, this can create a lot of disadvantages (e.g. slow page loading) and/or a lack of flexibility. The whole principle of the Web is that users can choose how they want a page displayed. If you try to stop them from doing that, you'll be closing the door to a lot of potential visitors.
When the Web was new, back in the mid-1990s, the most common design mistakes were garish coloured backgrounds behind letters, flashing images and text, enormous photos that took forever to load, and hype-ridden writing. By now, most web designers have learned not to do that. In fact, they've gone to the opposite extreme: trying not to be noticed. Common mistakes that we see these days include text that's too small for many people to read, pale fonts, lack of contrast, cryptic navigation links, meaningless pictures, multiple-column layouts that make users scroll up and down unnecessarily, pages that don't print properly, and pages so wide that users have to scroll horizontally. Our page on usability has more advice on this topic.
This means writing the text of the pages, and creating suitable images (or finding copyright-free images). The actual writing is not something that can be totally farmed out to a web designer, by handing them a brochure, mission statement, or other official document, and saying "upload this". Writing for the Web needs a different style: more conversational, and more accessible for readers who don't have English as their first language. You can't assume that all visitors will read all the text on a page - specially a long page - so use the "inverted pyramid" style you see in newspapers, and put the most important points at the top of each page. With that, visitors can see a summary of the page even if they only look at the top screenful.
As there are so many dodgy and misleading websites, it's important to have your readers trust your site. This can't be done by simply saying "trust us" (which often has the opposite effect) but, in a hundred little ways, creating a path of credibility between your content and your readers. This issue is so important that I was going to write a whole separate page on how to build trust - until I realized that it could easily be misused by unscrupulous sites. However, I'll mention some aspects of trust that can't be easily manipulated - such as getting links between your site and other trustworthy sites, putting the revision date and author's name on each page, giving the physical address of the organization, showing photos of the people involved, stating the ownership of the organization...and a lot of other small points like that. None of these by itself is of vital importance, but they all work together to create trust in the site.
To actually build a website, somebody needs to produce the HTML code. (To see what it looks like, choose View Source in the Edit menu of the browser software you are using now.) Professional web developers write directly in HTML - it gives more control over the way pages look. But HTML - though easier than most computer languages - takes a while to learn to do well. If you want to build your own site, perhaps with some input from experts, we recommend software that writes the HTML code for you, but is like a word processing program to use. Common software of this type includes Dreamweaver (which will do just about everything, therefore is hard to use), Front Page (seemingly easy, but full of nasty little traps), Filemaker/Claris Home Page (no longer available new, but one of the easiest to use), and Freeway (excellent for small graphics- intensive sites). Some of this software is free, and works well for small, simple sites. NVu is widely used and easy to learn, but has a few nasty habits. There's a Mac-only website creation program called Rapidweaver that's cheap and looked really good, but when we tried to buy it online, something went wrong, and the help desk wasn't helpful. Not a promising start. We gave up.
When the pages are written, the next step is to check them. You don't need to upload them to the Web to do this - you can simply use ordinary browser software to read HTML files on a local computer. It's best to check your pages on different browser versions (e.g. Internet Explorer and Mozilla/Netscape), and on different computer platforms (various versions of Windows, Macintosh Classic and OS X, and Linux). These different combinations all have slightly different looks. Mostly the differences are trivial - e.g. Netscape and Mozilla tend to have more space around the words than does Internet Explorer. However, for some designs, browser differences can create navigation problems for users.
You may not realize that the computer used for building a site can be different from the one used for accessing it. For example, I'm writing this on a Macintosh, and you're likely to be reading it with a PC. It should look almost exactly the same to you as it does to me. However, because there are differences between browser programs on various platforms, it's important to check how your pages look on a wide range of common computer and browser types. On the PC, test with Internet Explorer 6 and 7, Firefox, and Opera. On a Mac, Safari is by far the most used. On Linux, there are many browsers, but Firefox and Konqueror are the commonest.
As for checking the site, it's amazing how difficult it can be to find mistakes when reading from a computer screen. So it's a good idea to print out all the pages from your site, checking for errors, and fixing them before the site goes live. But you can't check the links on paper, so all the links will need to be verified on a local computer before being uploaded. Most site owners keep tinkering with the information architecture as the site is being completed - renaming, splitting, and combining the pages originally planned. Therefore, link checking should be the final step in checking the site before it goes to air.