HTML Email Tasks, Tips, & Tricks

Web technology has evolved considerably over the last few years, bringing new features, semantic improvements, greater accessibility, and mobile-friendliness. Unfortunately, one thing that has not changed over the years is email. There are is no standardized way to code emails, so HTML email development can be challenging. Different email service providers (ESPs) reject some of the more modern coding features, like web fonts or floats to add text wrap around images.  Even between ESPs, what is accepted varies from provider to provider. And even within the same ESP, what is accepted can vary from platform to platform, such as the web app vs. the mobile app vs. the website.

Trying to code an email that is widely supported on your users’ platforms can be time-consuming and frustrating. Over the course of one of my jobs, I gathered all the tips and tricks I learned while I learned to code HTML emails and documented them. Here are the findings!

*Of course, these HTML email development tricks are subject to change as email clients, ESPs, and other technologies evolve.

 Administrative Tasks

• Convert to !DOCTYPE XHTML 1.0 Transitional, the most widely supported !DOCTYPE
• Indent and document source code for easy readability
• Address the aesthetics: smart quotes, img alt text styling, img borders
• Inline all CSS using Campaign Monitor or other service
• Compress HTML, if absolutely necessary, using HTML Compressor or other service
• Minify HTML, if absolutely necessary, using HTML Minifier or other service
• Append ?subject=Subject%20Line to all mailto: <a>s
• Escape all ampersands in URLs

 Compatibility Concerns

iOS Gmail Yahoo! Outlook

• Use HEX colors codes for best compatibility
• Remove <font> tags and replace with <span>
• Capitalize Margin and Padding for increased support
• No empty <div>s or <td>s—add a styled element with   and set font-size: 0;
• Be aware that Gmail ignores ids—use classes or inline necessary CSS styling
• Be aware that while Outlook ignores margins and padding, some versions still honor margin-left, margin-right, padding-left, and padding-right

 Doing It “Old School”

iOS Gmail Yahoo! Outlook

• Use only web-safe font safe stacks, such as font-family: 'Trebuchet MS', Tahoma, sans-serif;—check resources like Dan’s Tools CSS Font Stack to compare fonts
• Avoid complex selectors in CSS such as E:nth-child(), E:last-child, or E:first-of-type
• Avoid sibling selectors in CSS, such as E + F or e > F
• Avoid pseudo selectors in CSS such as E::before, E::after, or E:not()
• Avoid style="background:;" [CSS3] and instead use background="" in a table
• Repeat as style="background-style:;" [CSS3] if needed
• Avoid text-shadow, box-shadow, and border-radius [CSS3], else create images and insert into <tr>s and <td>s

 Forcing the Look

iOS Gmail Yahoo! Outlook

• Use XML language to apply bullet-proof background images
• Avoid shorthand styles except on borders
• Apply this fix to remove extra gap after a list: <div style="display: none;">&nbsp;</div>
• Do NOT use !important, else Outlook will strip the entire tag
• Use <div style="display: none !important;"> </div> to hide an object, else Gmail will ignore display: none;
• Apply line-height to individual inline elements like <p>s rather than <td>s
• Define a color close to black to force “black,” such as #000001
• Use cellpadding="0" on all tables to remove thin red borders
• Wrap hyperlink text in styled spans to force non-blue colors and no underlining: <a href="#foo"><span style="color: #FF1D25; text-decoration: none;">click here</span></a>
• Use style="table-layout: fixed;" to apply the width of the first <tr> to all following <tr>s
• Use style="border-collapse: collapse;" to remove duplicate borders in tables
• Use width="" and height="" in addition to/instead of CSS to style spacers
• Do NOT leave spacer <td>s empty—include a   with font-size: 0;
• Use background="" or bgcolor="" to colorize tables, and apply borders only to WHOLE tables and not <tr>s or <td>s (else, nest a table)
• Add margin-bottom: 1em; to force whitespace underneath each <p>
• Style <li>s with color: # b20838; then nest the text in a <span> with its appropriate color to force a different color for the bullet point

Creating the Most Compatible Anchor Links for HTML Emails

iOS Gmail Yahoo! Outlook

• Embed anchor links within inline elements, like <h1>s or <p>s, for best compatibility, using an anchor label of a   following the end of the text
• Declare both href id (non-deprecated and validating) and name (legacy) formats in all anchor links
• Use name="top" for greatest compatibility in Back to Top anchor links
• iOS 8+ dropped support for anchor links
• If the links are external to the email, consider building an image map

Picturing It Clearly Even in HTML Email

iOS Gmail Yahoo! Outlook

• Use cellpadding="0" on the <td> containing an image
• Do NOT resize the image in CSS, which Outlook ignores; upload at 100%
• Set the image scaling to -ms-interpolation-mode: bicubic; for a crisper appearance
• To remove a bottom gap in legacy versions of Outlook, do NOT line-break in the code between the <td>s and the <img>—Outlook will render that as a space
  
• Add style="display: block" or align="texttop" or align="absbottom" to images to remove extra spacing
• Embed all images within wrappers within tables to resize responsively :
  

<div class="img-wrapper" style="display: inline-table; table-layout: fixed; width: 100%;"><a href="http://potomacmanagementresources.com/sites/default/files/AMCI_Financial_Impact_Study_Infographic_500x647.jpg"><img src="http://potomacmanagementresources.com/sites/default/files/AMCI_Financial_Impact_Study_Infographic_130x168.jpg" alt="Financial Impact Study Infographic" /></a></div>
<!--[if gte mso 9]> <table id="speaker-bio-Masters" width="410"> <tr> <td width="170" valign="top" align="center"> <![endif]-->
<table width="152" height="218" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #582e88; float: right; margin: 9px;">
  <tr>
    <td>
      <img src="http://whf.membershipsoftware.org//Files/Spring%20Symposium/WHF_Events_Symposium_2016_Communications_MastersHeadshot_20160222.jpg" width="150" height="216" alt="Blythe Masters Portrait">
    </td>
  </tr>
</table>
<!--[if gte mso 9]></td><td width="240" valign="top"> <![endif]-->
<p>Blythe is the chair of the board of Santander Consumer USA Holdings Inc.</p>
<!--[if gte mso 9]> </td> </tr> </table> <![endif]-->

Adding Borders

iOS Gmail Yahoo! Outlook

• The most consistent, fail-proof option is to add a .5px border to the image via Photoshop
• If a thin white edge is acceptable, nest the image/content inside a single cell table of the same width and height with a table border, border="" and border: 1px solid #bada55;
• Be aware that there is no box-sizing: border-box; [CSS3]—so include both the widths of the content and the borders in the container table
• For a border with no thin white edge and greater legacy support, create a non-bordered table with the desired border color as a background-color :
  

<table class="border" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="1" colspan="3"> </td>
  </tr>
  <tr>
    <td width="1"> </td>
    <td width="130">
      <img src="http://potomacmanagementresources.com/sites/default/files/AMCI_Financial_Impact_Study_Infographic_130x168.jpg" alt="Financial Impact Study Infographic" /> </td>
    <td width="1"> </td>
  </tr>
  <tr>
    <td height="1" colspan="3"> </td>
  </tr>
</table>

Ghosting Floats in HTML Email

iOS Gmail Yahoo! Outlook

• While  all support floats,  does not—consider styling the block as normal, then add conditional tables for Outlook:

<!--[if gte mso 9]> <table id="speaker-bio-Masters" width="410"> <tr> <td width="170" valign="top" align="center"> <![endif]-->
<table width="152" height="218" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #582e88; float: right; margin: 9px;">
  <tr>
    <td><img src="http://whf.membershipsoftware.org//Files/Spring%20Symposium/WHF_Events_Symposium_2016_Communications_MastersHeadshot_20160222.jpg" width="150" height="216" alt="Blythe Masters Portrait"></td>
  </tr>
</table>
<!--[if gte mso 9]> </td> <td width="240" valign="top"> <![endif]-->
<p>Blythe is the chair of the board of Santander Consumer USA Holdings Inc.</p>
<!--[if gte mso 9]> </td> </tr> </table> <![endif]-->