Whats this rant all about then?
First of all let me start by saying that this problem is something that I’ve noticed a lot recently. While I work with various ecommerce and content management platforms, I find myself with my fingers in the templates. When you first install a blog, shopping cart or anything else where the software is off the shelf and you need to create a design for it there are always crap templates.
Very rarely is the initial template of such a good quality that I would consider putting it into use, and even then, pride over my work prohibits me from letting my client’s store or homepage look like thousands of other shops and blogs out there.
A good ecommerce one is Interspire. It has a great initial template. WordPress has a nice starting theme too.
So, we make our own templates?
Yes, and I make templates for various things, and you wouldn’t believe the crazy template engines I’ve used. Some of them are so simple they take minutes to learn, give no real control over the flow and are purely visual and some are so fiendish and contrived that they take months to truly master and let you control all aspects of the output of the page.
Some examples?
Actinic:
This offline Ecommerce cart has a very clever PHP based template system, with nested iterating elements and a very capable editor. It lets you edit in dreamweaver (which i don’t really use) and creates html as an output for online consumption. The templates have their own built in ‘what if’ known as ‘blocks’ that are easy to understand (for a programmer that is) and you can use PHP inline if you want to. This, I like. Its strong, but not too complicated. Everything is controllable, I control all aspects of the template.
Interspire:
Interspire has a good template engine too. Its dynamically compiled as you save, since its online, and its also based off PHP. The editor you get in the package is actually not so good. In fact, its broken with Safari (I’m a Mac user). It uses neat placeholders to represent deeper nested blocks, that build parts of the page. Some of the things that it puts in the templates are hard to locate in the settings, and i’m pretty sure some of them are hardcoded. This means i’m not totally in control of the output. This can be frustrating if you cant find a stray <br> thats screwing up your design.
Aspdotnet store:
from what I have been working with this week, I’ve found this template engine to probably be the most difficult. It’s written in asp.net and uses some complex xml to draw the various elements. Not for the feint of heart. It also has lots of hardcoded junk in there that I have to root around to remove. Which brings me to the final point…
Separating Content from Design (and why we need to do it)
When I write this markup in a page:
<font size=”16px”><i><strong>Hello world</strong></i></font>
Doesn’t it just make you cringe? No? well, perhaps we should look at why its a very bad idea, so you can understand more.
Lets just look at the *BEST* way to do this and then we’ll talk about why we need to.
<style>
.test
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
^ This part is written by the designer
<span class=”test”>[!title!]</span>
^ This part is initially written by the programmer responsible for the CMS.
“Hello World”
^ This part is written by the end user.
Hello World
Really, its not about changing a single style and having the luxury of this reflecting across your entire site. Our CMS will probably handle that. This is about making sure that as an application designer, you don’t force any aspects of what you feel is right and works well onto the designer of your skins, or even worse, the end user. Because I know that the designer will pull out all the wires and make his own template, and the end user will not understand why he cannot make a certain passage of text a certain colour or size.
This isn’t a lesson in css. I know you know how that works. This is about designers of software and templates today, insisting on using things like breaks, paragraphs, horizontal rules and other content related markup in template engines, denying you the freedom to make your own choices about what goes into the templates and how it should be arranged. ALL content should be inside layout-less containers (most likely divs) that can be visually styled and shaped how you want it. There are very few excuses with respect to web software nowadays that mean design must be included in the structure. Tabular data is one of them.
If you are in the position where you are designing an online application, be it a simple blog, or anything else where you are generating content that can be themed or styled, please, never confuse the difference between content and design. Don’t include any fluff that the designer cant edit, and make it easy to theme.
I still find some templates in very modern applications that break these rules, and the upshot is a sad one. I need to delve around in the source code until i find that arrant <br> or the badly thought out tables with too much cellpadding.
Luckily, web standards are forcing the web into a very neat space where most people follow these rules, but there are some perfectly good programmers, that are rotten designers, and some awesome designers are the worst programmers ever. So, lets not tread on each others feet shal we?
