Whether you’re making templates for WordPress, Joomla, Drupal, or any other type of content management system or dynamic web application, there are universal management and organizational best practices that will make each experience less painful and more rewarding.
By keeping your template organized and following a systematic scheme (even one you design yourself), you will minimize the time you spend recreating a site from scratch and the amount of time you spend troubleshooting problems.
There is no magic to creating templates. Like regular web design, it requires attention to detail and methodical implementation of sound code. It is like building a house, piece by piece, and like building a house, it is much easier with blueprints, stages of development, and pre-manufactured standard components.
Plan Well
The first step is to always have a plan. As artists, many web designers want to dive into the visual experience of the project and come up for air later when it is time to actually start punching in HTML tags.
While there is some merit to looking at a project artistically, you also need to have a plan for the architecture from the beginning. This is especially true for many content management systems, which have certain structural limitations, no matter how artistic you are.
Therefore, it is important to know the “lay of the land” before you start building. If you are working with a content management system that only allows a top module, a left module, a right module, and a center module, there is no point in initially creating a site that diverges from that scheme.
Realistically, most content management systems are more complex, but they do have real limitations, and you will serve yourself and your clients better by knowing them from the beginning.
As an information architect, I was taught to create wire frames and blueprints before I started making a website. Although it may pain an artistically-minded web designer to even consider such dull activities, you may find them useful.
When working with pre-defined limitations of web software, creating some type of blueprint will give you an idea of what you can design around the frame you are given. In other words, if the house you are building already has a frame with certain attributes, there is no point in designing pieces that cannot fit into it.
Create a Template for your Template
If you create the same type of site enough times, it becomes monotonous to have to troubleshoot CSS errors and DIV positioning issues that you are sure you had solved on the previous site.
For each type of content management system, there are only a few possible structural scenarios. If you create a vanilla template for each one, removing any tags or data that make the template unique, you can plug in the template whenever you have a project. Then, all you will have to do is customize it to needs of the client.
For example, if the project calls for a site with a top banner, a left column DIV, a large content area DIV, and a footer DIV, you can already have that created, complete with whatever script (such as PHP) that calls the CMS functions.
When you create a site that requires that format, you can just plug in the custom CSS, images, etc. This will save time and prevent unnecessary hiccups that you may have already fixed on a previous site.
Label Everything
Sometimes it is fun to create as you go, paying little attention to organization, but when you are conducting business and churning out one site after another, you need some type of structure.
Divide your CSS documents into relevant sections. You can divide it according to geographic sections of the HTML document or according to the type of tag (structural vs. aesthetic). Regardless of which method you choose, just be sure to have a method.
Once you have a method, label each major division and each section that covers a different element in the template. For example, if you have several CSS elements that relate to the center column of the template, put a label above it, such as /*Center Column*/ . It is simple but effective.
Similarly, you should label any HTML documents using comment tags like <!-- Center Column -->. Although it may seem unnecessary at the time, it will help later on in the project, especially if you need to go back and change something. You will know exactly where to go, based on the labels you created.
Use a Revision System
For very small sites, this may seem like overkill, but a good practice for large sites with ongoing development is to label each revision with a version number. When you make changes to the site, copy the original files and archive them under a previous version, like 0.1.1.
Then, when you start the revision, give that version a number like 0.1.2, depending on the amount of changes you are making.
You can use whatever system you want to label the versions. It can be as simple as 1,2, and 3. The point is to have a system and to have backup copies of previous versions in case something goes wrong or you need to remember how you positioned something in a previous revision.
Make Use of Folders
One of the best ways to get confused is to have one structure for your files on your computer and use another on the server. If a template CSS file will be in /templates/template-name/docs/css on the server, it should be in the same folder structure on your computer. That way, images will have the correct paths, and you will not have to worry about placing files in their correct locations.
Some CMS template systems allow you to upload templates as ZIP files. If all of your files are in the correct folders, ready to be uploaded, all you will need to do is compress the main folder into a ZIP file and proceed.
Keep Backups
Always have backups of any documents you create. In addition to an external backup you may also want to select a cloud computing security service to backup and protect your files online. Nothing is worse than working so hard on something and then having to do it all again because you somehow lost the work you had started.
Furthermore, even after you complete a project, keep an archive of all completed work. If a client ever needs their custom template again, you can send it off to them without having to redesign it.
Make It Easy For Yourself
By being well-organized and well-prepared, by planning well, and by keeping good records and backups, you can save yourself a lot of unnecessary trouble and time.
Unless you are paid by the hour and just want to intentionally fumble around in the dark, you owe it to yourself to find ways to make a web design project as easy as possible so that you can move on to the next one and receive favorable reviews from customers.