From Template to Website, Part 1: Choosing the Right Template

Website templates are one of the more sinister schemes inflicted on the unsuspecting wannabe website operator. "Only $65 for your beautiful new website!" "Free Flash templates! Drag and drop!" And just look at all of these wonderful designs, ready and waiting to become the next big thing.

Unfortunately, out of all of the people that I have known who have purchased website templates, not a single one has ever become a "real" website without significant additions and modifications by a web designer. That is because the dirty little secret of these online template stores is that they make the bulk of their revenue from people who want a website but don't want to hire a web designer. They are the health club membership peddlers of the online world: most people pay but never show up.

So, after the umpteenth request from a frustrated client who finally gets around to paying a web designer to turn their template into something resembling a real site, and a number of requests and posts on our Forum, we decided to put together a HowTo series on the subject.

The Audience

If you are comfortable looking at a bit of HTML code and have a basic understanding of how websites work (HTML & CSS), this tutorial is just the thing for you.

But if you just want a one-click installer that becomes a website without modifying the site code, you might want to check out the MagicEdit Site Starters or look into WordPress themes.

The Perfect Template

Nothing's perfect, but there are some pretty decent templates out there that you can use as a foundation for that site you want to deploy. Here are a few things to look for. This can actually help you narrow down your choices and find a template that will work best. After all, a Google search for "website templates" returns more than 83 million results.

Template Type

You want your site as accessible and broadly viewable as possible. That means using modern design methods while avoiding the bleeding edge (HTML 5 isn't well supported yet) and staying away from Flash. We want to stick with your basic HTML and CSS here (often called "tableless" designs). You can actually just search for "CSS templates" because if you're using CSS you will automatically be using HTML.

What to Look for in a Template

The more empty links you see, the worse the template. Every empty link means more work for you.

The point of a template is to save you time and deploy a site faster and cheaper. You still need to be able to understand what makes it tick, though, because chances are you are going to need to dissect it and put it back together in a way that will work for you. That's why understanding HTML and CSS is still important even if you are using someone else's template.

Here's a simple test you can do on a template demo. Look for empty links. Every time you see an empty link (href="#"), subtract a point. It means the template designer was lazy and didn't actually create the page. The more empty links you see, the worse the template. Every empty link means more work for you.

Not all templates are created equal, and you'll find that most template sites go for shiny instead of useful. A lovely home page does not a website make, and unfortunately the vast majority of templates out there are a home page with nothing else (every link points to the dreaded href="#"). The very best templates include a number of pages, including:

Home page

Article or other interior page

Contact form

Style demo

Tested in multiple browsers

Well formed code

The fourth item is actually one of the most important things to look for. It means that there is a page that includes styles for all of the common site elements, including headers (<h1>, <h2>, <h3>, etc.), paragraphs (<p>), lists (<ul>, <ol>), and forms (<form>, <input>, <textarea>, etc.). Having a style demo page will save you many, many hours of work tweaking the CSS for that new form or page you just added.

If you find a template you like that doesn't have a style demo, just make sure it includes both home and interior pages, as well as a contact form of some sort. That means the designer at least went through the trouble of creating styles for most of the common elements.

Next Steps

Now that you have the template you're going to use, it's time to start setting it up for use. Next time, we'll go through dividing the site up into commonly used elements and determining the content that is unique on each page.