Web Site Design - More Than Meets the Eye

Web Hosting by Netfirms | Free Domain Names by Netfirms

The author is
a member of

Web Site Design:
More Than Meets the Eye

Purpose
Site Title and Domain Name
Site Organization
Elements of a Web Page
Forms

Purpose

One of the first things your Web designer will do is ask you what you want to display on your site. This information will help you explain your concept. Take a few minutes right now to sketch out your thoughts on paper. First you need to answer these questions: Why do you want to have a Web site and what do you hope to achieve?

Everybody's doing it. The World Wide Web is hot. Everybody is getting a Web presence. I should do it, too, or be left behind.
Image. We want potential customers to learn about our company, and gain a favorable impression of us.
Prospect List. We want to develop a qualified list of prospects for our products and services.
Sales. We want to sell products directly from our Web pages.
Other. Other reasons (write them down).

Begin with patience and take the long-term view. Your business results from the World Wide Web may not make much of an impact right away. Be ready for success, but realize that some products and services don't lend themselves to this medium. Find out how similar types of businesses are using the World Wide Web and check out my tutorial on "Why the Web" for demographics and other reasons to get on-line NOW.

Site Title and Domain Name

Now you need to determine the Title for your Web site. The Title is what is displayed in the Title Bar of your Web Browser and what your site is listed as in most search engines and directories. You may want to use your existing business name, but your Web site focus may be different than your organization name implies. Look for a name that is descriptive, unique, short, and memorable. You might also want to check out my Tutorial on "Web Site Promotion " for more information on selecting your Title.

Now give some thought to your domain name. Your domain name is like your address -- it's what people will type to get to your home on the Web. You need to select a domain name that is related to your site name, or your business name if possible. You can find out which names are still available by trying your proposed domain name at the InterNIC "whois" interface (http://www.rs.internic.net/cgi-bin/whois/). You may have to try several variations until you find one that's not taken. InterNIC charges $100 to cover the first two years, and then $50 per year thereafter for your domain name. Your Internet Service Provider may charge you a bit more setting this up for you. You need to plan on four weeks lead time to register a domain name, so get started with that right away if you're going to do it.

Another possibility is to use the existing domain of your ISP, something like "www.yourISP.com/mysite". This may work for you and won't cost you anything additional, it just doesn't have the "prestige" of your own domain name. A third, often overlooked, option is to get a "sub-domain" from the .US domain system. It's generally free (but check with your ISP) and is in the form "mysite.yourcity.yourstate.us" but you may have to do the legwork yourself. Check http://www.isi.edu/in-notes/rfc1480.txt for .US domain information.

Site Organization

Outline of Sections

Your web site will have several main sections, each of these sections can be either a single page or a group of linked pages. All Web sites need to have the first three listed below, add other sections as appropriate to your needs.

Home Page. I like to think of it as your "storefront" on the World Wide Web marketplace. It provides a table of contents to the set of pages that describe your business or organization. It also acts as a "Splash" page and needs to load fast and grab the attention of your viewer quickly.
Product/Services Information. With photos and text describe the benefits to your customers of your goods and/or services. You can also show features, applications, or examples. Use a major branch for each major product line. You can also use your Web pages as a catalog, which you can update easily, inexpensively, and often.
Order Form/Feedback. This will include a form which e-mail's your customer's information to you. It should also include a way for the viewer to contact you with feedback about the site and provide you with a way of qualifying potential customers or clients. This is the most interactive page on your site and the most important to your business. This is where you'll conduct surveys, contests, and use other marketing devices to get your customer's business.
About Your Organization/Mission Statement. This section may include a vision or mission statement, history of your business or organization, a philosophy of how you do business, etc. Sell the customer on why he or she should do business with you rather than with your competitor.
Technical Support/Free Info. Some businesses find it useful to provide technical information, specifications, frequently asked questions, parts lists and diagrams, troubleshooting decision trees, etc. It could also be news of your industry, of a related field, or something unique or interesting. This is free information of interest to your potential customers that will keep them coming back to your site for updates. Give some thought to what service your Web pages will provide to draw customers to your "storefront" again and again.

Length of Page

If you have lots of information you need to choose between long or multiple short pages:

Long Pages. Long pages are useful if you expect people to print out or download your pages for future reference off-line (like this document, for example). You can index these to internal bookmarks, called "anchors", to help your customers find their way to needed information. The drawback is that long pages of more than 35K may take too long to download for your customers to wait for. Also Web-TV users don't understand the concept of scrolling very well.
Short Pages. Here your index links jump to many shorter pages of two or three screens (the amount you can see on your computer screen) that treat just one subject each. They load fast and viewers don't have to scroll up and down as much (important for Web TV users as well), but your viewers' wont want to download or print out 10 different pages. You can always give them a choice to download a "paginated" version already for printing (or off-line viewing).

The Elements of a Web Page

Basic Page Elements

Here are the elements that you want to include on every page:

Page Title. The text that displays at the top line of your viewer's Web browser is very important because it is used by search engines and directories to identify your page. It's also used as the clickable part of your viewer's "bookmark" of your page. Make this descriptive, using key words that people might use to find your page.
Top-Of-Page Graphic. A graphic logo at the top of each of your pages helps unify your Web pages. You can use a smaller version of your business logo, or perhaps a band at the top of the page with your company name and a small graphic. Call this something like "logo.gif". That way if you want to change it, you don't have to alter every page, just upload a new image with that name.
Page Background. Textured and colored backgrounds are proliferating on the Web. They can unify your pages. This is like the tiled wallpaper used on your computer's desktop. I call this something like "bg.gif" so it can be changed easily. Alternatively, you can specify an RGB color for the background. Both texture and color will make your site special, but you have to be careful that your text is easily readable when you're finished. Many Web sites today use a simple white background for readability by most Web browser and monitor configurations.
Headings. Decide what the heading (and sub-heads) will look like on these pages and use them consistently. Start by creating an outline (down to 3 levels or so) of your content and then decide if you want a "Centered" look or "Flush-Left" (or Right).
Body Text and Photos. Decide where you want to place the text and photos -- you could have a layout where all the photos are on the left (or right) and the text opposite, you could alternate the photos with the text or you can have both centered one below the other. Check out some magazines and newspapers for ideas.
Navigation. You need to have Navigation elements that will allow your customer to jump to another section of your Web site (or page, if it's a long one). Most common is a "Home", "Next (or Previous) Page", or "Top of Page" clickable element, either using "clickable images", "buttons", or text. You may want some sort of Navigation Bar if your site has a lot of pages and maybe a "Site Map", which is just an outline of the pages on your site.
Links. Links to other pages and sites on the Web that your viewer might be interested in. Remember, though, you've just gotten your customer in your store so don't send him away until he's read your message. Don't show your viewer other cool sites until you've gotten his name, address, and hopefully his order. That's what the purpose of your site is: business.
Signature and Copyright. Sign your pages so the author is apparent (e.g., Designed by A. Webdesigner) and don't forget to link it to a "mail to" form which allows him or her to send you e-mail and feedback on the site. Also add a Copyright line to prove ownership of the page and the elements on it. This, and the next two elements should be in the "Footer" section of the page.
Last Update. If your site's information changes frequently, an update date is helpful. If the content doesn't change much, don't use the "Last Updated" tag or the site will look as if it's abandoned.
URL. You don't have to include this, but consider including a line like "URL: http://www.yourname.com/thispage.html". That way if they print the page they'll know how to get back to your Web site.

Other Page Elements

These page elements help to organize information, grab your viewers' attention and generally "jazz up" your Web site.

Horizontal Rules. These don't take any extra time to download. They can be varied in length and width and set off different sections of a page. Use them to set off the top-level Heading at the top of the page and the Footer at the bottom from the rest of the Body Text.
Graphic Rules and Lines. These take a few seconds to load, but can spice up your page, especially if they are coordinated with the color scheme you have designed. They can be applied either horizontally (Rules) or vertically (Lines) down one side or to separate two columns.
List Elements. List elements allow you to create a variety of listing types and outlines. You can create bulleted lists, numbered lists, definition lists (like a dictionary), and menus (like a table-of- contents.)
Graphic Bullets. Colored balls, arrows, and pointers are also available for use on your pages. A little color goes a long way so use complementary colors for all your graphic elements.
Graphic Icons. Draw your customers' attention to items you may have added recently. How about "New", "Updated", "Sale" or "Special" icons.
Tables. Use Tables to present tabular information on your page. You can have either bordered or no-border tables. Table Headings and Captions can also be added.

Forms: Getting Orders and Customer Feedback

CGI Forms are the method most used to return information from your customer to you by e-mail. If you're serious about selling directly on the Internet, invest in the extra cost of putting your pages on a SSL-compatible server, such as the Netscape Secure Commerce Server, which encrypts the information like credit-card info and other potentially sensitive information your viewer may give you. Perception is the real issue here, not stealing of information as it's generally much safer to give out information on the 'Net than to give your credit card to a restaurant employee. Here are some of the common uses of on-line forms:

Guestbooks. You can entice potential customers to sign your guestbook and perhaps receive a free gift. Their answers to key questions help you qualify them as a prospect to pursue by telephone or direct mail (or e-mail, for that matter).
Requests for Information. Have a place for name, address, phone number, etc., as well as check boxes to request information on certain products or services. This can be an "auto responder" that automatically sends information you've uploaded to your Web site when the client clicks on a button on your Web page.
Order Forms. Ideally, you take the order right on-line. Since people are still concerned with security of their credit card information on the Internet, consider using a combination of an order form and an 800 number. Former customers could order on the basis of credit information they have previously given you, or you could have a page that contains an order form your customer can print out, fill out manually, and mail in with a check.
Shopping Carts. If you are selling a number of products directly over the Internet, you probably ought to invest in "shopping cart" software, so people can put multiple items in their "cart" from any number of product pages. Upon "checkout," they have a total of their items, as well as tax (if any) and shipping charges included.