What is every web designer’s worst nightmare? The answer is probably “Internet Explorer 6,” but that desperate 10:30 p.m. phone call asking you to swap out the headshot of the CEO on the “about our company” page you get every few days from old clients is a close runner up. It only narrowly beats out “My nephew broke our website when he tried to update the calendar. Can you please fix it before our TV spot airs in thirty minutes?” And that’s only because the latter call usually comes during business hours.

by Peter A. Prestipino

Whether you’re being paid for your trouble or not, the ability for your clients to edit their own website without screwing anything up can be invaluable to your profit and productivity, not to mention your stress levels.

There is an easy solution to this particular client nightmare: a content management system (CMS). As a professional web designer, creating a custom design for a business is a snap, but the process of creating a custom website design and integrating it with a CMS may seem daunting. The good news is that it’s actually not that hard.

Here are a few pointers that can help you get off on the right content-managing foot:

1. Choose your system before you start designing. Before grabbing a Hot Pocket and a Wacom pad, busting open Photoshop and hunkering down for a few hours of lasso tools and layer masks, it is essential that you go through the process of selecting the specific CMS that is right for your project. This decision will affect the manner in which you will design your website layout. There are dozens of functional CMS out there to choose from, but in terms of reliability, community support and cost, non-enterprise websites ought to consider choosing between the three most popular open-source CMS out there today: Joomla, WordPress and Drupal. Each system has its pros and cons for different uses, and each has a plethora of helpful add-ons and violent community support that can help you resolve virtually any issue.

For our purposes, we’ll just make a few generalizations: Joomla is very easy for designers to work with, yet a little less user-friendly for clients; Drupal is incredibly powerful in terms of developer expandability and features, while not as user or designer friendly; and WordPress is very simple for users, friendly for designers and not quite as expandable for developers. All of them can be learned by your clients in a short amount of time, and you can create a great custom design with any of them once you become familiar with how they work. For a nice, simple breakdown of the pros and cons of each of these open-source CMS, visit http://www.goodwebpractices.com/other/wordpress-vs-joomla-vs-drupal.html. Which one you choose should depend on the degree of complexity you want in a site, and the availability of specific add-ons that you want to use (for example, WordPress may have a plugin you want, where the other two might not).

2. Understand the basics of how your chosen CMS works. Once you have selected the CMS you’re going to use, you’ll need to know a little bit about how it works. Each of these open-source CMS has a unique codex, backend, and file structure. You’ll want to know which files you’ll need to edit in order to create your custom “theme” for your website you’re building. Once you build your theme, you just have to upload it to the theme or template folder and it’ll work, which is handy. You’ll want to know as many details as you can about your CMS so that you can design your layout with them in mind.

3. Build your layout in regular HTML/CSS first. Don’t go crazy with the CMS stuff until you’ve built a page in regular markup. Once it’s working (yes, you still better get it to work in IE6), the CMS integration becomes a snap. If you try to integrate your CMS while you build it, you’ll end up more confused than John McCain at a Web 2.0 conference.

4. CTRL-C, CTRL-V. A website consists of several pieces fitting together like a puzzle, but you can essentially divide these pieces into two groups: things that change and things that don’t. Navigation, headers, footers, banners, and sidebars are examples of things that may not change from page to page, while page titles, metadata, and content may change on basically every new page. The easiest way to convert a regular, static webpage into a CMS driven webpage, is simply to determine which portions of your page you want to be generated by the CMS, and then plug the corresponding CMS code in those locations in your markup. Each of the three open-source CMS that we’ve talked about has its own codex, which can be found online, that can show you the code that will generate different elements (page title, date, body content, etc). Or, an easy way you can make your own theme is to open an existing theme and just steal the code snippets from each section you need. You don’t need to know any programming languages yourself – just how to copy and paste. In many cases you’re literally just pasting code that says “insert the left column stuff” into the place you designate on your design. Of course, it’s probably a good idea to take a tutorial, but it’s not like that’s going to set you back very much as far as time goes.

Knowing how to design and build websites that work with CMS may not save you from every aggravating client phone call (“My computer won’t detect my flash drive! Since you’re a web designer, you should know what’s wrong, right?”), but it can certainly save you time and money. And hey, it may help you land some new clients as well.