Creating the Basic Design & Layout

This question leads us first to targeting your audience. For a start-up business, it can be a difficult task figuring out what kind of people will be looking at your site, and what they will want to find there. For an established business, you'll have a better idea of what the residents of cyberspace might want because you can find out what has been requested in the real world. You can ask the salespeople, customer support, and so on, and get a good picture of what might belong on your site.

Who's Looking?

Unless your site will be private, you really won't be able to control exactly who may be viewing it. The best you can hope for is to establish whom you'd like to have perusing your masterpiece and to design it with this audience in mind—never discounting the fact that there will be others looking as well.

We can estimate who might access an average corporation's Web site:

Existing customers
Prospective customers
Job hunters
Shareholders
Employees
Competitors
Web surfers

Although a single person may fit into several of these categories, it may be easiest for you to break viewers up into these types of manageable groups. Looking at the preceding list, you can predict that each of these groups will have different interests when visiting your site. For instance, a prospective customer will want product/service information and pricing, a job hunter will want to know about your employment opportunities and company information, shareholders will want up-to-date press releases and company forecasts, and so forth. Each of these potential uses for your site will help to dictate how you lay out your design.

What Information Are Viewers Looking For?

The amount of previous knowledge your viewers have in regard to your chosen subject will dictate how much background information you will need to provide, and to what extent you will have to define and explain specific terminology, concepts, and so on. It will also define the way you organize your information.

For instance, if your viewers will include previous customers, try to anticipate what their needs might be. Does a particular product generally need more customer support than others? If so, focus on that product. Now, what specific problem are they trying to solve? If you sell vacuum cleaners and the question you get on your support line most often is "How do I change my vacuum cleaner bag?", you should definitely include a tutorial on changing vacuum bags. Makes sense, right?

Think of it like this: In a customer support Web site (or section of a Web site), your goal is to have every potential customer question answered by your Web system. The only reason people will look to your Web site for answers is if they think they can find them there. Of course, it is very unlikely that you will actually succeed in answering every potential question, which is why you should always include an e-mail link on your pages for people to get more information. Even if your pages are for use only within your company, you should do a similar analysis of the potential readers of your pages.

If your Web site is intended to gain new business, you'll be more careful in planning the depth of information you wish to present. Most potential customers are looking for a good representation of who you are, what you do, and what sets you apart from your competition. They're looking for something to make their decision process easier, not more difficult. The hierarchical structure of Web navigation lends itself well to this, as it enables a potential customer to retrieve information on the company to a level of their choice.

Were we to try to approach even more audiences, as in the previous list (shareholders, employees, and so on), we would need to anticipate their specific needs and see how we can apply them to the overall system. The more audiences you want to address, the more information you'll need to process, and the more you'll have to organize.

How to Organize Information

Now that we know what we will write about, we must arrange this information into main subject areas.

Be very careful not to go overboard on this one. Too many choices generally only confuse your viewers, so try to limit yourself to a few well-defined areas. Also, try to keep similar information in one area, rather than repeating it for each group. For instance: don't have one company background page for new customers, another for existing customers, and a third for stockholders. Instead, use the same page of information for all three and apply the customization to the way you link to this information. Failing to do this will cause problems in that viewers will get the impression that they aren't getting the whole picture when they view your system, and may attribute this to your failure to be either organized or honest.

Creating a System Diagram with the Customer in Mind

Now that we have determined what your main subject areas will be, we must determine how your viewers would like to view this information. To do this effectively we need to design a site diagram. You have a couple of choices here. You can design a Web presentation (leading them through the sales argument or step-by-step instructions), or design a site with many different ways to navigate. The best way to determine which strategy is best for you is to first look at your main subject areas. Do your subject areas follow a timeline? In other words, will your viewers be lost if they view your site in no particular order? Is your audience very narrow, do you expect all your viewers to be seeking the same type of information? A good example of a site that fits into this format is a site such as an instructional guide. For example a Web site focused on how to brew your own beer would fit into this sequential format nicely.

Home Page: How to brew your own beer

Step 1: What you will need
Step 2: Your yeast
Step 3: The brewing process
Step 4: Fermentation
Step 5: Bottling or kegging
Step 6: Sweet rewards

Another option for organizing your site is to use a basic hierarchical structure. This is the way most Web sites are arranged. Main subject areas on the home page lead to more specific information within. This way, viewers can have as little or as much information as they wish. For example, Yahoo.com uses a hierarchical structure in addition to a search engine.

Simplicity Is the Key

If at all possible, we try to use a "three clicks" rule, which means that no information should be more than three clicks away. If someone wants information on your widget #1234, they should be able to start getting that information within three clicks of your home page. For instance, say your first page has a link to a products page, which has a link to a widgets page, which has a link to the widget #1234 main page. Three clicks, and the viewer is beginning to get information on the product. While you may have more in-depth information on the particular product that will require the use of additional links (product tests, applications, testimonials, and so on), the viewer knows he/she is on the right track within three clicks.

Strategies for Multiple Platforms

When you sit down to develop your basic site diagram, you will want it to be accessible to many different browsers. Don't ignore this step! Not everyone has a fast computer running IE. If you only design for this one group, many of your viewers may get less than acceptable results. Fortunately, there are many ways to make everyone happy and make your site look good in the process.

First, we need to discuss the differences in HTML. HTML 2.0 is the old standard and can be viewed by most Web browsers, but does not include many of the coolest features of HTML (such as backgrounds). The proposed HTML 3.2 can be viewed by many of the nicer browsers (such as those from Netscape and Microsoft), and to make things even more complicated, Netscape and other browsers also have there own HTML extensions that work only with their systems (such as frames did until very recently). It gets even more complex—different browsers can also interpret HTML code differently and will give you undesired results if this is not taken into account. So, what should you do about this? Well, that depends on whom you expect your viewers to be, and how much time you have to ensure cross-browser compatibility.

The easiest way to deal with this problem is to simply use HTML 2.0 without graphics. This will ensure that everyone will be able to view your system. Of course, your system will probably look bland, and people will not be drawn back again to see your site. If you are interested in this route, visit http://www.w3.org/pub/WWW/MarkUp/html-spec/ there you will find the HTML 2.0 specifications. We would only use this option in cases where we are simply presenting non-sales information (like technical papers).

The next option is to use HTML 2.0 with a little advanced HTML to spice it up a bit. If you are careful, you can make your site viewable by all, while adding graphics and backgrounds for visual impact. In this case, use as few advanced HTML extensions as possible and make your images GIFs to enable the widest audience to view them. Advanced HTML specifications can be found at http://www.w3.org/pub/WWW/MarkUp/, and browser vendor sites such as Netscape and Microsoft. This option takes a lot of testing to get right. Before coding your entire system, be sure to start with a page as your template, and test it extensively with other browsers. Your pages may not look exactly the same on all browsers, but that's OK, as long as it's always readable.

Designing a Web site diagram can be a complicated process, but it is vital to the overall "friendliness" of your site. Diagramming also will help you tremendously in the long run by keeping you focused. Just as contractors must know what type of house they are building before laying the foundation, you should know the basics of your site before designing the actual pages.