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 allmailto: <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
andPadding
for increased support - No empty
<div>
s or<td>
s—add a styled element with
and setfont-size: 0;
- Be aware that Gmail ignores
id
s—useclasses
or inline necessary CSS styling - Be aware that while Outlook ignores margins and padding, some versions still honor
margin-left
,margin-right
,padding-left
, andpadding-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
, orE:first-of-type
- Avoid sibling selectors in CSS, such as
E + F
ore > F
- Avoid pseudo selectors in CSS such as
E::before
,E::after
, orE:not()
- Avoid
style="background:;"
[CSS3] and instead usebackground=""
in a table - Repeat as
style="background-style:;"
[CSS3] if needed - Avoid
text-shadow
,box-shadow
, andborder-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;"> </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 ignoredisplay: 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=""
andheight=""
in addition to/instead of CSS to style spacers - Do NOT leave spacer
<td>
s empty—include a
withfont-size: 0;
- Use
background=""
orbgcolor=""
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 withcolor: # 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) andname
(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"
oralign="texttop"
oralign="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=""
andborder: 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]-->