Email 101: Create a template!

by |

Email templates are how we display our content to our audience. They are usually created as part of the brand ID as well as support and make our content look good on a range of devices. They will influence the images we insert as well as headings and body copy.

There are a number of ways we can go about creating an email template to send out to our database. The easiest is to take something pre-existing free templates such as those from Zurb or Campaign Monitor which will save time and allot of hassle or we can create something directly in our email client. The last and of course most tricky one would be to build a mailer from scratch using some basic html as well as some CSS.

The structure will be built out of divs and tables and CSS can either be in the header or placed inline as we unfortunately can’t link to any jquery or external stylesheets. If attributes exist in html, it is usually better to use this in mailers as not all CSS queries can be read in various clients. We can also add text styles into our or directly inline in the paragraph “p” or “a” tag.

Nowadays your audience will read their emails on a number of devices of varying screen sizes such as mobile phones, tablets and large screens. To get your campaign to reach them, you will need to get your mail to display correctly on most if not all of them. This is where responsive design comes into play. If you intend to go down this route I highly suggest looking further into @media tags which will resize your mailer on different size screens.

Images should be kept to a minimum as they will increase load times and bandwidth use, especially on mobile phones in areas where a data connection is expensive and if not done correctly they can increase your spam score. We should also add an alt tag for users who won’t be able to display images on their device. At the same time we can send out a text only version as well to eliminate this.

After we have created our template, we need to run it through a few tests. To check the validity of our code we can run it through W3’s validator to make sure nothing is broken or wont display correctly.
Lastly, before we do the final send-out, we can test it on litmus or Email- on-Acid if you aren't privileged enough to have a premium subscription, there are a number of free email testers out there that are more than capable of previews in a number of browsers and platforms such as

Image credits: Images are drawn from the articles we have linked to and image sources can be found at the bottom of these articles.

Header Image:
Body Image:
Make design better: share this article