The do’s and don’ts when creating html for transactional emails

The do’s and don’ts when creating
html for transactional emails

10 useful tips that can minimize the pain.

If one day I thought that creating a website and ensuring cross-browser compatibility was boring and hard and that there would be nothing worse than that, I was wrong. Creating newsletters and transactional emails is an even greater pain. There are many tools, email clients like Eudora, Outlook, AOL, Thunderbird, Lotus Notes Desktop and Yahoo, Hotmail and Google Gmail on the web that render your emails in different ways, resulting in differences in the layout and the width of your window.

We can use existing templates, but I prefer to do it manually, which led me to understand how they work. What came out of this is that there are fundamental concepts that we must take into account when creating html for emails.

Do’s and Don’ts

Use HTML tables to control the layout and structure of the project by dividing the space into rows and columns
Use inline CSS to control elements within the email such as colors, background and fonts
CSS style declarations appear inside the <body> tag and not within the <head>
Avoid abbreviations such as font style: 12px / 16px arial, sans-serif but use individual properties such as font-family, font-size and line-height
Avoid using the span tags, h1 and div too much and use html tables as much as possible
Use attribute tables as well as align, valign, bgcolor, border, cellpadding, cellspacing and width
Don`t forget to use colspan to divide the various cells of the tables. For example, with colspan = ‘2’ we’re creating two columns
Set the background color in a td with bgcolor attribute, don’t do it in the CSS
In <img> tag always use the alt attribute with a text description of the image. Most email clients do not show images until the user chooses to do so
Read The Ultimate Guide to CSS. It is the most complete CSS support manual for each email client on the planet, including mobile. Required.

Bonus tips

Here are two more tips that you should be aware of when working with Outlook and Yahoo:

Avoid using the p tag in Outlook as it puts a margin-bottom which is hard to work around.
Border-radius does not work in Yahoo Mail.

Good examples

The most practical way to see how HTML tables with inline CSS work is to download some templates from Campaign Monitor and Mailchimp.

If you’re lucky enough to receive well built and generally fantastic layouts, test emails in various email clients. If they are consistent, inspect their HTML and see how they are built. It’s the best way to learn.

And now, how do we test it?

Whenever you create an HTML email using the guidelines and best practices, you should always test it in a variety of email clients, so you can identify problems that require workarounds.

The first test tools to use are the Firefox and Internet Explorer browsers. If the email displays perfectly in both browsers, then you can proceed to test it in Outlook, Yahoo, Google Mail and others, which may present only minor rendering problems across them.

Summary

If you want your clients to love your email layouts, follow the best practices and remember some limitations we’ve discussed. This will guarantee you don’t have to hear the common phrase “it’s all broken.”

I hope this article will help you creating html email.
☺