Coding Email Template Rules
Tips for Email Template HTML Code.
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
#FFF. Always use the full hexadecimal representation of type
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 (
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
valignparameters for cells in nested tables.
CELLSPACINGshould be set to ‘0’. The
BORDERattribute should not have any value other than ‘0' because not all mail clients correctly process other values.
If you specify a value for
LINE-HEIGHTonly use the value in pixels. Don't use percentages.
SPANtags for text formatting. You need to set the
LINE-HEIGHTfor 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-HEIGHTparameter specified for the cell at all. Therefore, be sure to specify it in
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.
Read more about preheaders in HTML emails here.
<div style="font-size: 0px; font-color: #ffffff; opacity: 0; visibility: hidden; width: 0; height: 0; display: none;"> preheader text </div>
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
HREFaddress 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.
titleattribute 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: nowrapstyle. 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.