home services resume portfolio contact us about me

My Web Design Principles

Introduction
The Good, the Bad and the Ugly
Rules and Practical Suggestions
Related Links

Introduction

How many web sites have you visited over the years? No doubt you have seen hundreds or thousands of different sites. During my surfing on the Internet I have seen some very excellent sites and others that were not so. The tragedy is that people invest an enormous amount of time and money into their web presence, and often all this hard work ends up being wasted because they do not encourage the surfer to fully explore their site.

When the time came for me to design my own site, I wanted to a good job and create something that would be visited by my potential clients as well as provide interesting information. I was aware of my own surfing psychology and wanted to create a web site that people would not immediately [BACK] out of.

In this document you will learn some of the things that I think are important when designing a site. I hope that some of these suggestions will help others create web sites that I will someday want to visit.

The Good, the Bad and the Ugly

Before we can meaningfully understand statements like, "such-and-such is good." or "XYZ is bad", we need to establish a standard of evaluating the good. Our first step in arriving at a standard is too look at the nature of the beast. What is the Internet used for? Why do people use it? What things attract visitors to a site? What encourages a surfer to explore all information on a site?

What follows are certain observations about the medium of the Internet as well as "surfing psychology".

Bandwidth is very limited.

This is the single most important fact about the Internet that should be kept in mind when designing a web site. The typical modem user can receive about 5-10 KB/second. This puts a limit on how much information you can place on your web pages. For the most part you don't have to worry about the size of the HTML files. Rather, it is your images that contribute most to the overall size.

Whatever design decisions you make regarding your site, you should always make sure your site functions reasonably within the bandwidth limits of the Internet.

Hints and Tips:

Use small sized graphics.
Try to reduce the number of images on a given page.
Maintain a high bandwidth and a low bandwidth version of your site.
Use the WIDTH and HEIGHT attributes of the <IMG> tag.
Use thumbnail images in place of a large image.

The Internet is primarily an information resource.

Today the Internet is used for information not entertainment. Learning about companies and products. Learning about special interests and hobbies. Communicating with government and other institutions. Of course, all this can be entertaining and many sites are highly artistic. But the primary goal of using the Internet is the information content and electronic communication.

You shouldn't sacrifice the primary purpose of your site to the lesser goal of being flashy and/or sexy. I am certainly not opposed to sex appeal but, I think many web sites need to get their priorities straight.

Most web sites are not unique.

If you have an excellent web site about railroads, so will others.
As a software consultant, I know that I am not the only consultant listed on Yahoo. I am aware that my Yahoo listing does not do much to differentiate me from my competitors. I want to make the most out of the visits I do receive.

If the user is grinding through a search list of a couple dozen similar web sites and my site turtles its way to his screen, guess what he will do? He is going to hit [BACK] and pursue the faster web sites.

Hints and Tips:

The first page of your site should be fast.
It should clearly summarize what information you have.
It should look professional.

Your web site is unique.

This may seem to contradict the previous statement, but the fact is that every web site has unique information not contained elsewhere. Try and leverage this by telling the user early on what makes you different from other sites.

A good example of something to mention on the first page is your geographical location. How many times have you hunted around a site to figure out where they were located? By making this type of information more prominent, you may very well keep around a potential customer.

"All things excellent, are as difficult as they are rare."

Always keep in mind that the latest and greatest extensions to HTML are going to be rarely supported by the typical browser. If your goal is to attract visitors to your site, don't deny them access by using features that don't work on their browser. If you must live on the bleeding edge, consider maintaining a simpler web site that only uses standard HTML.

I hesitate to say this because it sounds like I am advocating that one should appeal to the lowest common denominator. But this issue comes down to one of priorities. What are are you trying to achieve? For a personal web site, this is not a major issue. But a commercial site needs to support the widest sector of Internet users first.

Hints and Tips:

Test your site using several browsers (Netscape, Explorer, AOL, ...)
Test various screen resolutions.
Test various platforms (Macintosh, Windows, Unix/Motif).
Verify that the plug-ins you use are commonly available.
Maintain a sexy and boring version of your web site.

A web site is not a billboard.

A billboard attracts the attention of motorists by being big, colorful, and eye catching (i.e. "sexy"). Web sites on the other hand attract users by having the proper search keywords stored on a search engine. When the user decides to click on your URL, you already have their attention. Having huge, flashy graphics and animated .gif's won't increase your visibility, as some web designers seem to think.

The real challenge is to sustain the users interest once they arrive at your site. A slow web site doesn't help.

The pen is mightier than the raytraced-animated-sword.

As mentioned before your web site gets found through search engines. These are all based on textual words, not graphics. But once the surfer begins viewing your site, what you write has more impact than what you show him. A few well chosen opening lines on your web site will do more to keep your visitor interested than will a flashy image.

There are many exceptions to this rule: For example if you are selling a product, a picture is a very effective way to showcase it.

Patience is a virtue, but not on the Internet.

This is an observation about the surfers' psychology. The surfer is seeking answers. Joe is looking for a fun place to go camping for the summer and Susan wants to find out where to buy books on mountain biking, etc... For most Internet users, browsing the net is not an end in itself. Surfing is a means to getting information. When designing your site, keep in mind the surfers' impatience and his desire to get answers quickly.

On this issue, your sites' first page is the most important and will be your most visited page. The surfer will be scanning your first page to determine if the information he is seeking can be found there. Don't waste this oppurtunity by failing to mention the content of your site.

Hints and Tips:

Don't use a start page that requires the user to click on an [Enter] link. If the user is in a hurry they may not bother to enter your site.
A last modified date helps the user determine the relevance of your information.
Your first page should be fast.

Learning is hard work.

The surfer is using the Internet to answer questions and help solve problems. The last thing he wants to do is struggle with a new and bizarre navigation scheme.

Hints and Tips:

Be logical, and consistent across your entire site.
Don't obscure the browsers status line, as this gives the user important information about the links on your site.
Don't use a color scheme that makes it hard to distinguish between visited and un-visited links.
Avoid using frames.
Be aware of the following pitfalls when using image maps:
1. They do not reveal visited links versus un-visited links.
2. You are responsible for making the click-able regions of the image map obvious to the user.

Rules and Practical Suggestions

Keep the size of your individual images under 15K.
The total graphics on a given page should not exceed 100K - 150K.
When you want to show a large image, use a click-able thumbnail.
Don't use fancy HTML features.
Don't use JAVA unless you need to.
Java has two strikes against it. Firstly, it's slow and causes a noticeable pause in the functioning of most browsers. Secondly, it violates the principle that "Learning is hard work". Java applets can create a whole new application interface that the surfer needs to learn.
Your site doesn't need JAVA.
If Encyclopedia Britanica can get by without Java, so can you.
Don't use animated .gif files.
Would you want to read a book with a small colony of ants roaming the pages? Animated .gif's are like ants.
Don't use animated text (i.e. the <BLINK> tag)
Don't alter the browsers status line.
The status line is for the browser to display where a link will take the user. When you write into the status line, you make it harder for the user to navigate your site.
Don't use frames.
Frames can be used to create some very effective web sites. They take a lot of work to design properly. Usually, they just create navigation nightmares for the user.
Don't use pop-up dialogs.
These things scare the be-geezes out of me. On my Windows95 machine, a pop-up dialog is accompanied by a loud "Pong" sound. Pop-up dialogs look the same as the "Disconnected" message I get when my Internet connection goes down. Your web site is not so fantastic that you need to announce yourself in that way.
Don't use a start page for your web site.
This can have the adverse effect of confusing the user into thinking that this simple page constitutes your whole web site. This is especially true if he must drag his mouse around your start page to find out how to "enter" your site.
Explain what your site is, and what it contains early on.
Don't use sound for your site.
Leave the surfers sense of hearing alone. He may want to listen to his favorite CD, talk on the phone, or have some peace and quiet.
Don't require obscure plug-ins to make your web site work.
Don't implement pretty fonts with graphic images.
A fast site with ugly fonts gets more hits than a slow site with pretty fonts.
Always use HEIGHT & WIDTH attributes for the <IMG> tag.
This reduces the time it takes for a web page to be displayed. It allows the user to read your text while the graphics are loaded. (This rule is especially true for the <TABLE> tag).
Try and use the ALT attribute for images.
This give the user something to read while your graphics are being loaded.
Maintain a last modified date on your web site.
This helps the user to quickly determine if anything is new on your site. He will be more likely to return, if he knows that he can simply look at a date to determine if any new information is available.
Don't litter your page with numerous award icons - use a separate award page instead.
Many awards icons are animated, this can cause seizures in some people. They also increase the size of your web page, making it slower to load.

My Web Design Principles

Introduction

The Good, the Bad and the Ugly

Rules and Practical Suggestions

Related Links