Think long and hard before you include a splash page in your website. If your business is graphic design, animation, or something else that requires you to show off your graphic chops, then a splash page is appropriate. For most business websites, it isn't. Some visitors will bail, and others will resent the delay. Remember that most people don't go to a business website to be entertained - they go for information.

Okay, we've finally made it to the home page. A well-designed home page has the following characteristics:
• It provides an overview of what is available on the website, and every section of the website can be reached from the home page, either directly or with no more than 2 or 3 clicks.
• It looks attractive and projects the right image for the company, but it still loads in a reasonably short amount of time. A balance must be reached between fancy graphics and fast page loading.
• It reinforces the branding of the company or product, so visitors instantly know what website they have landed on.

It shares certain elements with all the other pages of the website, so that the pages all fit together, and visitors get a sense of the pages belonging to one website, rather than being a bunch of unrelated web pages.

A home web page usually includes a small amount of content, even if only a brief description of the company, but its main purpose is as a list of links to other pages where the real content resides. A home page is much like the table of contents in a book or magazine.

Most business home web pages will have the following links:
• About the Company
• Our Products and Services
• How to Contact Us

Any website that also sells products online should have another: Order Here! The fewer clicks required to get to your ordering page, the more orders you'll get - it's a statistical fact. Put your ordering page one click away from the home page (and perhaps from every other page as well). Actually, it's probably better to call the link "How to Order" or some such, and make it clear to the user that they have not committed themselves to ordering anything until the credit card number is submitted. A certain well-known (and well-designed) website offers the following no-pressure button:

"Add to Shopping Cart (You can always remove it later.)"

Most websites, of course, will have more than the above-mentioned four navigational items on their home web page. What you have there depends on the purpose of your website. Whatever's important, whatever you want people to see, should be right there, not buried several levels down.
Resist the temptation to give your navigational titles clever but ambiguous names. Of course you don't have to stick to the plain vanilla examples above.

• Who We Are
• What We Do
• Where to Find Us

Is also perfectly alright, but I wouldn't go much farther out than that. Again, the purpose of your website is to provide information. If your website features downloadable files, audio or video links, or other bandwidth hogs, list the file size next to each link so users will know what they're getting into. Inform.
Most websites use a hierarchical arrangement. In other words, users can "drill down" to greater and greater levels of detail. A hierarchy may be thought of as a triangle, with the home web page at the top corner, and the lowest level of detail as the bottom edge of the triangle. Hierarchies only make sense when they are reasonably close to an equilateral (equal-sided) triangle. If your home page links to twenty pages, you should add another level. If your home page links to only two pages, each of which links to only two pages, etc., then you have too many levels. Smaller websites usually need only two levels, while medium-sized websites may have a secondary level of "hub" pages between the home web page and the lower level containing the actual content. Of course, some sections of your website may have more levels than others.

How long should each page be? This is partly a matter of opinion, and varies greatly from one website to another. Some people believe that lengthy content, which if placed on a single page would require readers to scroll down several screens to see it all, should be broken up into several pages. Others argue that it's less hassle to scroll down a lengthy page than it is to click through to another page and wait for it to load. Websites designed for geeks (programming and network stuff) almost always seem to go for the long-page model, while more "consumer-oriented" websites more often choose the lots-of-short-pages design. Some online magazines, or "content-based" websites, do this for financial reasons. They sell ads based on the number of page impressions delivered, so breaking an article up into five pages means that they will score five page impressions instead of one (assuming that the article holds the reader's interest). It may also improve search engine rankings, and make articles easier to maintain. There's nothing wrong with a page that scrolls down for miles, as long as it's designed properly.

A long web page should have a table of contents at the top, with hyperlinks to each section of the page. This is done by inserting NAME hyperlink tags at appropriate points, and using the "#" to link to the different sections, for example:
A HREF = "long_page.html#section1"
A HREF = "long_page.html#section2"
etc. You may also wish to include a "Top of Page" link here and there.

A "navbar" is an essential element of a well-laid-out website. A navbar not only makes navigation easier, but is an integral part of a website's branding. When a user sees the navbar, they know what website they're on, and they know that they can get back to where they started any time, so they worry less about getting lost. Your navbar should include all the main sections of your website, and it should be the same on every page of the website (although each section of a larger website may have its own sectional navbar in addition to the main navbar). Every page should have a navbar as an integral part of the layout of the page, which should be consistent throughout the website. Most designers put a navbar at both top and bottom of the page, although they needn't be exactly the same. A "sidebar" is also a good place for a navbar.

A navbar may be made up of individual graphics, it may be an image map, or it may be simple text. Javascript may be used to make the buttons change appearance when the mouse is over them, or to create even more elaborate effects, such as a bit of explanatory text that appears for each item. Make sure that your script includes a bit of code at the beginning to hide the script code from older browsers that don't support Javascript. The Golden Rule of website design applies to navbars, too: Keep it simple! Never use clever Javascript animations just because you can, but only if they actually add functionality to the user interface.

In the early days of the Web, every item on a navbar tended to have a cute little icon next to it. Nowadays, improper use of cutesy icons falls into the same category as hit counters and busy backgrounds - an all-too-common sign of amateurish design. The original purpose of the little icons that grace our airports, road signs and websites was to make it easier for people who don't speak the local language (or can't read) to find what they're looking for. This is quite apropos on the international Web. It logically follows, of course, that an icon that doesn't clearly represent what it is supposed to represent is worse than useless. A little picture of a letter is obviously the place to click if you want to send email to a website's proprietors, but a little picture of a man or a circle or triangle is generally meaningless. If your icons aren't worth a thousand words apiece, ditch them. Also, if you're going to use icons, make sure they fit in with the overall look of the website.

Many websites use a little hierarchical outline at the top of each page, to good effect. Across the top of every page is a list of all the levels between the home web page and the current page, all of which are hyperlinks. For example, the Widgets, Inc. website might have the following on the top of the web page that describes their latest product:

Widgets, Inc. : Products : Consumer Widgets : New Widget 6.0 for Windows

Each of these items is clickable. The user can see at a glance exactly where he or she is in the website, and can go back to the "Consumer Widgets" hub page, the main "Products" hub page, or the website's home page at any time. This setup does not replace navbars, but exists in addition to them. Every page should still have a standard navbar, perhaps on a sidebar and also at the bottom.

Many websites use frames as part of their navigational strategy. If you divide each page into two or three frames, you can have your company logo and/or your navbar constantly in sight. The frame with the content scrolls, but the frame with the navbar does not, so the navbar is always right there where the user can find it.

Frames, however, have several drawbacks. All hyperlinks on a framed website must use the TARGET attribute to ensure that a page comes up in the correct frame. Nothing looks stupider than a page full of content coming up in a narrow frame that was intended for the navbar. Getting the TARGET attributes right can be quite complex, and every single link must be tested to make sure that the frame scheme works out right.

If someone (or a search engine) links to a web page that is not a frameset, it will not come up the way you intended, and you'll look like an amateur web site designer. To mitigate this problem, include a "robots.txt" file in your home directory. This file contains a list of directories that should not be indexed by visiting spiders. All pages other than framesets should be in separate directories, and those directories included in your "robots.txt" file.

If you have links to other websites, these links must include a TARGET= "_parent" attribute so that the other website will not come up inside one of your frames ("_blank" or "_new_window" will also work). Never, ever have someone else's website come up inside one of your frames. This quite rightly makes website owners furious, not only because it's unethical (and possibly even illegal - the jury's still out), but because it violates every principle of good web site design. A web page designed to be viewed as a full screen will not look good inside a frame. It will scroll and you will look like an amateur web site designer.

No matter how carefully you construct your navigational scheme, there will be some who can't figure it out. If your website is complex, a website map may be a good navigational tool of last resort. A website map is a page that presents your website in strict hierarchical order. No fancy stuff, just a list of every single page on your website, showing how they link together.

A website map may be a text outline or a graphic image map. (Click here to view our sitemap)
Every line of text above should be a hyperlink to the web page. If you prefer, you can create an image map with a little box for each web page. An image map is usually preferable, because it looks better and can better show the relationships among web pages. The drawback is that it's harder to modify than a text website map.

You should most definitely include contact information on your website, and don't bury it where no one can find it. Online forms are fine, but they are no substitute for an email address. Would you do business with a company that refuses to give out its address, or even its phone number? If you want to shop on the Web, you may have little choice. Very few websites publish the office address of their business, and many have no contact information of any kind! Why not? What are these guys afraid of?
There are two reasons why a company may choose not to include proper contact info on their website (not counting simple laziness or stupidity). First, because they fear receiving a flood of "business-to-business" communications (in other words, sales calls and unsolicited e-mails). Second, because they want to reduce their administrative burden by forcing people to contact them only in ways that make it easy for them to process inquiries.

Even now that Web shopping (e-commerce) is becoming more mainstream, most websites probably get more visits from other Web business people who want to sell them things than they do from potential customers. Yes, if you publish your phone number on your website, you'll get calls from salesmen. The same drawback applies to publishing your phone number in the Yellow Pages, and if you consider this a problem, then what in the world are you doing in business? Who ever heard of a business with an unlisted phone number? Anyway, the salesmen will find you no matter what you do, so trying to hide from them only harms your business, not theirs.

The second reason that some businesses erect barriers between themselves and their customers is because they want to receive inquiries only in a specified form, thus making them easier to process. When someone inquires about your product, there may be certain information that you need from them. For example, an online travel agency may get an email asking for "information about flights to Paris." Without knowing where the customer wants to fly from, and when, there's nothing the travel agent can do with this request, so they are forced to respond asking for the additional info. If they put a form on their website that includes fields for departure city and dates, then they can process inquiries much more quickly and efficiently, if website visitors fill in the forms the way they are asked to.

However, many visitors will not play by your arbitrary rules. Some will simply omit the requested information. If you make these required fields, some will decide that using the form is too much trouble and will click away to your competitor. Some benighted souls even have old browsers that don't support forms at all, so you have zero chance of making contact with them. Do you really want to turn away potential customers? Companies with good customer service respond to all inquiries, not just those that are convenient for them to respond to.

Use website forms if you like, but also include an email address, a phone number and your street address in your "Contact" section. Want to really impress people with the fact that you're an established, reputable company who stands behind what they sell? Put this information right at the top of your home page.

It is unfortunately true that spam is a heavy burden for online businesses. It's also demonstrably true that the more accessible you make your email address, the more Spam you'll get (of course, you'll get more legitimate inquiries too). To hide your email address away, however, would seem to be giving in to terrorist spammers while shooting yourself in the foot to spite your ankle. One possible compromise is to have a submission form, with a non-clickable email address listed on the same page.

No navigational issue breeds more controversy than the question of off-website links. Many websites allow no links to other websites, believing that it's foolish to give visitors the opportunity to leave your website. One of the many exceptions is Yahoo, which has links to all its major competitors. Offering links to other websites is a major component of the cooperative, democratic atmosphere that prevailed in the early days of the Web. Many corporate players, though, reasoning that they're on the Web to make a buck, not to help their fellow man, believe that including off-website links amounts to giving away valuable page impressions.

There's a simple fact to be kept in mind here: If a visitor finds your website interesting, they will stay a while, and perhaps come back another day. If they don't, they won't. If they want to split to some other website, their list of bookmarks is two inches away at the top of their browser. Just because TVs have remote controls doesn't mean that nobody ever watches a TV show all the way through, does it? The kind of person who just instantly clicks on every hyperlink they see is not going to buy anything in any case (or accomplish much of anything in life, for that matter). To the extent that links offer valuable resources to your visitors, they're an asset, not a liability.
This brings up an important basic principle: Let your visitors be free. Make your website flexible, so that they can use it however they like. Don't try to force them to do things the way you would like them to. Basically, this just means having a strong navigational scheme, by following the recommendations above. Having a standard navbar on every web page, and perhaps also a system of hierarchical links, means that people are free to jump to any section of your website at any time (and make sure that they're free to jump to the ordering page, too!).

First, the concepts of "good web site design" and "bad web site design" exist only in the eye of the beholder. Web page layout is an art, and in the final analysis, can't really be judged in objective terms. There is, however, such a thing as generally accepted web site design, or "standard" web site design principles, and that's what we're discussing in this article.

A second basic fact to keep in mind is that the Web is not print. While many of the rules that apply to print pages also apply to web pages, there are some important differences. The main one, of course, is that a web site designer can never be sure exactly how the web page is going to appear to the end user. The only thing you can be sure of is that it will look different on different systems. To attempt to get every element lined up perfectly, as a print layout artist does, is to start down the path to madness. Some misguided control freaks lay out whole web pages as graphics, not realizing that even this is no guarantee of uniformity - some browsers won't display the colors correctly, and some souls surf with images off.

A good overall web site design has the following three traits:
• It has unity and variety.
• It supports, but does not overpower, the message.
• It is appropriate to the particular message being conveyed.

A basic principle of classical aesthetics is that a good piece of art has a balance of unity and variety. That is, everything fits together into a recognizable whole, but at the same time there is enough variety to keep things interesting. Most web site designers err on the side of too much variety. Unity and consistency are very important web site design principles, because they reinforce your website's (and your company's) unique identity. The web site design of a site needs to be consistent from one page to the next. No matter where someone is on your website, they should know that they're on your website and nobody else's. The current buzzword is "branding."

One of the central elements of your brand is your logo. Choose a logo carefully, and whatever file formats it exists in, make sure that the files are top quality. Once you choose a logo, stick with it and use it throughout your website. Actually, it's best to have several versions of your logo - perhaps a big one for your home page, a small one for other pages, and a 468x60 one for an ad banner. A word to the wise - if you have someone else create a logo (or whatever) for you, be sure to get the original files it was created from (e.g. Photoshop .psd files, Illustrator files), not just the final GIFs or JPGs. If you ever need to create some new graphics using your logo, you may not be able to edit these compressed files without losing quality. Also, GIFs and JPGs are not of sufficient quality for print, so if you ever need a print version of your logo, you'll be glad you have the original work files.

Unity of design requires more than a logo in the corner. Colors, fonts, column layout and other design elements should be consistent throughout every section of your website. That's one reason style sheets are so great. Not only do they allow you to change a particular element throughout a whole website by simply changing the style sheet, but they also protect you against accidental lapses, like a single paragraph somewhere appearing in the wrong font.

When it comes to the Web, however, I respectfully submit that the medium should never be allowed to overshadow the message. If people are talking about the design of your web website instead of the message that your website is delivering, then you've got your cart before your horse. Weird fonts, bizarre punctuation or too many colors can call attention to themselves, and distract the visitor from your message (on the other hand, they might be just what's needed to call attention to it). Good web site design is like a good pair of underwear - most of the time, you don't notice it's there. An effective web site design simply presents your message in an attractive way. Keep the purpose of your web website firmly in mind at all times, and resist temptations to indulge in fancy web site design (or fancy scripting, Java, audio, video, underwater chat rooms or any of that stuff!) for its own sake.

Of course, if your website is designed to woo clients for a web site design shop, then you need to have all that gee-whizzy stuff, and that leads us to the third basic principle of web site design: Choose a web site design scheme that's appropriate for the message you're trying to convey. What's good web site design for a corporate site may be wrong for an entertainment website. The sets of colors, fonts, and layout techniques you choose from will be determined by the kind of look and feel that's appropriate for your intended audience. Corporate websites will stick with the tried-and-true basics (one font, one or two conservative colors), while hotshot Internet firms will choose from a wider palette.
Working with colors on a computer screen is quite different from working with colors for print. While print applications usually use a CMYK color model, the Web uses a RGB (red, green, blue) color model, which uses 3 numbers from 0 to 255 to represent each of three colors. Because browsers are only capable of displaying a small subset of the 16 million possible RGB colors, most Web site designers stick to what we call a Web-safe palette. If you use a color that's not in the Web-safe palette, a user's browser may arbitrarily substitute some other color.

A color is usually represented in HTML as a set of three two-digit hexadecimal numbers. The ones in the Web-safe palette are all the colors that may be represented by combinations of the number pairs 00, 33, 66, 99, cc and ff. 000000 is black, and ffffff is white. 00ff33, 990033 and 66cc66 are all valid combinations. This gives you a respectable number of possible colors to work with. To see all the possible colors, go to:

Whether you're choosing colors for a graphic image, a background, or for colored text, you should give some thought to what types of colors are appropriate for your website, and the message you're trying to convey. Whole courses are taught on the proper uses of color, and how to evoke various emotions with appropriate colors, so we'll just touch on the basics.
Bright primary or secondary colors (blue, red, yellow, orange, green) are loud and happy. They are seldom, if ever, used by stodgy corporate websites, but kids love 'em. If your design is mostly black and white, then a bright color can be used to call attention to certain elements, if they don't need to look particularly dignified. For example, red is often used to call attention to a short bit of text, although it always makes me think there's a closeout sale going on (perhaps there is).
Darker shades that contain a large proportion of black are attractive but dignified. A dark blue (#000066) or brick red (#330000) can add a little life to a black and white page. Try using colors like these for heading text of for horizontal rules.

Shades containing a large proportion of white (sometimes called pastels) are laid back and undemanding. A pastel shade is often a good choice for a background.

Earth tones (brown, beige, tan, etc.) are organic and unobtrusive, and are popular with the earthy set. They can be used in either dark or light shades, and they tend to contrast well with primary colors.
Follow the same rule with colors as with fonts - unless you're designing a kids' website, don't use very many.

By now, everyone knows that busy website backgrounds make text hard to read, and announce to anyone who cares that the designer of a website is a inexperienced amateur. So do overused motifs like sunsets and pictures of the Earth from space. How busy is too busy? Some purists would say that anything other than white or black is too much. More liberal designers, however, admit that a well-chosen solid color background can set the mood, while giving a website a unique identity. Choose a very light neutral color, and think carefully about the kind of associations a particular color has. Someday websites with this default background color will be considered retro and cool, but that won't be for a while. If in doubt, make it white.

Have you ever wondered why all ISP websites have white backgrounds, while all web site design firms' web websites have black backgrounds? A white background implies a no-nonsense businesslike attitude, while a black one evokes an air of creativity and mystery.

What about an image as a background? You can use one large image that fills the whole screen, or a small one that repeats (or "tiles") over and over to fill all available screen space. Using one large image as a background can cause problems, since not all website visitors will be using the same screen resolution. If your background image is 640 pixels wide, and your visitor's resolution is 1024 wide, then the image will automatically begin to tile. This means the visitor will see the edge of another copy of the graphic over to the right. Far more predictable results may be had by using a small graphic that tiles over and over. The web page will load faster, too.

One popular technique is to divide a page into 2 or more columns, each with a different background color, by creating a 1-pixel-high image that tiles over and over. The problem with this approach is that you'll still have to use a table to format your text into columns. Since the table and the background are independent, it's very hard to insure that they'll always line up. Once again, differing screen resolutions will mess you up. To achieve this effect, I prefer simply to specify different background colors for different table cells.

The biggest compatibility headache for web site designers is not different browsers - it's different screen resolutions. It would be wonderful to design for 1024x768, and take advantage of all that extra space, but if you do, those using lower resolutions will have to scroll horizontally to see the whole page. While vertical scrolling is perfectly normal, most designers seem to agree that horizontal scrolling should be avoided if at all possible. People who use 640x480 are not all behind-the-times losers - they may have poor eyesight, or a small monitor, or may simply prefer to view text in a larger size. So, it seems likely that for the foreseeable future, the vast majority of Web pages will be designed for 640x480. This means that anyone with a larger resolution will see your page over to the left of the screen, with a big white space to the right. Do you think that looks good? If so, fine. If not, simply center the entire body of your page, either by using CENTER tags or the more modern <DIV align="center">.

Columns are used in print because text is more difficult to read if each line is too long. On the Web, this is less of a problem, because by the time you take 640 pixels and subtract a scroll bar or two and a generous margin, you're just a little wider than the perfect width for a column. While a newspaper might need 6 or so columns to keep things readable, a web page can look fine with just one. The reason columns are so popular with website publishers is that they allow you to put two or more articles or other groupings of text side by side "above the fold," to present visitors with more choices. A very popular layout is to have one medium-wide column of body text, with a sidebar containing related information on the left, right or both. Alas, our only tool for creating columns is a flawed one – tables.

The problem with tables is that unlike with desktop-publishing software packages, you can't make text automatically flow from one column to the next. This means that you have to figure out exactly where in the text you want each column to end. Well now, how does one do that? Why, one can't! Netscape and Explorer have differing opinions about how much leading (space between lines) is proper, and the same column of text will often come out different lengths in the two browsers. If you'd like your text to line up perfectly with graphics or other elements in another column, you are out of luck.

Print designers take great care that every paragraph looks nice and neat, with no widows, orphans or other poor relations hanging about. Web site designers have no choice but to simply smile and accept the fact that any text appearing in a narrow table cell may end up looking ragged on some systems. The problem arises because we're dealing with very limited space, and type can only be made so small. Consider a sidebar, created using tables, perhaps 200 pixels wide. If you use tiny size 1 text, then your paragraphs will probably come out looking okay. If you use readable size 2, then any long words may cause line breaks in less-than-optimal places, and quite possibly make the whole paragraph look terrible.
I'll conclude with a note about accessibility. It's important to keep in mind that it takes all kinds of websites to make the internet, and you never know what kind of a system someone may be using to access your web page. People using something other than the latest Explorer and Netscape may have good reasons. Disabled people in particular sometimes use unusual means to browse the Web, and if your website is too dependent on brower-specific design tricks, they may not be able to access it. Avoid using graphic elements as the only way to get somewhere, and always include descriptive ALT tags. People using text-only browsers, and blind folks using text-to-speech converters, will thank you (and maybe even buy your products). Never set up your web pages so that they override users' browser settings - a lot of people simply can't read tiny size 1 type.

The bottom line is that content is king. If you keep the intended purpose of your website firmly in mind at all times, you won't go far wrong. Web site design that interferes with the content is bad design, so keep it simple