HTML email template
An email template that shows off the advance techniques mentioned in this article you can use in email marketing.2.04 Mb
Words by Tommy ParkerMarch 31, 2017
Anyone with development experience knows the frustration that is emails (I’m looking at you Outlook). Email clients can vary greatly, giving very different results therefore making the task more difficult than it should be.
As well as a download to a free email template at the bottom of this article, here are a few quick tips to get you started on your campaigning journey.
Now this necessarily doesn’t mean you have to develop it inline. You can treat it like a regular web project and use an inliner such as Ink at the end.
We’ve taken our template even further and incorporated CodeKit into the process by making our main email file a .kit, allowing us to import the blocks we need, creating a flexible master template that’s quick to update.
As for mobile styling, you can keep that in a style tag and make your own classes accordingly for phones. Handheld devices are generally pretty good at rendering more advanced CSS but be wary of certain limitations by visiting sites such as Litmus, Email on Acid and Campaign Monitor.
It’s a god send. All those issues you had before, POOF…gone! By using the mso query tag, you can enter Outlook specific classes. Of course you can’t go to town on it but it can come in handy when you want floating tables (often used for stacking content for mobile) by containing them in cells so they stay put. Here’s an example of some basic code:
<table width="600"> <tbody> <tr> <td> <!--[if mso ]> <table width="600" height="1" align="center" border="0" cellpadding="0" cellspacing="0" > <tr class="wr"> <td width="290" height="1" align="left" valign="top" style="position:relative;"> <![endif]--> <table align="left" width="290"> <tbody> <tr> <td> </td> </tr> </tbody> </table> <!--[if mso ]> </td> </td> <td width="20" height="1" align="align="right" valign="top" style="position:relative;"> <td width="290" height="1" align="left" valign="top" style="position:relative;"> <![endif]--> <table align="right" width="290"> <tbody> <tr> <td> </td> </tr> </tbody> </table> <!--[if mso ]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table>
If you want to be super specific and fairly fancy, you can enter in the version of Outlook you’re having issues with by typing in the corresponding number. You can find the list on this Mailchimp post.
This is a great little resource to achieve fully functioning buttons that work across all the difficult clients. Don’t forget to enter your link in both the regular a href and the vml href.
By using sneaky techniques, you can mimic an expanding field often seen on accordions and mobile menus. You can find an example of this in the template and though it only works on mobile devices, it can really tidy up your email and make it look swish. Don’t be afraid to be creative with it!