Before you start design on a website step back a minute – or two. Think about what a website is REALLY supposed to do for the client as well as the visitor. In its simplest form, a website is there to facilitate a transaction of information between it and the visitor. With this in mind, here are some tips for designing useful web sites:

1. Font Free for All: Keep the number of font families you use on a page to a minimum. Using many different fonts on a page communicates a sense of disorganization. Use different fonts only to assist in organizing the page in a clear manner; however you can usually achieve this by changing font sizes and font weight.

2. Put it on my tab: Check your forms to be sure the tab key proceeds to the next expected (and logical) field on a form. For example, if your form is collecting address information and you are on the city field the next tab should go to state, not the 2nd address line field.

3. Dump the landing page: In this day and age that extra click the user has to make on that cool splash page that you spent 2 hours on in Photoshop is not going to impress them - well maybe the first visit; it will most likely be viewed as a nuisance and irritate them by the 2nd or 3rd visit. The visitor wants to get to the information they need ASAP – concentrate on using that graphics savvy to help support the content within the site (i.e. navigation, organized layout).

4. Don’t be too Flashy: There are some sites out there (they know who they are) that use Flash in a really creative but useful manner (http://www.2advanced.com). There are others that use it with the creativity in mind but let the concept of usability fall by the way side. For instance, putting a flash segment on a splash page can compound the annoyance in tip 3. Not only does the visitor have to click just to get to the meat of the site but now he may have to wait for a flash movie to load on top of it.

In addition be careful when creating navigation systems with Flash. I have been to many sites where you almost have to chase after the link because it is spinning around in some sphere or only appears when you hover over some other section just right. I am certainly not against the use of Flash at all – just gratuitous use of it. I liken it to the gratuitous show of female skin in a bad sci-fi movie which has absolutely no bearing on the plot - although I find this a lot easier to accept.

5. No Bouncing Balls: Keep animation to a minimum unless it truly supports the site. Bouncing balls, moving smiley faces, spinning text in most cases is not going to help support the site and usually becomes distracting and sometimes annoying.

6. Background and Readability: Be careful when using backgrounds to choose or create one that will keep a good contrast with the text that sits on top of it. Too much texture in a background can also wreak havoc on the readability of a site.

7. CSS = Yes: Be sure to use CSS (Cascading Style sheets) to separate the content from the presentation. Using inline styles makes things tough when want to change to presentation attributes of a site. There is tons of free material on CSS all over the web.

8. Read up on colors and the emotions/moods they tend to evoke: Note that colors do convey different meanings in different cultures. Also, utilize a good color scheme generator to help you in creating an overall color scheme of the site. Here is a link to a free online one - http://wellstyled.com/tools/colorscheme2/index-en.html.

9. But it worked on my machine!: Be sure to test in as many browsers as possible. Things that look great in Internet Explorer may soon be transformed to a collection of HTML elements in complete disarray in another browser or even another version of IE – especially when using a tableless layout approach.

10. You sunk my JavaScript!: Keep the “Display a notification about every script error” checked in IE if you use it as your main browser during development especially when using JavaScript – which I try to keep to a minimum anyway. IE has a habit of overlooking JavaScript errors otherwise leading you to believe that all is well – until you start getting phone calls! Remember though to test in MANY browsers which brings, me to the next tip.

11. Get Firefox 2.0 and download the free utlilites Firebug and Webdeveloper: On top of being another browser to test with, the add-ons Firebug and Webdeveloper are extremely helpful.

______________

John LaSpina's 12 year system development career has spanned many different system development factions including Geographic Information Systems (GIS), Financial, Billing, Engineering applications, Intranets, Extranets, and Web Sites.

The development languages/tools John uses includes VB, C#, HTML, DHTML, CSS, PHP, Perl, Javascript, MS SQL Server, Oracle, MySQL, and Photoshop.