Web Designing is as easy as 1-2-3, claiming 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 clear. Now and then one comes to a website that looks good with a particular browser and a screen, but look at it with a different browser, and you can not even read the plain text on the page. Worse, the number of operating systems that are used by netizens worldwide is given, these pages are not well seen by more than half the target surfers.
Let us suppose that this belongs to a web site that sells stuff online. The fact that half the users can not even see the page, translates into losses worth half the amount at once (maybe more) I think that makes a good case for the raison d’etre of this product! Web Design is, in my opinion, a cocktail of creative skills and technical competence – and no less important than the other.
In the following lines, I wrote down a few points I noticed during my travels online, important from the perspective of web designers. Some of them may be taken with a grain of salt because it is impossible 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 almost as large. Images, no doubt, improve the appearance of a page, but it is not advisable to go overboard in your page filled with images of a truck. Net surfers use a dial-up connection, and the average time to load a page should not exceed 5 seconds. If it is longer, the surfer will probably click away elsewhere. So, within this period all images on a page as well be loaded. So, as a rough yardstick, keep the total page size less than 30k.
Another important point to note is that each file at a separate HTTP request to the server. So many small images – even if they do not add up to much in terms of bytes – will slow down loading a lot.
Even if you use images for navigation, give a second thought to the users not seeing those jazzy, fantastic & amazing buttons that you spent hours to design. Yes, I’m talking about the ALT text attribute of the IMG tag. Do not forget to provide an alternate text for each image you use for navigation. (It can be left blank for certain images that are purely for aesthetic reasons, but let that one exception than the rule.) Although not apparent, ALT text can greatly help those users.
Modern browsers offer users the option to disable images. This gives an idea of how troublesome the unwanted images can be.
A few more attributes that your pages load faster are the HEIGHT and WIDTH attributes. Without this, your browser must wait for the image to download because it can not know how much to leave them!
2.
Navigability & functionality come before artistic excellence. It is no use making your site a masterpiece of art and the user can not navigate – even after they reach the main page, they have no idea how to go where they want to go.
3.
Above have in common is a kind of navigation that some people call Mystery Meat Navigation. This means that unless your mouse moves over an image, you have no idea where that link can be found here. Only when the mouse you see the actual link. This is cumbersome because users need to move the mouse over the place to find out which part is a link and what not.
4.
Follow K.I.S.S. principle: Keep It Simple, Stupid!
5.
Next is a very important practical suggestion: if your entire page in a table, the page can not be created (ie, the page will not appear on the screen) unless the entire table is downloaded. You might have noticed that on several websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence suché to avoid a situation, you have to do is this: Split the table into two tables to each other, and let the top one be a short table That just the page header and a few navigation links displays. So now, immediately upon downloading this part of the page, users can see the header of the page – and prepares them for the long wait ahead, evenals she loves leaving your site to go to other sites, in the case of a slow connection.
6.
The ongoing browser wars have only one victim – the user. As a word of caution, stay away from all browser-specific functions. Because if a certain feature is supported by a browser, it will certainly not be supported by another. What you need these features, it should not hamper the display of the page in another browser that does not support such functionality. In other words, your page must gracefully break.
7.
Creating a new browser window to the authority of the user alone. Do not try to popup new windows to clutter the user. All links should open in the same window. An exception can be made for pages containing a list of links. It is useful in such cases, links will open in another window so the user can return to the links page itself. Even in such cases it is advisable to provide 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 great on your machine can also be degraded in normal 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 is clear – there is nothing you can do about the situation, sitting halfway across the world from them.
9.
Stay away from out-of-the-way hard-to-find fonts. Use plain vanilla fonts like Arial, Verdana, Tahoma and Courier. If necessary, make your jazzy fonts into an image and puts it 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 imagination: It is a very functional navigation bar that guides you through all possible paths within the site. It looks something like this:
Home> Section> Subsection> Page
What is better than your users a convenient way of visiting just about every other page on your site, and inform them where they are!
11.
Another new trend on the web is not so inviting – various vendors come up with “revolutionary plug-ins” and undoubtedly the most amateur web designers jump up to spruce their pages using them. The reality is that most people do not have installed and would not care. Come to think of it, have you seen plug-ins on one of the most popular sites, including Yahoo.com, Amazon.com or Google.com? It’s just not the best thing to do . mention should be made here of Macromedia’s Shockwave Flash plug-in, which now has made its way on most computers today, and thus presents no harm in using vector animation on your site.
12.
Java is an often misused technology on webpages. Using Java programming language as a utilitarian, and not as a graphical frontend for your photos / images. There are several things you can do with Java, that does not mean you should do them all. Java applets are known to run slower, so users experience a certain sluggishness in performance. And what is worse is that Java is known that certain browsers crash. This is not something that everyone likes, especially when it is done for the sole purpose of showing a series of images in a slideshow!
The moral: Use it, but with discretion.
13.
Never underestimate the importance of the META tags. They can make the difference between your users coming to your site and go to your competitor – just because they could not find yours. Search engines depend heavily on the Keywords & Description Meta tags to their search database to fill. And again, the use in the writing of that discretion. Including a large number of keywords for the same page can spell trouble. The description should be a small, meaningful summary of the entire page that way even when out-of-context of the webpage itself, say will be in a list of search engine results.
14.
And the last point that all the points summarized so: Write for all browsers, all resolutions and all color depths. If you show people pages that look the best with their browser and their own resolution, which makes them feel “at home”, and you get a better response. Compare this with a website that proclaims “best viewed with Browser X at a resolution of 1024×768.” I’ll give you a choice between two options when you see a page like this: download the suggested browser (which could well be over 50 Megs), then you have a new monitor that supports high-resolution, and then your screen so you set the perfect photo. Or simply click away to another site. What do you prefer?