How to create HTML E-Mail Templates?
Sometimes I need to create a HTML Email template. The customers sends me a Photoshop file, my task is to create a E-Mail template which can be used in Outlook to send E-Mails.
The customer also tells me to create multiple versions where for example the header is same but the content slightly different, eg. multi language content.
The problem with CSS.
You can’t simply embedd a CSS file (at least not in some email clients) so you need to use inline CSS for almost every HTML tag. For example for the “p” tag (paragraph). Then the customer says he wants the p tag a little bit bigger.. so you open all your HTML files and edit the inline CSS for all your P tags. Thats tedious and unproductive.
Better way to create multiple HTML templates
I created a small tool called “HTML Mail Compiler” to merge all your CSS files with your HTML templates. That tool will extend all your tags / classes / IDs with the according style property from your CSS file. It uses the emogrify library which is doing all the magic.
But hey. there is more! 😉
HTML Mail Compiler – What is this?
The compiler as the name says compiles (generates) ready for use HTML templates based on your HTML and CSS files. Instead of HTML you use PHP files, which can have includes or any other php stuff. The compiler will read your php file, parse it, add the inline styles and even zip your files if you like.
How to use the HTML Mail Compiler?
At first you install the compiler, (instructions in github repo). I created a global shortcut called “htmlcompiler” so I can use it where I want.
Then you create all your html email template. You need to start with a clean php file, name it “template.php” (or whatever you like). If needed, add images by create a sub folder with your images (eg. “img”)
Embedd your CSS file in your “link” tag in the head. You can work on your file in your favourite browser. When you are happy with the template you can compile the html file which you send to your customer or use by yourself.
How to compile a HTML mail?
To generate one or more html files out of your php file you first need to create a compile.json file (where your template is). The json file tells the compiler what it should do, where is the template.php file, what the output filenames are, etc.. The json file looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "template_file": "template.php", "css_file": "style.css", "generate": [ "template_cool.html", "template_awesome.html", "template_yeah.html" ], "output_dir": "../dist", "zip": { "filename": "compiled_templates.zip", "files": [ "template_cool.html", "template_awesome.html", "template_yeah.html", "img/php-logo.jpg" ] } } |
the template_file key tells which php file should be used as the template file. css_file tells what your css file is (the same as you added in head.
The “generate” key tells which files should be generated out of your php file. Here is the magic: each index in this array is available in your php file as “$nr” variable. So in your template.php you can create something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
HEADER <?php if($nr == 0){ include("content_lang_en.php"); } if($nr == 1){ include("content_lang_de.php"); } ?> FOOTER |
in the example you see 3 files where “template_cool.html” is using $nr=0 and “template_yeah.html” is using $nr=2.
In “output_dir” you can tell where the compiler should output the generated files (usually I use a folder named “../dist”)
if you like, you can auto generate a ZIP file which will contain all your templates, assets and whatever you need in that file.
