Web Designing is as easy
as 1-2-3, claim some of the software tools on the market
that "generate" your pages for you. Unfortunately,
many web designers today have fallen prey to this marketing
gimmick - and the results are obvious. Every now and
then, one comes across a website that looks good with
a particular browser and a particular screen-resolution;
but view it with a different browser, and you can't
even read the plain text on the page. Worse still,
given the number of operating systems that are used
by netizens worldwide, these pages will never be seen
properly by more than a half of the intended surfers.
Now let's assume that this web page belongs to a site
that sells stuff online. The very fact that half the
users cannot even see the page, translates into losses
worth half the amount straightaway (perhaps, even more!)
I guess that makes a good case for the raison d'ętre
of this article! Web Designing is, in my opinion, a
cocktail of creative skills & technical prowess
– and one is no less important than the other.
In the following lines, I have jotted down a few points
that I noticed during my online journeys, important
from the point of view of web designers. Some of them
may be taken with a pinch of salt; for it is not possible
to please everyone everytime. But most of them are simple
enough to be used as a rule of thumb.
- A picture, they say, is worth a thousand words.
A picture file, alas, is also almost as big. Images,
no doubt, enhance the look of a page, but it is not
advisable to go overboard in stuffing your page with
a truckload of images. Most net-surfers use a dial-up
connection, and the average time to load a page should
be no longer than 5 seconds. If it's longer,
the surfer will most probably click away elsewhere.
So, within this time, all the images on a page must
be loaded as well. So, as a rough yardstick, keep
the aggregate page size less than 30k.
Another important point to note is that each file
on the page requires a separate
HTTP request to the server. So a lot of small
images - even if they do not add up to a lot in
terms of bytes - will slow down the loading a lot.
Even when you must use images for navigation,
please give a second thought to the users who will
not be seeing those jazzy, fantastic &
truly amazing buttons that you spent hours to design.
Yes, I'm talking of the ALT text attribute
of the IMG tag. Do not forget to provide an Alternate
Text for each image that you use for navigation.
(It may be left blank for certain images that are
purely for aesthetic reasons, but let that be an
exception, rather than the rule.) Though not obviously
apparent, ALT text can help such users immensely.
Modern browsers offer users a choice to turn off
images. This gives an idea of how troublesome the
unwanted images could be.
A couple of more attributes that make your pages
load faster are the HEIGHT and WIDTH attributes.
Without these, the browser must wait for the image
to download since it cannot know how much space
to leave for them!
- Navigability & functionality come before
artistic excellence. It is no use making your site
a masterpiece of art if users cannot navigate around
it - even after they reach the main page, they have
no clue as to how to go where they want to go.
- Especially common, is a kind of navigation that
some people call Mystery Meat Navigation. That
means, that unless your mouse moves over an image,
you have no idea where that link might take you. Only
when the mouse hovers do you see the actual link.
This is cumbersome because users need to move their
mouse all over the place to find out which part is
a link and which is not.
- Follow the K.I.S.S. principle: Keep it simple,
- Next is a very important practical suggestion: whenever
your whole page is within a TABLE, the page cannot
render (i.e., the page does not show on the screen)
unless the entire table is downloaded. You might have
noticed this on several websites, when there is no
activity for a long time, and suddenly the entire
page is visible. Hence, to avoid such a situation,
what you should do is this: Split the table
up into two tables one below the other, and let the
top one be a short table that displays just the page
header and a few navigation links. So now, immediately
upon downloading this part of the page, users can
see the page header – and this prepares them for the
long wait ahead, as well as keeps them from leaving
your site to go to other sites, in case of a slow
- The ongoing browser wars have left only one casualty
– the user. As a word of caution, stay away from all
browser-specific functions. Because if a certain
feature is supported by one browser, it will most
definitely not be supported by another. Where you
must use such features, it should not hamper the display
of the page in the other browser which does not support
such functionality. In other words, your page should
- Creating a new browser window should be the authority
of the user only. Do not try to popup new windows
to clutter the user's screen. All links must open
in the same window by default. An exception, however,
may be made for pages containing a links list. It
is convenient in such cases to open links in another
window, so that the user can come back to the links
page easily. Even in such cases, it is advisable to
give the user a prior note that links would open in
a new window.
- Keep in mind the fonts-challenged users too. The
ultra-jazzy "Cloister Black MT Light" font that looks
so amazing on your machine may well be degraded into
plain old Times New Roman on your user's machine.
The reason? He/she does not have the font installed
on his/her machine - and one thing's obvious - there's
nothing you can do about the situation, sitting halfway
across the globe from them.
- Stay clear of out-of-the-way hard-to-find fonts.
Use plain vanilla fonts like Arial, Verdana,
Tahoma, and Courier. If need be, make your jazzy fonts
into an image and put that on the page. (and while
you're there, do not forget Tip #1.)
- A new design trick that is increasingly being used
on the web has caught my fancy: It is a very functional
navigation bar that guides you across all possible
paths within the site. It looks something like this:
Home > Section > Subsection > Page
What better than to give your users a handy way
of visiting just about any other page on your own
site, and informing them where they are!
- Another new trend on the web is not all that inviting
- various vendors come up with "revolutionary plug-ins"
and undoubtedly, most amateur web designers jump up
to spruce up their pages using them. The reality is
that most people won't have them installed, and wouldn't
care about it anyway. Come to think of it, have you
seen plug-ins on any of the most popular sites, including
Yahoo.com, Amazon.com or Google.com? It's simply not
the best thing to do. Mention must be made here of
Macromedia's Shockwave Flash plug-in, which has now
made its way onto most computers today, and thus presents
no harm in using vector animation on your site.
- Java is yet another often-misused technology
on webpages. Use Java as a utilitarian programming
language, not as a graphics front-end for your photos/images.
There are various things you can do with Java; that
does not mean you should do all of them. Java applets
are known to run slower, so users experience a certain
sluggishness in performance. And worse still, Java
has been known to crash certain browsers. This is
not something everyone likes, especially if it is
done for the sole purpose of showing a set of images
in a slideshow!
The moral: Use it, but with discretion.
- Never underestimate the importance of those META
tags. They can make all the difference between
your users coming to your site and going to your competitor's
– just because they couldn't find yours. Search Engines
heavily rely upon the Keywords & Description
Meta tags to populate their search database. And once
again, use discretion in writing these. Including
a huge number of keywords for the same page can spell
trouble. The description should be a small, meaningful
summary of the whole page that makes sense even when
seen out-of-context of the webpage itself, say, in
a listing of search engine results.
- And the final point that summarizes all the points
so forth: Write for all browsers, all resolutions,
and all color-depths. If you show people pages
that look best with their own browser and their own
resolution, that makes them feel "at home", and you
get a better response. Compare this with a website
that proclaims "Viewed best with Browser X at a resolution
of 1024x768." I'll give you a choice between
two options when you see such a page: download the
suggested browser (which might well be over 50 Megs),
then go get a new monitor that supports the high-resolution,
and then adjust your screen setting so you get the
perfect picture. Or simply click away to another site.
Which do you prefer?
The web waits for no one. And furthermore, the
user is king. Try your best to keep the user happy.
And to keep all users happy. For, a good website
is like a good storefront - it can mean all the difference
between a casual surfer and a serious customer.
Manas Tungare is
a freelance Web Designer operating in Bombay,
India. He is also the author of several shareware
titles for the Windows platform. He is currently
an undergraduate student, studying Computer Science
at the University of Bombay. For more information,
please visit http://www.manastungare.com/ This article
is Copyright © 2000, Manas Tungare. Permission is hereby granted
to reproduce this article with prior intimation
to the author at email@example.com, and provided
this notice kept intact.