WebRef Update: Featured Article: Handy Hints for Web Designers

Handy Hints for Web Designers

"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.

Next: Next Page

This article originally appeared in the July 13, 2000 edition of the WebReference Update Newsletter.

Comments are welcome
Written by Manas Tungare and