And let’s face it, you don’t want your HTML web and email designs to look messy or out of alignment simply because of your space formatting.

The secret ingredient that makes it possible to insert and control spaces in HTML is the character entity  . And in this tutorial, I will explain:

• What exactly is  ?
• How to use nbsp
• When not to use  
• Spaces in HTML emails

To wrap things up, I’ll also show you how to test emails and ensure your code is flawless.

What are HTML entities?

Thanks to the modern UTF-8 encoding, many browsers render symbols correctly. However, for reserved characters such as <, >, &,  we need to use HTML entities or strings used to represent many reserved and invisible characters in HTML.

For example, if you were to use ‘>’ (greater than) in the code, the browser would interpret it as HTML and treat it as the closing of an HTML tag. 

So, to make it clear to each browser what it should render, we use HTML character entities, and wrap them in an ampersand (&) at the beginning and a semicolon (;) at the end. For ‘>’, or greater than, we would use the > HTML entity.

You can also use them for symbols not available on your keyboard, such as © – © or ® – ®.

Here are some of the most common characters:

Tip: If you want to learn about other HTML entities, check out this list. 👀

What exactly is nbsp?

  stands for non-breaking space, meaning that strings separated by this entity will not be separated and put into separate lines. It is actually one of the most frequently used HTML entities.

For example, let’s look at the following sentence:

<p> The store is open from 9 AM to 12 PM</p>

On bigger screens, this sentence would look like this:

However, the issue comes with smaller screens, as, due to resolution or word wrap, for instance, it could be cut into two parts, like this:

To avoid such awkward collapses and text heading into the next line, we avoid ‘normal space’ and use the &nbsp;entity to glue ‘12’ and ‘PM’ to each other, just like so:

<p> The store is open from 9 AM to 12 PM</p>

Another, less common use for   is for creating multiple spaces. If you were to use the regular ‘ ‘ space character multiple times, a web browser would always parse it down to just one single space.

So, the following code:

<p> I need more         space. </p>

would still be rendered as:

However, if you code it like this:

<p> I need more           space. </p>

you would get the desired result:

Tip: For playing around with &nbsp; and seeing how it works in HTML, I recommend CodePen 🖊. And if you want to see how your HTML code is rendered on mobile devices, simply right-click on the page → Inspect, and click on the button left to Elements.

When should I use &nbsp instead of a regular space? 

Typically, you should use   instead of a regular space in the following cases:

• In dates – E.g. Independence Day is celebrated on 4 July.

<p>Independence Day is celebrated on 4 July.</p>

• In names – E.g. Awards were given to Johnny Depp and Samuel L. Jackson.

<p>Awards were given to Johnny Depp and Samuel L. Jackson.</p>

• In speed marks – E.g. The car can reach speeds of 120 km/h.

<p>The car can reach speeds of 120 km/h.</p>

• Between numbers and units – E.g. The weight of the package is 5kg.

<p>The weight of the package is 5 kg.</p>

• After abbreviations – E.g. Me and Mrs. Jones.

<p>Me and Mrs. Jones.</p>

• In paragraph signs and numbers – E.g. Refer to § 10 for detailed information.

<p>Refer to § 10 for detailed information.</p>

• In software names – E.g. Do you use Adobe Photoshop and Microsoft Word?

<p>Do you use Adobe Photoshop and Microsoft Word?</p>

How to use nbsp

So far, we’ve covered the basics of  . But, let’s dive deeper!

• HTML elements

I’ve shown you the use of   in <p> blocks, but it’s important to note that it can be used in all HTML elements that accept text content. This includes <span>, <a>, <b>, <i>, <div>.

For example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

• CSS styling

When it comes to CSS styling,   behaves like your regular character. This means that it inherits the font size, weight, color, and family of the parent element, occupies a fixed width, and so on. Most importantly, it affects text alignment, padding, and positioning, like any other character would.

•   and special characters

Lastly, you should know that you can use   alongside special characters like ‘$’, or next to other HTML entities.

E.g. The price of this beer is $5.

<p>The price of this beer is $ 5.</p>

nbsp in WordPress

Now, it’s also important to go over   in WordPress, as there are multiple ways of going about it. Namely:

• WordPress text editors

The easiest way to insert non-breaking space in WordPress would be to use a text editor that supports  . Personally, I use the Gutenberg Page Building Toolkit, with which you only need to press Option+Space on Mac or Ctrl+Shift+Space on Windows to insert non-breaking space.

Or, simply click on the Nonbreaking space option in the toolbar, like so:

I also recommend wp-Typography or Advanced Editor Tools, two other popular text editors for WP that support  .  

• Default HTML editor

Using   in WordPress is a double-edged sword when you’re using the default HTML editor, which doesn’t offer the convenient shortcuts or the NBSP option in the toolbar.

The only way to do it is to insert   right into the editor. But, if your theme doesn’t have CSS rules specifying how it should be rendered (and many don’t), you’ll probably see a raw code displayed on the page.

• Using a shortcode

A more reliable solution may be a simple shortcode defined in the functions.php file of your theme:

//[nbsp] shortcode
function nbsp_shortcode( $atts, $content = null ) {
$content = '&nbsp';
return $content;
}

add_shortcode( 'nbsp', 'nbsp_shortcode' );

Then, whenever you need a non-breaking space, simply type in [nbsp] instead of   in your content.

Also, kudos to @bncpeter for the code. 🙏

What are the common pitfalls or mistakes when using nbsp?

Here are some of the most common issues, mistakes, and myths regarding   I’ve found all over the web while preparing this article: 

• &nbsp; does not impact SEO – except if you overuse it. By overuse I mean ditch the regular space for &nbsp; throughout your whole website, which can make it hard for search engines to parse content.
• Most email clients render   correctly – except, older versions of Microsoft Outlook (2007-2019), which uses the Microsoft Word engine to render emails and Outlook.com and Outlook Mobile apps, which use Webkit-based engines.
  • If you’re struggling with Outlook, our article on fixing Outlook rendering issues may be of help. ⚒️
•   won’t impact the layout of your webpage/email – unless, that is, you copy-paste it from word processors (e.g., Microsoft Word). This is the only time   can cause anomalies, such as unexpected new line breaks.
  • For tech-savvy readers, I recommend When A Space Is Not A Space, an excellent article on the topic written by Steve from Big Mess o’ Wires (BMOW). 
• All modern browsers support   – however, you should ensure your character encoding is consistent across all parts of your web app or website to avoid mojibake (garbled text). When this happens, your   might show up as “”.
  • Again, you can read more about this on BMOW in an article named Non-Breaking Spaces and UTF-8 Madness.
• There isn’t a limit to how many   you can use in a row – but, excessive use can cause readability issues. And let’s face it, do you really want your code to look like this?

<p> Price of this beer:            wait for it...         is 5$.</p>

When not to use nbsp?

The most common cases when you shouldn’t use   include:

• Extra spaces in the code

You’ve got to admit, the code above is not very readable. If you want to have a less clustered code, you can use   alternatives such as   for 2 non-breaking spaces or   if you want 4-non breaking spaces.

And yes, you can combine both   and  . Also, here’s a list of available white space characters you can use as   alternatives.

• Spacing between images in HTML

  works only with words and doesn’t have a visible effect when placed between media of any type, including images. Break, or <br> is a viable option if you want to separate two or more vertically aligned images, but the gap between elements separated with <br> may vary. 

So, we’re left with paddings and/or margins as the most reliable approach. Here’s an example of how you can use margins to create spacing above, below, on the left, and on the right side of an image:

<img src="(image1.jpg)" style="margin: 0px 0px 0px 0px;" >

• Spaces in HTML emails 

Email development, in general, is quite different from web and front-end development. All CSS goes inline. Buttons work differently. And, worst of all, everything is built on tables. 

The tables, in particular, make using   as well as its alternatives for spaces in HTML impractical. So, we have to resort to different approaches, which include cellpadding, empty cells, margins, etc.

Now, let me show you how to use them! ⚙️

How to create spaces in HTML emails

For showcasing how these &nbsp; alternatives look in emails, I’ve used Mailtrap Email Sandbox, which allowed me to see how my HTML emails are rendered.

Cellpadding

Cellpadding is an HTML attribute used to specify the distance in pixels between the cell content and the wall. Nearly all email clients support tables and recognize the cellpadding attribute and position the content according to its value. 

Here’s how you could use cellpadding in your CSS template:

<!-- Example 2: cellpadding="10" -->
                            <h2>Example 2: cellpadding="10"</h2>
                            <table cellpadding="10" cellspacing="0" border="1" width="100%">
                                <tr>
                                    <td style="background-color: #f0f0f0;">Content</td>
                                </tr>
                            </table>

And here’s what it would look like when rendered by an email client:

Drawback: As cellpadding is an HTML attribute, CSS can’t override it, particularly with its media queries. However, keep in mind that modern email designs favor CSS-based spacing over HTML attributes due to better control, flexibility, and responsiveness.

Padding

Padding, on the other hand, is a CSS attribute that can be freely overridden. It’s incredibly helpful when designing HTML emails for both web and mobile devices. In such a case, it’s always a good idea to use media queries to specify individual paddings for either version of a message rather than rely on a one-size-fits-all approach.

The syntax of CSS padding is very straightforward style="padding:15px;", as well as implementing it in the code:

<!-- Example 2: padding="10" -->
                            <h2>Example 2: padding="10"</h2>
                            <table cellpadding="0" cellspacing="0" border="1" width="100%">
                                <tr>
                                    <td style="background-color: #f0f0f0; padding: 10px;">Content</td>
                                </tr>
                            </table>

Rendered by the email client:

Note: As the approach lacks any significant drawbacks, it’s arguably the best way to add spacing, especially in table cells.

Empty cells

Normally, <td> tags define typical data cells. When left empty, they create invisible cells that can be used to create spacing. There are several reasons why this is a rarely used approach.

First, cells defined this way don’t always retain their height. Some clients will respect them; others will omit the spacing created this way. There’s a high probability that a carefully typed in <td> will result in no spacing at all, making your copy potentially unreadable.

Secondly, using them requires building entire tables that you potentially wouldn’t use otherwise. And, if you’re coding for mobile (and who isn’t?), you’ll need to write new classes to control the invisible cells’ height and width – all of these, with no guarantee that the spacing will render in the first place.

What’s more, it just looks clunky in the actual code:

<!-- Example 2: Using Multiple Empty <td> Cells -->
<h2>Example 2: Using Multiple <td> Cells</h2>
<table cellspacing="0" border="1" width="100%">
  <tr>
    <td style="background-color: #f0f0f0;">
      Content
    </td>
    <td></td> <!-- Empty <td> for spacing -->
    <td></td> <!-- Empty <td> for spacing -->
    <td></td> <!-- Empty <td> for spacing -->
    <td style="background-color: #f0f0f0;">
      Content
    </td>
  </tr>
</table>

Not clunky enough for you? Here’s an email client rendition:

Simply put, I would recommend staying away from empty cells if you want to create spaces in emails. I just wanted to show you an example of what not to do.

Margin

Moving on, we have margin, a CSS element that is, in a way, similar to padding. The difference between the two is that while padding adds spacing inside a cell, margin does so outside it. The example syntax of margin looks as follows style="margin:10px;".

And here it is in a code snippet:

<!-- Example 2: margin="10" -->
<h2>Example 2: margin="10"</h2>
<table cellspacing="0" border="1" width="100%">
  <tr>
    <td style="background-color: #f0f0f0;">
      <div style="margin: 10px;">Content</div>
    </td>
  </tr>
</table>

Looks clean, doesn’t it? Check it out all rendered:

Drawback: Although both the code and the rendition of it look clean, in email development, margins fall short because of a lack of standards and inconsistencies between email clients.

Break

The <br> tag is a popular way of creating spaces in HTML. While it’s handy in blog posts such as this one, there’s a familiar problem that surfaces when trying to use it in emails. Again, email clients treat it very differently. Some render wider gaps; some opt for more narrow spaces. As a result, it’s virtually impossible to predict how an email will look on the recipient’s end.

Because of that, the <br> tag is only recommended when creating breaks between text.

Testing your HTML email

Regardless of how you decide to implement spaces in HTML emails, without testing them beforehand, you won’t be able to know whether they’ll be rendered properly by email clients or how the formatting and alignment will end up looking — there’s a lot of room for headache. 🤕

What’s more, your emails might be caught in the spam filters and miss the recipients’ main inbox folder. Or, even worse, your domain might be blacklisted. All of this without you knowing it.

My go-to solution for all of the above is Email Sandbox, which I’ve used for examples in the previous chapter.

With Email Sandbox, I was able to see how my emails would be rendered on different devices, including mobile phones, tablets, and laptops/desktops.

For example, here’s an email I sent to my Mailtrap Email Sandbox inbox to play around with  :

And if I see that there’s something wrong with the layout or formatting, I can simply open my email in source HTML, and easily fix it.

Similarly, I can use the HTML Check feature to make sure my email and &nbsp; is rendered correctly, not only by all clients but across all browsers:

And once you’ve made sure your HTML code looks good, you can then check your spam score. If you keep it below 5, you proactively prevent a significant amount of potential email deliverability issues that may arise in production.

And if you’ve settled on a design, you can design, edit, and host your email templates on Mailtrap Email Delivery Platform. Then, easily test them with our API before you move to production once everything’s ready for sending.

Lastly, Mailtrap Email Sandbox offers a free plan you can use indefinitely for a limited amount of emails every month, so be sure to give it a go! And, of course, you can set it all up in ~5 minutes, check it out. ⬇️

Wrapping up

As you can see, using &nbsp; is generally a good practice; just don’t overuse it or try to create spaces in emails with it.

And if you’re interested in diving deeper into the topic, then be sure to check out our blog, where you can read HTML-related articles such as:

• HTML Email Explained
• How to develop HTML email template
• HTML Email Best Practices
• Email CSS: Do’s and Don’ts
• HTML vs Plain Text Email

Rendering issues? Check. 

CSS rules that work everywhere except for that one client (PSST, it’s Microsoft Outlook)? Double-check. 

And when you thought there was no good news, I’ll show you the way out of the HTML email template development rabbit hole. 

After hours of research, testing, and SME talks, I give you the most up-to-date guide on:

• HTML email development challenges
• How to develop an HTML email template (step-by-step)

Note: This guide is primarily geared toward developers and email designers who want to create their own HTML templates. However, it could also help email marketing professionals understand the channel’s limitations. 

If you’re interested in the basics, check out this guide to HTML emails instead.

HTML email development challenges

I’ll break down the key hurdles and explore strategies to overcome them so that your email campaigns are highly deliverable and accessible. 

Where possible, I’ll include exemplary HTML code to give you the proper context. 

Inconsistent rendering across email clients

Outlook’s infamous use of Microsoft Word as a rendering engine often leads to broken designs, while modern webmail clients like Gmail and Apple Mail tend to handle HTML and CSS more predictably. 

What to do?

• Stick to tested email design principles: Use simple layouts and avoid advanced CSS features unless fallback designs are in place.
• Test extensively: Add testing tools to your workflow to check the support of your email template across various clients.

Limited CSS support

HTML emails support only a subset of CSS, making modern web design techniques unreliable. For instance, some clients strip out external stylesheets and ignore advanced CSS properties.

What to do?

• Use inline styles: This ensures compatibility across clients.
• Leverage CSS inlining tools: Automate the process with tools like Premailer.io to avoid errors.

Here’s an example of inline styling, ensuring that essential properties like padding, font family, and colors are consistently rendered across different email clients.

<td style="background-color: #f7f7f7; padding: 20px; font-family: Arial, sans-serif; font-size: 16px; color: #333;">
  Content goes here
</td>

Handling responsive email template

Responsive emails need to adapt seamlessly to varying screen sizes and resolutions. However, inconsistent support for media queries can complicate this.

What to do?

• Use media queries wisely: Stick to supported properties and test across devices.
• Explore scalable and fluid layouts: Use percentage-based sizing for greater flexibility.
• Stay updated: Gmail, for example, has supported media queries since 2016, and the same is true for Apple Mail. But this isn’t a rule, and many clients still don’t support them, so you have to keep an eye on it. 

Check the example of a media query that ensures the email adapts to smaller screens while maintaining a clean layout.

<style>
  @media only screen and (max-width: 600px) {
    .email-container {
      width: 100% !important;
    }
    .content-block {
      padding: 10px !important;
    }
  }
</style>

Handling different sizes

As mobile users begin to dominate the email space, you need to ensure everything looks good on Apple and Android devices. 

What to do?

• When designing emails, plan for breakpoints: Common ones include 480 px (mobile) and 600 px (tablet).
• (Reminder) Use percentage-based sizing: This ensures scalability for various screen dimensions.

Use of tables for layout

Okay, I can see you frowning and wondering if we’re back in the 90s. However, tables are still the most reliable method for consistent email rendering with different clients due to the lack of commonly accepted standards. 

What to do?

• Nest tables strategically: Use a core table for the template and a content table for email elements.
• Set widths carefully: 600 px is the standard width but experiment with up to 700 px for larger screens.
• Avoid ‘colspan’ and ‘rowspan’: These can lead to rendering issues in some clients.

Here’s an example of a table structure with a consistent layout across different clients. 

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
  <tr>
    <td align="center" style="max-width: 600px; width: 100%; padding: 20px; font-family: Arial, sans-serif;">
      <!-- Content Here -->
    </td>
  </tr>
</table>

Image blocking

Many email clients block images by default, which can leave emails looking incomplete or unprofessional.

What to do?

• Use meaningful alt text: Describe images so recipients can understand their context.
• Don’t rely on images for key content: Ensure critical information is also presented as text.
• Embed images appropriately: Use CID attachments or linked images based on your needs.

Here’s a quick example with an alt attribute to ensure you retain the meaning and messaging even if the image gets blocked. 

<img src="https://example.com/image.jpg" alt="Descriptive text here" width="300" height="200" style="display: block; margin: auto;">

Font compatibility

Custom fonts often fail to render correctly, forcing developers to use fallback options. More interestingly, Google’s web fonts might fail with Gmail. 

What to do?

• Stick to web-safe fonts: Use widely supported options like Arial, Times New Roman, or Georgia.
• Define fallbacks: Specify backup fonts in your CSS to maintain design consistency.

Check the example below with a font fallback version to ensure readability. 

<td style="font-family: 'Arial', 'Helvetica', sans-serif; font-size: 16px; color: #333;">
  Fallback font example
</td>

Inline styles requirement

As indicated, inline styles are a must for email development, but managing them can be tedious.

What to do?

• Automate the process: Use CSS inlining tools to simplify styling.
• Reinforce styles with attributes: Choose HTML attributes over CSS styles for better compatibility.

Note: I haven’t suggested any CSS inlining tools because there’s no consensus on which one or ones would be the best. The choice depends on the current tech stack and dev logic. But I can suggest avoiding anything that might leverage JavaScript.

Media query limitations

Earlier, I mentioned that some clients and devices often don’t support media queries, resulting in layout breaks.

What to do?

• Fallback designs: Ensure layouts are functional even without media queries. Always include a plain text email in your template. 
• Progressive enhancement: Use queries to add extra polish for clients that support them.

(Reminder) Test across multiple devices and clients 

Testing is among the most critical steps, so I dedicated a whole section to it (you can jump to it by clicking on the link). Here I want to give you a strategic overview. 

What to do?

• Adopt iterative testing: Validate templates at each stage – structure, content, and styling.
• Use testing tools: Services like Email Sandbox streamline testing for different devices and email clients.

Accessibility considerations

Making emails accessible means improving engagement for all users, including those who use voice assistants and screen readers. 

What to do?

• Use semantic HTML: Structure content logically with proper headings and roles.
• Avoid text in images: Critical information should always be text-based.

Tracking and analytics

Tracking opens and clicks can conflict with privacy concerns or email client restrictions.

What to do?

• Use lightweight tracking pixels: Minimize the risk of being flagged as spam.
• Be transparent: Inform users about tracking in your privacy policy.

Develop HTML email template

I assume you have set up the project environment and code editor and are ready to design emails. 

Note that my focus is on deliverability and accessibility. I’ll show you how to develop a basic template that would work and display well with all clients. 

Now, even if you’re working with a seemingly complex design, the same rules apply, and you’ll need to use the tips and tricks covered here to ensure consistency across devices and email clients. And, of course, all code snippets are customizable to your needs. 

Step 1: Define DOCTYPE and language in the HTML file

The DOCTYPE sets the foundation for proper rendering. Choosing between HTML5 and XHTML depends on your preference, but HTML5 is generally recommended for modern email development.

Exemplary snippet:

<!-- HTML5 DOCTYPE -->
<!doctype html>
<html lang="en">
<head>
  <title>Responsive Email</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!-- Email content here -->
</body>
</html>

What matters?

• <!doctype html> ensures modern rendering modes. 
• The lang=”en” attribute helps with accessibility and search engines. 

Step 2: Build the header section

The header includes meta tags that optimize your email for responsive design and proper character encoding.

Key components:

• <meta http-equiv=”Content-Type”>: this specifies the character encoding. 
• <meta name=”viewport”>: this makes your email responsive. 
• CSS styling: inline styles go here to ensure compatibility. 

Exemplary snippet: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome Email</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    .email-container {
      width: 100%;
      max-width: 600px;
      margin: auto;
    }
  </style>
</head>
<body>
  <!-- Email content goes here -->
  <div class="email-container">
    <!-- Content -->
  </div>
</body>
</html>

Step 3: Design the body section

The body contains the actual email layout. Tables provide consistent rendering across email clients.

Key elements:

• A core table for the email container.
• A content table for internal elements.

Exemplary snippet:

<body>
<div style=”text-align: center;”>
    <!-- Core email container -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f7f7f7">
      <tr>
        <td align="center">
          <!-- Content table -->
          <table width="600" border="0" cellspacing="0" cellpadding="0" class="email-container">
            <tr>
              <td style="padding: 20px; background-color: #ffffff;">
                <!-- Header Section -->
                <h1>Welcome to Our Newsletter!</h1>
              </td>
            </tr>
            <!-- Additional rows go here -->
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

Step 4: Add email content

Content includes text, images, buttons, and/or GIFs (other video formats don’t work well). Follow these best practices:

• Use separate tables for buttons.
• Avoid embedding JavaScript or unsupported elements.
• Ensure images have meaningful alt text.

Exemplary snippet (with content and a button):

<!-- Content Block -->
<tr>
  <td style="padding: 15px; font-size: 16px; color: #333;">
    Hello! We're excited to have you on board. Here's what you can expect from us.
  </td>
</tr>
<!-- Button Block -->
<tr>
  <td align="center">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="background-color: #007BFF; padding: 10px 20px; border-radius: 5px;">
          <a href="https://example.com" style="color: #ffffff; text-decoration: none; font-size: 16px;">Get Started</a>
        </td>
      </tr>
    </table>
  </td>
</tr>

Step 5: Create the footer section

The footer ensures compliance with regulations like CAN-SPAM and GDPR. It’s also an opportunity to add social media links or additional contact information.

Exemplary snippet:

<!-- Footer Section -->
<tr>
  <td style="padding: 20px; font-size: 12px; text-align: center; color: #999;">
    You received this email because you signed up for updates. 
    <br> 
    <a href="https://example.com/unsubscribe" style="color: #007BFF; text-decoration: none;">Unsubscribe</a> | 
    <a href="https://example.com/privacy-policy" style="color: #007BFF; text-decoration: none;">Privacy Policy</a> 
    <br><br>
    Follow us: 
    <a href="https://twitter.com" style="color: #007BFF; text-decoration: none;">Twitter</a> | 
    <a href="https://facebook.com" style="color: #007BFF; text-decoration: none;">Facebook</a>
  </td>
</tr>

Why does this matter?

• Including an unsubscribe link ensures compliance and builds trust.
• Social links help boost engagement.

Check our advanced tutorial on HTML entities ➡️ &nbsp and HTML Space Challenges and Tricks 

Bonus tip: Using an HTML email editor

An HTML email editor can speed up the template creation process. I’ll be using Mailtrap’s editor since it features a side-by-side preview window that allows you to see what the template is going to look like while you code. 

Here’s how to use it. 

1. Click “Templates” in the menu on the left, then the “Create New Template” button. 

2. Choose one of your domains from the drop-down, and type the “Template name”, “Subject”, and “Category”, then hit “Continue” to move to the next step. 

3. Next, you can choose between the Drag & Drop Editor, and the HTML Editor. Here, I’ll be using the HTML Editor. 

4. Code the template and preview it in the left-hand side pane. Note that it allows you to switch between desktop and mobile previews. 

5. Once you’re happy with the design, hit the “Finish” button. You also have the option to “Send Test” email. 

Wrapping up

Even if you use frameworks or prebuilt templates, knowing how HTML template development works “under the hood” empowers you to troubleshoot rendering issues and make precise customizations. 

To excel, don’t just stop at mastering the essentials. Test your emails rigorously, experiment with new design approaches, and stay informed about email client updates. By doing so, you’ll not only create emails that are visually appealing but also accessible, deliverable, and impactful.

Further reading:

• 7 Best Email Preview and Rendering Tools 
• How to Test Emails in Different Clients 

Choosing HTML vs plain text email seems exactly like that. I can only imagine marketers, salespeople, and the rest of the bunch, plucking hairs from their heads saying: “HTML, HTML not, HTML, plain text not…”. 

In this article, I’ll offer:

• A data overview of HTML vs plain text (to help with an informed choice)
• A snapshot of HTML and plain text (key pros and cons to keep in mind)
• Detailed explanation for each (HTML – Plain text)
• Tips and tricks throughout to keep your hair in place

So, let’s kick off with some fun numbers to get your head spinning before the definitions, best-fors, and the rest. 

HTML vs plain text email statistics

Finding reliable research into the performance of these email types/formats, was like playing darts with spaghetti. But, the grand revelations came from Litmus and HubSpot, though, I’ll also offer Mailtrap insights mixed in with email marketing stats from other resources. 

The stats below are geared for the marketing and sales crowds. And the idea is to help you with the logic of plotting out email and drip campaigns. 

The curious case of Litmus

• Litmus ran the test on their webinar program targeting existing customers and non-customers. (Note: Customers vs non-customers is the critical vertical to keep in mind)

• The main KPI were webinar sign-ups and they split the test 50/50. It meant, 50% of customers got an HTML email and 50% got the plain text version. The same logic was applied to the non-customers. 

And the results? 

• ~ 60% of the conversions from existing customers came from the plain text version of the email. To that, other metrics such as opens and clicks were also higher with that type of email. 

• ~ 49% of the conversions from non-customers came from the plain text version. And, interestingly, it had a higher open rate, but a lower engagement (click) rate. 

• Also, Litmus ran a bunch of A/B tests to check if the email message copy affected the results, only to confirm the original findings. 

What can you get from this?

1. To non-customers, the email format doesn’t really matter. 

2. Both plain text and the HTML version have their place in email programs. 

3. Your existing customers are likely to engage better with plain text emails. And we, at Mailtrap, can confirm that. The reason is the more personal feel of a plain text email. (It’s like someone’s talking directly to you instead of sending a catch-all template.)

Now, the story may seem simple – send plain text to existing customers and HTML-based emails to non-customers, or send plain text to all. 

However, it’s not that easy. 

Remember that Litmus, like Mailtrap, is a SaaS business, meaning that its audience might not behave the same as an ecommerce avatar where eye-catching HTML email templates could play a significant role in conversions. 

Therefore, it’s best to check the industry-based data across different verticals to help you set realistic expectations about your campaigns. 

More data to keep your hair in place 

Here, I’m checking the averages with metrics such as deliverability, open rates, and clicks. Then, cross-referencing that by industries and sources (Mailtrap and competitors included). And I’m wrapping up with user preferences based on age groups. 

Important Notes: 

• The data varies widely and that’s to be expected given the target audiences and this doesn’t, by any means, reflect email providers performance. 

• The data are for marketing and bulk emails, transactional messages typically have much higher numbers. I won’t go into transactional email details, but only briefly mention them where necessary. 

• The data includes HTML, plain text, MIME multipart_alternative (both plain text and HTML format in one email), and hybrid emails (simple mostly text-based HTML). The latter two fall under tips and tricks, I’ll talk more about them later, and note that MIME multipart_alternative emails are typically beyond the scope of marketers. 

Beyond this point comes the head-spinning part I promised earlier. 

Email deliverability

• According to Statista, around 45.6% of all emails get identified as spam. And yes, this involves both HTML and plain text and everything in between. The number is huge, but also on the decline over a 12-year period. 

• Circumstantial evidence shows that overly complex HTML emails typically land in spam. And it’s true. But, it’s hard to put your finger on a number since more than a few other factors determine inbox placement (e.i. the email service provider you chose, domain health, etc.).  

• Based on HubSpot testing, plain text and HTML emails may have the same deliverability rates, but adding more HTML elements (like GIFs and images) significantly reduces open rates. Here are the numbers:

1. Opens drop 37% for a hybrid with a GIF vs plain text email (same copy)
2. Opens drop 25% for a hybrid with an image vs plain text email (same copy)
3. Opens drop 23% for heavy email template vs hybrid email (same copy)

To get a more complete idea of how to improve your deliverability, check our cheatsheet playlist below.

Open rates by industry

• Retail and e-commerce businesses experience an average open rate of 35.90%​​.

• Educational sectors report a higher open rate at 37.35%, possibly due to the direct and personal nature of communication deemed important by recipients​.

• Industries like finance and manufacturing have lower open rates of 26.48% and 32.03%, respectively, which might reflect less engagement with promotional content​​.

Click-through rates (CTR) by ESP

• MailerLite reports a CTR of 3.01%​​.

• Constant Contact and GetResponse have CTRs of around 2% and 2.89%, respectively​.

• At Mailtrap, CTRs range from ~1.8% to ~6.7%, with averages of ~3% where product updates and follow-up emails are among the top performers. (data for HTML emails)   

Interesting Fact: Consulting services see remarkably high CTRs up to 25%, suggesting targeted content in these fields is very effective​​.

User preferences

• Despite the rich features of HTML emails, many users prefer the simplicity and directness of plain text emails. For example, significant portions of consumers across all demographic groups, including 74% of Baby Boomers and 60% of Gen Z, find email to be the most personal communication channel, which potentially influences their preference for less complex email designs​​.

• Based on the GetResponse Benchmark report, engagement rates can vary by the timing and frequency of emails. Optimal sending times are early morning (4-6 AM) and late afternoon (5-7 PM), which align with the start and end of the average workday, enhancing engagement​​. (applies to both formats)

Lastly, here’s a quick breakdown of the most representative data in a table. 

HTML vs plain-text email: pros and cons

Check the overview of both email formats based on pros and cons. I’ll also cover best practices here. These are like general guidelines you as a marketer should keep close at hand. 

HTML emails:

• Visuals and rich content: HTML emails allow for the inclusion of images, CSS styles, dynamic content, and other multimedia elements. These can make them more visually appealing and engaging (depending on the industry).

• Compatibility issues: Not all email clients render HTML content consistently, which can affect how your email appears to the recipient. This inconsistency can sometimes lead to broken layouts or unviewable content​​. This goes double for mobile devices and clients like Gmail, Outlook, and Apple Mail. 

• Tracking and analytics: HTML emails enable detailed tracking of opens, clicks, and other interactions through embedded tracking pixels and coded links, which can provide valuable insights for optimizing campaigns​​.

Plain-text emails:

• High deliverability: Plain-text emails are less likely to end up in the spam folder and generally have higher deliverability rates because they contain no hidden code that spammers could exploit​​.

• Simplicity and compatibility: These emails consist solely of text and are stripped of any formatting, which ensures they work across all email clients and devices without issues​​.

• Personal feel: Due to their simplicity, plain-text emails can feel more personal and direct, potentially leading to better engagement in scenarios where a straightforward message is preferred​​.

Best practices for email marketers and marketers in general:

I’d advise you to understand the audience’s preferences and the purpose of your email when choosing between HTML and plain text. 

For example, a marketing campaign showcasing a new product might benefit from the rich visual capabilities of HTML, especially if it’s a physical or interactive product. Whereas, a product update/feature announcement might be more suited to a plain text format for clarity and universal compatibility​​.

To stress, the choice between HTML and plain text should be guided by the specific goals of your email campaign, the nature of your content, and your audience’s preferences.

However, I’d also suggest you try MIME multipart_alternartive and hybrid emails. Just to keep in mind, MIME multipart_alternartive is for email developers, not marketers. However, I’d like you to understand the overarching principle so you can request it from the dev. 

So, what are they?

• MIME multipart_alternartive –  is a content type that appears in the server-side code of the email. It allows you to send both the HTML and plain text email to a recipient and, of course, they don’t get both at the same time. Instead, the plain text version of the email serves as the fallback if for some reason the recipient can’t get the HTML. Check our templates and code examples featuring this trick. 

• Hybrid emails – are emails with only basic HTML. They retain much of the functionality of typical HTML emails but are mostly text-based and usually only have CTA buttons as an interactive element. 

HTML email

By definition, HTML (HyperText Markup Language) emails are sophisticated versions of standard emails that include formatting, styles, links, and multimedia content, making them resemble web pages more than traditional text messages. 

Use cases:

1. Marketing campaigns: Extensively used in marketing to showcase products with vibrant images, animations, and even embedded videos to capture the recipient’s attention.

2. Customer engagement: By incorporating interactive elements like quizzes, polls, or embedded videos, HTML emails can transform a passive reading experience into an engaging interaction, increasing the likelihood of customer interaction and conversion​​. (Remember, you need to be sure these are deliverable and that your audience responds well to them)

3. Transactional communications: For updates like shipping notifications or order confirmations, HTML emails can include real-time tracking and interactive elements, providing a seamless experience for customers​​. But note that these are far from marketing emails, click here to check the key differences. 

Benefits:

• Personalization and segmentation: Advanced tools and different AI tools can help tailor HTML emails to the preferences and behaviors of individual users, significantly increasing the relevance and effectiveness of the campaigns​​. And, of course, we got a tutorial on how to do it.

• Brand consistency: HTML emails allow you to incorporate brand elements like logos, fonts, and colors, and a custom email signature, ensuring that every communication reinforces the brand identity​.

• Analytics and optimization: The ability to track interactions through embedded pixels and links in HTML emails provides valuable insights, allowing marketers to refine strategies and improve the effectiveness of their email campaigns​​.

As indicated, incorporating HTML emails into your digital marketing strategy can provide a more dynamic and visually appealing way to communicate with your audience. 

But to stress, you need to be sure that’s what your audience desires. 

Plain-text email

By now, it’s not hard to guess that a plain text email is a straightforward form of electronic communication that consists only of text without any formatting or multimedia elements such as images, hyperlinks, or HTML code. 

This simplicity ensures the email is universally compatible with all email clients and devices, presenting the message exactly as typed, without any layout or style variations​​.

Use cases

1. Transactional updates: Plain text is ideal for transactional emails like order confirmations, where clarity and deliverability are more important than visual design.

2. Personalized communication: They are often used for personal, one-to-one communications where a straightforward and honest tone is prioritized over flashy content​.

3. Accessibility: Given their compatibility with all email clients and simplicity, they are excellent for reaching audiences who may use older technology or prefer less complex emails​​. Also, since plain text emails are universally accessible, they accompany HTML emails as a fallback variant. 

Benefits

• Higher deliverability: Plain text emails are less likely to be filtered into junk or promotional folders. 
• Simplicity and focus: Without the distractions of graphics or layout designs, recipients can focus purely on the message, which can be especially effective for conveying urgent or personal content​. 
• Greater open rates: As discussed earlier, numerous studies and tests have shown that plain text emails generally achieve higher open rates. 
• Enhanced click-through rates: As a reminder – despite their lack of visual and interactive elements, plain text emails often record higher click-through rates. 

The bottom line is that you shouldn’t hesitate to incorporate plain text emails into your marketing strategy. Your subscribers may respond better to them, the email format won’t affect marketing automation, and they’re proven to be particularly effective for specific contexts where the message’s clarity and deliverability are more critical than its visual appeal.

Wrapping up

In the HTML vs plain text battle, it may seem that the plain text won. At least from the marketers’ perspective, these appear to drive more engagement and conversions. 

Indeed, I’ve given you a bunch of data to support this claim, yet I wouldn’t say it’s a hard-and-fast rule. 

Simply, email campaigns are an ever-evolving job and sometimes they appear to have a mind of its own. Therefore, you need to continuously analyze the audience engagement metrics to tailor the email strategy. 

And your goal should always be to ensure the strategy aligns with user expectations to maximize campaign effectiveness.

Or, do they? 🤔 They may, but not successfully! 

Fail to understand HTML and you’ll get: 

• Undeliverable emails 
• Broken templates 
• Wasted budgets
• Poor brand image 

I created this guide distilling the knowledge of 20+ experts from Mailtrap (myself included) to help you avoid failure. 

So my dear email marketers, designers, QAs and email developers let’s dive in. 

What is an HTML email?

HTML email is a type of email that uses HyperText Markup Language (HTML) to create visually engaging messages with rich content, such as images, links, and formatted text.

This email type is essential, as it enables the creation of visually appealing messages. All with the goal of improving user experience, engagement, and conversions. 

But, HTML emails are not just about aesthetics.  

From email developers’ perspective, they’re powerful tools to:

• Create responsive messages that perform well across different devices.  
• Do advanced tracking and analytics of various email elements. 
• Deal better with mass mailing and interactions with databases. (For instance, share work-hour data from a MySQL database with your colleagues.) 
• Incorporate interactive features such as accordions, carousels, and forms. 
• Ensure emails are accessible to users with disabilities by using semantic HTML tags and ARIA attributes.  

So, knowing the fundamentals of HTML email coding is key to avoiding issues like undeliverable emails and broken templates.

HTML email vs plain-text email

The debate between HTML emails and plain-text emails centers around functionality versus simplicity. 

As mentioned, HTML emails offer enhanced design capabilities with support for images, buttons, and various styles, making them perfect for marketing and promotional content.

However, HTML emails can be more complex to design and might not display consistently across all email clients, potentially landing in spam folders more frequently.

In contrast, plain-text emails excel in simplicity and reliability. They are universally readable, quick to load, and highly accessible, particularly for users with visual impairments who rely on screen readers. 

Here’s a quick breakdown in a table format. 

Pro Tip [Important]:

Incorporating the multipart/alternative MIME type, on the server side when sending the email, allows the email to include both HTML and plain text versions. For instance, it means that if the HTML email newsletter fails, the email automatically falls back to it’s plain-text version.

Note that this method isn’t directly in the HTML code. However, in the section where I provide free HTML email templates, I included the full code (server-side included) so you can copy-paste it. 

How to create HTML email

The quick answer is, to choose a builder ( I made a selection top builders for you, click here to jump), use a drag and drop editor, and be done with it. 

However, I believe you want highly deliverable emails that convert, so the story’s not that easy. In a nutshell, building an HTML email boils down to integrating design and coding elements to create an effective and engaging message. 

Therefore, I’ll summarize the process by providing practical examples and code snippets to illustrate each step. And that may help you quickly tweak the HTML side of a drag-and-drop editor if need be. 

Also note that creating an HTML email involves several stages, including:

• Coding the HTML email for high deliverability
• Designing a beautiful and responsive HTML email
• Creating an email copy that resonates with your audience
• Email signature in the email footer (optional)

I’ll be covering all that aiming to help you overcome common HTML email development challenges, including:

• Diverse rendering engines
• Limited CSS support 
• Mobile optimization
• Media queries
• Blocked images and alt text
• Limited interactivity and fallbacks 
• Etc.  

How to code an HTML email 

Here is the step-by-step guide on how to code the email to create your own HTML template. It will help you understand the best practices better, and tweak drag-and-drop templates faster if necessary. 

Header, Body, and Footer
Start by outlining the structure of your email. Typically, it includes a header for branding, a body for the main content, and a footer for additional information and links. See the example below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Email Title</title>
    <style type="text/css">
        /* Add your CSS here */
    </style>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center">
                <table width="600" cellpadding="0" cellspacing="0">
                    <!-- Header -->
                    <tr>
                        <td style="background-color: #345C72; color: #ffffff; text-align: center; padding: 20px;">
                            <h1>Welcome to Our Newsletter</h1>
                        </td>
                    </tr>
                    <!-- Body -->
                    <tr>
                        <td style="padding: 20px; font-size: 16px; line-height: 1.6;">
                            <p>Here's what you need to know.</p>
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #333333; color: #999999; text-align: center; padding: 20px;">
                            <p>Contact us at support@example.com</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Coding the Email

HTML emails rely on tables for layout, as they ensure better compatibility across various email clients. Avoid using CSS for layout since many email clients have limited CSS support. 

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #cccccc; padding: 20px;">
                <tr>
                    <td align="center">
                        <h1 style="color: #345C72;">Hello, World!</h1>
                        <p style="font-size: 16px; color: #555555;">Welcome to our email.</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Inline CSS

Use inline CSS to style your email elements. It ensures that styles are rendered correctly across different email clients. For example:

<p style="font-size: 16px; color: blue;">This is a styled paragraph.</p>

Media Queries

Here’s the code to ensure your email is responsive, use media queries to adjust styles for different screen sizes. This adds to the email’s overall responsiveness. 

<style type="text/css">
    @media screen and (max-width: 600px) {
        .container {
            width: 100% !important;
            padding: 10px !important;
        }
    }
</style>
<table class="container" width="600">
    <!-- Content -->
</table>

Buttons and Links

Here’s an example of incorporating interactive elements like buttons.

<table cellpadding="0" cellspacing="0" style="margin: auto;">
    <tr>
        <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
            <a href="https://www.example.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Call to Action</a>
        </td>
    </tr>
</table>

Based on everything covered now, here’s the full template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Your Email Title</title>
    <style type="text/css">
        body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif; }
        table { border-collapse: collapse; }
        .container { width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff; }
        .header { background-color: #345C72; color: #ffffff; text-align: center; padding: 20px; }
        .body { padding: 20px; font-size: 16px; line-height: 1.6; color: #555555; }
        .footer { background-color: #333333; color: #999999; text-align: center; padding: 20px; }
        .cta { background-color: #345C72; padding: 10px 20px; border-radius: 5px; color: #ffffff; text-decoration: none; font-weight: bold; }
        @media screen and (max-width: 600px) {
            .container {
                width: 100% !important;
                padding: 10px !important;
            }
        }
    </style>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center">
                <table class="container" width="600" cellpadding="0" cellspacing="0">
                    <!-- Header -->
                    <tr>
                        <td class="header">
                            <h1>Welcome to Our Newsletter</h1>
                        </td>
                    </tr>
                    <!-- Body -->
                    <tr>
                        <td class="body">
                            <p>Here's what you need to know.</p>
                            <p style="font-size: 16px; color: blue;">This is a styled paragraph.</p>
                            <table width="100%" cellpadding="0" cellspacing="0" style="border: 1px solid #cccccc; padding: 20px;">
                                <tr>
                                    <td align="center">
                                        <h1 style="color: #345C72;">Hello, World!</h1>
                                        <p>Welcome to our email.</p>
                                    </td>
                                </tr>
                            </table>
                            <table cellpadding="0" cellspacing="0" style="margin: auto;">
                                <tr>
                                    <td align="center">
                                        <a href="https://www.example.com" target="_blank" class="cta">Call to Action</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td class="footer">
                            <p>Contact us at support@example.com</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

How to design HTML email

HTML email design is about branding and conversion rate optimization. However, the UX and UI design phases are a completely different ballgame.

Here, I’ll focus more on UI and describe the technical aspect to which you should pay attention to when working with HTML email templates

Semantic HTML

Use semantic HTML tags (like <header>, <nav>, <main>, <footer>) to structure your email content meaningfully. This helps screen readers interpret the content correctly.

For instance, it may look like this:

<header>
    <h1>Welcome to Our Newsletter</h1>
</header>
<main>
    <p>Here's what you need to know.</p>
</main>
<footer>
    <p>Contact us at support@example.com</p>
</footer>

Responsive Design

Use a single-column layout and media queries to adjust styles in the main table for different apps and devices. That makes an email more responsive and helps it adapt to various screen sizes. 

Here’s the exemplary code:

<style>
    @media only screen and (max-width: 600px) {
        .container {
            width: 100% !important;
        }
    }
</style>
<table class="container" width="600">
    <!-- Email content -->
</table>

Whitespace

Here’s the snippet to use whitespace effectively. It helps guide the reader’s attention and makes the content more digestible. 

<div style="padding: 20px;">
    <p>This paragraph has padding to provide whitespace around it.</p>
</div>

Call-to-Action (CTA)

Design prominent CTA buttons with contrasting colors to attract attention. Position them strategically within the email to drive actions. Also, I’d advise testing different positioning and colors to see which drives the highest engagement. 

Check the exemplary CTA below:

<a href="https://example.com" style="background-color: #007BFF; color: #FFFFFF; padding: 10px 20px; text-decoration: none; border-radius: 5px;">Click Here</a>

Accessibility

Always include descriptive alt text for images. This ensures that users who cannot view the images (due to visual impairments or email client settings) still understand the content. For example: 

<img src="logo.png" alt="Company Logo">

Font Usage

Use web-safe fonts to make sure your text displays consistently across different email clients. Reliable choices include:

• Arial
• Tahoma
• Verdana 
• Times New Roman 

Okay, some of those choices may seem dated to you. However, these are both accessible and web-safe formats. So, email recipients won’t struggle to read your emails regardless of their device. 

Here’s a snippet to use Arial in your emails:

<p style="font-family: Arial, sans-serif;">This is a paragraph with Arial font.</p>

Font Size and Readability

Maintain a minimum font size of 14px to ensure readability, especially on mobile devices. This helps make the text clear and legible without the need for zooming. For example:

<p style="font-size: 14px;">This is a readable paragraph.</p>

High Contrast Colors [Optional]

Use high-contrast color combinations to improve readability for users with visual impairments. Or, more generally, ensure that the text stands out clearly against the background.

<div style="color: #000000; background-color: #FFFFFF;">
    This text has high contrast.
</div>

How to write HTML email

Creating engaging and effective HTML email content involves several key principles to ensure your message is clear, compelling, and visually appealing. 

And of course, the email content needs to align with your brand and target audience perfectly. Hit the play button below for a two-minute guide on how to achieve that.

Below are the tips on crafting HTML email content, complete with examples. 

Write concise and relevant subject lines

Subject lines should be brief and to the point, ideally under 35 characters to display well on different devices. The goal is to capture attention and encourage recipients to open the email. The example of Miro Welcome email checks all the right boxes in that respect. 

Use preheader text wisely

The preheader text is the snippet that appears below the subject line in most email clients. Use it as an extension to the subject line to provide additional context or a compelling reason to open the email. And keep it under 100 characters. 

But, I know you want to take it a step further. So…

You’d never guess what the preheader is for this email from KEEPS because they use an advanced trick. (It’s not “GET FREE SHIPPING ON….”)

To cut to the chase, they use &nbsp; tag and &zwjn; (zero-width non-joiner). That creates invisible spaces and ensures the email copy that follows won’t be pulled into the preheader. In HTML it looks something like this:

<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
      step into a world of timeless style and sustainable living ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­
    </div>

And yeah, the huge gap in the <div> class is the invisible space and the preheader always displays as: step into a world of timeless style and sustainable living regardless of the email client. 

If you want more details, check this article about ‘&nbsp’. 

Craft Engaging Content

Yeah, you’ve probably heard the “craft engaging content” a million times before. But let me put it into perspective for you. 

It means that you need to focus on one primary message and deliver that message as concisely and clearly as possible. Simply, it should be obvious to the recipient what the email is about by just skimming the content, check the Outsite example below. 

Lastly, you can also break up text with subheadings, short paragraphs, and bullet points to improve readability. But still, make sure not to cram too much info into the email, and always keep the 80/20 rule in mind. 

Bonus: Using AI to create effective email content

Yes, you can use generative AI to create email content. And no, if you know what you’re doing, the emails won’t sound as if they’ve been done by a robot. 

The trick is to treat your preferred AI tool as a new employee and prompt it accordingly. For instance, if you’re using chat GPT, you should create a new custom model and train it to write emails. Check out how to do it step by step, in our quick tutorial below:

Personalize Your Emails

Personalization can significantly increase engagement. Use merge tags to include the recipient’s name or other personal details. And I chose to show you code here since there’s little point in showing actual personalized emails unless you understand how to do it. 

<p>Hi {{first_name}},</p>
<p>Thank you for joining us! We have exciting updates for you.</p>

Include a Clear CTA

From the copy perspective, you should test out different actionable wording. These need to strictly relate to the action you want to take and the destination of the copy button. 

I like the “Tell Me More” example from De Soi above, which is their primary CTA (you can see it without scrolling). It aligns with the novelty of the drink, and has a very engaging first-person copy which may drive more clicks. 

HTML email builders

Choosing an email builder can be a pain. I want to make life easier and give you tried-and-tested options. 

These solutions are good for marketers and designers since they allow for fast email template iterations to prove (or disprove) hypotheses related to email templates. 

I won’t go into detailed descriptions here. Instead, the focus is on who would get the most benefits from a builder and the reasons to choose the tool. 

Disclaimer: The quick reviews below contain pricing and software catalog ratings. These were valid at the time of writing but could be subject to change by the time you’re reading the article.

Mailtrap Email API/SMTP

G2: 4.8 Capterra: 4.9 

Mailtrap Email API/SMTP is part of Mailtrap Email Delivery Platform. It provides you with an email infrastructure solution to reach email recipients in seconds. On top of that, Mailtrap offers:

• Intuitive drag-and-drop template builder with desktop and mobile preview
• Secure setup (all DNS records provided)
• API and SMTP service, even on a free plan
• In-depth analytics with helicopter-view dashboard and drill-down reports
• Up to 30 days of email logs 

Pricing:

• Free forever plan available – 1000 emails per month
• Basic plan starting at $15 per month

Stripo 

G2: 4.8 Capterra: 4.9

Stripo is for marketers, designers, and businesses of different sizes. Its strong suite is an intuitive email template builder, allowing you to create visually appealing, responsive email designs without extensive coding knowledge. 

Check the quick breakdown of the key features:

• Drag-and-drop email template builder
• Integration with over 80 ESPs and email clients
• Pre-designed email templates and blocks
• AMP for Email support
• Customizable design settings
• Collaboration tools for teams
• Embedded testing tool for email rendering

Pricing: 

• Free plan: available with a maximum of 4 templates per month
• The Basic paid plan starts at $15 per month

Mailchimp

G2: 4.3 Capterra: 4.5

Mailchimp is good for small to medium-sized businesses, entrepreneurs, and marketers seeking an all-in-one email marketing solution. And, I’d argue that its user-friendly interface, catering to beginners and experienced users, is also one of the reasons behind Mailchimp’s mass appeal.

Anyway, here are the goodies that put it on the list:

• Drag-and-drop email template builder
• Email marketing automation tools
• Audience segmentation and personalization
• Pre-designed and customizable email templates
• A/B testing for optimizing email performance
• Integration with numerous apps and services

Pricing:

• Free plan: Available with basic features – up to 500 contacts and 1,000 sends per month
• The paid Essentials plan starts at $13 a month  

Beefree

G2: 4.7 Capterra: 4.8

Beefree is for marketers, designers, and businesses that need a fast way to create responsive email designs. It’s particularly beneficial for agencies and freelancers who handle multiple clients. The same goes for companies looking to streamline their email design process with a user-friendly interface.

Now, here are the main highlights: 

• Drag-and-drop email template builder
• Extensive library of pre-designed templates and content blocks
• Mobile-responsive design capabilities
• Integration with major email service providers (ESPs)
• Collaboration tools for team editing
• HTML and MJML code export options
• Email preview for different devices

Pricing:

• Free plan: Available with basic features and limited template usage
• Professional plan starts at $35 a month 

Unlayer

G2: 4.1 Capterra: N/A

Unlayer is designed for developers and marketers who require a flexible and customizable email template builder. It’s particularly useful for those who want to embed an email editor into their applications or websites. 

Here are the key features:

• Drag-and-drop email template builder
• Embeddable email editor for seamless integration
• Pre-designed email templates and content blocks
• Mobile-responsive design support
• Customizable design elements and settings
• HTML and JSON export options

Pricing:

• Free plan: available but includes Unlayer branding 
• Startup paid plan starts at $149 a month 

If you want a more comprehensive list and reviews, you can check this article from our Product Lead Oleksii.

Responsive HTML email templates

Here, I’ll provide three popular templates that employ best practices in HTML email design, such as using tables for layout, including images, and featuring clear calls-to-action (CTAs). 

Each example also contains server side code to support the multipart/alternative MIME type. As mentioned, this way a plain text version is available if the HTML cannot be displayed. In turn, you may get higher engagement. 

Note: The SMTP settings are geared towards Mailtrap Email API/SMTP users. 

Order confirmation template 

The HTML template uses a responsive table to display order items, quantities, and prices. The plain text version simplifies this information into an easy-to-read format, providing all necessary order details in a straightforward manner. 

This ensures that the message is accessible even in email clients that do not support HTML or when the recipient prefers plain text emails. Here’s the code for the template shown above.

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# Email settings
smtp_server = 'live.smtp.mailtrap.io'
port = 587
username = 'api'
password = 'your-mailtrap-password'

# Create message container
msg = MIMEMultipart('alternative')
msg['Subject'] = "Order Confirmation"
msg['From'] = "sales@example.com"
msg['To'] = "customer@example.com"

# Plain text and HTML versions
text = """\
Thank you for your order!

Your order has been confirmed and will be shipped to you soon. Here are the details of your order:

- Widget A: 1 x $10.00
- Widget B: 2 x $20.00

Total: $50.00

Estimated delivery date: 2023-10-05

You can view your order here: https://example.com
"""

html = """\
<!DOCTYPE html>
<html>
<head>
<title>Order Confirmation</title>
<style>
    body, table, td, th { font-family: Arial, sans-serif; }
    th { background-color: #4CAF50; color: white; }
    .button { background-color: #008CBA; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; border-radius: 4px; }
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="20" bgcolor="#f4f4f4">
    <tr>
        <td align="center">
            <table width="600" cellspacing="0" cellpadding="10" bgcolor="#ffffff" style="border-collapse: collapse; border: 1px solid #cccccc;">
                <tr>
                    <td style="text-align: center; padding: 20px;">
                        <h1>Thank you for your order!</h1>
                        <p>Your order has been confirmed and will be shipped to you soon.</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="100%" cellspacing="0" cellpadding="5" style="border-collapse: collapse; border: 1px solid #ddd;">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Widget A</td>
                                    <td>1</td>
                                    <td>$10.00</td>
                                </tr>
                                <tr>
                                    <td>Widget B</td>
                                    <td>2</td>
                                    <td>$20.00</td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="text-align: right;"><strong>Total:</strong></td>
                                    <td><strong>$50.00</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <p>Estimated delivery date: <strong>2023-10-05</strong></p>
                        <a href="https://example.com" class="button">View your order</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
"""

# Attach MIMEText objects for plain text and HTML to the MIMEMultipart message
part1 = MIMEText(text, 'plain')
part2 = MIMEText(html, 'html')
msg.attach(part1)
msg.attach(part2)

# Send the message via SMTP server
server = smtplib.SMTP(smtp_server, port)
server.starttls()
server.login(username, password)
server.sendmail(msg['From'], msg['To'], msg.as_string())
server.quit()

Account confirmation template

Among confirmation email templates, account confirmation is the most widely used. 

The template below uses a simple, focused design with a single call to action, which is the confirmation link. This makes it easy for users to understand what they need to do next. 

I opted for a neutral color scheme and a clear, legible font to ensure the email is accessible and professional-looking.

The plain text version maintains all critical information and the confirmation link, ensuring that the message is still effective even without HTML formatting.  Again, check the code for the template shown above.

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# Email settings
smtp_server = 'live.smtp.mailtrap.io'
port = 587
username = 'api'
password = 'your-mailtrap-password'

# Create message container
msg = MIMEMultipart('alternative')
msg['Subject'] = "Confirm Your Account"
msg['From'] = "noreply@example.com"
msg['To'] = "newuser@example.com"

# Plain text and HTML versions
text = """\
Welcome to Our Service!

Thank you for registering. Please confirm your email address by clicking the link below:

https://example.com/confirm?email=user@example.com

If you did not create an account, no further action is required.
"""

html = """\
<!DOCTYPE html>
<html>
<head>
<title>Confirm Your Account</title>
<style>
    body, table, td { font-family: Arial, sans-serif; }
    .button { background-color: #008CBA; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin-top: 10px; border-radius: 4px; }
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="20" bgcolor="#f4f4f4">
    <tr>
        <td align="center">
            <table width="600" cellspacing="0" cellpadding="10" bgcolor="#ffffff" style="border-collapse: collapse; border: 1px solid #cccccc;">
                <tr>
                    <td style="text-align: center; padding: 20px;">
                        <h1>Welcome to Our Service!</h1>
                        <p>Thank you for registering. Please confirm your email address by clicking the link below.</p>
                        <a href="https://example.com/confirm?email=user@example.com" class="button">Confirm Email</a>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; font-size: 16px; color: #666; padding: 20px;">
                        If you did not create an account, no further action is required.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
"""

# Attach MIMEText objects for plain text and HTML to the MIMEMultipart message
part1 = MIMEText(text, 'plain')
part2 = MIMEText(html, 'html')
msg.attach(part1)
msg.attach(part2)

# Send the message via SMTP server
server = smtplib.SMTP(smtp_server, port)
server.starttls()
server.login(username, password)
server.sendmail(msg['From'], msg['To'], msg.as_string())
server.quit()

Price drop alert

Due to the specifics of this email type, I wanted to make the HTML version of this template is visually appealing, so it has:

• A large, clear image of the product 
• Bold text for the new price
• An eye-catching button that contrasts with the rest of the content. 

The design aims to quickly convey the message and motivate the user to act immediately.

The plain text version, while simpler, still communicates all essential information and includes a direct link to purchase the product. Check the code below.

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# Email settings
smtp_server = 'smtp.example.com'
port = 587
username = 'your-username'
password = 'your-password'

# Create message container
msg = MIMEMultipart('alternative')
msg['Subject'] = "Price Drop Alert!"
msg['From'] = "deals@example.com"
msg['To'] = "shopper@example.com"

# Plain text and HTML versions
text = """\
Good News!

The price has dropped for an item you're watching!

Product Name
Now only $39.99

Shop now by visiting:
https://example.com
"""

html = """\
<!DOCTYPE html>
<html>
<head>
<title>Price Drop Alert!</title>
<style>
    body, table, td { font-family: Arial, sans-serif; }
    .button { background-color: #FF6347; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; border-radius: 5px; }
    .price { color: #FF6347; font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="20" bgcolor="#f4f4f4">
    <tr>
        <td align="center">
            <table width="600" cellspacing="0" cellpadding="10" bgcolor="#ffffff" style="border-collapse: collapse; border: 1px solid #cccccc;">
                <tr>
                    <td style="text-align: center; padding: 20px;">
                        <h1>Good News!</h1>
                        <p>The price has dropped for an item you're watching!</p>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <img src="https://via.placeholder.com/200x200" alt="Product Image" style="width:200px; height:200px;">
                        <h2>Product Name</h2>
                        <p class="price">Now only $39.99</p>
                        <a href="https://example.com" class="button">Shop Now</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
"""

# Attach MIMEText objects for plain text and HTML to the MIMEMultipart message
part1 = MIMEText(text, 'plain')
part2 = MIMEText(html, 'html')
msg.attach(part1)
msg.attach(part2)

# Send the message via SMTP server
server = smtplib.SMTP(smtp_server, port)
server.starttls()
server.login(username, password)
server.sendmail(msg['From'], msg['To'], msg.as_string())
server.quit()

HTML email deliverability

The hard truth is that you can have the coolest-looking template in the world, but if it’s not deliverable it’ll keep landing in spam instead of the inbox folder. 

Note that it involves deliverability and understanding a bunch of technical factors (some of which I have already covered). Now, I’ll break it down into two sections covering the HTML best practices for high deliverability as simply as possible.

Technical aspects impacting deliverability

• Email authentication: Implementing authentication protocols such as SPF, DKIM, and DMARC is a must. I understand the process may seem tricky, but, as of recently, Gmail and Yahoo have made it a requirement, and for a good reason( ◀️check the linked video for more details). These protocols help verify your identity as a sender and protect against email spoofing and phishing attacks, improving your email’s chances of landing in the inbox​.  

• Sender Reputation: ISPs (Internet Service Providers) evaluate your sender reputation, which is influenced by factors such as the number of spam complaints, bounce rates, and user engagement. Maintaining a positive sender reputation is essential for high deliverability. Use tools like SenderScore and Google Postmaster Tools to monitor and improve your sender score​ if need be. 

• Dedicated IP Address: For high-volume senders (more than 100K emails a month), using a dedicated IP address helps build a strong sending reputation because all the control is in their hands. This ensures that your deliverability is not affected by the behavior of other senders sharing the same IP. 

• Shared IPs: If you send less than 100K emails a month, be very careful when vetting your email service provider to their deliverability stats on shared IPs. Top ESPs typically share the overall deliverability data, if not, dig around a little to see what other users are saying. In my experience, aside from Mailtrap, other reliable shared IPs are on Campaign Monitor and Litmus.

• Email Content [reminder]: Crafting relevant and engaging content is vital. Ensure your subject lines are clear and concise, and avoid excessive use of images and links. Also, based on our deliverability expert’s research, spam trigger words like “free,” “guaranteed,” and “act now,” aren’t a mayor decisive factor anymore. But this doesn’t mean you should use them liberally; at the very least, it could make your brand appear pushy. 

• Proper HTML Structure [reminder]: As mentioned, use clean, well-structured HTML code with inline CSS to ensure compatibility across different email clients. Avoid using JavaScript and other dynamic content that is often blocked by email clients. 

• Unsubscribe Options: With marketing emails, unsubscribe buttons or links are a necessity. Otherwise, you’re breaching CAN-SPAM and GDPR. So, do your best to allow for a two-step unsubscription (and I literally mean that). For instance, Mailtrap API/SMTP allows you to have a clear and simple unsubscribe link in every email to reduce spam complaints and maintain a positive sender reputation. 

Email sending aspects that impact deliverability 

• Don’t Use Purchased Email Lists: Sending emails to purchased lists leads to high bounce rates and spam complaints. In turn, your sender’s reputation may get destroyed beyond repair. Build your own email list through opt-ins and ensure that your recipients have given explicit permission to receive your emails. 

• Monitor Bounce Rates: Ideally, the bounce rate should be under 2%, and if it starts getting close to 10%, you need to act immediately. Clean your email list to remove invalid or inactive email addresses, and repeat the process whenever necessary. 

• Frequency and Timing: Avoid sending too many emails in a short period, as this can trigger spam filters. Schedule your emails at regular intervals and test different times to find the optimal sending times for your audience. Note that there’s no cookie-cutter frequency and timing, you need to test. But of course, you mustn’t email people daily either. 

• ​​Engagement Metrics: Track engagement metrics like open rates, click-through rates, and spam complaints for each campaign. Use this data to adjust your email strategies and improve engagement. Should you opt to use Mailtrap API/SMTP, you get actionable in-depth analytics and unique monitoring capabilities to control how your email infrastructure works and troubleshoot unexpected sending issues easy and fast. 

• Tracking Pixel Tip: Some users, particularly on Microsoft Outlook and Apple Mail, may have tracking pixel turned off. Worse yet, there are cases where your emails may land in spam or not get delivered at all because of it. This may happen with newer senders and outreach campaigns. So, if all else checks out, and your metrics is still a bit down, consider disabling the pixel. 

• Always Test Before You Send: I don’t want to go into details here. This is a critical step, and I dedicate the whole next section to it. 

Test HTML Email

I wouldn’t recommend sending any emails with out testing them first. Doing that helps maintain high deliverability and user engagement. 

Here, I focus on the importance of testing without delving too deeply into technical examples.

The key aspects of email testing you should focus on include:

• HTML/CSS Validation: Ensures that the email’s structure and style render correctly across different email clients and devices.

• Spam Score Check: Identifies elements in your email that might trigger spam filters, helping to keep your emails out of the spam folder.

• Email Preview: Allows you to see how your email will appear in various email clients, including desktop and mobile views.

• API for Automation: Integrates testing into your development workflow, allowing automated checks for consistency and quality. 

And if you use Email Sandbox, you get all that plus different testing inboxes and user management to have better control of your campaign and template tests. 

But don’t take my word for it, check the video below. 

Pro Tip: Always create a fallback version. This way you ensure your email gets delivered no matter what (even if the HTML element breaks).  

Further reading: How to Test Emails in Different Clients | Mailtrap Blog 

Wrapping up

HTML email mastery is crucial for anyone involved in marketing. 

We’ve covered everything from the fundamentals of HTML email, to advanced techniques for creating, designing, and testing your emails.

Whether you’re an email marketer, designer, or developer, applying these best practices will help you craft compelling and effective email campaigns. Stay updated with the latest trends and continue refining your skills for sustained success in email marketing.