Handy Hints for Web Designers
Web Design at its best!
"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. It's not hard
to come 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; it is not possible
to please everyone every time. But most of them are
simple enough to be used as a rule of thumb.
1. 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 advisable
not 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. 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. 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!
2. 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'll have no clue as
to how to go where they want to go.
3. Especially common is a kind of navigation that
some people call Mystery Meat Navigation. What that
means is that unless your mouse moves over a given
link 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.
4. Follow the K.I.S.S. principle: Keep it simple,
stupid!
5. 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 many Web sites, 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.
6. The ongoing browser wars have left only one casualty:
the user. As a word of caution, stay away from all
browser-specific functions. Where you must use such
features, it should not hamper the display of the
page in other browsers that do not support the same
functionality. In other words, your page should degrade
gracefully.
7. 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 a link will open in
a new window.
8. 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 the 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.
9. 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. (But while you're
doing that, do not forget Tip #1.)
10. A 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. Sometimes called a "breadcrumb
trail", 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!
11. Another trend on the Web is not all that inviting
- various vendors come up with "revolutionary
plugins" 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 plugins 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 plugins,
which has now made its way onto most computers today,
and thus presents no harm in using vector animation
on your site.
12. Java is yet another often-misused technology
on Web pages. 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 slowly, 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 (or will tolerate), especially
if it is done for the sole purpose of showing a set
of images in a slideshow! The moral: Use Java, but
with discretion, and for a good reason.
13. 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
rely heavily upon the Keywords & Description Meta
tags to populate their search databases. Once again,
use discretion in using 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 engine results.
14. 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 Web site
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. Furthermore, the user is
king. Try your best to keep the user happy, to keep
all users happy. For a good Web site is like a good
storefront - it can mean all the difference between
a casual surfer and a serious customer.
About the author:
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
|
