Coding Email Template Rules

Tips for Email Template HTML Code.

Chief Executive Officer, Co-founder

Dec 01, 2020

Email template development consists of many steps: the idea, strategy, implementation of the idea design, and layout of the template. In this article, I will provide you with recommendations that will help you avoid mistakes when you code your HTML email.

The main problems that an email developer may encounter are the following:

Some parts of the email have disappeared.
The email is not displayed as it was intended in the layout.
The template is destroyed in Outlook.
On mobile devices, the email looks awful.
The email is not displayed well in different mail programs.
The email is inconvenient to read.
Emails take a long time to load.

Let's try to solve all these problems. My recommendations will help you create a readable, beautiful, and accurate message that will display correctly on any platform and in any mail program.

HTML and CSS Code

Pay attention to the DOCTYPE. For emails, the safest DOCTYPE is:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
```
Use a tabular approach to the layout. This is the standard for creating emails. Work with a proven method that will help you avoid problems.
Don't use CSS abbreviations.
Instead of abbreviations, use multiple CSS styles. For example, instead of padding: 8px 8px 8px 8px, it is better to write padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px.
To specify the color, do not use the short phrases RED, #FFF. Always use the full hexadecimal representation of type #bb0000.
Do not use abbreviated versions of the font that are typical for CSS (type font: 12px arial;). The font family, size, color, and line height must be set separately.
If possible, avoid combining cells (rawspan and colspan). Instead, use stacked tables. This is more difficult, but it will help you avoid incorrect images in your email. Also, don't forget to specify the align and valign parameters for cells in nested tables.
The attributes CELLPADDING and CELLSPACING should be set to ‘0’. The BORDER attribute should not have any value other than ‘0' because not all mail clients correctly process other values.
If you specify a value for LINE-HEIGHT only use the value in pixels. Don't use percentages.
Use two FONT and SPAN tags for text formatting. You need to set the LINE-HEIGHT for the parent cell. This is important for web interfaces and desktop versions of Outlook. I would like to note that Outlook.com does not pay attention to the LINE-HEIGHT parameter specified for the cell at all. Therefore, be sure to specify it in SPAN.
To insert a break between blocks of text use the <BR> tag. However, use this method with caution because some post clients display the size of the gaps larger than usual and may move the text to a new line earlier than you planned.
Please use caution when using CSS3. It is difficult to give any specific recommendations here. Some mail clients support these styles completely, some partially. If you decide to use CSS3 in your email encoding, then be sure to test your templates before sending them using the email preview tool. Support for certain styles by mail clients is constantly changing. Testing your newsletter before sending is the golden rule for any email designer.
The preheader is shown in many email clients as an email preview and is as important as the subject of the email. Always add a pre-header, this motivates the recipient to open an email.
Approximate structure:
```
<div style="font-size: 0px; font-color: #ffffff; opacity: 0; visibility: hidden; width: 0; height: 0; display: none;">
  preheader text
</div>
```
Read more about preheaders in HTML emails here.

Use UTF-8 encoding:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Layout needs to be correctly displayed if there are no pictures. In this case, always specify ALT for images by specifying the link. Then if the images are disabled, the message will not lose its meaning. And be sure to test the email to see how it will display without images. Email2Go provides the possibility for such testing.
Make up your email in independent blocks. This is the safest way. With this approach to encoding, you can delete or add a block to the email.

HTML Email Content

In the layout, only use email-safe fonts. More information can be found here.
Be sure to replace special characters into HTML entities or images. Special characters include paragraphs, hearts, pseudo-graphic elements, and emojis. My colleague Sergei Crawford has written a great article about this.
For the correct display of images on retina display, the size of the images is two times more. For example, for a 300x300 image, take the original 600x600 size and specify the desired image size in your code:
```
<img alt="Your image" src="email2gologo.png" width="300" height="300" border="0">
```
All links must contain the host name and protocol.
For a link inserted as text, use the <a> tag. The HREF address inside must match the link text. Otherwise, email filters may react to such a link as an attempt to deceive the recipient of your email.
Do not forget to specify the link attribute target="_blank". In this case, the link will always open in a new tab.
The title attribute should be available to all your links. This will help you avoid getting your email sent to spam.
Check prepositions — they should not be separated from the word. To do this, use the non-breaking space character or the <nobr> tag or the white-space: nowrap style. And if you need to move a word, use the  symbol. This is useful, for example, for long links that may break the template.

Following these tips will help you avoid wrong images being created by your email template. Imagine, create, invent, code your email, and don't forget to test the newsletter you created before sending it to your recipient.

Coding Email Template Rules

HTML and CSS Code

HTML Email Content

Related Articles