Handy Hints for Web Designers by John Parker
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 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 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!
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 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. 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.
4.Follow the K.I.S.S. principle: Keep it simple, stupid!
5.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.
6.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.
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 links would
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 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.
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. (And while you're there, do not forget Tip #1.)
10.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!
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.
About the Author
The author is a Writer working with a leading software development company,
which deals with software outsourcing, offshore outsourcing and offshore
software development. Get more valuable information at
http://www.a1technology.com.
|