Site icon Mailtrap

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

Viktoriia Ivanenko
This image is a symbolic graphic representation of building HTML email template for an article that covers it in detail.

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:

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?

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?

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?

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?

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?

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?

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?

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?

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?

(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?

Accessibility considerations

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

What to do?

Tracking and analytics

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

What to do?

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?

Step 2: Build the header section

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

Key components:

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:

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:

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?

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. 
Source: Mailtrap Email Delivery Platform
  1. 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. 
Source: Mailtrap Email Delivery Platform
  1. Next, you can choose between the Drag & Drop Editor, and the HTML Editor. Here, I’ll be using the HTML Editor. 
Source: Mailtrap Email Delivery Platform
  1. Code the template and preview it in the left-hand side pane. Note that it allows you to switch between desktop and mobile previews. 
Source: Mailtrap Email Delivery Platform
  1. 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.
Source: Mailtrap Email Testing
  1. 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. 
Source: Mailtrap Email Testing
  1. 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
  1. 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. 
Source: Mailtrap Email Delivery Platform
  1. Next, click the “Add Token” button, and make sure you select the correct access level (Admin) and the Project or Inbox under Email Testing. 
Source: Mailtrap Email Delivery Platform
  1. 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;
}
  1. 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

Further reading:

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.

 

Exit mobile version