Common Mistakes in Web Site Design

Your web site is in many cases the first impression a potential customer gets about your business. 

You have about 30 seconds to make that impression count.

Unfortunately all the good intentions in the world will not make your web site effective (at selling and persuading) if it is badly designed.  Here are the most common errors:

Slow Pages

Why don’t people like to wait? They don’t like to queue. They don’t like to wait to see someone, to have something delivered, to be replied to. Its part of the Western way of life that we are indoctrinated from an early age to fill our lives to the brim with interesting and constructive activities. Waiting is not one of those. We spend millions on ‘time saving’ gadgetry, we drive fast to get wherever we’re going quickly. So, where’s all this time we’re saving? Do we build up a great credit by the time we reach 70? Of course not. We fly home at the end of the day to lie in a chair with beer in our hand.

New technology of course has to perform – and be quick about it. The internet, as we’re told repeatedly in emphatic terms, is the new frontier, the information superhighway. Superhighway? An overladen donkey staggering down a rutted cart track would be faster.

So, when it comes to the Internet, we have even less patience than we would queuing for a loaf of bread or a tank of gas.

Its been said plenty of times before and is consistently the number one complaint by those who use the Internet – slow pages frustrate and irritate and are almost guaranteed to send users elsewhere.

This is particularly true in this part of the world where broadband is virtually unknown and dialup connections are the rule. Even where broadband is popular, a snappy download will be appreciated. Having extra bandwidth shouldn’t be an excuse to load pages with doodads.

Let’s face it, people don’t like looking at web pages. Its not the pages of course, just the experience. Give them a book with all the information they seek in it and they will be happy, flipping to and fro for hours.

Even after the site has downloaded, reading the pages is at least 25% slower than reading from a book – and that is if the type on the page is readable.

The technical reasons for slow pages are easy to find – graphics, connections and the like – but the real reasons are more subtle.

Ignorance

Sometimes on the part of the web designer but more likely on the part of the client.

Slow pages are a recurring theme on the Internet so most designers will have read something on the subject and be aware of the problem.

In any event, many HTML editors have a ‘Document Weight’ tool that gives web designers an idea of the length of time the page will take to download at various modem speeds. These are useful but only in a relative way.

Firstly, although they measure page size and associated image and script sizes, they normally do not include images used as backgrounds, which can be very large in some cases. Secondly, they cannot anticipate the users immediate environment. Many users download more than one page at once which slows everything down even more.

So, although a Document Weight reading will indicate a download time of 10 seconds, in practice, this will be nearer 30 – 45 seconds, particularly if it’s the first page of a site and no images are available from the browser cache.

Clients will generally have Internet experience at some level and have endured their fair share of slow pages. However, THEIR new site won’t be like the others, regardless of the fact that they want to cram 100kb of photos onto the front page along with a variety of animations and their logo writ large upon the header.

Clients compound the problem by requesting such sites from designers. It is the old ‘cup holder’ competition that raged between two vehicle manufacturers in the US recently that ended when one manufacturer managed to incorporate no less than 17 cup holders in a car. “If the competition has three animations, then it stands to reason that four must be better”.

It is this ‘if a little is good, then more must be better’ syndrome that ruins many pages – not only with graphics but also with other aspects of site design.

Many clients regard a ‘busy’ web page – one that has lots of complex graphics and animations – as a good page. It must be good – look at all the gorgeous graphics, the animations, the link farm, the jazzy, fading buttons and the wall–to-wall text. If it has a migraine-inducing Flash animation, so much the better.

Many designers will collude with clients and their requests just to get the job. Telling the client to ditch just about everything on the front page – including the grandkids photo is not going to bring a smile to their face.

Once their site is complete, they of course will manage to wait the two minutes for the masterpiece to appear. Their clients won’t.

Web designers know clients are usually impressed with ‘razzle dazzle’ of course and if asked, will be happy to provide it. The client is delighted and shows his new site off. He says smugly to his friends “Of course we have Flash and tremendous graphics with lots of curves, gradient fills and drop shadows not like our competition with its plain old site. Cost us a fortune but its worth it.”

He is not so delighted if he sees his server log and under ‘average time spent in site’ it says 37.4 seconds. Even if he doesn’t see his log, after a few months, there are few enquiries. He is now convinced that the Internet is a waste of money. In the meantime, his lowly competitor’s visitors have seen his site download chop chop and been through his twenty or so pages to see what he has to offer and off out again, all within a couple of minutes. Mr. Bigmouth’s visitors are still waiting for the Flash to finish.

And what will the latter’s visitors remember? The disco-like Flash? The 3D graphics?

Nope – just the interminable length of time it took to see anything on the screen. Will they come back to see his Newsletter? His new service?

Ego

The worst offender is often the web designer left to his own devices by a client with little Internet experience. The temptation to go berserk on the site is heightened by the fact that if the site is a disaster, he can explain it away in highly technical terms and blame the client for a lack of strict guidelines and a parsimonious budget.

Many web designers come from a graphics background and may be strong and competent in that area and less so in the technological side of site design. It is natural therefore that graphical aspects of sites from such designers may overshadow and in some cases overwhelm the design.

The web designer isn’t always to blame in this regard.

The web designer for a large corporation may be employed by them but will probably in any case be at the bottom of the ego food chain. Above him will be the sales department, the marketing department, the PR department, graphic design section and finally, if he’s lucky, the bloke who has to cobble the whole sorry mess together.

Graphics

‘A picture is worth a thousand words’ – actually about twenty thousand in many cases in web pages. If it’s not necessary, leave it out. If it doesn’t add value to the page, leave it out. If it cannot earn its place, leave it out.

Most graphics are too large anyway, rather halve the dimensions and quarter the download time. Many designers are beloved of the enlargeable thumbnail. In many cases, the thumbnails are so small as to be indecipherable. Anyone enlarging such a thumbnail will do so simply to find out what the thumbnail was actually of. A properly treated photograph can be displayed with all its information visible in a form little larger than a thumbnail.

Poor cropping is at fault in many cases. Rather choose just a portion of a picture – the message will still get across. Instead, we get the 10 pixel high squiggles that are supposed to represent a herd of buffalo. Photos taken with the average lens will include a fair amount of ‘sea and sky’ – crop out the top and bottom 25% of the picture and save time.

Stitching several of these ‘panorama’ aspect photos can yield a realistic effect without waiting for hours for it to download.

Some people just love videos. All should come with a warning related to the huge file size. Walk-throughs are similar and apart from the huge file size, most of the content is of questionable relevance.

Corporations love the ‘office clipart’ pic – the telephonist, the earnest consultation, the euphoric purchaser, the computer keyboard. I’m not quite sure what they think such pics add. If they were smaller, I could condone them but not when they’re 7kb each.

JPEGs

Useful for full colour graphics like photographs but should not be used in high contrast situations like graphic text on a plain background because of all the edge artifact that occurs.

JPEGs can be compressed almost to nothing but it is a ‘lossy’ compression and as the compression ratio increases, so do the ‘blocks’ of the image increase in size.

A common problem with JPEGs is over sharpening which results in a ‘scratchy’ image – and an increased file size. For maximum effect, JPEGs should be very slightly fuzzy with saturated colours.

GIFs

A maximum of 256 colours but can still render most small photographs well. A colour can be chosen for a transparent background that can yield many interesting effects.

Unlike JPEGs, the number of colours can be reduced - to 2 if necessary – minimizing the file size. For some reason, when large blocks of colour are called for in a web site, many designers opt for huge GIFs rather than the use of table or DIV background colours.

The problems related to GIFs are mainly two, and they’re related. Drop shadows and gradient fills.

They are less seen now than before but their effect is to increase the file size significantly. Because its just a push of a button to create these effects, web designers love them – they add pizzazz to an otherwise very average image. There are ways of creating a 3D effect in many cases that do not involve drop shadows.

Bevels are much used by logo and button designers and have a similar effect on download time. Masks can yield impressive effects but also can increase download time.

There is a place for all these effects but the overhead that each of them add to the page weight must be checked all the time to ascertain whether they are acceptable.

Flash Animation

Gif and Java/Javascript animations are but small cheese to the Big Daddy of them all – Flash.

Apart from being the worst offender, it unfortunately is the most impressive example of graphic ‘razzle dazzle’ and therefore the most persuasive.

In a bewildering way, web designers in their own right, and big corporations love Flash. I have lost count of the number of times I have left pages because of excessive use of Flash – picturesquely known as ‘Flashturbation’.

Flash almost inevitably is found on the Home page – the most critical page in any web site. Occasionally it stampedes untrammeled through every page in the site.

Some even come with built in ‘progress bars’ in the vain hope that as long as a visitor can see something happening, he will wait two minutes for the page to load. Many pages come without a ‘Skip’ link to get rid of the Flash.

This is contempt of the worst sort.

Firstly, you are forcing the visitor – from whom you are hoping to part his money – to download the Flash plugin. Never mind that he probably already has it, you are constraining him to your design. Is he going to be so dribbling at the lips with the prospect of the wonders of your site that he will sit while the plugin downloads and installs itself?

Secondly, you are forcing your visitor to wait again while the whole animation loads – sometimes well over a minute – and thirdly, many Flash animations are completely bereft of any meaning and don’t even end up with a menu.

Fourthly, even if there is a ‘Skip’ option, why force the user to click the mouse? The whole subject of usability is to get the long suffering visitor through your site with as few mouse clicks as possible and here you are, right on the Home page, forcing him the use his mouse.

Lastly, and the ultimate insult, many pages don’t incorporate a ‘Skip’ link. You are simply telling your visitor, your valued visitor, that he must sit there and wait and watch your ego filling the screen because you have spent a couple of weeks on the thing and besides – the rest of the site, even though it hasn’t the benefit of my great Flash talent – is brilliant.

If you have any aspirations at all about getting somewhere noticeable on a search engine and you want a Flash intro then forget it. Search engines hate Flash.

The sad fact is that often, the ‘rest of the site’ is even more irritating than the Flash for a variety of reasons. Inexplicably, even some web designers on their own sites use a Flash Home page and again, sadly, clients are REALLY impressed with Flash despite the fact that it is expensive to create.

Graphic Sea Anchors

If an image is to go on a web page, it must earn its place there – every image. If it is absolutely relevant, then of course include it. If it is incidental then look very hard at it. Yes, its “only 4kb” but the 4kbs mount up. If it is to be included to break up the text and add a little visual relief then reduce its size and colour depth and wash it out. It will then be only 2kb or less and not distract the reading of the reason the page exists in the first place – the content.

In the opposite of print media, Internet visitors look at text first and pictures after. And, to paraphrase the aphorism ‘ a picture is worth a thousand words’ – in the world of the Internet, it is worth several thousand words in download time – and that’s a small image. Secondly, it may not be worth any words if it doesn’t add value to the page.

Elaborate icons also inevitably add weight to pages. The Warthog (www.warthog.co.za) site has 27 small graphics crammed into 7kb and yet it is not uncommon to see a single icon take up 3kb.

Rollover buttons using Javascript are still being used. Six buttons, six rollover states equals twelve images. If each image is ‘only’ 2kb, that is 24kb and your visitor is having to wait an extra 8 seconds or so just for your buttons to load. Style sheet buttons can be just as attractive and take no time at all to download.

Summary

Fast pages are good.

Attractive pages are also good but not as good as fast pages.

High speed and quality content (another hot topic) are two things paramount when putting a site together from the lowliest couple-of-pager to a thousand page corporate site.

Producing an attractive yet fast page is a balancing act but unfortunately, the balancing pole is usually weighted to the graphics end.

About the author

This article was compiled for the Cozahost newsletter by Martin Evers of Warthog Web Design.

Warthog web design is a web development company based in Durban.  Before establishing Warthog, Martin ran several large research laboratories at the University of Natal.

Warthog Web Design has been creating both small and large web sites for the Provincial Government and local and overseas businesses since 1997. Their  corporate philosophy is one of creating fast, effective marketing websites. Their own website lives at www.warthog.co.za.

Do you want more quality  information like this?

You will find more of the same in the Gezact blog or read about the Cozahost web designer service.