How to Make Responsive Emails to Improve Your Email Marketing

You’ve heard about responsive web apps (or websites), but did you know you can also make responsive emails, and also make them react to a users’ actions?
To begin, let me show you how the basic HTML email below looks like when it is displayed by various web clients

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css"></style>
</head>
<body id="body" style="margin: 0!important; padding:0!important;">
    <div
        style="color:black; font-family: sans-serif;
               font-size: 18px; max-width: 9 00px; text-align: center;
               margin-top: 40px; max-width: 1000px; margin: 0 auto;">
        <!-- Logo -->
        <img src="th_logo.png" alt="Logo" width="400px" style="margin-top:40px;">
        <!-- Headline -->
        <h1 style="text-align: center; font-family: sans-serif;">Title for headline!</h1>
        <!-- Additional image -->
        <img src="marketing_image.jpg" width="1000px" alt="Marketing" style="border-radius: 40px;">
        <!-- Text -->
        <p style="text-align: left; white-space: pre-wrap;">{Lorem ipsum} </p>
        <!-- Link -->
        <a href="https://trailheadtechnology.com/"> Join today by clicking here</a>
    </div>
</body>
</html>

If you take a look at this basic HTML there are a few things you should know about meta tags let’s cover them one by one:

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ->
  1. The first meta tag refers to setting the proper character encoding for the document. In this case it is UTF-8
  2. The second meta tag is used to set the viewport, or how our device see our email
  3. The third meta tag is used for Microsoft products to help use with better rendering and compatibility issues

Here is how this email looks when you open it as HTML in a web browser:
Example of basic email

Looks fine, right? This is a modern browser, but sometimes it can look totally different in webmail clients. I Included a few below (click to view a larger version):
 
   Outlook image        Outlook image 2       Gmail       MacOs outlook       android gmail      android 9 gmail

As you can see, results can vary widely. Sometimes they look the same, but sometimes they are way different from each other, even for this very basic email template. For more complex emails this may be even worse.
In the rest of the blog post, I will show you a few tips and tricks with you to help create very nice-looking responsive emails. These could be used for anything such as activation emails, marketing emails, password reset emails, and so on.

Best HTML Tags and CSS to Use

When writing emails to support a wide range of clients, in my experience it is best to use simple HTML tags, this helps widen the support. For example, the list of tags below is what I recommend using and found that it works with most apps:
  • Structural: table
  • Basic: div, spa
  • Headings:h1 – h6
  • Text: p, strong, em
  • Images: img

When it comes to CSS, there are a couple of things you should consider. In standard HTML, we can use CSS styles as:

  • Linked stylesheets
  • Embedded styles
  • Inline styles
  • Hybrid CSS (CSS in JS)

However, most web clients do not support linked stylesheets and they stripped these out. Often hybrid CSS is not supported either. That leaves us with just embedded styles and inline styles, but some of the most popular clients also don’t allow embedded syles, so that leaves us with just inline styles if we want to support the widest range of web clients. We can use embedded styles to “reset” the default styles of the web clients.

Links, Buttons, Images, GIFs

When it comes to links, I often stick to a strategy that anything that underlines should be linked and it should be clickable. That strategy is important because most users are used to links looking that way. If I want to put something in the first plan I would often extract it as a button itself.
For buttons I used buttons.cm It is really nice tool for generating bulletproof buttons that are supported by all web apps web clients

Here is what a simple button looks like in code.
<div
><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fillcolor="#f7ecd4">
    <w:anchorlock/>
    <center style="color:#192a14;font-family:sans-serif;font-size:13px;font-weight:bold;">Simple button</center>
  </v:roundrect>
<![endif]--><a href="www.google.com"
style="background-color:#f7ecd4;border:1px solid #1e3650;border-radius:4px;color:#192a14;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Simple button</a>
</div>

 
Image of button html

Notice that it contains a lot more HTML than your typical button, that’s because it is meant to be supported across all clients. Notice the tag [if mso], since Outlook causes the most problems with rendering, this relies on older technology in that case.

Images

When it comes to images, in order to have responsive images we should use max-width, min-width, and width. This allows us to scale well with web and mobile devices. Let’s see an example of how big image scales on mobile.
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style type="text/css"></style>
    </head>
    <body id="body" style="margin: 0!important; padding:0!important;">
        <div style="color:black; font-family: sans-serif; font-size: 18px; max-width: 9 00px; text-align: center; margin-top: 40px; max-width: 1000px; margin: 0 auto;">
        <img src="hero.jpg" width="600" border="0" style="display:block; max-width:100%; min-width:100px; widht:100%"/>
        <p style="text-align: left; white-space: pre-wrap;">Option sanctus ipsum et feugait dolor vel duo eos eum labore tincidunt zzril pscing sit dolor labore ea nonumy in no dolore nonummy illum sit justo erat eu sanctus </p>
        </div>
    </body>
</html>

Layout

When it comes to layout, it is important that you know what you need to give to the end-user, in order to support a wide list of devices, it is best to use the <table> element as the structure. This is considered pretty old-fashioned but provides the widest support. Most emails can be placed into a single-column layout, but you can also create them with multiple columns and make them modular.

 

Boilerplate single-column table structure:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td styles=""></td>
  </tr>
</table>
Let’s see how our initial mail should look like following single-column layout
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body id="body" style="margin: 0 !important; padding: 0 !important;">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center">
          <table border="0" class="mobile" cellpadding="0" cellspacing="0" role="presentation" width="600" style="background-color: #ffffff; color: #000000; font-family: sans-serif; font-size: 18px; line-height: 36px; margin: 0; padding: 0;">
            <!-- Logo image -->
            <tr>
              <td align="center" style="padding: 20px;">
                <img src="th_logo.png" alt="Logo" width="400px" style="margin-top:40px;">
              </td>
            </tr>
            <!-- Headline -->
            <tr>
              <td style="padding: 20px;">
                <h1 style="margin: 0; font-size: 32px; text-align: center;">Title for headline!</h1>
              </td>
            </tr>
                        <!-- Additional image -->
                        <tr>
              <td align="center" style="padding: 20px;">
                <img src="marketing_image.jpg" alt="Logo" width="600px" style="margin-top:40px;">
              </td>
            </tr>
            <!-- Text -->
            <tr>
              <td style="padding: 20px;">
                                <p style="text-align: left; white-space: pre-wrap;">Option sanctus ipsum et feugait dolor vel duo eos eum labore tincidunt zzril feugait aliquyam sed sit eum eirmod autem sadipscing erat eos exerci amet facilisis amet vero lobortis no aliquyam dolore ut duis sed accusam nonumy ipsum sit et facilisi rebum ea facilisis takimata ipsum magna tempor iusto minim ipsum vel commodo volutpat volutpat est blandit diam possim erat ipsum vero erat no stet takimata facilisi tempor rebum no eu ipsum consequat eirmod sed nonumy stet dolore in no dolore nonummy illum sit justo erat eu sanctus </p>
              </td>
            </tr>
            <!-- Button -->
            <tr>
              <td style="padding: 20px 0 60px 0;">
                <!-- CTA generated by buttons.com -->
                <div style="text-align: center;">
                  <!--[if mso]>
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://trailheadtechnology.com/" style="height:60px;v-text-anchor:middle;width:310px;" arcsize="7%" stroke="f" fillcolor="#229efd">
                    <w:anchorlock/>
                    <center>
                  <![endif]-->
                    <a class="button" href="https://trailheadtechnology.com/" style="background-color:#229efd;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:bold;line-height:60px;text-align:center;text-decoration:none;width:310px;-webkit-text-size-adjust:none;">Join today by clicking here</a>
                  <!--[if mso]>
                    </center>
                  </v:roundrect>
                  <![endif]-->
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

 

As you can see it is a bit different, but this style of writing email will be supported by most of the web clients. In general, I always recommend using a single-column layout because it is way easier to maintain when you need to change something in the future.

Helpful Tools

Some of the tools that might be really helpful when writing responsive emails and preparing for an email campaign

Wrapping up

Here I showed you a simple but effective way of writing responsive emails. Happy coding!

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.