The design and pre-build details — domain name, digital certificates to ensure data is kept secure, and payment acceptance — are among the first steps you must take when extending an e-commerce site to the Web. But there are still a number of steps to take before you have a viable e-commerce website. The path you take to open your doors to the online public may differ from the path taken by your competitors, friends, and colleagues. The following chapters will guide you through some of those diverging paths.

Due to the requirements for establishing a merchant’s account, many small e-commerce operators will need to find another method for accepting credit card payments. If you fall into this category, don’t despair. There are still means by which you can sell your merchandise online. Two of the most widely used methods are online escrow services and email payment services.

Online Escrow Services

In the e-commerce world, trust is viewed as the intermediary element that will determine if businesses and users are willing to embrace the online economy. Online escrow services have been identified as one of the key business infrastructures necessary to help provide that trust and confidence between buyers and sellers.

When credit card fraud occurs, the e-merchant loses his goods, is charged for the costs, and must pay the issuing bank a charge-back fee. On the other hand, online consumers face the risk that they may not receive the goods, the goods that arrived are not as described, or the goods are damaged.

When you contract with an online escrow provider, the escrow service acts as an impartial trusted third party that facilitates buying and selling by providing both the seller and buyer with trust, security, and convenience. These middlemen hold your customer’s payment (whether via check, money order, or credit card) in trust, awaiting confirmation that the goods are as expected. Through the escrow service, the buyer and seller agree in advance as to how the goods and funds will be exchanged, along with a return policy.

Here’s how the typical escrow service works: The buyer pays the total purchase price to an escrow provider, which holds the customer’s money in trust. The seller ships the merchandise directly to the buyer. If the buyer accepts the merchandise, the escrow service pays the seller. Otherwise, the buyer returns the merchandise to the seller (in its original condition) and receives a refund from the escrow service.

It’s that simple — of course the escrow service charges a fee for its services. Some of the escrow services you might want to check out include Escrow.com, Escrow Online (www.escrowonline.org), Canada Escrow Online (www.escrowonline.ca), Secure-Commerce.com (also offers a multi-currency escrow service), and Cash-Escrow (http://secure.cash-escrow.net), which is a European escrow provider.

Be careful, though. In the U.S., the Federal Trade Commission (FTC) has recently begun pursuing fraudulent online escrow services. Premier-Escrow.com is one such service that, according to the FTC, set up a fake escrow firm and then directed buyers and sellers of merchandise to use that firm. And although a website would ship merchandise to the buyer, the site never receive payment from the escrow service and buyers would make payments to the fake service, but never receive their merchandise. The FTC says that it has also shut down two other alleged fraudulent escrow services and that 53 separate actions have been taken by various states concerning the same type of fraud scheme.

Here are some suggestions of steps you can take to protect yourself from being a victim of a fraudulent escrow service:

• Be wary if a buyer is insistent upon using a specific escrow service.
• If you are asked to deal through a service that you are unfamiliar with, call the company — this may help you to determine whether it sounds legitimate.
• Check out the service’s website. Many fake escrow services set up websites that are intended to mirror real escrow services. Are there grammatical errors and/or other simple mistakes? Is there odd wording, especially where the fake escrow service’s name has been substituted in place of the real escrow service?
• Check the Whois registry (www.networksolutions.com/en_US/whois/index.jhtml) to see if the online registry information fits with the corporate information on the site. If there are discrepancies, check them out.
• Check with your local Better Business Bureau.

If you have any doubts about a specific escrow service, don’t do business with that company.

Some other steps you can take to ensure you are using a legitimate service is to check with your bank to see if it offers an online escrow service or can recommend one. Or bypass the escrow services altogether and use Western Union’s BidPay (www.bidpay.com). The buyer purchases a money order online using a credit or debit card, BidPay sends a confirmation email to the seller within minutes with information on when your money order is scheduled to be sent. According to the BidPay website, “there is absolutely no fee for sellers unless you choose a payout option other than a money order (i.e. a cheque in British Pounds).”

Email Payment Services

Email payment services can be used as either your primary, or as a secondary payment processor. The most popular of the email payment services is probably PayPal (at least in the U.S.). PayPal makes sending and collecting money easy. PayPal integrates seamlessly with existing financial networks, allowing anyone to send money from their credit card or bank account. Thus, with PayPal, any website can accept credit card payments from all of its customers. For more information, visit the website at www.paypal.com.

If you live in the U.K. you might want to check out the popular NoChex.com. Anyone with an email address and a U.K. bank debit card can take advantage of this easy-to-use payment service.

For an email payment service with a global perspective check out Xcompte.com. Its services are available in multiple languages and numerous currencies.

We’ve addressed how you can receive credit card information securely through the use of SSL and digital certificates, but the actual processing of the credit card requires that you have a “Merchant Account.” A merchant account is a business account at a financial institution that functions as a clearing account for credit card transactions.

While there are many different payment methods, most e-commerce sites will want the ability to accept credit card payments from customers. There are two ways to process credit card payments: offline or online. Both require a merchant account and credit card terminal.

Although many people equate a merchant account with a checking account, setting up a merchant account is a bit more complicated. A plethora of businesses, in addition to traditional financial institutions, are eager to set you up with a merchant account. Thus, there is an enormous variety in the deals offered. Prior to making a final decision as to what company you will use for your merchant account, do your homework — learn about the process, talk to others who have existing accounts regarding their experience with their provider.

Offline Order Processing

If you have a brick-and-mortar business, it is likely that you already have an existing merchant account as well as a credit card terminal. Thus, you initially may want to continue with your current set-up for your new e-commerce site. Of course, that means only offline credit card processing, which would work like this: A form would be included on your website so that after a customer types in the billing and shipping information, the information is relayed to you through encrypted email. You then process the information manually using your existing credit card terminal.

Figure 9: A typical credit card processing process.

Real-Time Credit Card Authorization

Does your current e-commerce software allow integration with real-time credit card authorization systems? Do you process credit card transactions prior to product fulfillment? If the answer to both of these questions is yes, then you might need real-time authorization capability. (A real-time credit card authorization account doesn’t require you to lease or to purchase equipment or to install software on your computer.)

If you want your customers’ credit cards processed instantly 24 hours a day, 7 days a week, and the funds deposited into your business checking account within 48 - 72 hours, open a real-time credit card processing account after your merchant account is approved. Contact a real-time Internet processing company such as AuthorizeNet.com or Cybersource.com.

With a real-time credit card authorization account, authorization occurs at the time of sale; the processing network receives the authorization information from your merchant terminal and checks the databases of the financial institution that issues the card for available balance and reduces the available balance (but no money changes hands). This authorized transaction is then stored in a local database called a “batch.” Settlement occurs once per day for any authorizations that have accrued for that business day. When a settlement or auto-settlement has been executed, the transaction, minus any merchant fees, will be approved for transfer to your bank account and the funds will arrive in fewer than three business days. (Settled batches, or closed batches, are stored for later access.)

There are specific requirements that an e-commerce site must meet before it can open a real-time credit card processing account. Advantage Communications Enterprises, a well-known web design and marketing firm in Kalamazoo, Michigan has provided a list of items needed to establish a real-time credit card processing account, they include:

• A shopping cart.
• Software or CGI scripts used to store products and orders.
  

  Figure 10: Steps in transaction processing when there is a website has established a real-time credit card processing account. Compare with typical credit card transaction depicted in Fig. 9. Graphic courtesy of Advantage Communications Enterprises of Kalamazoo, Michigan.
• Hosting for Storefront.
• An Internet connected web server.
• Business banking account.
• Internet-ready merchant account.
• A bank or merchant processor who has access to an Internet connected process ing network (to enable high-speed/real-time authorization).
• A gateway to the “processing network.”
• A high-speed provider with access to processing network. (There are banks and merchants that provide gateway services, and there are gateways that provide merchant services.)

For more information about real-time credit card processing, visit Advantagecommunications.com.

Digital certificates (also referred to as “authentication certificates,” “SSL server certificates,” and “digital IDs”) are the key to providing customer transaction security. A digital certificate is a message sent by one party to another at the beginning of a secure Internet session. The certificate verifies the sender’s identity and vouches for that person’s/organization’s integrity. Just as a driving license is used to validate a motor vehicle driver, a digital certificate establishs the identity of someone in cyberspace. These digital IDs hold a mapping between a user and an encryption key. This key is private to the user and only he or she can use it. Digital certificates also contain the information necessary to allow users to exchange data securely and to transact business over the Internet.

You obtain your digital certificate from an organization called a “Certificate Authority” (CA). The certificate is virtually impossible to forge because the final requirement of secure communications is non-repudiation: a message’s source must be able to be proven beyond a reasonable doubt upon demand.

Technically, a Digital Certificate is a small piece of unique data used by encryption and authentication software. This digital ID establishes a user’s credentials when doing business or other transactions on the Web. It does this by attaching a small file to the data transaction. That file contains: the certificate owner’s name, a serial number, expiration date, a copy of the certificate owner’s public key (used for encrypting messages and digital signatures), and the digital signature of the certificate-issuing authority, allowing the recipient to verify that the certificate is genuine.

Once an Internet client (i.e. your customer’s web browser) requests a secure session, your web server sends the client/browser its digital certificate information, which contains the following:

• The public key.
• The certificate’s serial number.
• The certificate’s validity period.
• The web server’s official domain name.
• The domain name of the CA that issued the certificate.

This information is encrypted using the private key of the CA that issued the certificate. Upon receiving your digital certificate information, the customer’s web browser validates it by checking the following criteria:

• Validity — is it valid for the current date?
• Ownership — does it belong to the server that sent it?
• Certificate Authority — is the CA that issued the digital certificate known and trusted? (To do this, the client/browser checks the CA’s own certificate, which is signed by the CA itself.)
• Public key — can the CA’s digital signature be decrypted using the CA’s public key. (Most web browsers contain a list of the public keys of the best-known CAs, so they do not need to search the Internet for them.)

If the certificate fails any of these tests, the client/browser issues a warning to the customer. The customer may then choose either to continue with the session or to discontinue the session.

Digital certificates can be issued in chains. For example, a large CA might issue a certificate to a smaller CA, which issues a certificate to a still smaller CA, which issues end-entity certificates to e-commerce websites. This type of procedure helps to distribute the task of administering digital certificates. When a customer’s browser/client receives a certificate from a chain, it checks the certificate of every CA in the chain as described above, until it reaches the self-signed certificate of a top-level CA.

Perhaps this scenario will help the reader better to understand how a digital certificate is used in e-commerce. (Also see Fig. 8.) Let’s assume a customer fills in his or her credit card details on a form at a website and then clicks the buy / send / submit order button, which causes that customer’s credit card information to be sent as little bits of electronic data from the customer’s PC to another computer, via the Internet (which is made up of a network of computers, wires, cables and other connections). If not careful, the customer’s data can be intercepted by malicious third parties (this is why transaction security is vital in e-commerce). Such security is provided by specially-configured servers and encryption technology, which ensure that the data transferred between the customer’s PC, the website, and any other destination (such as the computer responsible for processing the credit card) has been turned into a special encrypted code that is difficult to unencrypt, and thus unusable if intercepted.

Figure 7: A typical e-commerce related digital certificate scenario. Digital certificates are one of the primary keys to effective e-commerce security because they provide the means for verifying identity.

Figure 8: To see what your customer might see when accessing your website via a Netscape browser, we will use Amazon.com’s secure server feature. When a customer signs onto Amazon.com using the site’s “sign in using secure server option,” Amazon’s digital certificate is invoked. To view the digital certificate information, the customer just right clicks any place on the page. That action will bring up a menu and at the bottom of that menu is the selection “View Page Info,” click it. That will bring up a “Page Info” window with several tabs at the top, choose the tab entitled “Security.” Next will be a window that begins “Web Site identify verified” and in the middle of that window is a “view” button, click on that button to bring up the “Certificate Viewer.” There the customer can see the details of the Amazon.com digital certificate as shown in this graphic.

SSL

Central to the digital certificate process is the secure socket layer (SSL) standard, which standardizes the way web browsers and web servers communicate with each other using encrypted data. All but legacy web browsers are set up to conduct secure exchanges of electronic information using the SSL standard. However, a secure exchange can’t take place unless there is a digital certificate installed on the web server in question. The visitor’s web browser uses the digital certificate to authenticate the server and to initiate the encryption process. The browser uses the certificate not only as a stamp of approval, but also to access the information needed to activate the SSL process. If there is no certificate, then the browser (and thus your potential customer) can’t be sure that the server is a reliable partner with which it can exchange data.

Here’s an illustration. A potential customer finds your website, and selects products that he or she wants to purchase. When that customer initiates the credit card transaction, one of the first items of business is for his or her web browser to authenticate your web server by examining its digital certificate. The examination ensures that the certificate has not passed its “best before date” (i.e. it is still valid) and the organization that issued the certificate is on its list of approved certifiers. The browser may also check that the domain name of the website/server it’s communicating with matches the one listed on the digital certificate. Once the browser determines that your server is approved for the secure exchange of data, it will continue with the secure transaction. Since the browser also has a record of that organization’s public key, it will use this key to decrypt and to validate the certifier’s coded digital signature carried on the certificate.

If the browser can’t authenticate the certificate then it will issue an appropriate warning to your customer so that he or she can make the decision whether or not to continue with the transaction.

This entire digital certification process follows a standard known as SSL — a process that virtually all browsers and web servers can use to send each other encrypted data.

Obtaining Your Digital Certificate

As you should understand, the secure exchange of data through SSL takes place only when the web server has a digital certificate installed. If this license to conduct secure transactions is not present, then SSL is not activated, meaning it isn’t possible to provide a secure transmission of information for your customers.

There are two ways to obtain a digital certificate: Your hosting service owns a digital certificate that you might be able to use for a fee or you can purchase your own certificate.

The best option is to submit the proper paperwork and setup fee to a “certification authority,” which is charged with reviewing a website’s credentials (actually the credentials of the business or person operating the website). Only after the authority is satisfied that the applicant is a legitimate business operation and the genuine owner of the website in question will a digital certificate be issued.

A certification authority (also known as a “certificate signer,” or a “signer authority”) will award you a digital certificate (after performing a background check) in return for a fee. There are numerous certification authorities eager to provide e-commerce sites with a digital certificate for your server. Once the certificate (which is in the form of a data file) is obtained, it must be installed on your server to activate the server’s SSL features.

If a website wants to be able to conduct secure transactions but doesn’t have a digital certificate, it can use someone else’s server and certificate. The least expensive method is to use a hosting company’s certificate. But this option has a drawback — you will need to use one of your hosting service’s domain names in any secure URL. Thus, when a customer clicks a button to send his or her credit card information the customer’s web browser will indicate a different URL, e.g. https://www.xyzhostingservice.com/www.yourcompany.com/order.htmlname/oderform.htm instead of your URL, e.g. https://www.yourcompany.com/orderform.html.

This may cause confusion on the customer’s end, and that confusion could prevent the customer from completing the transaction.

Two of the largest certification authorities are VeriSign and Thawte (which is owned by VeriSign), but there are also other reliable certification authorities including Entrust, Equifax, Globalsign, and RSA Security, to name a few.

For those readers residing in the EU, the European Certification Authority Forum (ECAF) maintains a list of European Supervisory Authorities (www.eema.org/sa_matrix.asp), which may be useful when searching for a Certification Authority.

To wrap up, digital certificates are widely used by e-commerce websites, especially to provide security for credit card transactions online. If a website has a digital certificate, a customer can verify that the website displayed on their computer screen actually is what it appears to be, e.g. your website, not some imposter masquerading as your website in order to intercept your web visitors’ communications.

Let’s first look at choosing a web address a/k/a domain name. A domain name is your web business’s cyber address — it’s also known as your site’s URL (Uniform Resource Locator). You’ve no doubt seen the many “dot-com” advertisements — www.[name].com (or .org or .net). That is a domain name or web address. It’s how the public will find your web-business unless you have opted for the cyber mall concept.

While you can choose just about any combination of words or numbers for your domain name, we recommend a catchy, easy-to-remember name that can serve to quickly evoke your business and/or the products and services it offers. Come up with several options.

In your quest for the perfect domain name remember:

Your online business depends on the customer correctly typing your URL — the shorter the better. And please, don’t put your entire name or your company’s name in the address. No one wants to input www.the-one-and-only-genuine-original-widget-company.com. Find something simple.

If your brick-and-mortar business has a well-known name that is already branded, re-enforce that brand online, don’t create an entirely new “web name.” Remember that brands are expensive to promote, particularly new ones.

Think twice before you use “web” or “.com” in your name. Yes, we know .com is probably part of your URL but it is not necessarily part of your name, which will, by necessity, be branded. Why? Because technology and the growth of the Internet are moving at breakneck speed and “web” and “.com” will, in the future, appear stale and dated. In the new world of fast moving technology your business should always present the image of being on the cutting edge.

Competition for rights to domain names has exploded. Many people and companies have registered not only the domain names they use, but names they think may be valuable in the future. Check the Network Solutions’ WhoIs directory (www.networksolutions.com/cgi-bin/whois/whois) to see if your chosen domain name is available. If your ideal domain name isn’t available, you might consider contacting the owner of that particular domain name to try to purchase the rights.

Once you have chosen your domain name / web address / URL, the next step is to register it so you can have an exclusive home for your online business. Registering your chosen domain name with a domain registration site ensures that you “own” that specific web address; at least as long as you continue to renew your ownership by paying the required annual fee. The process itself is easy, but there is much you need to know to begin this process.

First, understand the Internet’s system, known as the “Domain Name System,” which keeps track of the millions of computers that are connected to its byways. The Domain Name System (DNS) allows data packets to find their way to their destination.

Every computer on the Internet has a unique address called an “IP address” (IP stands for “Internet Protocol”). But that address is a rather complicated string of numbers, which is hard for the average person to remember.

THE IP ADDRESS

A global, static IP address is a unique 32-bit binary number representing just one resource on the Internet, at any given time. These global addresses are assigned by one of three Regional Internet Registries (RIRs) worldwide that collectively provide IP registration services to all regions around the globe. The American Registry for Internet Numbers (ARIN) covers IP addresses in the geographic areas of North America, South America, the Caribbean, and sub-Saharan Africa. APNIC (Asia Pacific Network Information Center) and RIPE (Reseaux IP Europeens) cover their own specific regions.

An IP address’s 32-bit binary number is actually made up of four bytes of information, and each byte can be represented by an eight-bit binary number or “octet.” Since we find it easier to read and write numbers using digits from 0 to 9 instead of giant binary numbers consisting of just ones and zeroes, IP addresses are expressed as four decimal numbers, each separated by a dot. This format is called “dotted-decimal notation.” The IP address is also called a dot address, because periods are used to separate four sets of decimal numbers, each between 0 and 255, representing all 256 possible combinations of eight bits (00000000 through 11111111). Each of the decimal numbers is called a “quad” because four of them make up the IP address. Thus, an IP address is also sometimes called a “dotted quad.”

Here’s an example:

Figure 6: The theoretical decimal range of IP addresses is from 0.0.0.0 to 255.255.255.255. When translated into binary numbers, that’s 00000000.00000000.00000000.00000000 to 11111111.11111111.11111111.11111111. Actually, we’re restricted from using all zeroes for the individual computer (or host) part of an address (it’s an address used for routing, representing the originating network) or all ones (used for broadcasting to all other computers on a network).

When you type in or click on a link such as www.microsoft.com, that domain name (www.microsoft.com) has no meaning for your computer, but its associated IP address is a different matter — it is what’s used to connect your browser with the Microsoft site. Thus, when you input “www.microsoft.com,” your computer sends a message to a DNS server on the Internet for the Microsoft website’s IP address, and that 32-bit binary number is used to connect your browser with the Microsoft site. There are millions of computers, millions of websites, and millions of IP addresses.

It’s easy to see how the DNS simplifies using the Internet through the exchange of a familiar string of letters (the “domain name”) for an arcane IP address. So instead of typing 216.239.51.99, you can type, www.google.com, to reach the popular search engine website.

In the final analysis, the Domain Name System was established to provide a “mnemonic” device that makes it easier for people to remember Internet addresses.

Registering Your Website’s Domain Name

When you register a domain name, you are inserting an entry into a directory of all the domain names and their corresponding computers on the Internet.

To register your new domain name you must use the services of an accredited registrar. Domain names ending with .biz, .com, .info, .name, .net or .org can be registered through many different registrars that compete with one another.

The registrar you choose will ask that you provide various contact and technical information as part of the registration process. The registrar is then charged with keeping records of the contact information and submitting the technical information to a central directory known as the “registry.” This registry can be accessed by any computer on the Internet any time information is needed to send an email message or to find a specific website.

The registrar also will require that you to enter into a registration contract. That document sets forth the terms under which your registration is accepted and maintained by the registrar.

ccTLDs. Some readers may also want to register a domain name using a two-letter country-code, known as country-code top-level domains or ccTLDs. The use of ccTLDs was introduced by Dr. Jon Postel, the Internet architect originally entrusted with responsibility for deployment of the Internet’s domain name system. His objective for the DNS system was to enable local Internet communities worldwide to develop their own locally-responsive and -accountable DNS services, and to encourage all parts of the world to “get online.” That original initiative has grown into the ccTLDs used today to document various countries’ (and territories’) relationships with ICANN. Examples of such ccTLDs include .ae (United Arab Emirates), .au (Australia), .ca (Canada), .fr (France), .jp (Japan), and .uk (United Kingdom). Such registrations are administered by what’s known as “country-code managers.” To identify the manager for your specific country-code, and for information about ccTLD registration requirements, see the IANA ccTLD database, which can be found at www.iana.org/cctld/cctld-whois.

You’ve chosen your e-commerce model and found the perfect products/services to offer on your e-commerce site. You’ve also thoughtfully planned your website. Using your blueprint and storyboards you’ve completed the design of your website. It is now time to extend everything to the Web.

The basic e-commerce website should:

• Store any number of products that have been selected by the customer prior to the actual processing of the purchase. This system is normally referred to as a “shopping cart,” processing is usually referred to as “check out.”
• Provide a secure server with SSL encryption for transactions, email transmission, and storage.
• Accept credit cards and offer automatic, real-time processing. But offline processing via an encrypted email form is also a viable option if you choose to forego the following options.
  • Allow the customer to leave the site, return at a later time, and still find past items in their shopping cart.
  • Allow cross selling, i.e.; offers a similar product to the one that the customer is interested in, if the chosen product is unavailable.
  • Provide processing status though a numbered tracking system.

Add to this list: acquiring a domain name, a merchant account, and a digital certificate, and you are in the e-commerce business.

You can design a website that is brilliantly complex, employing all the latest technology or you can choose to design a simple site without sacrificing attractiveness or efficiency. If you keep your customers in mind and design your site to accommodate the lowest denominator (technologically speaking) in your customer base, you will have a fighting chance of succeeding on the World Wide Web.

Don’t skimp on any of the essential elements to your website’s blueprint. All three — storyboard, site description, and website content — are indispensable. For every hour you spend planning and getting all the details right, you save yourself the cost and time of at least three days’ of remedial tinkering and development. Every decision you make now will define and limit the future growth and evolution of your website.

You are now ready to build your website.

The successful website starts with a home page that is attractive, easy to understand, and fast loading. Think of your home page as the cover of a good book — it should entice the customer to look deeper into the site (book) and return to it often as a resource. Another way to put it is that your home page, the first page the online consumer will see, is like the window of a store. It is your showcase, storefront, and calling card — all rolled into one. Online, your competition is just a click away — careful design and targeted content are important guardians against customer defection.

Your website’s design and content will greatly influence your customers’ perception of your business, which will, in turn, affect their purchasing decisions. Your pages should be laid out in such a manner that navigation through your site is intuitive and stress-free — so much so that your customers develop a comfort level in doing business on your site. How do you manage that? Read on!

When designing your site, there are certain categories of rules or guidelines that you should follow. The acronym SPEC can be used to help you to remember the key categories:

• Stickiness and traffic generation
  • Content
  • Search engines

• Performance
  • Speedy downloads
  • Tables

• Ease of use
  • Site Navigation

• Content visibility
  • Viewable Site
  • Frames
  • Java
  • Plug-ins

Stickiness and Traffic Generation

A sticky website entices a visit to stay within its pages a bit longer than they otherwise might; over time that leads to a familiarity with your website. The more familiar someone is with a business — online or off — the more comfortable they are when it comes to making a purchase. Thus, a sticky website is one that keeps visitors not only within its web pages, but also keeps them coming back for more. This dynamic is created with a mix of good content and good design.

Content

An important sales adage is — CONTENT IS KING. “Content” is your website’s offering — the product, the graphics, the marketing material, banner ads, i.e., everything that makes up the pages of a website. Good content gives a website a high “stickiness” rating. In other words, good content entices customers to stay within your website, and encourages them to return to your website time and time again.

Your website has taken the first step towards being a success when you follow the Internet’s golden rule — Provide Useful Content. Independent of which e-commerce business model you adopt, the content must be presented in such a manner as to draw a visitor’s immediate interest and even more importantly, it must turn that visitor into a loyal customer. Your content should include all the information necessary for a customer to make intelligent purchases in an easily accessible way.

By keeping the content of your website fresh and new, your customers will be more likely to “bookmark” your website, or at least a specific page within your website. Curiosity is a powerful lure and customers will come back to your site repeatedly just to see what is new. It’s the useful and up-to-date information that will keep your customers coming back time and again.

Search Engines

Make a list of the top ten terms that your customers could use to search for your website when using a search engine. Then incorporate these words in your web page content, i.e. make sure your web pages include text relevant to those ten terms. The majority of search engines do not index by keyword submissions alone, they send out spiders to crawl your site to check that the keywords you submitted are relevant to the content contained within your website. Why? Because disreputable website owners, especially pornographic and gambling sites, submit numerous keywords that people use every day in their search criteria that have nothing to do with the content of the website. These same unscrupulous owners will also insert unrelated words and phrases into their meta tags. (See Chapter 15 for a full discussion on how to design your website to obtain optimal search engine ranking.)

Performance

Long download times are unnecessary and unprofitable. Making a potential customer wait for your website to download is a surefire way to increase your competitors’ bottom line, not yours.

There are many reasons why a page may load slowly, e.g. the size of the pipe to the Internet, the traffic hitting the web-hosting service and/or the server hosting your website, the robustness of the web server, etc. But at this juncture, you just need to ensure that your website’s design is not a contributing factor when a customer experiences a slow download. So keep your home page less than 200 KB in size. By doing this, your website will load in less than 20 seconds with a 56K modem.

If you must display graphics on your home page, keep in mind the different graphic formats that are available, each with its own qualities and capabilities, and what is best to use in specific situations. Web-based images consist of two basic types: those captured from nature and stored in digital format, and those created entirely on the computer.

Most web-based images use “indexed color” which is only 8 bits (one byte) of color per pixel. This means that the image can display only 256 colors. Don’t panic — it isn’t quite as bad as it sounds — you can choose your 256 colors from a huge palette of 24-bit colors. If you pick the right colors, even a color photo can be made to look presentable on your website. Many programs such as PhotoShop and Paint Shop Pro will let you reduce the number of colors (color depth) in an image, while selecting the colors closest to the original.

GIF and JPEG (also known as “JPG”) are the most commonly supported formats throughout the world. “GIF” stands for “Graphics Interchange (or Image) Format.” CompuServe developed the GIF format so that its subscribers could send image files to each other and the images could be viewed on different kinds of computers. A GIF is good for images that have solid colors, text, and line art. A GIF can be used to represent images generated by drawing programs used by computer artists. However, a GIF does not compress photos very well; especially images that have subtle texture or color gradations, or that are 16- or 24-bit color.

JPEG stands for “Joint Photographic Experts Group.” (In the DOS world, JPEGs were called “JPGs” because DOS filenames were restricted to having only a three-letter extender.) JPEG is perhaps the best format to use for photographs since it supports full 24-bit color.

To sum up: Web-based GIFs are better for solid and flat colors, exact detail, sharp edges, black and white images, images with transparent areas, simple animations and small text. Use JPEG for images with continuous tones, such as photographs or images with gradient fills.

But also remember that the higher the quality/resolution of the graphics, the larger their file size. The larger the file size, the longer it will take for the web page to load.

Tables

Using HTML tables on a web page allows the organized and specific arrangement of data. The data can be text, images, links, forms, form fields, other tables, etc., arranged into rows and columns of cells (individual units). Tables let you control the look of your website by breaking your pages into precise segments while controlling the placement of text and graphics. You can create columns and grids that can contain images and text. Cells can be utilized as templates or style sheets to give a uniform look and, through use of color, add visual contrast to your website. Be careful though, if you use colored cells in your table, some browsers might not display the cell in color unless there is text or an image in it. For example, older browsers can only see the background color described in the tag. Also Netscape’s handling of empty table cells give web designers fits. That is because Netscape browsers have a well-known bug that prevents the browser from displaying empty table cells. There is a “work around,” but it means the designer is required to add a bunch of code to the table if you want your empty cells to display background colors when your website is accessed via a Netscape browser.

There are also other problems with tables. They may load more slowly than plain text since some browsers must “place” the items in a table, which means the table won’t be shown until all the text and graphic items have downloaded. However, you can mitigate this problem by breaking a long table into smaller tables and specify the height and width for all the images. This fix allows the browser to size the table before the images, which in turn, results in a faster download. Another advantage to using a series of smaller tables instead of one long table is that it is easier to change the page’s design in the future.

You also must deal with the fixed-width problem. When you add a variable width table, the horizontal dimensions readjust with the browser width. A fixed width guarantees the final appearance. But the variable width can take better advantage of the situation if the browser has a larger width setting to begin with. Use trial and error testing to find the optimal combination of fixed and variable widths for the different parts of the table.

Some WYSIWYG (what you see is what you get) web page editors (this is software) have problems with tables. Be careful, if you are doing your own design work — what your editor displays on the screen may vary greatly from what you see in a browser (See Fig. 4).

Figure 4: Use tables to align objects and accentuate with color and image backgrounds. However, when using tables be aware that what your WYSWYG web design software shows what you and what visitors actually see may be different.

Test your table-based pages with a variety of browsers and don’t forget to use different browser widths. Also test the page scrolling function by using your mouse to pull down the arrow on the bar (which your browser automatically brings up on its far right side of your page) to see if the page jumps rather than scrolling smoothly.

Ease of Use

A simple, easy-to-understand navigational design ensures your customers quick and effortless travel through the multiple pages on your website. Your customer should never be more than three clicks away from what they want to find. Without fast, intuitive, and simple navigation capabilities, your customers will not take the time and effort to navigate your site, regardless of how good your content, product and/or service might be.

Site Navigation

Design your home page to allow customers access to all areas of your website from your home page. Consider using graphics and image maps — a clickable picture (when you place your cursor on it, the cursor turns into the “link select cursor”) — as an attractive means of navigation. But remember the users who surf the Web using text-only browsers by also inserting text links (a typewritten description not dependent on an image) at the top or bottom of each web page.

As you drill down into the site, continue a uniform navigation scheme, i.e., the customers can go to the same position on any page to perform a specific function. Don’t forget to institute “targeted” text links (i.e. text that you can click on and be transported to a specific section of the website), especially in pages that are long or divided into topics or resources. By doing so, you allow the customer more easily to find whatever they may be looking for. Targeted links can be an expedient form of navigation, supplementing the scroll bar.

Structure your site’s design to support future growth. But even when designing for future complexity (e.g. the addition of an auction section or adding a shopping cart), always keep the customer’s view in the forefront. For example, don’t make the mistake of asking your customer to remember a certain product ID or code when it comes to filling out the order form — keep it simple.

Avoid orphan pages — pages that although there is a link leading to the page, the page offers no link to leave the page. Such pages give a potential customer a choice that might lead out of your website, because to continue their search they must either hit the back button on their browser, or close the page and go elsewhere. To avoid this dilemma, always consider all possible navigational paths a visitor might take and then ensure that there is a series of relevant links available on each page providing your potential customer with some very good reasons for him or her to stay in your website.

Content Visibility

Design your website so that it is technically accessible to the greatest number of people. Just as customers come in all shapes and sizes so do the equipment and the software that they use to access the Web.

Viewable Site

Test your design with as many browsers (including their various versions) as you can find — Netscape, Microsoft Internet Explorer, Macintosh, Opera, AOL, and a text-only browser such as Lynx. Don’t forget the customers that surf with their browser’s “turn off graphics” option activated. In other words, make sure the technologies you select can accommodate the many browsing options your customers will be using.

Frames

Also called framesets, frames are a programming device that divides web pages into multiple, scrollable regions. This allows you to present information in a more flexible and useful fashion. Of course, frames have their own set of problems. A browser’s back button can produce unexpected results, particularly if the user is working with an old browser, such as Netscape prior to version 3.0.

Visitors who have problems with their sight or are otherwise physically impaired may be using text-to-speech software that reads aloud web pages. Frames confuse such software.

Even for the non-physically challenged, a cursor may not work with a framed site unless you actually click in the frame you want to scroll.

In addition, frames can make it more problematic to print. For example the Princeton Online website, which is designed around frames, actually has a web page devoted to helping its visitors print information available on that website (see Fig. 5). But, even worse, framed websites may be invisible to certain search engines and directors (such as Yahoo!). Frames increase the file size and the number of total words that make up the website, thereby decreasing keyword weight and perhaps causing an adverse effect on your website’s search engine listing. Also, when customers are brought to your website via a search engine, they sometimes won’t enter through the front door, i.e., home page, and therefore can’t see the frame that would normally be holding the page.

Figure 5: The Princeton Online website found that so many visitors experienced problems when trying to print information available on its frame-based website that it crafted a “print help” web page.

Exercise caution if you choose to offer links to other web pages within a framed page. The linked page can accidentally load within the framed page on your website; particularly if the correct code is not inserted (such as _blank, top, parent, self, or your own designated frame) to keep external sites from loading within your frameset. This can be confusing to the visitor as well as raising the possibility of copyright infringement, since the user may think that the information appearing in your frame is your information.

When advertising one particular aspect of your site in other media, simply providing a main URL address is no longer good enough. In the case of a framed site you must give the public additional instructions about how to find the frame and the page that they want. If you give out that page’s address alone, the rest of the frameset becomes inaccessible.

Conversely, if another site wants to link to a particular page on your site, they’re out of luck. Frames generally restrict external-to-internal links only to the home page, unless you once again want to find yourself on a page minus the rest of the frameset. In other words, if a website wished to link to an internal page of your website (like your FAQ section) it couldn’t — it would only be able to link to your home page.

Creating a non-frame site is the best approach to make it accessible to the largest number of users. All things considered, it is better that you design your website using tables, which offer some of the same functionality as frames but with fewer limitations.

Java

Java is a high-level object-oriented programming language (a set of grammatical rules for instructing a computer to perform specific tasks) developed by Sun that is all of the following:

• Simple
• Architecture-neutral
• Object-oriented
• Portable
• Distributed
• High-performance
• Interpreted
• Multithreaded
• Robust
• Dynamic
• Secure

All of the preceding buzzwords are explained in “The Java Language Environment”, a white paper written by James Gosling and Henry McGilton. You can download a PDF version of the paper from http://java.sun.com/docs/white/.

Probably the most well known Java programs are Java applets. These programs, written in the Java programming language, can be included in an HTML page, much in the same way an image is included. When a customer uses a Java technology-enabled browser to view a page that contains an applet, the applet’s code is transferred to the customer’s system and executed by the browser’s Java Virtual Machine (JVM).

With java applets you can add to your website anything from a small animation to a sophisticated program that displays a 30 second movie. The applets can either run in the same HTML page or in a popular (but sometimes annoying) “pop-up” window that opens as a separate window when surfing a website. To see examples of sophisticated applets that runs within the same HTML page visit www.reallyfine.com/reallyfineart.html and www.crownnet.co.uk/portfolio/vr-appletpano.htm.

For other examples of what can be done with Java Applets, go to Jars.com. Sun also offers a number of free “tried and true” Java applets that you can use on your website. To see what’s available go to http://java.sun.com/openstudio/index.html; also visit http://java.sun.com/applets, which offers a number of other Java resources.

Although Java applets, if built correctly, can enhance the functionality of your website, they could become a crippling factor if used extensively. This is because Java applets may take extra time to download and some applets can be very demanding, which may cause problems for the customer’s computer (especially if the machine is an older or low-end model).

Furthermore, if you are trying to reach as many people as possible, keep in mind that not everyone viewing your site will have a Java-enabled browser or have the “Java-enabled” feature turned on. So, if you would like to use applets, use them only when it is not important that everyone coming to your site have the ability to view the information contained in the applet. Another suggestion — if possible, never use them in your home page. Also, don’t design your entire website so that it can only be viewed with Java-enabled browsers. Why? Because, when customers who have browsers that don’t support Java come to your site, they see — instead of your website — an irritating message stating that the site requires a Java-enabled browser.

Also, when deciding on whether or not to use a pop-up window (i.e. a java applet), keep in mind that some customers find pop-up windows disconcerting.

Plug-Ins

Generally, plug-ins are software modules that run on the viewers’ local machine and add to the functionality of an application. Typically, web browsers use plug-ins so that they can display a wider range of formats. For example, an Acrobat plug-in is used to view documents in Acrobat format (PDF documents). Most video and audio formats require a plug-in to be viewed or heard. For instance, a QuickTime plug-in is needed to view movies in QuickTime format. When a customer tries to view something that requires a plug-in, which their browser does not support or they have not previously installed, they will get a message asking them whether they would like to install the plug-in.

Plug-ins are free for the most part, but downloading and installing them requires some sacrifice on the part of the customer. Some plug-ins are quite large taking a considerable amount of time to download on a 56K modem, and space availability may become an issue for the customer — a minimum of 3MB is usually required for a plug-in. One more consideration is that many plug-ins are not backwards compatible with previous versions. This means that even if a user has previously installed the required plug-in, there is no assurance that it is the correct version. For example, if a customer has the Macromedia Flash 3.0 plug-in and you use Flash 4.0 on your website, the customer will need the Flash 4.0 plug-in to view your site, since the 3.0 version will not work.

Thus plug-ins can create a great barrier between your customer-base and your content. In fact, a number of recent studies show that less then 10% of the Web population use plug-ins. Furthermore, these same studies also indicate that many potential customers might be intimidated by plug-in based content. Yet: If you know that your target market is technically astute, plug-ins may help to put your website ahead of its competitors.

If you are unsure about the technical prowess of your target market, and you want to, say, offer an important document in PDF format, then also provide a text only version that is easily viewable by all customers.

If you build your site with Macromedia technology, understand that it will be viewable only if the customer’s browser supports the exact version your website is using. Otherwise, the customer is required to first upgrade his or her Macromedia plug-in before they can view that content. It is strongly recommended that you also provide an HTML-only version so that all of your customers can view at least one version or the other of your website. The author isn’t against Macromedia technology — it allows you to design a great looking website. But at the same time, the reader must understand that although Macromedia allows you to build a eye-catching site, it doesn’t do much good if your target audience cannot access it.

One of the most difficult parts of building a website is deciding exactly what to build. There are many e-businesses out there with ill-conceived concepts and laughable revenue models. To avoid these crippling mistakes, you need a clear vision of what you want to accomplish. To help, consider the following questions.

• What are the objectives of your new website?
• How will the new website produce income?
• What makes your new website unique?
• How will you ensure on-time delivery?
• How will you manage and maintain your website?
• How will you convey your trustworthiness and the high quality of your product/services?
• If you have a brick-and-mortar business:
  • How will you use your website to drive customers to your offline business and at the same time to provide an e-commerce alternative?
  • How will you combine your dot-com seamlessly with your traditional business into a new incarnation called “click-and-mortar”?

Your answers are the basis for the next step in building a successful website, which is the development of a comprehensive e-commerce business plan, that plan will serve as your website’s blueprint. Use that blueprint to lay out the strategy needed to implement the technology that is necessary to gain the most leverage within your current or planned business model. Each aspect needs to be carefully coordinated — technical issues, content, marketing, front-end design, infrastructure, software, and, of course, sales.

There are three essential elements to a website blueprint: a storyboard, a site description, and website content. Successful websites are the ones that manage, through the proper utilization of a blueprint, to combine content, communication and marketing features within a fast-loading, easy-to-use and interesting home page that runs on a robust and scalable infrastructure.

In addition, you must establish a realistic budget and a timeline, with milestones clearly defined. As you define your site through your blueprint always be aware of the compatibility issues which must be considered throughout the decision making process — the extendibility and scalability of all the hardware, software, and connectivity decisions.

Storyboard

A storyboard is a tool used in the production of multimedia, video, and film projects to show a frame-by-frame picture sequence of the action. In this book, however, the term refers to a non-graphical representation of every web page — the screen elements and their operations — which, when taken as a whole, constitute your website. Just as an outline helps to organize your thoughts before you write a paper or report, storyboards help to organize a visual production such as a website. By using the storyboard process, you can design your website while clearly envisioning all the possible paths that a customer might take.

Thus, your storyboard is the visual representation of how your website will look to your customers. A good, well thought out storyboard will enable you to marry the goals and priorities for your website into a good design.

Here is how: With the proper storyboard, you can map out the progression and relationship between individual web pages. It lets you visualize how each page will work within your website before you start building it.

Figure 2: This is an example of a simple storyboard that might be used to design a small online store.

While tedious, creating a storyboard will save time, money, and many sleepless nights. Map out every step of your design process so that each detail can be tested, measured, and validated.

Very detailed storyboards might include an overall site diagram that shows the website on all levels: major areas of the site, secondary areas, etc.

Figure 3: All Storyboards should include a basic layout of each individual web page.

To begin the storyboard process, generate a visitor-centric navigational scheme that defines the type of pages and content needed to provide your website with the necessary design elements. Take your “home” page for example: Using a single sheet of paper, describe the buttons, links, and key components that your customer should see when he or she first opens the link to your website. Then every other web page should be constructed in a similar a manner. At each step of the process, incorporate your customers’ wants, needs, and perspectives. And remember that every layer of your website either precedes or supports specific choices a visitor makes, so your website’s design must make sense to your visitor so you can turn that person into a repeat customer.

As you lay out the storyboard, there is one essential question you should keep in mind: What’s the plot? In other words, why is the visitor here — what does your visitor want? Don’t forget that many times a visitor will not reach your website through the front door, i.e. your home page, so consider all contingencies. Determine as you outline each web page: What do I want my visitors to do at this point, what do I want them to feel right now, where do I want a potential customer to go next, and how do I make it easy for them to get there?

Your final storyboard should allow your visitors to enter your website at any point — the “about us” page, the “check out” page, the “privacy policy” page — and to know where they are and to understand how they can get where they want to be quickly.

Here is a set of suggested guidelines to keep in mind as you create your storyboard.

• The storyboard should be legible. It can be created using pen and paper and does not have to be precise, but if using outside help for the design stage, it must be clearly understood by those people.
• The storyboard must be complete. Every page should be represented and every element on the page should be explained before actual design work is started or any of it programmed into HTML.
• Every design and layout element to be included on each page should be noted in the storyboard —
  • Headings
  • Text objects/blocks
  • Links/Buttons
  • Graphics images (photos and other arts).
• The typeface and print size of the headings should be exactly as they will appear on the final web pages.
• The number and the function of the buttons should be clearly indicated on each page.
• Links between pages should be clearly indicated using arrows.
• Each graphic image should be noted with a box identifying it as a graphic image with a short note describing the content.
• Web pages should be numbered for easy reference.

Think in terms of who will see your web pages. Perhaps it will be a potential customer who has no idea who you are or what you have to offer. Thus, the best way to layout your storyboard is to track the path of a hypothetical customer, with branches at every decision point — including those made by the customers and those made by the system. Have a meeting with all of your staff — sales and marketing, customer service, public relations — not just the website staff. Get everyone’s input; cover all the possibilities. For example, in the purchasing process:

• Does the site require customer registration before the purchasing process can begin?
• Is there an option to skip registration but to allow the purchasing process to continue?
• If a customer wants to change or to remove an item from the shopping cart, is it easily done?
• At what point does the credit card authorization take place?
• Is there a confirmation page that also provides an order tracking number?

Decisions made at this point must not be rushed. Time is needed to study, absorb, and totally understand what’s required to implement the most creative ideas — the ideas that will make your website stand out from the crowd.

Use your storyboard as your guide throughout — design, build out, and beyond. Storyboarding helps not only to improve site navigability, but also to develop content and web copy. Furthermore, if you hire a web designer to design your web pages, or a web architect to oversee the entire build out phase, the storyboard will provide them with the details necessary to provide you with exactly what you want.

The author realizes that both layout and design are subjective topics, but to make the best first impression design a stylish page with your content laid out in a logical manner. Use a consistent theme in the colors, styles and fonts throughout your site.

Site Description

If you are designing an extensive website, you need to provide a detailed explanation of workflow, data flow, and other items that may not be readily apparent in your storyboard. That’s where a site description comes into play. A site description explains how the site functions from web page to web page or section to section. This is a must for complex sites, such as websites that include an auction element or websites like 3Com.com or Healthtex.com. That is because oft-times such websites have people who are not intimately familiar with the website’s design elements and infrastructure doing the programming to support the website’s more complex elements.

Website Content

Now is the time to begin thinking about exactly what content you want on your website. What digital art (e.g. photos of products) will be needed? Is there to be written content? If so, who is the author and how will the content be delivered — MS Word, Adobe Acrobat, ASCII text, etc.?

You should have the initial content ready for the designer(s) (which could be you) while the website is still in production mode. This is so you can be sure that your content will work perfectly with the overall design elements when it comes time to launch your website (and when subsequent design and content changes are made thereafter).

“Know your customer” is an oft-used but apt phrase — you must decide on your target market base before embarking on even the early design stage. Here are some reasons why. If your customers are located outside of North America, you will need to place a Comment Tag above the body of your website’s home page declaring your site as a public document. If you omit the Comment Tag your site probably will not be indexed as a public document and no one outside North America will be able to find it. If your niche market has an international base, you must consider how you will provide translations, how you will handle the monetary exchange problems, and how you will deal with shipment issues. After all, it’s the customers for whom you are building your website, right? This is just the tip of the iceberg — do your research so you’ll know the issues you need to address before designing your website.

What model will your site emulate — a brochureware site, an online store, an auction site, an advertising, or subscription site? It could even be a combination of one or more of the website models discussed in Chapter 1.

What will drive your potential customers to your website? Your website’s home page must clearly describe what you are offering and why your customers would want it. You must craft your online offering so that the products/services meet the wants and needs of your targeted customer base — just like a conventional business. And like a brick-and-mortar business, you must determine what price the market will bear and what your profit margin will be.