Docs

Mobile Hide and Mobile Show

Mobile Hide

This content will show on desktop and hide on mobile. Always use on a <td>.

<td class="hidden" align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">CONTENT THAT IS HIDDEN ON MOBILE AND SHOWS ON DESKTOP</td>

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.hidden {
  width: 0 !important;
  display: none !important;
}
}
</style>

Mobile Show

This content will show on mobile and hide on desktop. Use a whole <table> inside this code. This hide will not work when forwarding the email.

<!--[if !mso]><!-->
<div class="show" style="font-size:0; line-height:0; display:none; max-width:0; max-height:0; overflow:hidden;">
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
     <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">CONTENT THAT IS HIDDEN ON DESKTOP AND SHOWS ON MOBILE</td>
   </tr>
 </table>
</div>
<!--<![endif]-->

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.show {
  display: block !important;
  overflow: visible !important;
  max-width: inherit !important;
  max-height: inherit !important;
}
}
</style>

Troubleshooting Aid

Paste this CSS into the head of your code.

<style type="text/css">
* {background-color: rgba(255,0,0,.2);}
* * {background-color: rgba(0,255,0,.2);}
* * * {background-color: rgba(0,0,255,.2);}
* * * * {background-color: rgba(255,0,255,.2);}
* * * * * {background-color: rgba(0,255,255,.2);}
* * * * * * {background-color: rgba(255,255,0,.2);}
</style>

Email Build Checklist
















Box Shadow

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td class="boxShadow" align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
  </tr>
</table>

css

<style type="text/css">
.boxShadow {
	-moz-box-shadow:3px 3px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.3);
	box-shadow:3px 3px 5px rgba(0,0,0,0.3);
}
</style>

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]-->