21 best practices for HTML emails

Any email can be sent in two forms—HTML and plain-text. While plain-text is the simple typed out email with not much design work involved, HTML emails use HTML to include images, videos, graphics, colors, layout, and more.

Why send HTML emails?

Each of these email forms has their own pros and cons. HTML email works well in some scenarios while plain-text emails work better in others. While they each serve a purpose, the most common type you'll see when it comes to transactional email sending is HTML emails. The design aspect of a transactional HTML email is more subtle, unlike the colorful marketing emails, but they still include HTML elements. Let's see the benefits of sending an HTML email instead of a plain-text email.

Better branding with better design

HTML emails allow you to customize the look and feel of the email to align with your brand identity. Adding the logos, colors, and images tied to your brand can help with familiarizing your brand and also help users quickly identify an email from you. These design elements will help your email stand out in the sea of emails flooding your recipient’s inbox.

Better engagement

HTML emails can be designed to highlight the right content and right parts of an email. In a plain-text email, the limit ends with bold or italics. But in HTML emails, you can use elements to pull the user’s attention to the most important part of the email—whether it’s a CTA or some other important information.

Better tracking

The biggest downside to plain-text emails is the lack of comprehensive analytics. While you may be able to track traffic to the included links, HTML emails offer a much better ability to track recipient activity and performance. This helps with both improvement of performance and troubleshooting.

Better customer experience

All of this amounts to a simple benefit—customer experience. If your user receives a well-designed email from you, they get a much better customer experience than if they were to receive a simple typed out plain-text email. HTML email will help your business come across as more professional and will help build trust in the customer about your quality.

21 best practices to follow while designing HTML emails

Keep the design simple

This holds true for any transactional email. When it comes to transactional emails, content is king. The email is often sent to convey important information, so even in an HTML email it’s best to keep the design elements simple without overpowering the core content of the email.

Watch the overall file size

Each line of code in an HTML email adds to the file size and affects the loading time. It’s advisable to optimize this file size and ensure that it doesn’t exceed 100kb. Many organizations have email policies set that could block emails that are over a particular size. Even spam filters can sometimes pick up on heavy emails. You can use a HTML minifier to optimize your HTML code.

Optimize image size

As an extension of checking the overall email size, check to see that the images included in the email are of small file sizes and responsive. This will help with the performance of the email across different clients and devices.

Avoid broken tags

If there are malfunctioning or broken HTML tags in an email, it’s highly likely that the user will be suspicious of the email. This could lead to them marking it as spam, which will affect your deliverability. Sometimes, broken tags can even lead to your email not rendering properly. Always check that the HTML tags in the email are right.

Pick the right text-to-image ratio

Ensure that your email isn’t all just one image. The text-to-image ratio of your emails is crucial. Spam filters have evolved to the point where they even consider the text-to-image ratio to see if the email might be spam. The advised ratio is 60% text and a maximum of 40% image. This will both help with deliverability and with not overpowering the important information in the email.

Use commonly supported fonts

While it might be tempting to use your custom fonts in emails, it’s best to use common and well-known fonts like Arial, Arial Black, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana. These fonts are supported by most clients and avoid the risk of rendering issues in your email.

Host images on reputed servers

When including images in the email, it’s best to use absolute links for images. Use the full URL instead of any shortened version of the link. Also make sure that the images are hosted on reputed servers. Both of these factors will be taken into account by spam filters when your email is delivered. Following these two measures will help avoid any suspicion that your email is malicious.

Assume that images will be blocked

For security purposes, most images aren’t rendered in email clients initially. Sometimes, they may completely fail to load. It’s best to assume that the images in your email won't load. Take these measures to ensure that the email still fulfills its intended purpose if the images fail to load:

• Craft the email so that the email makes sense even without the images.

• Include a plain-text version. This also helps with deliverability.

• Include a webpage version of the email you sent if possible. (This might not always be possible for transactional emails)

• Include alternate text for images in the email.

Employ fallback for all elements

Whether it's a special font, GIF, or images, always use a fallback mechanism for all of them to ensure that even when they don’t load properly, your emails are still displayed well.

Use inline styles

It’s better to use inline styles instead of external stylesheets. Most email clients do not support external stylesheets. Your emails might render better if you use inline styles.

Avoid Flash or JavaScript elements

Flash and JavaScript aren’t supported across all email clients. It’s better to design emails without elements that need Flash or JavaScript. If there are elements that require motion, GIF would be a safer option.

Restrict overall email width

Design your email such that the overall width of the email is not more than 600 pixels. This is the length that most email clients set their preview pane to. If you follow this limit, your email will be displayed properly in clients with a smaller preview pane as well.

Keep the first fold simple

The first fold of your email is the first impression for an HTML email. Make sure that it has a clean design and only includes the most important content and design elements. Especially when it comes to transactional emails, the purpose of the email is to convey important information, and it’s prudent to focus on that in the first fold.

Don't overdo the promotional content

In a transactional email with HTML design, you’ll often be tempted to include design elements or content that can help with promotion or marketing. Our advice would be to avoid promotional content completely in transactional emails. But in cases where you need to include some promotional content, ensure that it’s minimal, subtle, and the design doesn’t overpower the primary purpose of the email.

Use common image formats

Much like fonts, it’s best to use common image formats in emails. JPEG is most recommended. It’s supported by most, if not all, email clients and will make the rendering of your email seamless.

Include prominent CTAs

Pick a color, size, and placement that makes the CTA buttons prominent. These buttons are often used for important actions and should be given as much importance as possible. It also helps with responsiveness if the buttons are big enough so the user can spot it easily and click on it on smaller screens. It’s even preferable to replace hyperlinks with buttons wherever possible for this very reason.

Create a single-column layout

From a design point of view, both single column layouts and multi-column layouts work. But on smaller devices and in a smaller preview pane, multiple columns might look stuffed together and could affect the readability of the email. So if your emails are accessed across devices, stick to a single column layout.

Don't make the background distracting

For any email, the content has to be the focus. This is especially the case for transactional emails. When adding the background image or choosing a background color, ensure that they don’t draw attention from the content or purpose of the email.

Check responsiveness

As we've discussed, your emails are mostly likely to be accessed across different devices. These devices could come with different screen spaces and resolution. Craft an email so that the email itself and the pages it leads to are responsive across all devices. This is especially important for mobile devices. Mobile devices are always with us, and it's plausible that we view emails more often through mobile devices than on our computers.

Make your emails accessible

Other than adapting your email to different devices, it’s important to make it adaptable and accessible for different groups of people. Follow these best practices to help with that:

• Choose simple formatting for texts. Avoid italics or excessive formatting that reduces readability.

• Pick colors that don’t hinder readability. Ensure there’s high contrast between the background and the font color.

• Include alternate text for users that use text-to-audio software to access the email.

Always test your emails

Even with taking all of the measures mentioned in this article, you might still miss some gaps. It’s always best to test your emails at different points in development. Once it’s developed and ready, test the email across devices, clients, browsers, and any other instruments that your users might use to view the email. It will help you to fix issues even before they reach your customer.