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
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
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
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 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 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?