Find out What HTML Email Best Practices to Follow

Choose a drag and drop builder, cook up a design, slap a buy-one-get-one-for-free copy, and release your HTML email into the wild. 

Only I wish it was that easy… 

A lot more goes into creating a highly deliverable and responsive email. I curated all the HTML best practices to help you engineer beautiful HTML email templates that won’t end up in spam. 

The article is for email designers, developers, and email marketers. So, I sectioned it like that. But, email creation and campaigns are a team effort, so it pays to check all the tips and tricks to get a holistic image. 

Check the table below for a quick overview. 

HTML email best practices: a snapshot

HTML email design best practices

As said, this section is for designers. But if you’re an email marketer, for example, you’ll find nuggets of wisdom that may inform your choices in terms of the copy, messaging, and use of graphics and/or interactive elements. 

1. Brand consistency

Email design needs to aligns with your brand identity. It means using consistent brand colors, placing your logo prominently at the top, and keeping a uniform style throughout the email. 

Also, the footer should include relevant company details like the physical address and phone number, providing authenticity and compliance with email marketing regulations. Some businesses even use the footer for additional messaging, which needs testing to see if it works with your avatar. 

Here’s a simple example of a company logo and a footer in an email. 

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <img src="http://example.com/logo.png" alt="Company Logo" width="200">
    </td>
  </tr>
</table>

<!-- Email Footer -->
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="font-size:12px; color:#666666;">
      Company Inc., 1234 Street Rd, Suite 123, City, State, 12345<br>
      Phone: (123) 456-7890
    </td>
  </tr>
</table>

2. Design for simplicity: single-column layouts

A single-column design is visually appealing and functional, ensuring your email looks good on all devices. It’s easier to scale to mobile devices and the layout simplifies the design process. The side benefit is that it also makes the content easily digestible.

<table width="600" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
      <!-- Content goes here -->
      Your email content here...
    </td>
  </tr>
</table>

In addition, you should use grid-based layers and avoid HTML elements that require positioning and floats. 

Pro tip: The maximum width of an HTML email needs to be 600-800 pixels due to the size of the email clients’ preview pane. 

3. Image handling and compression

Email clients frequently block images, so, always provide alt text to describe them. Avoid embedding critical copy or messaging within the image and use HTML text instead. Also, images should be compressed to reduce email load time.

You can compress them natively, or use some tools like compressor.io. Here’s an example:

<img src="http://example.com/image.jpg" alt="Descriptive text here" width="600" style="max-width:100%;">

When uploading images always use absolute addresses, avoid using image paths as they could be blocked. 

Also, background images often get blocked; the safer route is to use a background color. But if you need an image, test the template inside and out to ensure it’s deliverable. 

4. Consistent spacing and styling

Use tables for layout and cell padding for consistent spacing. Avoid contemporary CSS techniques like flexbox and grid. A lot of email clients don’t support them. 

Here, I’ll give you a quick example of cell padding for spacing. 

<table width="600" cellspacing="0" cellpadding="10" align="center">
  <tr>
    <td>
      <!-- Content with proper padding -->
      Your email content here...
    </td>
  </tr>
</table>

Besides cell padding on the tables, you can use empty table cells, inline breaks, and inline CSS margins or padding. Of course, the combination of the techniques is also okay. 

5. Font usage

Utilize cross-platform accessible fonts like Verdana, Arial, or Georgia (even Times New Roman). Include font stacks to ensure text appears consistently across email clients (see the example below). 

<style>
  body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }
</style>

Fun Fact: Google fonts aren’t uniformly supported by Gmail, the same goes for some web fonts.  

6. Avoid JavaScript

For dynamic elements, opt for simple animations like GIFs rather than JavaScript, which is unsupported in most email environments. 

However, also keep in mind that using GIF in your emails may significantly affect the open rates (by 37% according to Hubspot). Anyway, I’ll show you how to embed a GIF into an email. 

<img src="http://example.com/animation.gif" alt="Animated Image" width="600" style="max-width:100%;">

HTML email development best practices

This section is largely for email developers. However, there’s also useful info if you’re a designer, particularly in layout and CSS best practices.  

1. Doctype and HTML setup

Start by setting the appropriate doctype for HTML emails, with HTML5 being the preferred choice for its modern standards support (I’ll give you the HTML5 example). 

But, it pays to take your time and understand the different doctypes that can help you choose the best one for your email-sending scenario.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Email Title</title>
</head>
<body>
  <!-- Email content here -->
</body>
</html>

Also, as shown in the example, add the tag to help email clients understand the HTML document is set to English, or any other language that will be used in your emails. 

Bonus tip: If you want to validate your emails in HTML5, check the linked tutorial. 

2. Use semantic HTML

Semantic HTML enhances the meaning and accessibility of your content. This includes using <h> tags for headings and <p> tags for paragraphs. They help screen readers and other assistive technologies navigate the content.

<h1>Welcome to Our Newsletter</h1>
<p>Stay updated with the latest news right here.</p>

3. VML for Outlook

Not that long ago, Outlook became notorious for having poor deliverability with perfectly good emails. To that, it’s not uncommon for this mailbox provider to fail to display HTML templates. 

To overcome Microsoft Outlook quirks, incorporate VML (Vector Markup Language) for elements like backgrounds and buttons that Outlook might not render properly with standard HTML/CSS.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:200px;">
  <v:fill type="tile" src="http://example.com/background.jpg" color="#7bceeb"/>
  <v:textbox inset="0,0,0,0">
    <![endif]-->
    <div>
      <!-- Your content here -->
    </div>
    <!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

4. Tables and layouts 

This is sort of a reminder since I already talked about tables and layouts in the design section. But now, I want to expand the story and introduce another trick to make the emails more accessible. 

As indicated, tables are widely supported and provide a reliable way to manage the layout across different email clients. Adding role="presentation" to tables improves accessibility by indicating that the table is used for layout purposes, not for tabular data.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <!-- Content goes here -->
    </td>
  </tr>
</table>

Pro Tip: You can use ghost tables allowing you to create beautiful emails, with more room to be creative. But this is an advanced technique and you should test it thoroughly until moving to production.  

5. CSS practices

Keep your CSS simple and inline to avoid compatibility issues. Complex CSS selectors and properties like flexbox or grid can break in many email clients. The same goes for shorthand code, compound style declarations, and CSS layout properties. 

<p style="font-family: Arial, sans-serif; color: #333; font-size: 16px;">
  Example text with inline CSS.
</p>

6. Call-to-action (CTA) buttons

You can also use tables to design CTA buttons for consistent rendering across email clients. This approach ensures that your buttons look good and function well no matter where your email is opened. Here’s an example:

<table role="presentation" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#FFA733" style="padding: 10px 20px; text-align: center;">
      <a href="http://example.com" style="color: #ffffff; text-decoration: none; font-family: Arial, sans-serif; font-size: 16px;">
        Click Here
      </a>
    </td>
  </tr>
</table>

Tip: For CTAs and links, aim for 46×46 pixel hit areas – it’s the thumb-size sweet spot you need for mobile devices.  

7. Overall email file size

Keep your email size under 100 KB to avoid spam filters. Use tools like HTML Crush to minify HTML and EmailComb to remove unused CSS, enhancing performance and reducing the likelihood of email clipping by Gmail. 

Important notes:

• Gmail will clip all emails of 120KB or larger. 
• After using minifying tools retest the template to see if a crucial element has been left out from your HTML code. This goes double for HTML Crush. 
• On a positive note, leaner emails load much faster which could improve engagement. 

8. Conditional code and fallbacks

Utilize conditional code to handle differences in rendering engines and CSS support. It also makes your email template more versatile and helps with a consistent appearance across different email clients. 

I’ll give you a simple example of conditional CSS for Outlook. 

<!--[if mso]>
<style>
  .fallback-font {
    font-family: Arial, sans-serif;
  }
</style>
<![endif]-->

Bonus tips (accesibility):

• Use ARIA labels where applicable to enhance accessibility for users with disabilities.
• Ensure text is readable with sufficient contrast and font sizes, especially on mobile devices.

9. Test the mobile experience

It’s crucial to test your emails on various devices to ensure they render correctly across different screen sizes and email clients. So check the example of a basic responsive design:

<style>
  @media only screen and (max-width: 620px) {
    table[class="container"] {
      width: 95% !important;
    }
  }
</style>

The code here has the!important argument to override the styles, break the hierarchy, and signal which styles are top priority. This is useful if you use many inline styles, but don’t overuse the argument or your email template will become hard to maintain. 

Also, you’ll need a proper testing tool to ensure your email looks and performs well across different devices. 

Here, I’ll introduce Mailtrap Email Testing, which is part of Mailtrap Email Delivery platform. It’s an email sandbox to inspect and debug emails in staging, dev, and QA environments before sending them to recipients. 

You can preview how you email looks on different devices. 

Also, you can see the HTML/CSS support across different clients (Apple Mail, Outlook, Gmail, etc.). 

On top of that, you get: 

• Fake SMTP server
• Spam score check
• Email templates testing API 
• API for QA automation
• Ready to use integrations in 20+  languages (Ruby, Python, PHP, Node.js, .Net, etc.)
• Multiple inboxes for different projects and stages
• User management, SSO

Further reading:

• Free HTML & CSS Email Checker by Mailtrap 
• How to Test Emails in Different Clients 

HTML email content best practices

Simply, your content needs to be compelling and to the point, otherwise, the open rates are going to suffer first, then the click through rates. 

On top of that, you need to pay attention to your brand messaging to strike the right chord with the target audience. We cover that topic at length in the video below, so click play before moving on to other tips and tricks. 

1. Ace the subject line

The subject line is your first impression and key to open rates. Keep it short, descriptive, and aligned with the body of your email. 

Aim for about 35 characters or 3-5 words to ensure it displays fully across email clients. 

In the exemplary warm-up/promo email below, the subject line is Prime Day Is Nearly Here (only 24 characters). It aligns with the goal of the email, body copy messaging, and it’s safe to say, the recipient’s expectations. 

2. Optimize the preheader text 

The preheader text complements the subject line and can significantly enhance open rates. This snippet, visible next to the subject line, should provide additional insight into the email’s content and entice the reader to open the email. 

The example I provided does exactly that, it teases the email content and narrows down the topic covered in the email. Basically, it shows what value one can expect from the content. 

As a general tip, keep the preheader concise (under 100 characters) and front-load the most important information to capture attention quickly. 

Also, there’s a trick to ensure the preheader always displays as you want it, I already covered it here so click to check out the method. 

3. Above-the-fold content for improved engagement 

Place your main message and call-to-action (CTA) above the fold to maximize engagement. The idea is to utilize this space effectively to ensure key messages and CTAs are visible without scrolling​. Check the Expedia example below (I’m showing just the above-the-fold part of the email). 

Why?

According to the Arizona State University research, users typically spend about 8 seconds reading an email, so capturing attention immediately is crucial. 

4. Clear and concise body copy

Define your brand voice if you haven’t already and write in a conversational tone. Keep the messaging short and to the point, focusing on one action, value proposition, or offer at a time. 

Duolingo nailed it with this bottom-of the funnel nurture email. The copy is highly encouraging and gives users chunks of info that will surely motivate them to go back to the app. You can also find similar email tactics with Grammarly and Spotify. 

As for the general tips, always break the text into short paragraphs or bullet points to improve readability. And do your best to keep the body under 1000 characters. It helps maintain the reader’s attention and ensures the email loads quickly on all devices.

5. Image-to-text ratio

Balance your content with visuals by adhering to an ideal 80/20 text-to-image ratio. This strategy helps avoid spam filters and ensures emails load faster and remain accessible even if images are blocked​. 

The example below from United Sodas of America pushes the envelope a bit with the ratio. But if you look at the code, they cleverly use background color to accent the image, which is just the can. At the same time the design works great to accent the messaging. 

To the above, the top limit for the text-to-image ratio is 60/40 in favor of the text. But, I’d suggest this approach only for ecommerce websites that rely heavily on product imaging. And you need to test such a template thoroughly to ensure it’s deliverable. 

6. A/B test the communication

Experiment with different styles, tones (first, second, or third person), and formatting to see what resonates best with your audience. Testing variations can help refine your approach to maximize engagement and conversion rates.

Keep in mind that you shouldn’t change too many things at the same time because you’ll get inconsistent test results, and ultimately fail to understand what moved the dial. 

7. Personalize the emails  

There are a few different ways to approach email personalization. The methodologies tie in with how you segment your audience. Here, I’ll cover three common approaches and include basic communication templates. 

• #1 Behavioral personalization

Personalize emails based on the recipient’s behavior and interaction with your website and emails. Use data like past purchases, email engagement, and browsing history to tailor content. This could include product recommendations similar to past purchases or content related to articles they’ve shown interest in. 

Subject: Just for You: Products Inspired by Your Recent Browses
Dear [Name],
We noticed you've been exploring [Product Category]. We thought you might like these [Related Products] that other customers love too!

• #2 Demographic personalization

Segment your email list based on demographic information such as age, gender, location, or occupation, and tailor your messages accordingly. This type of personalization helps craft messages that resonate more deeply with the characteristics and preferences of each segment.

Subject: A Special Offer for Our Friends in [City]!
Hi [Name],
As a resident of [City], you're invited to an exclusive event near you! Join us for [Event Details] and enjoy a special discount just for locals.

• #3 Customer lifecycle stage personalization

Customize your emails based on the stage of the customer journey. Whether a subscriber is a new lead, a loyal customer, or somewhere in between, your emails should reflect their relationship with your brand.

For New Subscribers:
Subject: Welcome to [Brand]! Here's What to Expect
Hello [Name],
Thank you for joining our community! Here's what you can look forward to...

For Repeat Customers:
Subject: Thanks for Sticking with Us!
Dear [Name],
As one of our most valued customers, we've got some special perks coming your way...

8. Include a professional email signature

Always finish off with an email signature that reflects your brand and provides additional contact information or links to your social media. This enhances brand visibility and serves as a passive call to action.

HTML email sending best practices

Who is this section for?

It depends on who sends email campaigns. Most likely it would be email marketers or email developers, so if you fall under that “category” here’s some bedtime reading.  

1. Domain and sender authentication

You need to authenticate your sender’s address and domain with DNS records from your email service provider. This involves setting up SPF, DKIM, and DMARC records which authenticate outgoing emails, enhancing deliverability and protecting against spoofing.

I have to stress that it’s not just an example of best practice but a necessity. Google and Yahoo have updated their senders’ policy, making domain authentication a top requirement. In other words, if you don’t authenticate your emails could land in spam. 

We covered the topic in detail in the video below. 

2. Use recognizable sender names

Using a sender name that recipients recognize increases the likelihood of your emails being opened. Options include:

• Just your [Brand Name]
• Relatable employee name + [Brand Name]
• [Brand Name] + [the department it’s coming from]
• [Brand Name] + [type of email being sent]

At Mailtrap, we prefer the option of a relatable employee name + [Brand Name]. This improves trust, open rates, and engagement, particularly that the recipients understand that they’re talking to a real person. 

3. Strictly adhere to email regulations

Follow the rules set by GDPR, CAN-SPAM, and other relevant regulations to ensure compliance and maintain subscriber trust. This protects your senders’ and domain reputation and the brand as a whole. 

Here’s a quick overview of the most relevant regulations for each act. Some requirements overlap, but I kept them as proclaimed to stress their relevance. 

4. Simplify the unsubscription process

This one relates to the above and I’m putting it as a separate point for emphasis. 

CAN-SPAM and GDPR necessitate an easy unsubscription process. Ideally, allow recipients to unsubscribe in two clicks or less to ensure a positive user experience and maintain trust.

If you choose to use Mailtrap Email API/SMTP, which is part of Mailtrap Email Delivery Platform, we allow you to easily set up unsubscribe footer or unsubscribe link. 

5. Keep a clean email list

Besides removing email addresses that result in bounces, periodically remove subscribers who haven’t engaged with your content. This practice helps maintain a high engagement rate and reduces the risk of damaging your sender’s reputation.

As for the bounces, the acceptable rate is 2% or lower. If your bounce rate gets close to ~10%, you’ll need to thoroughly investigate the email infrastructure. Why? Such a high number of hard bounces could indicate your domain or IPs are getting blocked. 

As for the engagement rates, these depend on various factors and I have discussed it at length in this article. 

Lastly, depending on the volume of emails you send, it could be a monthly clean-up, or once every couple of weeks for high-volume senders. 

6. Separate transactional and marketing emails

Send marketing and transactional emails through separate streams to keep the deliverability high on each stream. This goes double if you’re on shared IPs. 

Also, this practice helps analyze the performance of different types of emails more effectively. And if you use Mailtrap Email API/SMTP, you can choose a separate stream right from the start. 

7. Avoid no-reply email addresses

Use a reply-to email address that can accept incoming messages to encourage two-way communication. No-reply addresses can diminish trust and engagement as they may seem uninviting to subscribers.

8. Keep to a consistent email schedule

Establish and adhere to a regular sending schedule to manage expectations and build a routine with your subscribers. Consistency in email frequency helps keep a steady engagement level. Here are some general scheduling guidelines:

• It’s best to send one or two emails per week tops. 
• The most optimal days are Tuesdays and Thursdays. 
• As for the timing the optimal hours are 6 am, 10 am, 2 pm, and 8 pm.   

9. Consider a dedicated IP address

If you’re sending large volumes of emails (100K or more), consider using a dedicated IP address. This allows you to build a sender reputation independently of other email marketers, crucial for high-volume senders.

Wrapping up

Dear email designers, developers, and marketers, thanks for joining me on this detailed journey through the HTML email best practices. I hope the tips will help you create emails that boost engagement through the roof. 

And I’d like to share one tip for the road (at the risk of sounding preachy)…

Remember the importance of ethical marketing practices and respecting your audience’s privacy and preferences. If we build emails that are not only effective but also principled, we create a better environment for both marketers and consumers alike. 

Stay ethical, stay compliant, and continue to innovate within those boundaries.