Acadian Web Design - Basic Web Design Principles

Before you write your first line of HTML you must determine why you want a web site and what you want it to accomplish. Is it intended simply as a digital brochure for your company or do you need to develop a database driven, secure e-commerce site that will sell 40,000 SKU's online and track traffic, sales, inventory, customer puchase history, buying patterns and provide P2P real time customer service? If you are reading this, chances are your site is somewhere between those two extremes.

Whether you are building your own site or you are a professional designer developing sites for clients, you had better know the answers to these questions or your effort, time and money will be wasted.

General Motors allocated one billion dollars to their web presence last year. They intend to sell cars and integrate their entire purchasing, production and sales process online. What do you plan to do?

Your site purpose will be the determining factor in your site development and maintenance budgetary requirements. Generally you should allocate the same amount for annual maintenance as the site cost you for initial development.

Please realize, depending on your intent, this can be a very expensive proposition. For example, our own consulting fees start at $1,000 per day and that is just for a basic site upgrade that will take between 3 and 10 business days, depending on the complexity of the site. If you have the time, commitment and a small budget, it is much more cost effective to learn to do the web design and development yourself.

We will assume you have already done your marketing and keyword research. You know what your primary keywords and phrases are. You have a clear understanding of what your competition is up to and how to differentiate your business from theirs. You have chosen a keyword rich domain name and are ready for the next step.

Before you move on to the next step, buy your own domain name. Domain names increase your credibility and you get the ability to move your entire domain to a different server without changing a single inbound link. Go to the whois database at 000Domains.com to see if your hot new domain name is available. Your site hosting company should register your domain name for you at little or no cost.

Host speed is very important. Generally, you pay more for faster bandwidth. Faster is better. Commercial sites need maximum speed because more speed means more sales. We will run your traffic system on our own servers because they are extremely fast and are optimized to handle very large traffic streams efficiently. Also, if you are a beginner, the cost of bandwidth could put you out of business and in debt very quickly. You must understand bandwidth control.

Another important aspect of a web server is the ability to run automation software: perl or cgi scripts. It's a computer, after all. If you're not using that computer to automate routine tasks you're missing out on the most powerful aspect of the internet business. Think of it this way: a few thousand dollars invested in software can replace an employee, or free you from routine tasks so you can do other things. All the megasites use automation to track their affiliate programs. If you aren't automating you'll never have time to get rich.

Start learning about automation by looking through: http://www.perl.org Perl Mongers - the Perl Advocacy group or visit http://www.cgi101.com Perl and CGI programming - a step-by-step tutorial for beginners. Don't be discouraged. Perl is not as hard as it looks at first. Installing a simple perl script is only a matter of changing a few paths, uploading, setting permissions (that's a unix command line item, you'll need to have telnet access to your server), and that's about it.

For fast bandwidth on a fully enabled, automation-ready web server email us. If you are going to participate in our traffic system, you will need to have your home site on a fast, reliable network.

Lay out the site page by page before you start writing code. Put the entire site design on paper. This is called storyboarding. Determine what you need for pages and what the purpose and content of each page will be. Determine the relationship between pages so you are clear how they will interlink. This is when you plan every aspect of your entire site, including the graphics, text layout, internal optimization and your sales strategy for each individual page and the site as a whole. Once you have a clear site plan, you can begin to build pages.

Choose colors - Page color or background tile, text and links. Make certain your text is legible. Red text on a black background may look cool but it's very hard to read. Dark text on light backgrounds work best. If you use odd link colors people will get confused. How many times have you clicked on underlined text only to discover that it wasn't a link?
Develop Graphics - Use the same palette in your graphics as you do for your page colors. Look for complimentary colors with good contrast. You can either develop the graphics first and base your page colors on those or vice versa but maintain consistency in your overall palette.
Develop Content - Be useful to your customers. Good information that is well presented will bring them back again and again. A terrific example is Site Point. I have been designing for a long time and I still go to Matt's site frequently to see what's new and I recommend it to everybody who wants to learn more about web design. That's how you build a community of loyal visitors.
Make pages - There are many different applications you can use for this. We use DreamWeaver and FireWorks because they meet our needs, are well integrated for graphics and HTML, and are cross-platform (we use both Macs an PCs in our offices.) Adobe also has a suite of web design software built around Photoshop, Illustrator, Image Ready and Go-Live. You really should learn HTML so you can adjust the page code by hand. BBEdit (Mac) and Emacs (PC) are terrific text editors for hand coding and both of them have many other time-saving functions and shortcuts.

There are many ways to keep your file size down so that your pages load quickly. If you personally have broadband access, find a friend who has a slow modem, 33K or less and view your site through their connection. We keep one of our computers at the office hooked in through a slow line just for that purpose and we time the loading speed with a stopwatch. Under 10 seconds is good. Less than 5 seconds is better. The ideal is 2 seconds or less.

Slow loading pages will kill your site.
For every second of delay, you lose 5% of your traffic.

Crunch your graphics - Most dedicated web graphics applications have the ability to reduce graphic file size without destroying image integrity. Fireworks and Adobe ImageReady are both excellent for this purpose. Use graphics sparingly and keep your total page size under 20K, including graphics and text files.
Avoid bloated HTML - When possible, use Cascading Style Sheets to control fonts. If you have font specifications in every text line, the surfer's browser will have to parse and calculate them every time. DreamWeaver has a command that lets you clean up code from other programs. Word files and Front Page are notorious for packing lots of unnescessary HTML into their code. This useless code slows browsers down. Clean code is fast code.
Avoid nested tables - A browser has to parse the entire page and determine the size of every table, image and segment of text before it can dislpay the page. Nested tables make the browser resolve the innermost table before it can lay out the outermost table. Your customer twiddles thumbs waiting for this to happen. Click. They're gone. Always define your table dimensions in either pixels or percentages. This helps the browser create the layout quickly.
Include image dimension tags for all your graphics. Same reason as with nested tables. The browser can parse the image size tag instead of having to read the image itself to acquire size info. It can display the page quicker because it already knows the space required. Your surfer can be reading text while the images load.

Animations have a purpose. They catch the eye. Unfortunately, they catch the eye even when you don't want them to. If you have content that requires attentive concentration, use only static images on that page. Otherwise the animations will distract the viewer from your content and that can be very irritating.

Also, use image alt tags for those surfers that have images turned off or who are visually impaired and use voice activation and text readers on their computers.

I personally happen to think Shockwave and Flash content is about as cool as it gets but we won't use it on any of our sites. If you do, make a static page be the default and give the surfer a clear visible link to the Shockwave content. These are often large files that can take many minutes to download at slow connect speeds. Warn the surfer by telling them the file size and estimated download time before they click.

Many people still have older browsers without the nescessary plug-in and they are very unlikely to go download it, install it and still be on your site when they are finished. Some of those old browsers will simply crash and then you have a surfer that is both angry and gone. Once everyone has DSL, a cable modem or some other high bandwidth connection, ShockWave (or something like it) could possibly become standard. Until then, give people a choice first.

Another way to incorporate Flash content on your site is to use Flash banners. These are small (in bandwidth) banner sized animations that can advertise a product or service of yours or point to another site. You can make an additional flat file banner that fits the same size space and location on your page and have your server determine if the surfer's browser has the appropriate plug-in. If it does, the surfer gets the Flash banner. If not, they get the flat file image.

The same problems apply for music files. Most wav files (or whatever format you use) are quite large and take a long time to download. People are very impatient and many will just click away rather than wait for a slow page. If you absolutely have to use them (we strongly recommend that you don't) make sure there is a very visible button somewhere on the page that lets people turn the music off if they don't want to listen. Remember, choice is empowerment.

Many sites use frames now. Big Mistake. Though they are useful in terms of design and bandwidth control, they still present significant problems for both users and designers.

Surfers cannot bookmark interior pages. They can only bookmark the home page. If they use an interior page frequently then they have to drill down to it every time they return to your site. Eventually they will stop coming back.
Surfers cannot capture the url of interior pages and email it to a friend. This again is a usability issue. The friend may not be able to find the page or may become frustrated enough by the multiple clicks that you lose both customers.
Designers have to make additional static pages to accomodate surfers with older browsers. This increases development and maintainance costs.
Designers have to make additional pages for the search engines to index. Although a couple of search engines have added the ability to parse frames to their algorithms, most still do not have that capability. At best, the designer must salt the NOFRAMES tag with keyword heavy text, which isn't enough to generate high rankings. This costs developers and site owners time, ranking, traffic and ultimately, lost sales.

Use frames if you must, but understand the price you pay for doing so. More to the point, friends don't let friends use frames. Avoid them. Period. If you have a framed site, we strongly recommend that you redesign the entire site and get rid of the frames.

If you use this site as an example, you will find multiple navigation elements that act as subtle indicators of where you are. These also will help you find what you need if it isn't on this page. Most obvious are the rollover images in the navigation area on the left at the top of the page. These connect to the other main areas of interest on our site. The graphic for the current page is permanently highlighted and does not link out.

Not so obvious is the page title appearing in the bar at the top of your browser window. This is the text that will be captured by a bookmark as well as what is captured by the search engines in your listing. Your title should always make sense to anyone if it is seen out of context, away from your site. Well designed titles are crucial to both surfers and search engines. Some search engines count the title as the single most important element of your page so they should contain keywords as well as being informative. On the other hand, other search engines ignore them completely. Go figure. Do that which works best.

Additionally, we have linked text that points out from this page to other pages or web sites with related content. Surfers have learned to look for blue underlined words as links so that's the color we chose for our linked text. At the bottom of the page, we have a link back to the site home page and a link to the top of this page for those who do not like scrolling.

The general principle is to make movement through your site as obvious, as quick and as easy as possible for everyone and to give lots of clues that are consistent with user expectations. Make it easy for your customer to quickly find whatever it is they are looking for on your site. For example, this site is very easy to use, has good content and no one gets lost or trapped. Everything is one click away from everything else.

You can do the same on your site and still be a creative designer. All it takes is work, education and attention to detail.

If you don't (here comes an active verb) sell your product or service, no one will buy. You must have a functional sales process in place on your site. Brick and mortar stores successfully sell to 48% of customers who come in through their doors. Website sales are between 1 and 2 percent of total visitors. There is a reason for this.

Although the internet is a new media and a great equalizer, the fundamental nature of people has not changed. We make purchasing choices based on good information and our decision to buy is based on emotions. Remember:

Prospecting - Bring the right customer to your website. Capture their attention within 10 seconds. Optimization, reciprocal links and affiliate programs all generate targeted traffic. If you have what they are looking for, effective design keeps them on your site.
Build Rapport - Create a sense of trust and comfort for your customer. Quality design and superb usability make your customer feel safe, welcome and at home on your site.
Qualify - Determine what your customer wants and if they have the authority to make the decision to buy.
Present - Offer your product or service with genuine, useful information and compelling reasons to buy. Stimulate the desire to buy NOW.
Close the sale - Use calls to action and other techniques to actively sell your product or service. (Would you prefer a red widget or a green widget?) Make your site easy to understand and the choices for actions obvious. Remember, this aspect of the sales process is emotion based and your customer is only one click away from your competitor. If you frustrate or confuse a customer at this point, they are gone forever.
Follow Up - Reconnect with your customer after the sale. A warm fuzzy feeling helps to defuse buyer's remorse and gives you further permission and trust. This step is crucial for developing a permission marketing customer base and subsequent repeat business. You can also find out how to improve your process.

Remember:
Your customers come to your site for a reason.
Be cooperative.
Fulfill their desires and meet their needs.
They will come again and again
and they will tell their friends.