Each one of us has our own approach to web development: a preferred editor, some helper tools, a personal project flow, and so on. When we deal with big or complex projects, it is essential to have a clear development path, to both save time and minimize errors.
In my experience, this is especially important when working on an HTML email project. Email requires so many repetitive tasks that are not particularly complex in themselves (not very often, at least), but which can become problematic because of the sheer number of elements and tasks that need to be checked.
Here I’ll try to explain my personal workflow for HTML email development. I hope it’s useful for you to cherry-pick the parts you like.
A Typical Email Development Workflow
A classic email development workflow has three primary steps (see my Crash course article for more details):
- Authoring (with preliminary local testing)
- CSS inlining
- Testing
The final testing (with inlined CSS) is the step that requires more time since we’ll probably have to repeat it many times. Moreover, the “CSS inlining” and “Testing” tasks require a little extra work and attention: first, you’ll have to take care of preserving your original working copy from the inlined one. Also, the final testing requires you to send your inlined HTML to various accounts to check your design against various email clients.
Sending your code by email is a little tricky, since most clients don’t allow you to compose an email by pasting HTML code in its body (the only one I know is Thunderbird). But every test requires many actions to compose the mail, inline the CSS, paste the code, etc.
If you have a testing platform account (Litmus, Email On Acid, Campaign Monitor or some other), you can simplify the final testing task by submitting your inlined code to the test platform but in order to perform a more accurate test, you’ll still have to send them your code by mail. In the past, I used a little PHP script to send the test emails, which could save some time, but it still requires repeating certain tasks.
Going back to CSS, you’ll probably have to deal with two files: one to be inlined and one to be embedded (for the clients that support media queries).
You’ll have to edit the CSS to be inlined directly into your HTML file, then launch an inliner tool (the Mailchimp inliner, for example), and finally you have to embed the second CSS into the inlined file (It bores me just writing about it!).
We can now review our workflow scheme in a more detailed way:
To get a real productive workflow, many issues are still unresolved, and repetitive steps are significantly above the creative ones, which rarely leads to a good job.
Luckily, we still have some cards to play: Preprocessors and task runners.
Adding HTML and CSS Preprocessors
When I began to use preprocessors, I immediately realized how they could be useful for email development. The need for extremely verbose code (especially for HTML), can be easily simplified by a preprocessor, both for HTML and for CSS.
I mostly use Jade for HTML and Less for CSS, but you can choose the technologies you prefer. Jade is really useful when dealing with repetitive and confusing code, like nested tables. Take a look at the following sample of a three-level deep table.
[code language="html"]
<table width="100%" id="wrapper">
<tbody>
<tr>
<td width="100%">
<table align="center" class="header">
<tbody>
<tr>
<td width="100%">
<table width="100%">
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
[/code]
The Jade lines that produce the same code are as follows:
[code language="jade"]
table(width="100%" id="wrapper")
tbody
tr
td(width="100%")
table(class="header" align="center")
tbody
tr
td(width="100%")
table(width="100%")
tbody
tr
td cell 1
td cell 2
td cell 3
[/code]
As you can see, there are no more problems with unclosed tags and the code is easy to read.
Using Jade you can create complex templates and build your own snippets library, reusing your code in more projects. You can do the same with Less or Sass.
You can compile your files with Gulp or Grunt, but in order to have a quick preview of you work, I’ve found that the best solution is offered by Coda and CodeKit.
Continue reading %My Current HTML Email Development Workflow%
by Massimo Cassandro via SitePoint
