Basic Page Design #7

Basic Page Design.

Your web site pages should be designed to get orders, everything else is secondary. If you will be using one of the E-commerce web software packages (OS Commerce) a lot of the layout and operational parts of the web site will be pre-formatted. If you plan to build your site from scratch, you will be doing the design, layout and adding the order form functions yourself.

We will be using www.patiostore.com as an example, it is a combination of Data Base generated web pages and flat html coded web site built originally using Adobe Page Mill and we know use Dream Weaver software and OS Commerce. We will first cover some basic concepts that will be incorporated into each web page and review the information and procedures you will use to build the pages.

What Is Missing From Patiostore.com

Patiostore.com does not have sound, action graphics, video, or other fancy attention getters. It does have a shopping cart (we added one in the fall 2002/spring 2003). We decided to spend our time adding new products, giving good service, keeping the site current, promoting the site and looking for new products. Every time we think of adding the bells and whistles to the site we ask. Will adding this get more orders?

Patiostore.com started out as a patio furniture store and has evolved in to a department store. Because the site has been out there for ten years we have to live with a situation were the web site out grew the name. Patiostore.com is still the name of our patio furniture store, but the URAL "patiostore.com" is more of a department store or mall. To fix this we created other stores
with their own URALs, there are links to the other sex stores from the patiostore.com main page.

What The Customer Wants?

The customer wants to get the information they are interested in, as quickly as possible with the least amount of frustration. Buyers will be looking for a specific product or category of products and they will want to see a picture, get the details about the item and the cost. You will need to get this information to the customer in as few clicks as possible. After six clicks you begin to loose the customer.

How many times have you left a web site frustrated because it was hard to figure out what to do or were to go next? Or the site forced you to go through a lot of information when what you wanted was the price and terms.

A word about the size of picture files on your web site. It is web conventional wisdom that photos should be small and fast loading. At our web sites last revision we enlarged the photos or added larger pop up photos to the smaller pictures. Customers told us they wanted better, larger pictures.

They did not mind waiting for the photo to down load as long as the photos and related information was complete. Here is what our survey of customers told us they wanted,
Large photos showing the product in use if possible, crisp picture details, price information and complete product information.

Address and Phone Numbers.

Gather up you phone numbers, fax number, your company 800 number and your mailing addresses. On an E-commerce web site be sure the how to contact you is very clear, easy to find and complete. On Flat pages add this information on the bottom of every page. Make it easy for the user to contact you any way they choose.

Page Header Logo.

Using your web site's name, create a logo (graphic) for use on the top of every page. Patiostore.com's logo was created using firefox. Spend some time on your header and logo, as it will appear on every web page. If you do not wish to create your own, consider hiring a graphics design person to design the header. A Well-done header adds a sense of professionalism and that is worth a few dollars.

Colors.

Decide what background color to use. With an E-commerce software package you will choose from pre-selected color schemes options or alter the underlying code.. With a site of your own design you will choose the sites colors. White is the easy choice and that would make the other colors easier to choose, as you will have less clashing of colors to deal with. You are always save using pastel background colors. Stay away from backgrounds that include images (wallpaper) as they distract from the product pictures and can make a web site hard to read. Color consistency is important as it reassures the user that they are still on the same web site.

When you visit a web site that has a good color scheme and is easy to read, you should not notice the back ground colors, because the colors are not distracting. When you visit a web site that is harsh or were the text is difficult to read you tend feel ill at ease and tend to leave quickly.

File Naming System.

To make maintaining your web site easier you will need a logical file naming system. Your goal is to have names that you can quickly recognize when you look at a long list of files or images. You also want a system that is easy to explain to others. We keep our files on our hard drive in a folder labeled "patiostore". Our web pages are named by product category or by number. For example, a pool page would be called pool/html or pool 2.html. Another method that we use is to use the manufactures name. For example, a manufacture named Kettler would have product pages ket1.html or ket 2.html. This allows you to easily find things when your web site gets large.

Our images (photos) are saved as jpeg files and the files names are determined by using the first three letters of the manufacture's name followed by an underscore ( _ ), followed by the first three letters of the common name for the product, followed by number if more then one picture is used. For example a Kettler Tricycle called the Jumbo would have the photo of the item saved with this file name. ket_jum1. A photo of a basket accessory for that tricycle would have a file name of ket_bas1. Kettler logo image would be called ket_log. As you can see it is easy to know what the image is without looking at the actual image.

Scanning Pictures

A retail web site uses lots of pictures. You will be scanning most of these from the manufactures brochures or coping them from the manufactures web site. Scan your images at 150 DPI (dots per inch) that is all the computer monitors require. Save the images as Jpeg files. When the software program ask for compression settings use 6 to 1 and check for quality of the image. You might consider the file-naming format described above and save these in the same file on your computers as the web site pages.

Shopping Carts.

If you are using an E-commerce software package a shopping cart is normally included. In our example here a shopping cart is not used. You can get information on shopping carts from your ISP and from the web. If you buy a program for use on a web site that you designed check that it is compatible and easy to implement. There are open source shopping cart programs written in Java that can be found on the web. Test the cart after adding a few items for sale to the data base.

Text, Design and Layout.

Use a simple text or font style. Check the font style for ease of reading. Check that any color used, does not blend into the background making reading difficult. Use capitals letters and bold text sparingly. Stay consistent page to page. Check quality of scanned images for clarity. Test all links, Spell check all pages, have the pages proof read for clarity and grammar. Check that the page layout follows a smooth visual path and is not confusing.

Sales & Promotion.

Patiostore.com uses two methods of letting the customer know what their savings will be. A discount method and sale prices listed with regular price comparisons. I prefer the discount method. When using discounts you can quickly respond to price changes with out re-pricing your web site. For example, if freight cost increase you can decrease the discounts percentage you offer or change the percentage you add for shipping. If prices increase you can lower the discount until you have time to re-price the web site. And when sales are slow you can run specials by offering a percentage off on orders over a certain dollar amount. At homeimprovement kits.com a data base OS commerce web site the prices are set by using a discount off a regular price. I can adjust prices by increasing shipping charges or by changing the discount in the admin. sections sale byproduct category, in ten few minutes all prices can be updated.

One method we use is to offer different discount levels based on the amount of the sale. For example, we add 10 % shipping charge on orders under $150 and give a 5% discount on orders from $151 to $800 and 10% off orders over $801 and 15% off orders over $1500. Customers will add items to get the total purchase up to the next discount level.

Before you decide to use discounts or sale prices as pricing strategies, consider that discounts will work best for higher priced items and special order items. Discounts work best when your customer is more inclined to call in their orders and you get a chance to talk with them. Sale prices work best for lower priced items; costumers like to compare prices and will buy from the lowest priced vender that offers quick delivery. all else being equal the store that makes ordering the easiest will then get the order.

Shipping & Handling.

If possible offer free shipping, customers like it and it helps to get orders. If you cannot absorb the shipping cost in the price structure check the competition and stay in the same price ranges. At patiostore.com we use two methods. First we charge 10% shipping on orders under $150 and we charge 5% on orders over $150. Our actual shipping charges were 12.5%. We started to charge for shipping when the cost went over 9% of total sales. Shipping is such a large expense that we have a section in this book to cover some of the issues that will arise and some possible solutions that might help you save money or avoid problems. Be sure you read that section of this web site and also the pricing section.

Pre-Packaged Products.

Some items are sold as pre-packaged products. These are items were you have grouped items together because customers prefer to buy them that way. Some examples are patio furniture sets, swimming pools and house hold furniture. For example, a swimming pool dealer buys a pool from one vender, a ladder, filter systems, liner and accessories from different suppliers. He offers the pool as a single priced package purchase to the consumer. If you choose to offer pre-package products check out the competition. Your customer will look first at price and you do not want to offer more then the competition and end up with to high of a price.

The Web Pages Your Site Will Need.

The follow is a list of web pages your web site will need. We will cover what information the pages should contain in the building web pages section.Pro

* A home Page

* Policy pages including shipping and receiving polices

* Department and or product category pages

* Sub Category or product pages

* Q & A pages

* Contact us page

* Order form page

* Helpful information pages

Next.

Well, you are still reading so you must still be interested in this business. By now you have decided what to sell, acquired some suppliers to by from, designed your store header, thought through the pricing and freight issues and you are ready to get started. Next is building the web pages.

"Results are achieved by an energy that acknowledges no defeat" Jim Glasgow