HTML e-mails

This article is intended for users who prefers to use E-mail templates from HTML. The information in this article deals primarily with how HTML-templates work in general as Hero Outbound follows the general rules.

Basics

First thing to keep in mind when working in HTML is that the outcome looks different depending on the Browser and the settings of the browser in use. This is also true about E-mail templates where the E-mail client decides how to display the E-mail. This takes place in the device of the person who receives the e-mail.

By using “Styles” in your HTML-code, you can control the appearance to some extent in the receivers’ e-mail client but there are still a lot that cannot be controlled 100%. If you know a lot about HTML for web pages, you should know that there are several limitations to what you can use in HTML e-mails.

What kind of HTML should I use?

It is not important what kind of HTML you use for your templates. The e-mail client of the receiver will translate to the closest HTML anyway so – use whatever HTML coding you are most comfortable with.
Some say that XHTML holds the least differences between doc-types while others prefer HTML5 where you are helped by HTML elements ( https://www.w3schools.com/html/default.asp).

Design your template

There are tonnes of online tutorials and examples on the topic of creating e-mail templates with HTML. Here is one example: https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770

Use tables

There are a lot of standards in HTML coding that is not supported by E-mail tempates. The recommendation is most often to use Tables to control the receivers experience.

Inline styles or Stylesheets?

The best way to control the styles is to use Inline styles for HTML e-mails. It is not possible to use more than 1 class. “Shorthand” is also not supported like for example when you want to control font size (i.e. style="font: 8px/14px Arial, sans-serif;”)

Fonts

When choosing your font for the template, you should stick to the most common fonts as they are most likely to be supported by e-mail clients. For example:

If you choose a font that is not standard in the e-mail client of the recipient, the font will be changed to a different font in the same font family

Using images

This is a area where you should take extra care. You cannot link to an image file on your local computer or some other place that requires authentication for reading the file. Using Copy/paste of the images will also fail as the recipient won’t have access to your HTML editor.

The link you enter must be available online to the recipient for reading image file from within the e-mail client.

Test your e-mail

We recommend that you test your HTML e-mail on at least 3 different e-mail clients (Desktop- and web-clients). For example: Outlook, Gmail and Yahoo mail.

Still need help? Contact Us Contact Us