PHP Template Previewer: Improving the workflow between web designers and coders

During the past years, whenever I had to collaborate with a designer that had to handle me the HTML and CSS mock-ups, I ended up having to break the HTML and CSS down and convert them into whatever templating format or engine I was using.

The problem was that my development environment was very difficult to replicate, and most of the times (ideally) the HTML and CSS had to be done before any server-side coding. So how could the designer fill the HTML up with data in order to see a “real” feel of the working site?

So back then, the process was: Designer mind –> Photoshop –> HTML + CSS filled with hardcoded data –> Hand that to the Coders –> Break the HTML into layouts and views –> substitute the hardcoded data for variables –> Do the actual server-side coding.

What happened when, during the server-side coding, some substantial part of the HTML had to be modified? Well, hell happened. Because usually some of the HTML or CSS had to be modified in order to do some tricky front end coding, or because the designer didn’t named appropriately the divs or classes, or used classes where he should use ids. An so on…

Have you been in that situation?

Nowadays, replicating the development environment is not an issue anymore (praise Vagrant). So why shouldn’t the designer be able to work directly with actual templates inside the framework? Well, the remaining problem is hardcoded data. Since the server-side coding is not completed, he needs to fill the templates with data.

That’s why I built PHP Template Previewer: it allows the designers to fill the templates with data not by hardcoding it, but by using some configuration files and the *real* variables inside the templates. It’s a composer library aimed to work with any PHP Framework, although initially it supports the one I’m working on right now: Phalcon.

We are using it in our current project and we are quite happy, but if you have any feedback I’ll be happy to hear form you.

So, what do you think ?