Website Design Tutorials: 2

Some of the software tools on the market claim that Website Design is as easy as A-B-C, They also claim they will create your website pages for you. They do exactly this, take your money, and then leave you to it. What about updating, search engine optimization and making sure your website is designed for all screen resolutions and servers? I'm afraid they cannot offer this. But the site looks lovely I hear you say! Many other people who brought the SAME design also think so. Many of these instant website design software programs use the same design and layout and sell them again and again. (..and again!)

Unfortunately, many Web designers today have fallen prey to this new and rising marketing gimmick - and the results are obvious. It's not hard to come across a Website these days that looks fine 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 and there is no form to the site, and images are covering the bit of text that is just about readable. 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 those intended.

Website Design is, in my opinion a cocktail of creative skills & technical prowess - and one is no less important than the other. If it is going to work, it has to be done right.

Below are a few pointers that I feel are important to all types of website design. These views are also mine, an experienced website designer who has come across many websites in my time, some great, some a horror movie. Some of the pointers on this website design tutorial may be taken with a pinch of salt; as some of the rules can be broken and some are just my opinion coming from a wealth of experience, and it is not possible to please everyone every time. But most of them are simple enough to be used as a rule of thumb.

A picture, as 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 websites pages with a museum of images. Most net-surfers still use a dial-up connection and still will do for a long time yet, the average time to load a page should be no longer than 10 seconds. If it's longer, the surfer will most probably click away from your website and go elsewhere. So, within this time, all the images on a page must be loaded as well. As a rough yardstick, keep the total page size around or 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. This will not optimize your site for the search engines but file size and search engine optimization is a must

Even when you must use images for navigation please give a second thought to the users who will not be seeing those jazzy, fantastic and truly amazingly artistic buttons that you spent days to design. Yes, I'm talking of the ALT text attribute of the IMG tag. Do not forget to provide an Alternate Text in your html for each image that you use for navigation. Though not obviously apparent to the untrained eye ALT text can help surfers immensely, and they do actually help with search engine optimization.

Navigation and functionality come way before artistic excellence. This I cannot stress enough. It is no use making your website design an award winning masterpiece 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, where they came from or how to get back to where they started. A good website design is where your navigational tools are CLEARLY marked so that anyone can understand. (And I mean anyone...trust me on that one...)

Follow the K.I.S.S. principle: Keep it simple, stupid! Your visitors will thank you for it.

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 Websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence, to avoid such a situation split your table up into two tables at the very start of designing your website, one table below the other, 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. 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. By browser specific functions, I mean Frames, Java, JavaScript and certain elements of Flash

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 unless the new page opening in a new window is essential to the function of the websites design. An exception 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.

Keep in mind the font-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. So, use common fonts, even if it hurts to do so, at least this way you will be in control of what your websites viewers are seeing. Good fonts to use are as follows: Arial, Times New Roman, Helvetica, Verdana, Tahoma and Courier

On the topic of fonts, be sure to make them a minimum of 10pt in size. Tempting, as it is to make them as small as possible to fit more on the page, you do not want your websites visitors squinting or retrieving the magnifying glass out of the loft just to read your text. Also, try to break up your text in to smaller bite sized pieces, will make it easier and more comfortable to read. Try not to make your copy fill the window horizontally the length of a sentence should be about a third of the width of the page. See our Bad Website Design guide for more info

So much to remember I hear you mutter, point 11 is next, not far to go now.

Another trend on the Web is not all that inviting - various vendors come up with "revolutionary plugins" and undoubtedly, most amateur website 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. Flashy images and gimmicky moving stuff and pop up windows are mainly seen as an irritation not as evidence of skill. Most new website designers find all these new gimmicky ideas and over-do it. 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.

This part of our tutorial coveres Java which is yet another often-misused technology on Websites 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.

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.

And the final point that summarizes all the points so forth: Write for all browsers, all resolutions, and all colour-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?

Next >>