Introduction

Picture this.

You have been working on a project for a while and it has been smooth sailing. Most of the work has been done on the backend since you are still waiting for the marketing firm/graph-monkeys to deliver the designs.

Then it finally happens, you receive the designs in PDF/PSD format (!). You have been waiting for this moment but also dreading it. Why? Because you have learned by now, you have experienced it time and time again; there is bound to be at least one surrealistic design choice in there that is going to be a nightmare to recreate in all browsers.

Have you heard of the saying: “The quality of your work is measured by the number of WTFs/minute”? I am rarely phased nowadays but back in the day I used to have a swear jar which could finance the monthly after work sessions.

So what are the problems?

• The designs are often built using vector based tools, such as Indesign and Illustrator, but these are designed for print. The unit pt. (points) is not meant to be used on screen devices, you will get different results depending on the DPI of the end user’s device.

• The developer has to calculate and convert sizes into pixels to replicate the design. Since the tool used for building the design is vector based, you often end up with positions and dimensions on the sub-pixel level. This might look fine in the tool but completely different in the browser (lines look thicker than expected etc.).

• Gradients. Just. Plain. Awful. Good luck getting it to look the same, even if you know the colors and offsets. The list goes on and on but the point I am trying to make here is that designs coming from designers will often lead to unnecessary extra work for developer.

What if we could leverage all this work to the designers and content administrators and have the developer focus on functionality rather than esthetics? Let’s face it, not many have an innate talent where they can analyze an image and immediately figure out how to replicate it in HTML and CSS.

That's where TemplateEngine comes into the picture. This tool is composed of two things: a renderer for rendering a collection of web components and an editor for helping you compose and customize the web components.

The editor is all point & click, drag & drop without any coding involved so designers will feel right at home.

The plugin architecture makes TemplateEngine highly scalable allowing you to build applications conforming to any requirements.