120 DPI Issue

For Text
Apply width and height attributes to all block level tags like <table> and <td>, then declare a matching CSS width and height property in a style. Do not do this to % based widths.

From this
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="300" height="120" align="left" valign="top">CONTENT</td>
  </tr>
</table>

To this
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="300" height="120" align="left" valign="top" style="width:330px; height:120px;">CONTENT</td>
  </tr>
</table>

For Imagery

Replace doctype

From this
<html xmlns="http://www.w3.org/1999/xhtml">

To this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Add this before closing </head>

<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG></o:AllowPNG>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

CSS Circle // Border Radius

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="left" valign="top" style="background-color:#FF0004;"><img src="http://placehold.it/100x100" alt="" width="100" height="100" border="0" style="display:block; border-radius:50%;" /></td>
  </tr>
</table>

For a Border Radius with a Border

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate !important;">
  <tr>
    <td width="100" height="100" align="center" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size:10px; mso-line-height-rule:exactly; line-height:12px; color:#8b6d49; padding:0 0 0 0; border:1px solid #8b2331; border-radius:50%;">
      EXAMPLE
    </td>
  </tr>
</table>

Web Fonts in Email

Web Safe Fonts

Helvetica, sans-serif;
Arial, sans-serif;
Verdana, sans-serif;
Times New Roman, serif;
Times, serif;
Georgia, serif;

Adding a Web Font to Email

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" style="font-family:'Coda', Arial, Helvetica, sans-serif; font-size:12px; mso-line-height-rule:exactly; line-height:20px; color:#58595b; padding:10px 20px 10px 20px;" bgcolor="#ffffff"><strong>Content</strong></td>
  </tr>
</table>

Meta (Place directly above the opening <style> of the css)

<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<!--<![endif]-->

Email Client Targeting

Use these hacks to target specific Email Clients.

outlook.com

[owa] .name {CSS GOES HERE}

gmail and inbox

Note: Do not use <u> tags elsewhere in the code with this fix.

u ~ div .gmail {CSS GOES HERE}
<div class="gmail">CONTENT GOES HERE</div>

gmail.com

* [summary~="name"] {CSS GOES HERE}
<div summary="name">CONTENT GOES HERE</div>

webkit

@media screen and (-webkit-min-device-pixel-ratio: 0) {.name {CSS GOES HERE}}

firefox

@-moz-document url-prefix() {.name {CSS GOES HERE}}

aol mail

.★:not(#★) {CSS GOES HERE}
<div class="★" id="★">CONTENT GOES HERE</div>

thunderbird

.moz-text-html .name {CSS GOES HERE}

samsung

#secdiv .name {CSS GOES HERE}
#messageWebViewDiv .name {CSS GOES HERE}

lotus notes 8

.notes.name {CSS GOES HERE}

yahoo

@media yahoo {.name {CSS GOES HERE}}

Microsoft Outlook Version Targeting

For each Microsoft Outlook client, there is a version number. Here is the rundown. This knowledge allows the targeting of specific problems.

All of Outlook

If MSO
<!--[if mso]>CONTENT<![endif]-->
If not MSO
<!--[if !mso]><!-->CONTENT<!--<![endif]-->

Greater than or less than a specified version

Greater than
<!--[if (gt mso 9)]>CONTENT<![endif]-->
Greater than or equal to
<!--[if (gte mso 9)]>CONTENT<![endif]-->
Less than
<!--[if (lt mso 16)]>CONTENT<![endif]-->
Less than or equal to
<!--[if (lte mso 16)]>CONTENT<![endif]-->

Outlook and IE

<!--[if mso|(IE)]>CONTENT<![endif]-->

Version 8 (Outlook 97 and Outlook 98)

<!--[if (mso 8)]>CONTENT<![endif]-->

Version 9 (Outlook 2000)

<!--[if (mso 9)]>CONTENT<![endif]-->

Version 10 (Outlook 2002)

<!--[if (mso 10)]>CONTENT<![endif]-->

Version 11 (Office Outlook 2003)

<!--[if (mso 11)]>CONTENT<![endif]-->

Version 12 (Office Outlook 2007 and Outlook 2008 for Mac)

<!--[if (mso 12)]>CONTENT<![endif]-->

Version 14 (Outlook 2010 and Outlook 2011 for Mac)

<!--[if (mso 14)]>CONTENT<![endif]-->

Version 15 (Outlook 2013)

<!--[if (mso 15)]>CONTENT<![endif]-->

Version 16 (Outlook 2016)

<!--[if (mso 16)]>CONTENT<![endif]-->

“A Tag” // href // Link

Make sure the URL has http:// or https://. Include target=”_blank” for the instances where a user has navigated to the “View Online” version of the email.

Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">Structure of an A Tag</a>

No Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:none;">Structure of an A Tag</a>

Mailto

<a href="mailto:email@tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line

<a href="mailto:email@tabletrtd.com?subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line / CC / BCC

<a href="mailto:email@tabletrtd.com?cc=email@tabletrtd.com&bcc=email@tabletrtd.com&subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Telephone

<a href="tel:555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Telephone with Country Code

Note: Telephone Tags do not require a country code, but it is good practice to include it.

<a href="tel:+1-555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Jump Link

Note: Use an “id” on the <td> and a “name” on the <a> (href) tag. There must be a pound sign (#) before the value name in the href field.

Link
<a href="#JumpLinkSection">Jump To Jump Link Section</a>

Destination
<td align="left" valign="top" id="JumpLinkSection"><a href="http://tabletrtd.com" name="JumpLinkSection">This is the Jump Link Section!</a></td>

Keep Black Link From Turning Blue

Black fonts using Hex Code #000000 that are linked will turn blue in some email clients. Update all #000000 Hex Codes to be #000001, and the Font will remain Black in all email clients.

Image Tag Hacks

Spacer with &nbsp; (no image needed)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
 <tr>
   <td height="20" align="left" valign="top" style="height:20px; font-size:0; line-height:1px;">&nbsp;</td>
 </tr>
</table>

Short Image (under 20px high)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:10px;"><img src="http://placehold.it/500x10" alt="" width="500" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="20" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="20" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height (under 20px high)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Width

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="20" align="left" valign="top"><img src="images/spacer.gif" alt="" width="20" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Full Width (<hr />)

<table bgcolor="#000001" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="1" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Disable Download Arrow in Gmail

If that little download arrow is showing up on an image in Gmail, the cause is that your image is either 250px wide or 250px high. The quick fix for this is to toss a link around the image and the little arrow will disappear.

Superscripting Guide

Superscript solutions for all types of requirements.

No Superscript
&reg;

Standard Superscript
<sup>&reg;</sup>

Flexible Superscript
<sup style="font-size:9px; line-height:0;">&reg;</sup>

Bulletproof Superscript
<sup style="font-size:9px; line-height:0;"><!--[if (gte mso 9) | (IE 7)]><span style="font-size: 12px; vertical-align: 3px;"><![endif]-->&reg;<!--[if (gte mso 9) | (IE 7)]></span><![endif]--></sup>

Background Color on Entire Email

Here is the code.

<body bgcolor="#eeeeee" style="margin:0; padding:0; width:100% !important; background-color:#eeeeee;">
<div align="center" style="background-color:#ffffff;">
  Build Email Here
</div>
</body>

Here is the breakdown.

bgcolor=”#eeeeee” on <body>
Works everywhere except:

  • Gmail App on Android
  • AOL Web Clients
  • Gmail Web Clients
  • Google Apps Web Clients
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <body>
Works everywhere except:

  • Android 4.4
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <div>
Leaves white padding around entire email in:

  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook 2016