DESIGN

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.

NOTE
One solution to the size versus resolution issue is to use thumbnail JPEG images on the home page and then link these to corresponding full-size images on another page. This way you give the customers what they want — detail and a fast load time. A good example of an e-commerce site using this technique is Artcut.com.

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 <BODY></BODY> 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/.

NOTE
Programming languages, while simple compared to human languages, are more complex than the “machine language” computers actually understand. A computer operates using binary numbers, i.e. it only understands ones and zeros. However, humans have a hard time with the long strings of ones and zeros that are the heart of machine language programs. We work better with decimal numbers and words. That is where programming languages come into play — they are the bridge between the word-using human and the binary-using computer.

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.

For an example of a website that incorporates all of the advice set out in this section, visit the website of Brown Beattie O’Donovan LLP, (www.bbo.on.ca).