How to Code an HTML Email Template

When scheduling an Email Campaign to your contacts list your HTML Email template must:

  1. Use the Correct HTML Code
  2. Contain No Broken Links
  3. Have the Correct Ratio of HTML, Text and Graphic
  4. Contain an Unsubscribe Link

Without these 4 guiding rules, the chances are your Email will not get delivered to the recipient.

Unfortunately it is not the case that you can type in any content into your email client editor, press send and get a whole load of conversions.

Sending an email is a precise skill and in this article we will look at each of these four steps, so you can understand why using HTML is important.


Check out this Short Video on How to Code an HTML Email Template:



Why Use HTML?

There are two choices when sending an email. Either send the email as HTML or send the email as text.

Sending a text email is quick and simple. For some industries, text only content is sufficient.

However, if you want to make a visually appealing marketing campaign with a great looking graphic, offer and call to action, then there is no better way than sending using HTML.


simple html email template
An HTML Email Template can be much more visually appealing than a plain text only mailer


The best answer to this problem, is to send both. The reason for this is that some email service providers will only read HTML or a limited amount of HTML, and some (albeit a small number) will only read Text.

The conclusion then is that to optimise your campaign and give it the best chance of success, it is recommended to send both.


1. UseĀ the Correct HTML Code – Dos and Don’ts

HTML is the coding language understood by most mail providers.

However, it does come with its drawbacks – the first being that you need to understand how to code HTML correctly. A badly coded HTML mailer will be flagged as SPAM.

Don’t Copy and Paste from Word

An example of how a mailer can end up coded badly is when pieces of content are copied from other sources.

Consider Microsoft Word.

Many content writers (freelance or agency) write their content using Word. The quick option, then would be to copy and paste the text from Word direct to the mailer.


email template html code
The code in green is the unwanted code copied from Microsoft Word

Bad idea. Why?

Because Microsoft Word contains row upon row of formatting code. This will not show up in the .doc itself. However, as soon as you place the copied excerpt into an HTML editor – there it is. It will completely mess up the HTML format and add those rows of heavy code to your mailer. The result will be no mailer delivered.

Use Minimal CSS

Mailers need to be coded to work with specific spam filters and to use CSS in very narrow ways. Too much CSS will compromise delivery to some clients. To be on the safe side, it is advisable to code in a way that will make the email look consistent across all email clients.


html email template
An excerpt of an HTML Email Header – notice the minimal CSS

Make Your Code Responsive

Last time I checked my Google Analytics account i noticed that 62% of website users are using mobile devices to browse my site’s pages. This number has been on the rise for the last half decade, so expect it to continue.

The conclusion?

If you are not coding your HTML mails for mobile, then the chances are they won’t be read on a mobile device.

This point is well worth noting, and can be very tricky to adhere to. This is because coding a responsive mailer requires clever use of CSS. Too much CSS and it will not display correctly in some clients, or worse still will not be delivered at all.

The best way around this problem is to use specific CSS elements in each table rule, instead of trying to cram an entires stylesheet in the Header of the HTML email template.


2. Contain No Broken Links

A link that goes nowhere is a disaster. It sounds simple. But I am astounded by how many email campaigns I have seen over the years that contain a broken link.

As well as going nowhere, they are a big red flag for the spam filters.

Always check to see that the links are formatted correctly and tested to see that they direct to the correct landing page.


create html email template
Litmus is an application that can check HTML Email Templates for Spam Content and Broken Links, and many other things


A second point worth mentioning here is what to do with affiliate links. Affiliate links can be tricky. Over the last 18 months I have noticed a real impact on the deliverability of email campaigns all containing affiliate links as opposed to those that contain a link to a page on the same domain as the sending server or no link at all.

The solution? When sending affiliate links, try to use a tracking link that uses the same domain as the sending server. This will improve deliverability as the email campaign and website sending from will be fully verified.

Otherwise you will need to be pretty imaginative on how you manage to send to an external landing page without compromising deliverability.


3. Have the Correct Ratio of HTML, Text and Graphic

Mailers that contain excessive amounts of code in ratio to the text will be flagged as spam. We spoke about this earlier when talking about CSS and unwanted code, such as that copied from Microsoft Word.

Similarly if your mailer contains only graphic it will be flagged as spam and not delivered.

Why you might ask?

Because if it is all graphic then you will be able to write any kind of illicit content in the image itself and slip underneath the spam filter.

Unfortunately not.

The spam filter will simply block the campaign from getting delivered.


responsive html email template
Creating a visualy appealing HTML Email template can require a lot of code and images. Make sure that you compromise by adding enough Text


The solution?

Everyone likes a nice graphic. So of course, graphic mailers will get delivered. The idea is to put together a good ratio of text and graphic, so that the Spam Filters can feel confident that the campaigns you are sending are going to be beneficial to the receiver.

One way to do this is to use a beautiful eye catching main image, with an offer and a call to action. Then use a headline to make the offer or promotion impact further. And then follow up with a paragraph or so of text explaining in more detail what the offer is all about.

To be extra safe, you can always add the company details and terms and conditions in the footer of the email to push up that percentage of content.


4. Add an Unsubscribe Link

Again this would seem obvious. However, it is often overlooked.

Granted most mainstream email service providers such as Aweber and Mailchimp will force an unsubscribe link to be inserted or the campaign will not be sent.

Why do they do this?

Consider that without the unsubscribe link, you are not giving the option to the contacts on your list to opt-out of receiving your email campaigns. This is a terrible user experience, especially if they are not interested in receiving any more of your offers. Fair’s fair after all.


html email signature template
A contact that wants to unsubscribe is not a valuable lead, so let them unsubscribe!


Without an unsubscribe link, if your mailer gets through the spam filter at all (very surprising), the chances are you will get a high number of complaints from contacts attempting to opt out.

Also, don’t try to hide the unsubscribe link below a large area of space at the bottom of the mailer. I have seen thisĀ  done many times. The spam filters can detect it.

If someone wants to unsubscribe, then let them unsubscribe. It is highly unlikely that they will turn into a conversion.


A Few Tips to Help With Marketing

Here is a short checklist of other pointers to watch out for when coding an HTML email template:

  1. Check spelling and language of content. This is especially important if you are sending multiple languages. Be sure that you haven’t copied any French Text into a German Mailer!
  2. Make sure the text matches the offer in the graphic.
  3. Avoid using background images in the css. Background images can look fantastic when coding using an HTML editor. However, they rarely display in the email client, so it is suggested to go for a solid colour instead.
  4. Avoid spam words. The obvious ones would be Casino, Bonus, Crypto, Limited Time, etc. However, there are many more, seemingly innocuous ones that would get your campaign marked with a high spam score.

There are many free applications available on the web for checking email campaigns for coding errors, spam scores and broken links. One of the best though is Litmus. It is a premium application, but as well as checking all of the above it will allow you to preview your HTML Email Template across a range of browsers and devices.


Follow This Link For more Email Marketing Tutorials


Leave a Reply

Your email address will not be published. Required fields are marked *