Photo. A slanted shot of a computer screen displaying HTML code for a table, the core formatting element for HTML email development.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

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 Transitionalthe 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> Icon. Circle for iOS green.
  • Capitalize Margin and Padding for increased support Icon. Circle for Outlook blue.
  • No empty <div>s or <td>s—add a styled element with &nbsp; and set font-size: 0; Icon. Circle for Outlook blue.Icon. Circle for Gmail red.
  • Be aware that Gmail ignores ids—use classes or inline necessary CSS styling Icon. Circle for Gmail red.
  • Be aware that while Outlook ignores margins and padding, some versions still honor margin-leftmargin-rightpadding-left, and padding-right Icon. Circle for Outlook blue.

 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 Icon. Circle for iOS green.Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet.Icon. Circle for Outlook blue.
  • Avoid complex selectors in CSS such as E:nth-child()E:last-child, or E:first-of-type Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet.
  • Avoid sibling selectors in CSS, such as E + F or e > F Icon. Circle for Gmail red.
  • Avoid pseudo selectors in CSS such as E::beforeE::after, or E:not() Icon. Circle for Yahoo! violet.
  • Avoid style="background:;" [CSS3] and instead use background="" in a table Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet.Icon. Circle for Outlook blue.
  • Repeat as style="background-style:;" [CSS3] if needed
  • Avoid text-shadowbox-shadow, and border-radius [CSS3], else create images and insert into <tr>s and <td>s Icon. Circle for Gmail red.Icon. Circle for Outlook blue.

 Forcing the Look

iOS Gmail Yahoo! Outlook

  • Use XML language to apply bullet-proof background images Icon. Circle for Gmail red.Icon. Circle for Outlook blue.
  • Avoid shorthand styles except on borders Icon. Circle for Outlook blue.
  • Apply this fix to remove extra gap after a list: <div style="display: none;">&nbsp;</div> Icon. Circle for Outlook blue.
  • Do NOT use !important, else Outlook will strip the entire tag Icon. Circle for Outlook blue.
  • Use <div style="display: none !important;"> </div> to hide an object, else Gmail will ignore display: none; Icon. Circle for Gmail red.
  • Apply line-height to individual inline elements like <p>s rather than <td>s Icon. Circle for Outlook blue.
  • Define a color close to black to force “black,” such as #000001 Icon. Circle for Gmail red.
  • Use cellpadding="0" on all tables to remove thin red borders Icon. Circle for iOS green.
  • 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> Icon. Circle for iOS green.Icon. Circle for Gmail red.
  • Use style="table-layout: fixed;" to apply the width of the first <tr> to all following <tr>s Icon. Circle for Outlook blue.
  • Use style="border-collapse: collapse;" to remove duplicate borders in tables Icon. Circle for Outlook blue.
  • Use width="" and height="" in addition to/instead of CSS to style spacers Icon. Circle for Outlook blue.
  • Do NOT leave spacer <td>s empty—include a &nbsp; with font-size: 0; Icon. Circle for Outlook blue.
  • 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) Icon. Circle for iOS green.Icon. Circle for Outlook blue.
  • Add margin-bottom: 1em; to force whitespace underneath each <p> Icon. Circle for Outlook blue.
  • 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 Icon. Circle for iOS green.Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet.Icon. Circle for Outlook blue.

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 &nbsp; following the end of the text Icon. Circle for Outlook blue.
  • Declare both href id (non-deprecated and validating) and name (legacy) formats in all anchor links Icon. Circle for Outlook blue.
  • Use name="top" for greatest compatibility in Back to Top anchor links Icon. Circle for Outlook blue.
  • iOS 8+ dropped support for anchor links Icon. Circle for iOS green.
  • 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 Icon. Circle for iOS green.Icon. Circle for Outlook blue.
  • Do NOT resize the image in CSS, which Outlook ignores; upload at 100% Icon. Circle for Outlook blue.
  • 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 Icon. Circle for Outlook blue.:
<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; Icon. Circle for Outlook blue.
  • 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 Icon. Circle for iOS green.Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet.Icon. Circle for Outlook blue.
  • 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 Icon. Circle for Outlook blue.:
<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 Icon. Circle for iOS green.Icon. Circle for Gmail red.Icon. Circle for Yahoo! violet. all support floats, Icon. Circle for Outlook blue. 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]-->