HTML Email Templates – Essentials for Campaign Success

HTML email templates are HTML files that contain reusable code modules. As opposed to plain text emails, they allow you to incorporate different images, fonts, or layouts, making them look more like a web page than a traditional email.

The definition of HTML email templates

As the name suggests, HTML email templates are HTML files. Now, let’s break that down a bit:

HTML (hypertext markup language) is the code that defines the structure as well as content in an email. HTML, along with CSS (cascading style sheets), allows you to personalize your emails to a far extent by adding copy, images, and links. This way you can compose visually appealing emails that reflect your brand or company style and deliver a uniform message to your clients.

The core feature of a template is its reusability. Templates are typically saved in your email service provider (ESP). They serve as a base on which you can add images and links that mirror your brand and are specific to your current email campaign.

The benefits of using HTML email templates

There are numerous reasons to make HTML email templates part of your email marketing campaigns:

They improve efficiency: Templates are one of the key tools that help our email marketing agency stay on top of its game. Since the underlying code of your email is already written and reusable, you can produce campaigns much faster. Instead of writing an entire email from scratch for each of your recipients, all you need to do is add copy, links, and images to a predefined template, test it, and hit Send. And with the extra time on your hands, your team can focus their effort on producing better content and copy for your cold email campaigns.

They provide consistency: HTML email templates benefit your company’s reputation by keeping your emails free of errors and in tune with your brand’s look. To err is human, and rewriting the code for each email increases the chance that an error or a typo might slip by your developers. This can lead to broken emails and a bad user experience. In an unforgiving world of online marketing, damaging your brand reputation is something you can’t allow.

They enable scaling: With the help of HTML email templates, creating campaigns is no longer reserved strictly for developers. Using templates is fairly simple, so we suggest creating a shared document such as a Google Doc with instructions on how to use them. This way, you can even employ your non-coding staff to work on new campaigns.

You can track more metrics: HTML emails allow you to track more metrics than plain text emails, including, but not limited to open and click rates. You can check all of the metrics from the dashboard of your email service provider.

Crucial elements of HTML email design

As we have already mentioned, HTML emails can incorporate various elements. These include:

• Copy and headings that use various fonts, sizes, and colors
• Different graphic elements such as photographs or illustrations
• Logos or other branding elements
• Eye Catching backgrounds
• Highlighted offers and CTAs

Dos and don’ts of HTML email design

When designed properly, HTML emails can be a powerful tool to drive sales in your email marketing campaign. However, it is easy to get carried away and go overboard. If you do, it’ll  often result in off-putting emails. Here are a few best practices to follow if you wish to design effective HTML emails:

• The message that you intend to communicate should be the main focus of your email, not the design
• Don’t go all out with different visual elements so you don’t confuse your visitors. 
• Make your call-to-action button highly visible
• Nobody enjoys reading long emails, so you need to keep your message short and simple
• Incorporate responsive design so mobile users can read your emails
• Always include a plain text version of your email for those who can’t view the HTML version

How to create effective HTML email templates

The most important thing to remember when creating HTML email templates is that most email clients either offer no support for CSS layouts or make them frustratingly difficult to use. This is why we recommend using <table> tags instead.

Major email clients like Gmail and Outlook have issues when it comes to floating elements, and are also unreliable with margins and padding. Using tables also comes with its own set of problems, so we recommend the following steps:

• Set widths in each cell instead of on the whole table – Email clients have issues with deducting the correct cell width. To avoid these, you need to explicitly set the width. Using pixel widths is the most reliable method. When it comes to cell padding, either set it once on the whole table by using the cellpadding parameter or set padding in individual cells with CSS.

<table cellspacing=”0” cellpadding=”0” border=”0”>

    <tr>

        <td width=”150”></td>

        <td width=”350”></td>

    </tr>

</table>

• Nest tables to provide consistent spacing – Nesting tables inside your main table is a tried and true method for avoiding inconsistent results across all email clients, even if margins and padding are already supported.
• Set a background color on a container table – When you set a background color on the <body> tag or in your style sheet, there is a chance that some email clients will ignore it. You can avoid this issue if you have a wrapping table around your content with a bgcolor set.
• Don’t ignore whitespace – While in theory, whitespace in HTML files should be ignored, in practice, this can cause many rendering inconsistencies. This is especially bound to occur if you have whitespace between table cells. Removing spaces between the closing tag of one and the opening tag of the next cell is a great way to avoid layout problems.

Use inline CSS

When you apply a style inline, you give it a priority over styles that are further away. This way you can work around those email clients (like Gmail) that strip out CSS from the head or the external CSS files.

While the Gmail app with non-Gmail addresses (GANGA) is currently the only major client that strips all other types of CSS, embedded <style> tags in the head or body, and any externally linked stylesheets, it’s also common for email clients to misinterpret CSS that isn’t valid. We recommend running your CSS through a validator like W3C just to make sure there are no unexpected results.

The basics of inline CSS

This is how it may look when you apply a style to p elements in a separate style sheet or in the head of an HTML page:

p {

    line-height: 1.5em;

    margin: 0px 0px 10px 0px;

}

When set in this way, the styles will apply to all of the paragraphs on your page. If the style is stripped out, however, your paragraphs will be displayed in the default style of the given email client, or the webmail client’s style sheet. 

If you apply the style inline, you style each individual p element in your content. This is how it looks:

<p style=’line-height:1.5em;margin:0px 0px 10px 0px;’>Lorem</p>

Using this method for every element in your HTML email provides more consistent results. Since this can be very tiresome (much like any other work that involves a lot of repetition), here are a couple of tricks that will save your time:

• Inline your styles after you have finished the coding – To avoid having to go back and edit numerous instances of the same style, first develop the entire design using a <style> tag in your head. Apply them in line only after you have made the final adjustments.
• Use an email service or tool that automatically inlines your CSS, such as Mailchimp CSS Inliner Tool or Premailer.

Don’t rely on images for your HTML template

Slicing is a technique that web designers used to use to work around the inconsistencies of web browsers. This meant designing a page-sized image which they used to cut into smaller sections and reassemble into tables on a web page. 

Although this technique reduces the time necessary to create an email, it has become obsolete, since email clients (Gmail, Windows Live Mail, Outlook.com, and many more) usually block images from downloading by default until you click a designated button.

If this technique still finds its place in your toolbox, you have to account for a high percentage of recipients that won’t see your logo or header image, or even the entire email if it is completely based on images. 

On the other hand, most clients allow images to be automatically displayed when you receive a message from a known sender. Known senders are those that appear in your whitelists, contact lists, or address books.

Becoming a known sender not only ensures that your images will display, but also boosts your deliverability. There are many ways to encourage your recipients to add your email address to their whitelist. It can be in the form of a note on your signup form or you can include instructions on how to do so in the subscription confirmation email or in the welcome email.

How to create HTML email templates without relying on images

As we have mentioned, you need to take into account the fact that some people won’t see the images in your email campaign. Still, there are a few simple tricks that you can exploit to deliver your message under the circumstances:

• Don’t put an image as the first item in an email – It is a good idea to start your email with an enticing preheader text. Many email clients offer a small preview window. If the only element that shows in the preview is an undisplayed image, hardly anyone will open it.
• Use alt attributes – Just like you would make sure that every image has an alt attribute on your website, do the same for your emails. They may not always be displayed completely, but when they are, alt attributes provide a solid backup for blocked images.
• Use captions – If you have pictures in your HTML email template that are not just a decorative element but also communicate an important message, use a text caption to describe it. By doing so, you will deliver that message no matter whether the image or the alt text is displayed or not.
• Find a balance between text and images – When you find a balance between text and images, your HTML email template will deliver the message you intended even without them all loading.
• Consider whether images are necessary for your campaign – Some companies, such as those that advertise different font samples, find images to be an essential part of their message. 

On the other hand, transactional emails like an order confirmation are meant to be scanned and printed out. In that case, an email should be clear and images shouldn’t contain vital information. It is a good idea to dedicate a part of your campaign time to reviewing emails without the images loaded. That way you can get a clear picture of how some of your recipients will see your messages.

• Talk to clients who demand all-image emails – Communicating with your clients is extremely important. You need to present all the pros and cons of their ideas as well as your solutions. Show them an all-image email without images loaded and ask if they would open other similar emails. 

Test your HTML email templates

Unlike a website that you can update in no time, once you have sent your email, there is no going back. This is why it is critical to test your emails before you hit that send button and they are on their way to your recipients’ inbox.

There are many great services across the web that can take a huge weight off your shoulders by testing your email in multiple email clients:

• Litmus
• Mailtrap
• Email on Acid
• Preview My Email
• Inbox Inspector
• HTML Email Check

These services usually give you feedback with a series of screenshots that show the way your email renders in different email clients. This shortens your testing time significantly, since you don’t have to manually interact with each email client.

It is not unusual that you find your content cut off, displayed in the wrong place, or some displaying other unwanted behavior. If this is the case, you need to undergo a troubleshooting process. Once it’s finished, it is a good idea to do another series of tests just to make sure nothing else ended up broken thanks to the attempted corrections. If all went well, you can rest assured that you have a high-quality HTML template that can be reused for future campaigns while remaining well adapted to suit a diverse array of different designs.

Final thoughts

Although creating an HTML email template is not a quick process, you can make it straightforward if you follow the best practices presented in this guide. Take it one step at a time and you’re sure to improve your knowledge and come up with a set of working codes that you can utilize in your future campaigns. Rest assured that this is time well spent. Your tedious piece of art will soon prove to be the missing link that drives more engagement and elevates your campaign to levels beyond the current.