Web Site Design, Pitfalls You Should Avoid

By Gunter Gerdenitsch
Posted Monday, September 27, 2004

Time and again I come across a web site with ages of load time, nearly illegible copy and a lack of content but full of irritating gimmicks. Often I cannot help wondering: "Horrible! Didn't they see how their Internet appearance does them a disservice? With such a web site - whatever their core business will be ... ?" Then, upon second thought, I have to say to myself: "Well, there's only one reasonable explanation: They *really* didn't see it."

Indeed, when you are developing your web site, you do it strictly LOCALLY on your computer. That's a great difference to how it will come out ONLINE to your visitors. (In fact, that's what makes the difference between a professional web site designer and someone who is carving out his/her own web site. The pro's of course are subject to the same discrepancies - but they are aware of them. The amateur is happy when his/her web site design is looking well on the own computer - disregarding that it might be looking very differently to a visitor!)

Some of the main differences between local and online web sites are the following:

Load Time:

Many surveys among web surfers show that load time is one of the main deterrent factors for NOT entering a web site and turning to another one instead. Professional web site design will always try to have contents on screen within the first few seconds. Additional parts of your web site can be loaded during the following 20-60 seconds - but during that time the visitor should already have something to read on screen! (Preferably, of course, something to make his/her mouth water what is yet to come.)

Don't forget: When you design your web site LOCALLY, your computer takes the contents from the hard disk - that is, it appears on your screen within milliseconds, even with the most extravagant graphics, etc. A visitor to your web site, however, will have to load it ONLINE. And this might take quite a long time. While switching to another web site is just a matter of seconds. Don't be tempted to stuff your web site with things nobody is eager to see or hear!

There are many companies specialized in helping you to make your web site look more professionally. Some of them are even quite generous about their free advice, e.g. WebSource.com (http://www.\web-source.com).

Screen Resolution:

When you design your web site locally, you will usually do it at the same screen resolution you have set your computer to as you use it for all other applications. When you are finished, it looks "perfect". Amateurish web designers would feel great now and upload their stuff right away.

Yet, professional web site designers will deliberately transfer their design to any other browsers with a different screen resolution or even to another computer with a different operating system. And, usually, they will be in for a shock: What was looking "perfect" initially, might be garbled now or hard to read.

The reason is, a HTML code is no "hard copy" (like e.g. a poster printed on paper). Instead, the browser "paints" the copy described in htm-code differently every time, according to the available space. (Convince yourself: Display any .htm-file in your browser, but this time don't maximize the browser's window but set it to variable size. When you drag the window, say, at the lower right corner - you will see how the words and images move around. Up to a point perhaps at which you lose the context when reading them!)

There are many resources where you can learn tricks of web site design to avoid such problems, e.g. LTDU (http://www.herts.ac.uk/) or Start Your Business Day (http://www.startyourbusinessday.com/).

Internet Browser:

At TheCounter (http://www.thecounter.com) you can see how many different browsers are out there. As well, there are many other global statistics that will be interesting for you in another context.

All the Browsers display HTML slightly differently. Internet Explorer is much more forgiving than others. It "assumes" what you meant to do. Netscape, on the other hand, is unassuming. If it doesn't understand your code, it simply will not display it.

That's why for a professional web site design it is very important to check the syntax of your HTML code. At AnyBrowser.com (http://www.anybrowser.com) you will find many links that will be helpful for a professional web site design. For example, there is a resource directory with links to HTML specifications, site building tools, etc.

Or go to any search engine - if you enter "HTML syntax" or "HTML validator" you will get many links to tools related to this problem.

One tool you should have right at hand on your computer (and you can download it for free from (http://www.htmlvalidator.com/)) is "CSE HTML Validator light". By it you can have any .htm-file syntax-checked, just like any programming language is formally checked by a compiler.

Add-on's and Plug-in's:

Be cautious about most of the browser add-on's. In particular, you should try not to have anything in your HTML-code that requires a visitor of your web site to download a plug-in before entering. At least you should provide an alternative, e.g. stills for a Flash video. A good bet is, a visitor will go to another web site rather than interrupt his/her surfing, if a plug-in would have to be downloaded and installed first.

Nevertheless, if you want to know details about any browser plug-in, go to Plug-In Plaza (http://browserwatch.internet.com/) or Plugins.com (http://www.plugins.com/).

Slightly different it is with add-on's to your own browser. For example, RoboForm by SiberSystems (http://www.siber.com) is very useful for filling in screen forms. It fills in automatically information that is pertinent to you and would have to be re-typed again and again (e.g. your exact name, email address, etc. - all what makes your "identity").

Another add-on that will make your own web surfing more efficient is ALEXA (http://ww.alexa.com/). However, the latest version assumes MS-IExplorer 5.0 to be installed.

Upload Process:

Once you are finished with your web site design, painstakingly avoiding all the pitfalls mentioned so far, your problems are over - NOT YET! The process of transferring your files (.htm, .gif, .jpg, etc.) from your local computer to the server of your web site host - called "upload" in Internet terminology - has some problems of its own.

That "uploading" is usually done by FTP (File Transfer Protocol). Good FTP-software you can get e.g. from Ipswitch (http://www.ipswitch.com/). Some of the better web hosts offer their own site control software (e.g. 'HiRize' by Virtualis (http://www.virtualis.com/)) that includes uploading.

When you have "connected" your uploading software to the e.g. FTP-site of your web host, you will usually not be right there where you need to place your files. First you will have to change to a sub-directory named "HTML" or similar. (That seems hardly worth mentioning - but, believe me, it can be very irritating if you forgot to change directory before starting uploading for an hour!)

When the uploading is done, you will want to enter your web browser, switch to your web site and check the new pages. Chances are, what you will see is - NOTHING. The old pages seem to be still in place. You get confused: Locally the new pages looked fine, the FTP obviously was OK, so - where are the new pages? Before you send an ill-humored email to your web host, look in your web browser's "File" menu. Is the item "Work Off-line" ticked off? Then your browser took your web site's files from your local hard disk, instead of loading them from your host's server. And these files, of course, were the old ones, since they were never overwritten before.

There are some other problems possible during uploading, but they happen too rarely to make you feel uneasy here.

In general you will enjoy your new web site design now.

Article by Gunter Gerdenitsch, owner of '1st Components Design', Universal Software Components for Computer Applications without Programming. He is the specialist for "professional use" of the computer. (http://www.1st-components.com), mailto:gunter@1st-components.com. There you can download many free articles and software tools.