The storyboard is the blueprint for your site, but there are many steps to take before you can start construction. In Web development, the majority of the time should be spent in the planning.

• • Detailed planning of your site before a line of code is ever written
• • Content guidelines
• • Text guidelines
• • Color guidelines
• • Navigation guidelines
• • Graphics guidelines
• • Visual guidelines
• • Other guidelines.

Detailed Web Site Planning

. Generally you (yes, you) will develop the first draft of the text for each page. You know your target market best—you know what makes them buy, you know what they want, you know the buzz words for your industry far better than your Web developer.

The next step is to have this text reviewed and edited by an online copywriter. Online copywriters usually have a background in advertising, where they learn to get the message across in as few words as possible. They know how to grab the reader’s attention. Internet users don’t want to read pages and pages—they want to get what they’re looking for quickly. The text should be short, to the point, and written so it can be easily scanned.

Once the online copywriter has done his magic, you will review and approve. You want to make sure that only the form—not the substance— has been changed.

The next step is to have the content reviewed and edited by an Internet marketer—someone who has expertise in search engines and their ranking criteria as well as repeat traffic generators and viral and permission marketing. The Internet marketer will review and edit the text and graphics, again making sure that the keywords are used in the appropriate places for high search engine ranking. There is a real science to this. The keyword assigned to a particular page should be used appropriately in the page title, the text throughout the page, the meta-tags for keyword and description, the headers, the Alt tags, and the comments tags. The Internet marketer usually develops the content for these tags, titles, and headers at this point. Sometimes the Internet marketing is handled by your Web developer’s team and sometimes it is a separate outsourced activity.

The Internet marketer also ensures that you have used the appropriate repeat traffic generators, appropriate permission marketing techniques, and appropriate viral marketing techniques. Again, you need to review and approve the changes to make sure your message is still presented appropriately for your target market.

The next step is graphic design. Sometimes the graphic designer is part of your Web development team and sometimes this activity is outsourced. The graphic designer develops the “look and feel” for your site—the navigation bar, the background, and the separator bars. The graphic designer knows that your online and offline corporate identity should be consistent. Again, you review and approve the graphic design. Once all this is done, and everything has been reviewed and approved, you are ready for the programming to start.

Content Notes

Make your contact information readily available. Consider including contact information on every page. This includes your address, phone and fax numbers, and especially your e-mail address. Make it easy for people to get in touch with you.

Avoid “Under Construction” pages on your site; they are of no value to the visitor. When you have information, post it. Until then, don’t mention it. “Under Construction” can actually hinder your search engine placement with some of the popular search engines and directories. Include security information. Explain to your customers when transactions or exchanges of information on your Web site are secure. This is important if your site will be accepting credit card orders.

Include your privacy policy. Tell people how their personal information (e.g., their name, e-mail address, etc.) will and will not be used. This makes visitors more comfortable submitting inquiries to your site or joining your mail list.

Minimize use of background sounds and autoplay sounds. Some people surf the Web from their office at work and wish to discreetly go from one site to the next. Background sounds and sounds that load automatically can compromise their discreetness. Give your visitors the option of listening to a sound, but do not force it upon them.

Text Notes

The tone of your text and the design of your graphics conveys your intended image. When determining the text content of your site, be mind ful of the fact that your own biases may preclude you from placing information on your site that is second nature to you, but important for your visitors. Review all text content on your site to ensure that you have not omitted anything crucial.

Also, keep text brief. Almost 80 percent of Web users scan text online as opposed to actually reading it. Therefore, make your key points quickly and succinctly, and use lots of bulleted lists, headers, and horizontal rules to create visual breaks in the content. This keeps visitors interested enough to read the information on your site. If they are faced with huge blocks of text, most visitors are overwhelmed by the quantity of the information and are too intimidated to read your message. Write for scannability.

Don’t set your text size too small, as this is too hard to read. But don’t set it too large, as this looks like you are shouting. Also, avoid using ALL CAPS, WHICH ALSO COMES ACROSS AS SHOUTING.

Color Notes

Keep your online and offline image consistent. Be consistent with your use of logos, corporate colors, and other marketing collateral associated with your company.

Choose your background and font colors carefully. Using backgrounds that are too busy obscure your text and do not provide a pleasant viewing experience for your visitors. Only certain colors show up properly on certain backgrounds. A light background with dark text is easiest on the eyes.

White text displays best on black backgrounds, and black text is most readable on white backgrounds. Of course, you can use other color schemes, but choose your scheme carefully, as mentioned. There is nothing worse than a Web site that is unreadable. Also, be mindful that some people might print pages from your site. If you incorporate a large amount of your text into the actual graphics on your site, the text might be difficult to read when printed. Also, graphic-intensive sites load more slowly. If you have to incorporate text content into your graphics, be sure that it is sensible to do so.

Use the default colors for links whenever possible. Blue text usually indicates an unvisited link. Purple, maroon, or darker blue usually represents a link you have visited, and red is the color of an active link. It should not be difficult for visitors to identify your links. If you decide not to use the default colors, your links should be emphasized in a consistent manner through font size, font style, or underlines.

Navigation Notes

Ease of navigation is very important to your site. Provide a navigation bar at a consistent location on every page that links to all of the major pages of your site. Make it easy to get from one page to any other. Search engines can index any page from your site, so your home page might not be the first page visitors come to. Never have dead ends where viewers scroll down a screen or two of information only to find that they must scroll all the way back to the top to move on (because you have no links at the bottom of the page). A consistent-looking and wellpositioned navigation bar with functioning links is the key to efficient site navigation.

Your visitors should be able to get anywhere they want to go on your site in three clicks or fewer. Develop an effective navigation bar as previously described. For very large sites (i.e., sites consisting of more than eight to ten major sections), it is a good idea to include a site map that users can access from any page in your site. Site maps, as shown in Site maps make it easy for users to access the information they are looking for without causing them much frustration. Include a link from your main navigation bar to the site map for the easiest possible reference. Site maps are great for submission to the search engines as they provide links to every page of your Web site ensuring, as much as possible, that every page of your site gets included in the search engines’ database.

An additional feature you might wish to include is an internal search tool. This allows users to enter their query and have all relevant matches returned, based on their query. This is a particularly useful feature if you sell many products directly on your Web site or if your site contains many pages of content. It allows the user to quickly search for the desired item or information using the product’s name or a relevant keyword. Intel, the computer chip manufacturer, operates multiple sites and offers many products and services. To help users locate the information they’re looking for, Intel has integrated a useful search tool. Keep the design of your site consistent. Font types, headers, footers, navigational bars, buttons, bullets, colors, and so on, should be consistent throughout the site to maintain a polished, professional look.

Graphics Notes

Graphics that take too much time to download can cause visitors to leave your site before they get a chance to see it. The combined size of the text and graphics on any Web page should not exceed 50 KB. Some people turn graphics off in their browsers to save time, so you should provide all of your information in text as well as graphics. Use descriptive Alt attributes in your image tags. The Alt text will load in place of the images when the graphic does not display for any reason. Visitors who choose not to browse with graphics turned on will have an easier time navigating your site. Also, Alt text is spidered and indexed by many of the major search engines. Using keywords in your Alt text in your image tags will improve your ranking in search engines and will provide a description of the images in the event that they are not loaded. If you use any large files for graphics, audio, or video, warn your visitors by providing some text stating the size of the files.

Use thumbnail graphics where applicable. When you have a page with a lot of large images (e.g., an online photo collection), create small “thumbnail” versions of each image and give visitors the option of clicking through to the larger versions. This is far superior to making your visitors wait for a series of large images to load.

You should be careful with your use of image maps as well. Image maps are large graphics with clickable “hot spots.” Image maps typically are used for navigation and usually have text embedded in the graphic. Search engines cannot read text embedded in a graphic, so from the standpoint of search engine friendliness, if you use image maps always ensure that you provide your appropriate text and Alt tags for the search engine.

Very often, when a large graphic is used for an image map, visitors must wait for the entire image to load before it is apparent where they must click to begin navigating a site. Instead of using a large image map, break the image into smaller images so that visitors receive faster feedback from your site without having to wait for a huge graphic to load. Also, always provide an alternate text link navigation system to assist people who surf with their graphics turned off.

Visual Notes

Check your site using different browsers. What viewers see when your site is downloaded depends on what browser they are using. Different browsers display the same Web site differently. Before you post your site on-line, check your site with the most popular browsers:

• • Netscape Navigator 7.x
• • Netscape Navigator 6.x
• • Netscape Navigator 4.x
• • Opera Browser
• • Mozilla Firefox
• • Microsoft Internet Explorer 7.x
• • Microsoft Internet Explorer 6.x
• • Microsoft Internet Explorer 5.x
• • Microsoft Internet Explorer 4.x
• • America Online 9.x
• • America Online 8.x.

Also make sure that you review your site on both a Mac and a PC as sometimes your Web site looks different depending on the platform. Design your site for various screen widths. Try to accommodate visitors regardless of the screen resolution they use. Some Web users still run their systems at 640 pixels by 480 pixels; keep this in mind when designing your site. Use your Web traffic analysis software to determine the screen resolution preferences of your visitors. Your Web site should steer clear of scrolling marquee text. Scrolling marquees are difficult to read and are not compatible with all browsers. Simply post text directly on your pages if you have something important to say.

Other Notes

Your home page should be 50 KB or less and should be displayed on no more than one or two screens. Studies have shown that visitors rarely wait beyond 15 seconds to download a site. Test the download time of your site using different connection speeds to ensure that it is reasonable for all users. Also avoid dead links. These are links that don’t go anywhere and the viewer usually receives a “404—File not Found” error message from the Web server after clicking on a dead link. Verify periodically that all your links are still active.