Website Templates

What are Website Templates?

Website templates are pre-designed web pages. They usually contain generic graphics and text which are then customized by the designer for a specific web project.

Web Page Templates

The web template package contains one or more page designs. Often there is a design that can be used as a "home" page and a variation that can be used for interior pages.

Templates can be created in HTML, Flash, or a combination of the two. A template package usually contains:

Qualities of a Good Website Template

Not all website templates are created equal.  Some qualities of good templates are:

An attractive design created by someone who understands the web, that is not too graphics heavy

This is important. I've seen some very professional and attractive templates that do not work well on the web. They look great, but produce very complex, graphics heavy web pages, that load slowly, are difficult to modify and often do not work well in all browsers.

Here's a little story that illustrates this situation. A client of mine recently purchased a beautifully designed template. The only problem was that it was very "graphics heavy" - over 120k, not including any of the client's graphics. The page's HTML was also very complex - tables within tables within tables. It is very hard to modify this type of code, and it breaks easily if you don't put just the right content into it (by "breaks", I mean that if you put a little too much text in or an image that is a little to big, the design no longer looks right when viewed in a browser).

The client requested that I create a template that looked similar, but was much more web friendly. This was especially important for this client, since he was using this template in dynamic pages, where the content would vary widely from page to page. The new page I created was a CSS based design, less than a third of the size of the original. It was much more flexible in it's ability to work with widely varying content, easier to modify, and worked well in all browsers.

A design that works in all browsers

If you're paying good money for a template, it's a good idea to make sure it works in the most popular available browsers. These would be Internet Explorer 6 and Firefox on the Windows platform, and Safari and Firefox on the Mac platform.

Here are the browser statistics as of March 2006;

2006 IE7 IE6 IE5 Ffox Moz N O
March 0.6% 58.8% 5.3% 24.5% 2.4% 0.5% 1.5%

Here are the operating system statistics for March 2006;

2006 WinXP W2000 Win98 WinNT W2003 Linux Mac
March 72.9% 11.9% 2.0% 0.3% 1.8% 3.4% 3.5%

You can also view current Browser Statistics.

Here's an example of why cross browser compatability is important in a template:

You pick a webtemplate and spend a week creating a website for a client. You're testing each completed page in Internet Explorer 6 on a PC. You ask the client to look at the site, and she tells you that something is wrong with the pages. You find out your client is using Firefox, and indeed the pages look very different in Firefox than in Internet Explorer 6. Back to the drawing board. Hopefully, you'll be able to figure out an easy way to fix the problem, and won't lose all your profit on the job doing so.

A template where you can see the entire design all at once in your editing program. 

When you look at a web page, you are looking at an integrated whole. When you view a web page, each part is related to the other parts, including alignment, color, font choice, etc.

Yet, some templates come with the site graphics broken up into several files (for example you may receive several different Photoshop files - one for the header, one for the sidebar, one for the navigation).

When modifying the design for your web project, you must edit each of these files separately. However when you do this, you never get to look at the integrated whole and see how changes to one element affects the overall balance of the design. It is much better to find a template where you can see the entire design altogether in your editing program.

If you must use a template that comes with the design broken up among muliple files, there is a trick that you can use that allows you to work on the full page. Here's how to do it.

The template package comes with HTML version of the pages. Bring up the HTML page you want to work on in a browser. Do a screen capture of the page.

  1. Take the screen capture and place the image in your image editing program.
  2. Use this as the basis for making design changes. That way, you see how each of the design changes you make affects the look of the page.
  3. Once you are happy with the modifications, move the individual changes to the appropriate graphics files that came with the template. These pages are usually sliced properly for the graphics to work with the HTML pages.

A design that doesn't break easily when varied content is placed into it

As I mentioned above, some templates are unnecessarily complex, which causes the design to "break" too easily if you don't put in exactly the right amount of text, or exactly the right sized image. It is good to work with a design that is flexible enough to handle the varied content you will probably want to use during the site's lifetime.

Where to Find Web Templates

There are many sources of web templates but some stand out.

Template Monster

Template Monster probably has more templates available than any other source, and most are slick, professionally designed pieces. They have literally thousands of reasonably priced HTML, Flash, hybrid (HTML and Flash included), and even Swish templates. Most of these templates are targeted at specific industries, but can, in most cases easily be repurposed. Template Monster offers a product guarantee and unlimited support as well.

One interesting service offered by Template Monster is avaiable from template tuning. They will take the template you pick out and make the custom modifications for you. A very easy way to accomplish your design goals with little effort (read more about an easy web page design solution).

Boxed Art

BoxedArt is another huge selection of templates, with a twist - for a relatively low subscription price you can download any other thier thousands of templates, graphics, buttons, etc for a period of time (3 months, 6 months, 1 year). This does not mean, however, that you can create unlimited sites for you clients using these templates (please read their licensing agreement carefully). Nevertheless, this can be a very good value. The BoxedArt site also offers a template customization service.

Project Seven

Project Seven templates and tools are different - they are lean, clean and tested to work on major browsers. They are created with a high degree of technical expertise, and come with instructions that will help you learn a lot about CSS. Because of the leanness of the code, these templates make an excellent base for dynamic sites, and I have been involved in several projects where they were successfully used that way.

They also sell a selection of superb menuing systems that are integrated into the Dreamweaver environment to make using them very easy - but since they are CSS based, are highly custommizable by a knowledgeable user. They also offer good support via forums and a wide selection of free downloadable tools.

Note: I receive some compensation if you purchase products mentioned on this page.