Email Marketing & AutomationMobile and Tablet Marketing

16 Mobile Friendly HTML Email Best Practices That Maximize Inbox Placement and Engagement

In 2023, it’s probable that mobile will surpass desktop as the primary device for opening email. In fact, HubSpot found that 46 percent of all email opens now occur on mobile. If you’re not designing emails for mobile, you’re leaving a lot of engagement and money on the table.

  1. Email Authentication: Ensuring your emails are authenticated to the sending domain and IP address is critical to getting to the inbox and not routed to a junk or spam folder. It’s also essential, of course, that you provide a means of opting out of the email using a platform that incorporates an unsubscribe link.
  2. Responsive Design: The HTML email should be designed to be responsive, which means that it can adjust to the screen size of the device on which it is being viewed. This ensures that the email looks good on both desktop and mobile devices.
  3. Clear and concise subject line: A clear and concise subject line is important for mobile users because they may only see the first few words of the subject line in their email preview pane. It should be brief and accurately reflect the content of the email. The optimal character length of an email subject line can vary depending on a number of factors, such as the email content, the audience, and the email client being used. However, most experts recommend keeping email subject lines short and to the point, typically between 41-50 characters or 6-8 words. On mobile devices, subject lines that are longer than 50 characters may get cut off, and in some cases, may only display the first few words of the subject line. This can make it difficult for the recipient to understand the main message of the email and may reduce the likelihood of the email being opened.
  4. Preheader: An email preheader is a short summary of the content of an email that appears next to or below the subject line in an email client’s inbox. It’s an important element that can impact the open rate of your emails when optimized. Most clients incorporate HTML and CSS to ensure that the preheader text is properly set up.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. Single-column layout: Emails that are designed with a single-column layout are easier to read on mobile devices. The content should be organized in a logical sequence and presented in a simple, easy-to-read format. If you have multiple columns, utilizing CSS can gracefully organize the columns in a single-column layout.

Here’s an HTML email layout that is 2 columns on desktop and collapses to a single column on mobile screens:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

Here’s an HTML email layout that is 3 columns on desktop and collapses to a single column on mobile screens:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Light and Dark Mode: Most email clients support light and dark mode CSS prefers-color-scheme to accommodate the user’s preferences. Be sure to utilize image types where you have a transparent background. Here’s a code example.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. Large, legible fonts: The font size and style should be chosen to make the text easy to read on a small screen. Use at least a 14pt font size and avoid using fonts that are difficult to read on small screens. Commonly used fonts have a high likelihood of rendering consistently across different email clients, so using Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, and Trebuchet MS are typically safe fonts. If you do use a custom font, be sure to have a fallback font identified in your CSS:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. Optimal use of images: Images can slow down load times and may not display properly on all mobile devices. Use images sparingly, and make sure that they are sized and compressed for mobile viewing. Be sure to fill in the alt text for your images in the event that the email client blocks them. All images should be stored and referred to from a secure website (SSL). Here’s example code of responsive images in an HTML email.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Clear call-to-action (CTA): A clear and prominent CTA is important in any email, but it is especially important in a mobile-friendly email. Make sure that the CTA is easy to find and that it is large enough to be clicked on a mobile device. If you incorporate buttons, you can ensure that you have them written in CSS with inline style tags as well:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. Short and concise content: Keep the content of the email short and to the point. The character limit for an HTML email can vary depending on the email client being used. However, most email clients impose a maximum size limit for emails, typically between 1024-2048 kilobytes (KB), which includes both the HTML code and any images or attachments. Use subheadings, bullet points, and other formatting techniques to make the content easily scannable while scrolling and reading on a small screen.
  2. Interactive elements: Incorporating interactive elements that capture the attention of your subscriber will drive up engagement, comprehension, and conversion rates from your email. Animated GIFs, countdown timers, videos, and other elements are supported by the majority of smartphone email clients.
  3. Personalization: Personalizing the salutation and content for a specific subscriber can significantly drive engagement, just be sure you get it right! Eg. Having fallbacks if there’s no data in a first name field is important.
  4. Dynamic Content: Segmentation and customization of the content can reduce your unsubscribe rates and keep your subscribers engaged.
  5. Campaign Integration: Most modern email service providers have the ability to automatically append UTM campaign querystrings for every link so that you can view email as a channel in analytics.
  6. Preference Center: Email marketing is too important for just an opt-in or opt-out approach to emails. Incorporating a preference center where your subscribers can change how often they receive emails and what content is important to them is a fantastic way to keep a strong email program with engaged subscribers!
  7. Test, Test, Test: Make sure to test your email on multiple devices or utilize an application to preview your emails across email clients to ensure that it looks good and functions properly on different screen sizes and operating systems BEFORE you send. Litmus reports that the top 3 most popular mobile open environments continue to be the same: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Also, incorporate test variations of your subject lines and content to improve your open and click-through rates. Many email platforms now incorporate automated testing that will sample the list, identify a winning variation, and send the best email to the remaining subscribers.

If your company is struggling with designing, testing, and implementing mobile responsive emails that are driving engagement, don’t hesitate to contact my firm. DK New Media has experience in the implementation of virtually every email service provider (ESP).

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button