Web templates can save you time and money. If you want to get a jump start on your website design, there’s no fast way to get up and running quickly. Even experienced web designers use some kind of homemade web template to put the required web pages and layout in place.

If you are starting from scratch on your design, reviewing different colors, layouts, and navigation methods of several different web templates can give you some good ideas. You make like the colors from one, the layout from another, and some graphics from somewhere else.

When choosing any website templates, look and feel are important, but the technical aspects can impact both the user and search engine features. You often have to look behind most web templates designs to make sure that proper techniques for the user experience and ease of search engine review are also in place.

You only have 3-6 seconds to grab the visitor’s attention, so you better use every feature at your disposal. Lets start with the visitor’s possible reasons for sticking around and reading your message. Here are a few methods that will help you get the visitors attention and convince them to keep reading. These methods should be incorporated into any web template.

Give the visitor instant gratification on subject matter. The area above the fold (top 5 or 8 inches) is prime real estate and you need to have a powerful headline that reinforces the reason they came to your website. Applicable graphics (photos, illustrations, etc.) can help but the written word usually rules in grabbing attention.

Show them the information they want by using meaningful anchor text in menus. Demonstrate at first glance that you have additional information or easy to understand links that revolve around the subject matter with easy navigation. Fancy pull down menus don’t cut it for making any visual impact.

Don’t waste important real estate with a huge graphic that takes up half of the area above the fold. Many website templates waste valuable space with some large graphic. If you look at some of the most popular websites you see that none of them waste that first 6-8 inches of space with huge graphics. Look at Yahoo, Google, MSN, eBay, and others and you’ll see what I mean.

On the technical and search engine side, there are several methods that directly effect your ability to get high index rankings under your keywords or phrases. Although the search engines look at structure and content, they also need your help. You should always make sure that the search engine bots can easily navigate and interpret what your website content is all about.

OK, lets say you did your homework and have decided on the best keywords and phrases for your subject matter. Remember our headline form the above visitor attention example, make sure you include your keyword or phrase and code it with html H1 tag. That tells the search engines you think that is important.

On the graphics you use, especially the first visible one, use the alt text feature to name it using your keyword or phrase. It doesn’t really matter what the graphic is, although you should stick to ones that are related to subject matter anyway, but use the same keywords from the headline.

Create your title and description mega tag so that you use the same keywords that are in the headline, alt text, and best represent your subject matter. Many say that you should start the description and name with the keyword is the best way. Not sure it has to be the first word but it can’t hurt. Make sure that the description makes since to the possible audience too since that’s what they see when doing a search.

Many web templates come with one set of meta tags that are the same for each page. Something to always remember about any web page in your web templates or finished website, each web page should be unique to itself. Always make sure that the meta tags reflect the individual web page, don’t use one set for all web pages. Search engines rank web pages, not websites.

It’s always a good idea to customize any web templates to your particular subject matter, color preference, and layout. You don’t want to look like a twin to someone else’s website to users or search engines. Whenever you start your design, always remember that you are serving two masters. Both the visitors and the search engine bots need to be facilitated for good results.

Now let’s assume that this web page belongs to a site that sells products online. The very fact that half the users cannot even see the page, translates into losses worth half the amount straightaway (perhaps, even more!) Hence we present here a blend of different creative skills & technical prowess – and one is no less important than the other.

In the following lines, we have jotted down a few points that we noticed during our observation on online sites which are 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, we are 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.