Get Your Site Right!
Teacher: Bob McElwain

"I see you like red text on a blue background," A. Visitor said.

"Right!" Mr. Webmaster snapped back quickly. "And it's your site, so you can do as you please." "Right!" The jaw jutted forward pugnaciously. "So you want to select only visitors who like red text on a blue background. Right?" "What 'cha mean?" he demanded suspiciously. (Sound of mouse clicking on the Back button.)

The above hypothetical webmaster will get exactly what he is demanding. He is selecting from the surfer population those who enjoy red text on a blue background. All others will click off. Why build a website that annoys anybody?

Think of the shops and stores you routinely visit. While there are differences, they are outweighed by the commonalities. Light colors dominate on walls and ceiling. Good lighting prevails. Product is presented boldly. The content of a given isle is clearly indicated. Most shops and stores are almost boringly alike.

The same is true of effective websites. Visitors want your products, services, or information, and they want to find all easily, without distractions. While great sites may appear boringly alike, they work. Follow their path, for it leads to success.

Throughout these notes, the emphasis is on ideas that work.

While some common mistakes are pointed out, things to be avoided because they may annoy visitors, the purpose is to underline approaches to site design that support first class site function. While some items may not apply to your site, most are universally applicable.

If you do not already have a website, you will find all you need here to build a great site right now. It is more difficult to use these notes, if you already have one because anything you want to implement means making changes. One approach is to make note of things you want to do. When it becomes appropriate to redesign your site, which will happen sooner or later, then include your notes in your new design. Adding a new idea to an existing design can be tricky; it must add substantially without detracting from what already exists.

Things Not Included

There are many major factors that contribute to a successful site not mentioned here, such as the importance of niche marketing, the necessity for a solid business plan, and the need for a proven marketing strategy for each product or service. Other important topics not mentioned include building a newsletter, providing free information, the importance of domain and product names, and so forth.

The Basic Table

Good page design begins with a table which is generally the entire page. In defining this table, use fixed column widths in pixels rather than percentages. Browsers will treat a given percentage differently and monitor settings can further distort the original plan. Also be certain long URLs or graphics do not blow out widths defined.

What should the width of the table be? Since there are still some monitors in use that are limited to 640x480 pixels and some 800x600 users have large font set, at least in the near term I recommend the table width be set to 600 pixels. Further, some surfers do not allow their browser to occupy the entire screen, for it makes it more difficult to move easily to the desktop and between applications.

Many recommend using 800 pixels. (In which case the table width should be about 760.) While I will not argue with this position, I must point out that most are annoyed when forced to scroll horizontally. To assume an 800 pixel screen is to assure you will annoy some surfers. Such visitors generally leave quickly. For myself, I will hold to 600 pixels for at least another year or two.

The Navigation Bar

While some effective sites use a horizontal navigation bar (tabs seem popular just now), the most common choice is to hold the top of the page for important content and locate the navigation bar in a column to the left. This format gives greater flexibility in that it is easier to add items to a vertical column. Screen width is fixed, so in expanding your site, you may find it difficult to implement needed changes in a horizontal bar.

If you decide upon a vertical navigation bar, then your basic table will contain two columns each with a fixed width in pixels. The column to the left need be no wider than required to fit in your navigation buttons or text links. Something like 130 or 140 pixels often works well.

If your navigation bar is at the top of the screen, your basic table contains only one column. In either case, additional tables can be inserted as needed within the basic table, or in the second column if the first is used for a navigation bar. These secondary tables can be safely defined with percentages.

Keep the wording in the navigation bar as simple as possible.

Use standard phrases such as Home, Order, About and so forth. To be creative with your navigation system is a great way to confuse visitors. And confused visitors leave very quickly. Below, more is offered regards the organization of the navigation bar relative to site content.

Announce Location

In some standard way from page to page, report to your visitor what page is being viewed. One way to do so is to change the link in the navigation bar related to the current page in some way. Highlight it, maybe. Or use a different graphic. The latter has the drawback of slowing the load of the page a bit, as the second graphic may not have been cached. An announcement with text works as well, particularly if located near the top of each page.

About Frames

Don't use them. While often touted as an aid to navigation, they don't work out well in practice. Here are a few things about frames that annoy people.

Many just don't like them and object to being forced to use the additional scroll bars.

It's easy to bust a frame width, which forces horizontal scrolling, a big no-no.

If not done properly, some part of your frame layout may remain loaded in the browser when a visitor moves on to another site. They will find this very annoying, for the only way to get rid of it is to close the browser and restart.

What's more, spiders don't handle frames well, which can have a negative effect on your search engine positions and greatly diminish your traffic.

In site design, always prefer the more common option given any choice. Since most choose not to use frames, this is also your best choice.

Text Links

Each page should end with a set of text links that correspond to the items in the navigation bar. Below these links, include full contact information, including your name, mailing address, and phone numbers.

Colors

Without exception, the best choice is black text on a white background. Before deciding on something different, remember that the fuzziness in a monitor slows reading about 25% over reading printed copy. Also note that any other color combination will slow reading even further.

Along this line, use bold only for subtitles, and keep them as short as possible, for bold is also more difficult to read. Italic slows reading by an additional 40%, thus should be used sparingly. Also avoid underlining text, for people may try to click on it as they would a link, which only leads to confusion.

If you are tempted to try different text colors for accent throughout the page, resist it. A good page is meant to be scanned from top to bottom. Odd colors interrupt the flow and do not come up the same way on all monitors. That lovely looking magenta you used on your closing pitch, may look like coal tar on my monitor, or worse, be simply unreadable.

Fonts

Verdana is a very good choice. It was commissioned by Microsoft and created for use on web pages. Its power lies in easy readability in any size.

Arial is a good choice. For one thing, it gives you a more even difference between sizes than does Verdana.

Other options are to be avoided, particularly New Times Roman. As mentioned, a monitor adds a fuzziness that slows reading by 25%. Because of the serifs in New Times Roman, there is even greater fuzziness. Some argue it is the best choice because it is what we commonly find in newspapers, magazines, and often in books. However, this ignores the fuzziness problem. Verdana or Arial is the best choice.

Also note that while different font sizes can work effectively on a page, it is unwise to mix fonts. Use the same font throughout the entire site. Graphic or text titles can be rendered in a different font, provided it complements the font used for text, and the same font is used for all titles.

Link Colors

The colors that work best on most monitors are dark blue for links to be clicked and light blue for those clicked. While not as important as the text and background color, this choice is important. Be conventional in this and be creative elsewhere.

The Background

If you are using a vertical navigation bar, a colorful background pattern is effective, provided it is not so bold as to distract from page content. If you set the background color of the second column in your basic table to white, you have a pleasing display of the background behind your navigation links with a narrow column to the right of the screen about 15 pixels wide. It gives a satisfying balance to the page.

Graphics

While graphics can really be site killers when they are slow to load, use of the same graphics on each page, such as for navigation buttons, slows only the first page loaded. Once the browser has cached the buttons, they are loaded as needed from the visitor's disk and do not slow the loading of subsequent pages. This is also true of logos, invitations to bookmark the site, or anything repeated on other pages.

Free vs Paid-For Graphics

There are a lot of free graphics on the Web, but it takes a lot of time to find something that suits your page. And often you have to settle for something that is not exactly what you wanted.

When you find something you like, there is a very good chance others are already using it. If it is in common usage, it may be a negative element on your page.

A good artist can create a great logo or bookmark invitation for about fifty dollars. It will be original art work, designed specifically for your site, thus it is bound to enhance. Turning to an artist for required graphics saves you time and assures art that supports your site.

Wait, however, on asking an artist to work up something until you have at least a draft of site content. A good artist can support basic content elements while enhancing the appearance of the site.

Page Template

Collectively, the above amounts to a page template to be used for each page on the site. Again, while this approach may appear to lack creativity, to be in fact boring, it is precisely what is needed. You want visitors to focus on your page content, not distracting colors, graphics, or doodads of any kind. Along this line, ignore plug-ins, pop-up windows, and sound, for they detract and often annoy.

Organizing The Site

This is best accomplished with doodles on sheets of paper. Jot down the function of each page. Also note any specifics you want to be sure to include. This is a good time to consider length. Long pages are site killers. If you have one, or have one planned, figure how to split it effectively into smaller parts.

It is unrealistic to have a link in the navigation bar to every page in your site. For example, for a set of articles you have collected, the link may read "Info You Need." It can point to a secondary set of links to the articles themselves. (Preferably annotated, for people are often mislead by titles.) This becomes a sub-site within your main site. As you continue collecting ideas, clip together pages representing sub-sites.

About Function

In the above, it was suggested you jot down the function of each page. This is worth special mention. A common mistake is to focus on the content of a page. While content is king, content supports function. That is, the function of the page is more important than content, for content flows from it.

The function may be as simple as providing essential information as with an article. But it may be much more complex. The function of the more important pages on your site are to sell product or services, encourage visitors to return, subscribe to your newsletter, and so forth.

Just as site function rules site design, page function dictates page content. If you find a page without a function that contributes to the overall site, its function and content need to be changed or the page should be discarded.

Multiple Profit Centers

Few sites are successful selling only a single product or service. But when getting started, you may have only one. Even so, organize your site to make it easy to add future profit centers as they are developed. And since any profit center may need to be discarded, also organize so that it is easy to do so.

For example, suppose you are just getting started and have only one product, a book on good nutrition. Make this a profit center. Pages within this center may include sales pitches, testimonials, an order form, and so forth. But make this just one button in your navigation bar, and let this button link to the main page of this sub-site from which there are links to other pages within the center.

When you add a second profit center, perhaps selling nutritional supplements, you again add a single button to the navigation bar pointing to the main page of this new sub-site upon which other pages of the center are referenced.

When your site is organized in this way, it is easy to add additional profit centers. And it is easy to drop one that is not paying off. In the latter case, you will need to delete all references from remaining pages to this center, as well as links to it. To make this as easy as possible, minimize the number of references to other centers from within the one you are in.

Adding Page Content

In developing page content, pay strict attention to the page function. Do not allow any content to creep in that is not required to accomplish the purpose of the page.

For example, if the function of a page is to allow visitors to download a copy of a special report, it may be a good idea to remind them of the three principal benefits in doing so. But this is not the place to suggest other reports or pages, for they may click off and defeat the purpose of the page. If you want to make further suggestions after the report is downloaded, do a redirect to a subsequent page and begin by thanking your visitor for downloading.

Elements Common To Most Pages

Open with a compelling headline that involves the visitor immediately. You have only a few seconds to grab the reader's attention, and draw him deeper into the page. Each word must seek to hook emotionally and draw him ever deeper. The objective of most pages is to cause the reader to take an action. which may be to order, check out further information, explore in another area, and so forth.

Since readers scan, use lots of attention grabbing subheadings. Craft them so that collectively they define the page purpose. Use short lists of 3-7 items, and keep each item brief. Avoid long paragraphs at all cost. Use white space to break up long passages into smaller parts.

Consider The Search Engines

Some site pages are much better candidates than others for good search engine positioning. Order pages, for example, seldom are not expected to show up at all. Look for pages that focus on a single topic. If you can identify a keyword phrase searchers may enter, feature it in the Title and Description tags, and place it first in the Keyword tag, followed by variations on it.

As with the Title and Description tags, open with a headline in which the keyword is as close as possible to the beginning of the statement. Try to fit it into other headlines. Use it as close to the beginning of a paragraph as possible. And wrap the page with it as well.

There is a good deal more to producing spider friendly pages, but the above makes a good starting point. One caution, however. Do not write bad copy to accommodate the spiders at the expense of the message you are relating to your visitor. Any visitor is far more important than the position of any page.

About Writing

Developing great page content may be the most difficult writing task of all. It becomes even more difficult when the task of keeping the search engine spiders happy is added in.

Lots of people are not very good writers. And most people do not write as well as they think they do. You will do much better if you honestly evaluate your skills level, then do whatever is necessary to assure the finished product is first rate. This may mean others must do the writing for you. Or good editing may be all that is required. In all cases, though, proofreading is required.

Polishing

Always lay your work aside for a day or so, then read it aloud. You will be quite surprised at how many things you will find that need fixing. You will also find things that can be deleted, and others that can be added to punch it up.

Be sure to spell and grammar check all. Nothing kills the image of a professional looking site faster than misspelled words or bad grammar.

The same holds true for busts in your HTML code, such as a bold tag without a closing tag. Take the time to view each page in both Netscape and Explorer.

While you are about it, be sure you have no missing graphics, and that you have no duplicates that mean unnecessary downloads.

More important, be sure all links are good. There is no excuse for a bust within your site, and your visitors know this. They are also intolerant of busts in outgoing links; test each link at least once a month, preferably more often.

Ad Copy

A good way to think of a web page is as advertising copy. Even those with solid writing skills may struggle with copy writing. There are books that can help. One practical approach is to study ads in major publications and try to beat them. "TV Guide" may be the best of them all for this purpose.

Another approach is to study pages on sites you know are doing well. Look for ideas you can use, but also look for ways to do even better.

Essentially your web page needs to be good advertising copy that compels the reader at every step to take another. Ignore words such as we, our, us, my, me, mine, and I. Also avoid the sort of prose in which these words would be used.

Instead, feature benefits to your visitors. Even when speaking of the features of your product or service, extend each by explaining how your visitor will benefit from it.

Little Stuff

Here are a couple of important elements that just did not fit in well above.

Order Forms must use SSL. Be sure to keep them simple and require as little information as possible. Complexity or unnecessary demands lead to fewer completed orders. Industry wide it is reported that 65% of orders are abandoned before completion.

Include a privacy statement whenever you request an email address, directly or indirectly. Include it with a form with which the visitor can subscribe to your newsletter. And also with a mailto link that invites them to contact you. Assure all you will not use the address for other than its intended purpose. Make as strong a statement as you can, for this appears to be of great concern to surfers.

Splash pages are site killers. Do not even consider using one. More than half who hit such pages, immediately click off the site.

Wrapping Up

I hope you enjoyed these notes. And that they triggered some ideas for improving your site. I want them to be as helpful and complete as possible. They will be frequently revised. If you can think of anything I overlooked or something that wasn't clear, I would appreciate hearing about it. Any comment at all will be helpful. If you can spare the time, please share. mailto:getright@sitetipsandtricks.com.

About the teacher:
Bob helps webmasters grow their sites by showing them how to work smarter for more fun and profit with less effort. He has been marketing on the Web since 1993. Visit his newest site: http://SiteTipsAndTricks.Com. Subcribe to STAT News Now: join-stat@lyris.dundee.net