Improving Your Process: Templating and Theming

The idea behind this ‘Improving your Process’ series is to try and explain some of the techniques and methods I use in an effort to make my design or development process that much more rapid and smooth. The inspiration for this article was triggered by a post of Matt Brett’s in which he discussed and offered his Bare Bones Stylesheet — a document which he uses for each project that helps him make his work go that much faster. His post helped me to realize how much templating and theming we do at work, and how much it really helps us to get rolling on a new project.

Templating and theming can help you work faster

It wasn’t until I started working in Web development professionally when I was introduced to the concept of worthwhile templating (as opposed to cheesy Web templates you can buy for $49.95). I was quite naive to professional Web development in that I was only freelancing on the side during college (I’m sure you can relate). I wasn’t used to having more than one client at once, and I surely wasn’t used to the pace of development required to keep multiple clients pleased. I quickly learned that it was the templating technique in place that was one of the many ways this company kept up with their queue.

The template in use was nothing magical, it was simply a group of files that set the overall structure of a website, encompassing all the necessary tools needed to tie in with a custom CMS. The idea is quite simple, but the benefits are exponential. Having this group of files at your disposal helps to get a working environment for development up and running in a matter of seconds. Configuration variables used throughout the website are defined in a single file, only needing to be edited after the initial copy.

After a working development copy of a new website is put in to place and functional, work can be done on incorporating your design into your template. Instead of working with the header, footer, and content files of a template, I’ve come to prefer working with the initial site comp in a static HTML document first. This document is also templated, including a single instance of the header, footer, and content files in one. This helps me avoid any troubles that may arise due to a server-side issue that may have nothing to do with my markup. Once I’m done with markup, the code can be pulled into the respective header, footer, and content files for use in the template.

Templating your own personal sandbox

Once you’ve got a reusable starting point for your projects, another step that can be taken to make your process that much better is theming your template. The idea of theming ties in heavily with the concept behind using CSS in conjunction with HTML as well as good programming practice. It is a good idea to keep style separated from content, as well as separating server-side code from markup as much as possible. This helps avoid issues down the road when a redesign needs to take place, or something on the back end needs updating. Keeping these areas separate will help you to be confident that your adjustments will only affect that which you intend.

The template our development team uses consists of a theming convention as well. Themes have their own organization, kept separate from the markup, which is also kept separate from any custom functions needed on the back end. Even if there’s only one theme, it follows the convention in preparation for the possibility of a future redesign. Variables linking the website to the theme are defined in the single ‘configuration’ file discussed earlier.

When creating a theming structure, it’s important to keep in mind semantic image use. While images directly related to the site design should be included with the template, images that are used in context should be separated so they can be retained should the theme be replaced in the future. Beyond grouping images for a design, coming up with a templated theme can also be of benefit (as you can see by Mr. Brett’s article). Having templated style sheets for screen as well as print, which incorporate elements you find yourself using nearly all the time, can really help speed up your process. Launching a redesign can most of the time consist of changing a variable or two in one file.

Theming as a step toward future proofing

Not only does theming help your own process, it can also help to future proof any project you work on. Having a set structure established with every design can ensure the work required to make updates in the future is both straightforward and rapid. Future proofing is a wonderful side-product of good practice. With a standards-based approach to Web design, you’re well on your way to producing websites that can stand the test of time in function and display as well as maintainability.

Make sure you’re helping yourself

The important think to keep in mind is to make sure that you’re helping yourself, not hurting yourself. If you put too big of an effort into templating yourself, you will end up limiting your ability to get things done. Instead of a template helping you get things started, it will act as the first of many hurdles that stand in your way. You’ll have to take time to remove unnecessary pieces that didn’t need to be there in the first place.

It’s one of those cases where ‘less is more’ in a sense. The object here is to give yourself enough of a platform to jump from without turning things into a free-fall dive once you make the leap. What is your templating/theming process?