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
Cozahost newsletter.
 |
