Web Design Templates: The Good, the Bad, and the Copyright-infringed

In a recent post, I wrote about the pros and cons of using the free website building tools that come bundled with a web hosting account. Another way for someone with no web design or development skills to build a website is by using a web design template. Like the free tools, web design templates can be a good solution for some, but you should be aware of the limitations.

How web design templates work

A web design template consists of a set of html files for your home page and (usually) at least one other page of your website, plus all of the supporting graphics and style sheets (CSS). You can find hundreds of websites offering web design templates by doing a Google search on “web design templates”.

As mentioned in the review of website building tools, one of the risks of using a template is having a website that is nearly identical to the website of anyone else who has used the same template. Not the best idea if you are trying to brand your business uniquely.

The advantage of a web design template is that you can get up and running quickly with a nice looking website based on standards-compliant code. Depending on your budget, level of expertise, and need for a uniquely branded look and feel, a web design template may be a good choice. But beware: web design templates may not be as easy and cheap as they first appear.

Easy and cheap, or frustrating and expensive?

Many “free” templates are restricted to non-commercial use only, which makes them unsuitable for any business. Pay-to-play sites usually sell templates for commercial use for under $100. Some template websites also offer limited customization of a template, which can add anywhere from $50 to hundreds of dollars to the price tag, depending on the level of customization. Some also offer the option to pay a premium price and buy that template outright. It’s then removed from sale, so you don’t run the risk that your website will look identical to hundreds of others. A lower buyout price is offered if the template has already been downloaded by others. The buyout doesn’t change that, but prevents anyone new from purchasing the template. The cost for a unique or buyout template is usually in the $2,500-$3,500 range (although I’ve seen them for as low as $400 and as much as $8,000). In this price range you may be better off hiring someone with whom you can work directly to customize the site to your needs.

You can also customize the template yourself if you know a bit about HTML and CSS, or you can hire a designer to do the customization for you. I would recommend that you bring the designer in before you purchase the template though, as what appears like a nice-looking site may actually be a mess of bloated and deprecated code under the hood. At the very least, make sure that the website offering the template makes some guarantees about the quality of the underlying code.

A web design template is not a content management system. If you want to customize it yourself, you need to be comfortable editing copy and changing graphics within the HTML file. That’s generally not too difficult once you learn what to avoid, but be forewarned that accidentally deleting so much as one “>” character in the file can break your entire page. So you need to be careful, and save backups of your files as you go along. You may also be able to make changes using a WYSIWYG editor, but they often add a lot of unnecessary code to pages, which you can avoid if you edit the HTML directly.

You can make pretty substantial changes to the look and feel, and even the layout, of a template using Cascading Style Sheets (CSS). In theory, it’s not too difficult to learn to make basic changes in CSS such as font size and color; in practice, how the “cascade” of styles is structured, relative size values using ems, !important tags, collapsing margins and browser inconsistencies can turn “I’ll just make this one simple change” into hours of head-scratching as you wonder why your changes don’t look the way you intend.

A decent web design template will come bundled with the layered Photoshop files needed to modify any of the graphics used in the template. So in addition to being conversant in HTML and CSS, you may also need to know how to use Photoshop in order to do much in terms of modifying the template. As of this writing, a new copy of Adobe Photoshop, not bundled with CS5, lists at adobe.com for $699.

Realize that a web design template has nothing whatsoever to do with web hosting. You will still need to sign up for a web hosting account so that you have someplace for your files to live. You’ll also need a way to FTP the files onto your web hosting account, either by using tools that are including with your hosting account (such as the File Manager that is part of cPanel), or by downloading and installing FTP software. Some template websites offer an option of installing the template for you, usually for another $40-$60.

Support and documentation

Little, if any, support is offered with free templates. If you run into problems, you’re on your own.

Some templates are documented. Documentation can be a good starting point, but may not be that useful. I worked with one client who was very excited about the template he’d purchased because it was so thoroughly documented. But the documentation was not much more than a guide to what sections of the Photoshop mockups related to what sections of the code. I use the Firebug extension to Firefox, which gave me the same information, and more, in a more usable format.  The documentation didn’t save me any time, or the client any money.

You may purchase a template assuming there is support, because you can see a tab labeled “Support” on the menu. Be sure to investigate how deep and useful the support is before you buy. The support “tutorials” about CSS on one template site consisted of a definition of CSS, a pointer to where to find the style sheet, and instructions on how to do three random style changes. If you were counting on it to help you style your website, you would not get very far. If you want a more thorough tutorial on CSS, check out w3schools CSS tutorial. They also have a CSS reference guide that is useful to keep bookmarked.

Beware the wrath of Getty

Getty Images is a major publisher of stock photos. They have a number of different licensing agreements with photographers who supply them with photos. Photos are generally licensed to a single user, and may have additional restrictions on where, how, and for how long a photo can be published.

Some completely innocent, unwitting, well-intentioned people have found themselves to be recipients of the dreaded “Getty Images Settlement Demand Letter” as a result of having used images that were part of a web design template. This letter may demand thousands of dollars (or pounds or euros) for copyright infringement. They will not care that you got the photo through a template. If it is on your website, you are the one in violation. In their eyes it’s the equivalent of stolen goods. Telling them you downloaded a free template is about as effective as telling them you bought that photo off some guy who said it fell off the back of a truck. Be absolutely sure that you have proper licensing or permission for any photos on your website. When in doubt, don’t use it.

Templates vs. template frameworks

From a design point of view, I make a distinction between a template and a template framework. Most templates are designed to be used as is with minor customization; a framework is intended as a starting point for a custom design. I commonly use the Thesis theme framework for WordPress websites. The distinction is that Thesis, like other frameworks, offers a structurally sound, standards-compliant platform that is close to a blank slate, visually. The documentation is actually helpful, and provides capabilities that an ordinary WordPress theme does not include. There is also a support forum in which questions are answered by identifiable experts, not by random people who happen to pop into the discussion that day. As a designer, I can dive in to customizing the look and feel of a website without worrying if the basic structure is going to break in Internet Explorer, or choke on the next WordPress upgrade. Websites I’ve designed using Thesis include this website, as well as sites for Natural Healthcare and Diagnostics and Excellence in Performance (and a couple currently in progress). If you are looking for an instant look-and-feel, a template that begins as a clean and spare starting point may not be appealing. But if you are looking for a stable starting point for your own customizations, go with a quality framework.

So should I use a template, or not?

Web design templates are a big step up from free website building tools. In summary, here are the issues you should be aware of if you’re considering a web design template:

  • Free templates are not usually free to commercial businesses
  • If you are not technically adept, you may find it frustrating and/or limiting
  • If you are technically adept, a well-supported template framework may be a better option
  • What appears cheap may cost a lot more if you want installation, customization, or exclusivity
  • Be careful that you get good, solid code and support
  • Be sure any images are licensed for you to use
4 comments

Easy Website Building Toolsor, how to run into the walls of a small room

A few years ago, a friend called me on a Friday afternoon in a panic: the next day was Earth Day, and her organization had a booth at a local fair. They had ordered thousands of pencils with the URL of the organization printed on the side. She had planned on putting up a simple, quick website using their web host’s website building system, which was touted as being so easy you could build your website overnight.

She couldn’t figure out how to get word one on the home page.

We sat down together to build a simple page on the web host’s simple template system. I’ve been geeking around with various website building methods since the mid-90’s, from hand-coding HTML to Adobe Dreamweaver to both open source and proprietary content management systems. I figured I could whip up a web page for her in 5 minutes, no problem!

It took me 45 minutes to figure out how to enter content on the page.

Once I figured out the logic of her host’s website building tools, I was able to kluge together a functional page for her. Not nearly what she had hoped to build for the next day’s event, but at least visitors wouldn’t be faced with a blank “This domain is reserved” page. The tools were very slow and clunky to use, requiring multiple clicks of the mouse to do the simplest task. Attempting to lay out the web page in an aesthetically pleasing manner was both difficult and limited. At one point I turned to her and asked “Couldn’t I just build you a website from scratch? I think it would be faster.”

The website building tools that come bundled with a budget web hosting package have their place. If you have to toss up a quick Under Construction page with minimal content and your contact information, and you don’t know how to code HTML or how to FTP an HTML page to your hosting account, then having a website building tool comes in handy. But I wouldn’t recommend it as the ultimate solution for building your website.

Pros and Cons of website building tools that come bundled with your webhosting account

The advantages of simple, template-driven website building tools are:

  • No need to know HTML*, CSS*, or any other alphabet soup
  • Free or very cheap
  • You can do all updates and maintenance yourself
  • No need to worry about upgrades—the web host takes care of those automatically
  • Usually a good variety of templates
  • Usually some level of customization per template (e.g., add your own logo, color/font choices)

The limitations may not be as obvious until you start actually using the tools. And while someone may encounter technical or aesthetic limitations fairly quickly, the business limitations may not be obvious to someone who is building their first website for their first small business:

  • “Easy” is not instant. There is still a learning curve, and if you’ve never used any kind of design template before (or even if you have!) you may find it frustrating to figure out how to do something relatively simple, e.g. resize a graphic. Since it’s likely a proprietary tool, the knowledge you learn won’t be directly translatable to another tool.
  • There are things you simply can’t do. I had a client who insisted on using his web host’s tools for his website. He also wanted a subtle image in the background of the entire page. It was simply not possible with his web host’s website building tool.
  • There are things you simply can’t do unless you know HTML or CSS. Some website building tools do have a back door that allows you to circumvent the limitations of the tool. But that back door is that you know how to hand-code HTML or CSS.
  • Generic website designs. Many of the templates are designed to be all things to all people, so they can look very dull and generic. Sometimes it’s possible to personalize them with your logo and some unique images, but you are often limited in what you can do.
  • Standard website designs for specific purposes. Sometimes the web design templates will have themes: e.g., there may be one soccer-themed template. The problem there is that you risk having a website for your soccer team that looks nearly identical to the website for your chief rival.
  • Non-unique, non-branded web design. Using either the generic or specialized templates for a business is not ideal. Your website should help to define your brand, and your brand should convey your unique selling proposition. If your brand is generic, or looks the same as your competitors, then it’s not really a brand at all.
  • A website that is not standards-compliant. Standards compliance is one of those aspects of web design and development that most end users don’t appreciate. A website that is not standards compliant can have several limitations, including limitations in search engine optimization (i.e., being found by Google) and accessibility. Your website may not read well, if at all, on mobile devices, which are a rapidly growing segment of the web browsing market. If you decide to move your website to a more robust system in the future, you may discover that most of the code is unusable because it is built using tables or includes deprecated tags.
  • Limited set of features. You may discover that simple things you’d like to have on your website—a contact form, an embedded video, an interactive map—may not be supported by the tool.

When is it appropriate to web host’s website building tools?

As a professional web designer, you might expect that I’d look down my nose at the so-easy-a-caveman-can-do-it website building tools. But I really don’t—I just believe they have limited usefulness. With all except the first of these, I’d include the caveat that there are better options that will allow you more features and greater aesthetic options. Nonetheless, here are some circumstances in which I think it would be appropriate to use your web hosts’ website building tool:

  • An under construction page. While you’re building your real website, you can toss this up with your phone number and/or email address so that people at least have a way to contact you, and you can start directing people to your URL.
  • A temporary page. If you are just looking for a place to deposit information temporarily for an upcoming event, or make a birth announcement with a couple of photos, it may be worth using these tools rather than going through a longer installation and learning process.
  • A hobby page. If you are just looking for a place to tell the world about your passion for model trains or growing orchids or collecting pez dispensers, this will allow you to do so cheaply.
  • A small association or non-profit. By “small” I mean a group with an operating budget somewhere between $1,000 and zero. If you are serious about gaining members or raising funds, there are plenty of better options. If you just want people to be aware of your mission, find your phone number, maybe see a couple of photos or news items, your web host’s website building tool may be sufficient.

*HTML (hypertext markup language) and CSS (cascading style sheets) are the scripting languages used for building websites. HTML is used for the basic structure of the page, and CSS is used for styling the page with color, images, typefaces and spacing. HTML and CSS are not programming languages, i.e., you don’t need to be a computer programmer to use them, but they nonetheless require a fair amount of study to master.

1 comment