Handy Hints for Web Design|
by Manas Tungare
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
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
- Follow the K.I.S.S. principle: Keep it simple, stupid!
- 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 connection.
- 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 degrade gracefully.
- 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
- 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
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 web page itself, say, in a listing of search
- 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 www.manastungare.com
This article is Copyright © 2000, Manas