12 top tips for building better email templates

Emails are essential in effective online marketing but creating professional looking email templates from scratch can be a real nightmare.

Here I outline 12 killer tips to help you design and build better emails and avoid the most common pitfalls people encounter when trying to put together a template.

1. Don’t be  too ambitious

So many times in the past I have seen people trying to be far too ambitious when designing their email templates; often with disastrous results.

We need to remember that email clients are NOT web browsers. So attempting to build wonderfully complex emails is simply a recipe for failure.

So try and keep it simple.

The goal of your email is to illicit a response from your users. And that usually means getting them to a sales page on your website. Keep your message simple and the call to action strong. And save the fancy stuff for the actual landing page itself.

2. Use tables

Tables are rubbish. As designers and developers we all know this. But when it comes to emails they are the way it has to be done. Divs and CSS simply won’t cut the mustard; so don’t use them.

This won’t work….

<div id="header">
   <h1>This is the header</h1>
<div id="content">
   <p>This is some interesting content.</p>
<div id="footer">
   <p>This is some footer text.</p>

This way will work…

      <td><h1>This is the header</h1></td>
      <td><p>This is some interesting content.</p></td>
      <td><p>This is some footer text.</p></td>

3. Stack multiple tables

If you need multiple tables within your layout then you should try (where possible) to stack rather than nest. This means tables should sit on top of one another in their own right rather than be nested within a larger parent table.

This isn’t bad…

    <table id="parent">
                <table id="child one">
                        <td>table one content.</td>
                <table id="child two">
                        <td>table two content.</td>

but this is better…

<table id="table one">
            <td>Table one content.</td>
<table id="table two">
            <td>Table two content.</td>

4. Always use inline styles

When styling your templates make sure you keep your all your styles inline. For example:

Recommended:  How to Install Ghost CMS on Local Server?

Avoid this…


<p class="text">This is some dark, bold text</p>

Do this instead….

<p style="color:#222222; font-weight:bold;">This is some dark, bold text</p>

5. Make images block elements

Adding images to a table can often cause issues in email clients. The likes of outlook can add padding or margins, breaking your layout or making things look odd.

In order to get some consistency across email clients you should explicitly set the display attribute of all your images to be block.

Change this…

<img src="path/to/image.jpg" alt="image" />

Into this…

<img style="display:block" src="path/to/image.jpg" alt="image" />

6. Utilise the !important tag

The CSS tag !important is useful in email templates. Why? because some web based email services (such as hotmail) will automatically apply their own styles to emails.

That can mean odd thigns happen like H1 tags displaying in green etc.

Make sure you use the !important tag to override the clients default styles.

<h1 style="color:red !important">This is a red heading</h1>

7. Avoid auto generating your template using software

Avoid generating your template using software like frontpage or publisher. They include all sorts of weird tags and markup that can play havoc with your design.

If possible code your templates by hand from scratch using a simple text editor like notepad. This may take you longer but you can be sure your finished template will play much nicer with the various email clients out there.

8. Don’t use too many images

When designing your emails avoid using too many images. In fact use as few images as possible.

Recommended:  18 Tools for Better Content Creation: Improve Your Writing with Less Effort

Cramming your email full of unnecessary images can not only detract from your message, it can also bloat your email and increase download times for your end users.

It’s also worth noting most email clients block images by default.

So if an image is not absolutely necessary then leave it out.

9. Don’t make your email wider than 600px

Many people view their emails on mobile devices and within the preview panel of their email client. Therefore try and make sure your email is no wider than 600px.

10. Don’t attempt to use background images

Wanna use a nice background image in your template? Forget it. Background images are still [so far] poorly supported across the various email clients. So think again.

Stick to styling your elements (such as header) with a solid background color instead.

11. Give images ALT tags

Most email clients now block all images in an email by default. And if a user doesn’t specifically click to allow them to be shown this means a lot of empty space in your template.

By specifying alt text for your images we at least give some context to what was supposed to be shown there.

For example if we had a banner that linked to a 20% off special offer it would only be displayed if users explicitly clicked to allow it. If we had alt text set though they would still be presented with a normal text link.

Avoid this…

<a href="www.example.com">
   <img src="path/to/image.jpg"/>

Do this instead…

<a href="www.example.com">
   <img src="path/to/image.jpg" alt="Get 20% off by clicking here"/>

12. Test test test

It is important you test your email templates in as many clients and services as possible. The main ones to be concerned with are web based offerings such as Gmail, Hotmail, Yahoo and email clients such as Outlook, Thunderbird and the such.

Recommended:  How to remove Blogger Picture/Image Shadow and Border

You can do this by registering accounts and manually sending emails to see how they look in each or you can use tools to help you and save time.

One of the best out there is Litmus

Now Litmus isn’t free BUT they DO allow you to take a 7 day free trial (more than enough time to get your templates in order hehe).

That’s a wrap

So there you have it. My 12 top tips on best practice when designing and building your email templates. Do you have any more tips to offer? Feel free to share them in the comments below.

Found this post useful?

Subscribe to our RSS feed, follow us on Twitter or help us grow by sharing our content using the buttons below


Leave a Reply