Website Creation - Do's and Don'ts

It's easy to get caught up in the creation of your website, the creative juices fly, and all the artistic talent you never have been able to put to use go into high gear!
Whoa, boy!
Not so fast!
Believe it or not, as young as this web business is, there have been some hard and fast, tried and true rules put in place about what the public will and will not accept. If you want your website not only to reflect that hidden artist in you, but be a monetary success, you need to take these rules to heart. Think of your favorite magazine. You know there is always competition among them, some doing well, some dead and gone. What makes the one you read attractive are the same rules we are about to discuss for your website. They have a standard layout they adhere to, week after week, page after page. There is a flow to it, a color scheme, and careful rules about fonts.

Look-and-feel

The look-and-feel of your site is very important to the visitor's experience, and it is important that it has a pleasing feel to it when a visitor first arrives. Now here's the caveat; Your favorite colors and your cute designs aren't necessarily what is attractive to the general public. Believe it or not, there are very scientific reasons for choosing color. Not long ago I visited a site selling vacation properties on a far-away island. I am always intrigued by far away places that I have never seen so I went to their site. Instead of soothing blues and greens that fell like grass and water, I was greeted with bright orange with lime green highlights. Needless to say, I still don't know what the island is like. I left the site without clicking on the pages that might have had some images to educate me to the island's beauty.

If your site is aimed at the younger generation or selling pop hits or movies, then many of the following rules don't apply. If you want to aim squarely at the mainstream public, then maybe you need to take the rules to heart. Before you open up your favorite editor and start hammering away, sit down at a desk with a pen and paper - yeah, that old fashioned stuff your grandparents used to use! Draw a large rectangle to represent your home page. Now draw a small rectangle box at the top to represent your header. From here organize your page with boxes to represent your image placements and text areas. You may need to do this several times before you hit one that flows the way you like it. Once you have a design you are happy with, you are ready to open your editor and create your template.

TEXT

First lets talk about text - fonts to be specific. There are thousands of beautiful fonts available for the creative web designer, but each has its place. Since there is not enough room in the article to discuss all the specialty websites, I'm going to focus on mainstream Ecommerce sites, you know, the ones that are there to bring in a buck. On an Ecommerce site you want to pick a font that is easily readable by everyone, in a size that doesn't strain anyone's eyes to read. The most common are Arial, Times New Roman, Helvetica and Courier. A good font size is usually 12 point. I don't recommend page headers that are too large, although the first one on the home page may be set at H1 for search engines. While we are on text, be very careful with Color. Never ever lighten the font so it blends with the background (grey on white). If you want people to buy from your site, let them be able to read it easily. Last but just as important as the rest, keep your font selection down to two, one if possible. Changing fonts throughout a website makes it look junky and not well planned. Once you decide on the basic colors (brown & green or Blue and yellow, etc.), I suggest very highly that you Look at this tutorial, Color terms and theory . This tutorial will give you a little insight to the terms and compatibility of colors. Also visit Color Wheel Theory , a great visual on how to choose complimentary colors.

FLASH

Once in a while, a small flash object in the right place will add important information to the site, but more often than not on an Ecommerce site, it detracts form the sales pitch. Imagine that your customer came to your site to purchase something, and your flash takes his attention away from your sales pitch. Usually one of two things happen - either they leave because the site is to flashy (no pun) or they get caught up in the movie show and forget what they came for. Either way you lose a sale.

Functionality

Now here is my pet peeve. If your site is not functionally easy to use, I leave. I don't have time for long drill-downs, going through menu after menu to get where I needed to go. Then finding out that the shopping cart is not user friendly. Here are a few words of wisdom for making your site functionally pleasing to most of your visitors.

Menus

First, make sure your navigation links are the same on all pages. There is nothing like getting stuck on a page somewhere in the site and you can not get back to recognizable territory like the home page. The best method to do this is by setting up a template that you will use for the whole site. After you have finished adjusting the template so that the look-and-feel is they way you want it, it is best if you cut the navigation bar out of your HTML document and paste into a notepad text file with an .inc extension so that you can make it an include file on all the other pages. (if you are not familiar with include files, you need to read up on them) When you have multiple pages and need to change a link or ad a link you only need to make one change in the include file make the same change on every page. Second, work on your flow of your site to try and eliminate as much drill-down as possible. Most of us get aggravated if we go from sub-menu to sub-menu 3 or 4 times to get to a product. Much of this can be eliminated with prior planning. Several years ago, when they were new, cascading menus and dropdown boxes were cool, but they have been over-used and are a real pain in the butt to the consumer. It may be my senior age, but I find it difficult to navigate the first dropdown box, only to find that the product I stop on brings up a second dropdown beside it and then eventually another one beside that one. Take men's jeans for instance. I was on a site recently really looking for prices on men's jeans. Top category on the left nav menu was "apparel". Mouse-over it and get a dropdown beside it that gives me a choice of men's or women's. When I hover over men's a third dropdown appears with a list of all the brands (6 deep). So besides the time spent getting there what is frustrating? Well, if I miss my navigation from one dropdown to the next only slightly, they all disappear and I have to start over.

This aggravating system could be improved slightly by expanding navigation links instead of dropdowns. It could be improved even more by better planning. The top level nav choices could give me "men's apparel" and another link "woman's apparel". This eliminates one whole dropdown. Next, the nav bar could give me sub-choices, indented in from the main category (men's apparel) such as "shirts", "jeans". "slacks", "coats" etc. I have now accomplished two things. I have eliminated 2 dropdown boxes, and I have given the visitor a clear picture of what I have and how to get there. Finally, the brands. If it is necessary to separate the brands I still suggest you stay away from dropdown menus. I suggest two choices. First expand the menu for that sub-category. This can be done easily by loading a second menu. My second recommendation is to provide a new screen when they click on the sub-category (men's apparel, jeans) and display the logo's for each brand and make then links to their specific product.

Shopping Carts

As you can tell if you read any of my other writings, this is a sore subject with me. Picture this: You walk into a new department store and look around for a shopping cart. You don't see any available. Upon asking an employee, he goes to a back room and comes out with a cart. Aggravated yet? As you start to push the cart you notice that the cart has a lid to it and a slot through which you put your items in the cart. A little strange, huh! You spend an hour shopping and begin to worry if you forgot something or is it already in the cart. You find that the lid was sealed and you can't check the cart to see if it is there. Pretty well aggravated at this point decide not to do any more shopping at this place and head for the check-out. On the way you realize you have over spent your budget. Upon reaching check out you inform the clerk that you want to put one item back because you don't want it at this time. She informs you that once it is in your cart, you can't take it out!

Conclusion

Sound a little far fetched? Maybe for a brick-and-mortar department store it is pretty exaggerated, but I have come across a few shopping carts that come close to that scenario. Because an inexperienced designer hasn't thought the whole process through, many potential customers have a bad experience and either don't trust the site or find it to amateurish for their taste. Be very careful that you pick an ecommerce guru who understands all of the nuances of a website and doesn't create the shopping horror in my made-up scene.
In closing, I would like to remind you that there are many other details you need to plan for; what is your return policy, is there a page that spells it out? How about disclaimers, privacy policy, legal page, security? Shipping policy? What about family friendly, is it child safe? Do you have a contact us page? There is a lot to consider when you decide to go Internet with Ecommerce.