Background Color on Entire Email

To have full coverage using a background color, the background color needs to be in three places: a bgcolor on the <body>, a style background-color on the <body>, and a style background-color on the containing <div>.

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 of what is happening.

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

Preheader Text // Preview Text

Preheader text is copy at the top of your HTML that will display as the first content of your email in the preview pane of some email clients and most mobile clients. Place this code at the very top of your HTML, directly BELOW your opening body tag, ABOVE your tracking pixel.

Note: The hidden version will not show in the Email itself.

Hidden version

<table cellpadding="0" cellspacing="0" border="0">
 <tr>
   <td style="font-size:0; line-height:0; display:none !important;">
     <div style="display:none !important;">PREHEADER TEXT HERE</div>
   </td>
 </tr>
</table>

Visable version

<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;">PREHEADER TEXT HERE</td>
  </tr>
</table>

Font Sizes in Pixels (px)

The temptation will inevitably arise to use points or ems as the measurements for font sizes. Don’t do it! Stick with pixels. Everything inline and everything pixels.

<td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; mso-line-height-rule:exactly; line-height:20px; color:#58595b; padding:10px 20px 10px 20px;" bgcolor="#ffffff">Content</td>

Web Fonts

Looking to use web fonts? It’s a great idea. The fonts will fall back gracefully to the standard fonts for the older email clients, but remain a newer font in the newer email clients.

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

Mobile Break

Need a line break to work on Mobile, but not in Desktop? Add this span tag where you need the break to occur, with a class that has a display block.

<span class="break"></span>

css

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

Gmail App Rendering Issue Fix (Android and iOS)

Ensure email structure holds tight on Android and iOS. It is a quick fix. Add this table to the bottom of your email and adjust the min-width to match the width of your email.

Note: Thank you to Justin Khoo at Fresh Inbox for the starting place.

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="hidden" style="min-width:500px;">
      <div class="gmail" style="white-space:nowrap; font:15px courier; line-height:0;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
    </td>
  </tr>
</table>

css

<style type="text/css">
.gmail {
  width: 0 !important;
  display: none !important;
}
</style>

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

Opening CSS Resets

The opening CSS for every email build resets many different kinds of auto generated css and html that email clients add to the code. By doing this the code can be fully controlled by the Email Developer.

<style type="text/css">
body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
div[style*="margin: 16px 0"] {
  margin: 0 !important;
}
table, td {
  border-collapse: collapse !important;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}
img {
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
}
a {
  color: inherit;
  outline: none;
  text-decoration: none;
}
* {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}
.ReadMsgBody, .ExternalClass {
  width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
  line-height: 100%;
}
</style>

Media Query

Here is the setup for a Media Query. Place mobile CSS in this area.

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  CSS GOES HERE
}
</style>