HTML Email Development: Code Snippets

Bellow is a short list of the most used code snippets you can bookmark for faster Html email development. Don't re-invent the wheel; time is money, and use already tested CSS and HTML elements for speedier deployment.

Buttons

You should be using tables and table cells for almost everything, including buttons. And then use CSS to style the buttons.

Instead of writting
<a href="#" class="btn btn-primary">Click Here</a>
-------------------
Write it this way
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Click Here</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Typography

If you want to use more than just system fonts and personalize your emails, you can use web fonts and write it behind WebKit conditional media query for better Outlook support.

@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* Type styles for all clients */
h1 {
 font-family: Helvetica, Arial, serif;
}

/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    font-family: Pacifico, Helvetica, Arial, serif !important;
  }
}

Conditionals

We can apply specific CSS styles and show or hide elements and content for different versions of Outlook.

The following targets all Microsoft Word-based versions of Outlook:
<!--[if mso]>
Only Microsoft Word-based versions of Outlook will see this.
<![endif]-->

This next snippet targets all IE-based versions of Outlook:
<!--[if (IE)]>
Only IE-based versions of Outlook will see this.
<![endif]-->

We can also target specific version numbers of Outlook:
<!--[if mso 12]>
Only Outlook 2007 will see this.
<![endif]-->

We can target WebKit-based clients with a media query:
.special-webkit-element {
  display: none;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special-webkit-element {
    display: block !important;
  }
}

Set widths in each cell rather than on the table

Widths on the table, widths on the cells, HTML margins and padding, and CSS margins and padding can be problematic. It is simpler, tested and best practice to set it only on each cell:

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="150"></td>
    <td width="350"></td>
  </tr>
</table>

Inline Css

Applying the style in line means styling each individual p element throughout your content.

<p style='line-height:1.5em;margin:0px 0px 10px 0px;'>Lorem</p>

HTML Tables for layouts

• <table> instead of <div>,
• #FFFFFF instead of #FFF,
• padding instead of margin,
• CSS2 instead of CSS3,
• HTML4 instead of HTML5,
• background-color instead of background,
• HTML attributes instead of CSS,
• inline CSS instead of style sheets or <style> blocks.

Many email clients will strip any CSS that isn’t inlined. Here are a couple of option use can use.

• write CSS inline as you go,
• use a web-based CSS inliner,
• use a programmatic CSS inliner,
• let your ESP handle the inlining for you (if it supports it).

This is a living and growing list of Code Snippets that will be updated accordantly. If you have suggestions please feel free to send an email.