Responsive HTML Email Template Development: A Step-by-Step Guide for Email Developers

HTML email development isn’t for the faint of heart 😀

Rendering issues? Check. 

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

Testing? Let’s just say it could be a full-time job.

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)
• Testing HTML email template

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. 

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 Mailtrap Email Testing 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. 

Test HTML email

Even if you apply all the tricks in the book and your email looks polished, you still need to test it. I’ll use Mailtrap Email Testing which is a part of the Mailtrap Email Delivery Platform. 

There are two main reasons I chose Mailtrap Email Testing:

1. It shows you the support for your email template in percentages for all popular email clients. More importantly, it highlights the lines that may need improvement and explains what could be improved.

2. Mailtrap offers fake SMTP, so there’s no risk of spamming recipients with test templates. It also has an API to automate the testing process and then move the templates to production just by changing a few lines of code. 

Here, I’ll show you the SMTP and API methods, then list Mailtrap Email Testing feature highlights.  

SMTP

1. Sign up for a free Mailtrap account here, if you haven’t already. 
2. Navigate to Inboxes, then the Integration tab under My Inbox to get your SMTP credentials. 

3. Update your SMTP settings to use Mailtrap’s sandbox. Here’s an exemplary configuration for Laravel. 

# Looking to send emails in production? Check out our Email API/SMTP product!
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=YOUR_MAILTRAP_EMAIL_TESTING_USERNAME
MAIL_PASSWORD=YOUR_MAILTRAP_EMAIL_TESTING_PASSWORD
MAIL_ENCRYPTION=tls

4. Use your application or script to send the email, then go back to “My Inbox” to review the email template. 

API

I assume you’re already a Mailtrap user, and yes, API is also available with the free plan. 

1. First, you need the API token. Launch Mailtrap, select Settings in the menu on the left, and select API Tokens from the drop-down. 

2. Next, click the “Add Token” button, and make sure you select the correct access level (Admin) and the Project or Inbox under Email Testing. 

3. Save the generated token; you’ll need it for the integration. Then move on to integrate Mailtrap Email Testing API into your dev environment. Below is the exemplary cURL request for PHP to GET message HTML analysis. 

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://mailtrap.io/api/accounts/{account_id}/inboxes/{inbox_id}/messages/{message_id}/analyze",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => [
    "Accept: application/json",
    "Api-Token: 123"
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

4. Finally, to set up automation, you can incorporate API calls into your CI/CD pipeline to validate email templates during development. 

Important Note:
Both SMTP and API method tutorials have placeholders such as YOUR_MAILTRAP_EMAIL_TESTING_PASSWORD, {account_id},  YOUR_MAILTRAP_EMAIL_TESTING_USERNAME, {inbox_id}, etc. Please make sure to replace these with your actual credentials. 

Mailtrap Email Testing – feature highlights

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

Further reading:

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

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.