New to Email Template Design and Development? Read this first!
The motivation for writing this article is to give an overview of email design and development for folks familiar with the web. This is not a detailed how-to guide, but one which underlies the basic principles so that a detailed how-to guide makes more sense later on.
Design and develop with tables (just like in the 90s)
If you are a web developer and/or designer, creating a HTML email may sound like a walk in the park. After all, you have successfully wrangled with different HTML and JS frameworks, how hard can email be?
However, you will soon find that it is a different beast altogether. Much like web design and development in the 90s, the fundamental building blocks of a HTML email are image slices and tables. Forget about modern conveniences like flexboxes or bootstrap grids, you have to get creative the old-school way!
For example, if you have a rather simple design like this:
You can slice it in this manner among many possible combinations (and assuming that you care about the mail clients which do not support background images or border radius):
(Click to learn more about slicing in Sketch, or in Photoshop)
We are not going to go through the code in detail in this article but the important thing to note is that to build a HTML email, nested tables are going to be your friend and the entire email should be encased in a table itself.
If you are a designer who usually passes your design file to your developer, it will be helpful to understand how your design can be built in principle, streamlining the process. Visually it might look something like this:
Here, there is an overall outer table with 1 row and 3 columns. In the left column-cell, there is a nested table with 2 rows and 1 column. In the centre column-cell, there is a nested table with 3 rows and 1 column, and in the right column-cell, there is a nested table with 2 rows and 1 column (like in the left column-cell). Inside the cells of the nested table, you will finally put in your content with padding and other styles.
In HTML code, it will look something similar to this:
<!-- Outer Table -->
<table>
<tr>
<td>
<!-- Left Table -->
<table>
<tr><td>image element goes here...<td></tr>
<tr><td>add background color here...<td></tr>
</table>
</td>
<td>
<!-- Center Table -->
<table>
<tr><td>image element goes here...<td></tr>
<tr><td>text elements go here...<td></tr>
<tr><td>image element goes here...<td></tr>
</table>
</td>
<td>
<!-- Right Table -->
<table>
<tr><td>image element goes here...<td></tr>
<tr><td>add background color here...<td></tr>
</table>
</td>
</tr>
</table>The sky is the limit! Unlimited variations await you in the world of nested tables! Of course, it does get rather lengthy and complicated after a while.
An alternative to this is to just slice the design including the text into a few clickable images but it means that your user will not be able to copy the text and that editability is compromised. In some cases e.g. for dynamic text content, it just cannot be helped e.g. this portion of an airline promotional newsletter we were commissioned to build a while back -
Mobile Responsive Behaviour
One of the things about HTML email development which differs significantly from the 90s is the need to cater for mobile devices, which is available even for tables via media queries. As a general rule of thumb, emails for desktop devices are set to a fixed width of 600 pixels while mobile email readers open your email at 320 pixels width. With a few exceptions (e.g. if you are only targeting certain email clients which support a different width), do design and build your HTML email accordingly.
Much like designing for the responsive web, there are mainly 2 strategies:
1- Stack multiple columns on desktop into rows on mobile with (corresponding change in styles):
2- If the design requires a complete different layout or image for different screen widths, hide the desktop table row on mobile and vice versa:
Testing on different mail clients
If you are a hater of cross-browser testing and wonder why don’t the whole world just use Chrome, you might not like what is coming next. While there are ongoing efforts to standardize how mail clients render their HTML email, this is in its infancy compared to web standards. You are going to need 10x the amount of workarounds and fallbacks for it to be rendered consistently across different mail clients.
For example, as we learnt while building Mailworks, if you put anything inside an <a> tag, the entire element will not be clickable in Outlook. In Gmail, if your HTML message size is larger than 102kb, it will be clipped off. And the list goes on and on.
And you can’t just ignore the users using a particularly annoying mail client either (tsk tsk), when the entire landscape looks something like this:
Luckily for us email developers, there is Litmus, the magical place where you can preview the HTML email you have built, in over 70+ mail clients, mobile and desktop. But be warned that you can run out of email previews fairly quickly, as you are going to and fro in making changes and updating the previews from many different versions. Understandably though, given the costs of maintaining so many server instances for so many different ‘simulators’.
You might be tempted to skip this totally and have faith in your HTML skills but my advice is don’t! Even if you skip Litmus, you should at least test on the mail clients you are targeting, on the latest version if all versions are not possible. Look at all these caveats! It is not so much a matter of skill than a matter of diligence, and the key to diligence in this case is relentless testing and debugging.
Here comes Mailworks!
We really think that the time of a developer can be better spent somewhere else compared to wrangling with nested tables and resolving quirks of different mail clients. Even if you work exclusively in email, spending the time in email analytics or building a system for personalisation will be a better use of your time than crafting email layouts.
That’s why we built Mailworks, the complete drag-and-drop interface for you to build your HTML email. It is not the usual watered-down emailer builder which accompanies an email marketing system, but a full fledged system which support nested tables and custom responsive behaviours while taking care of the caveats for you as you export your HTML email.
