Below are guidelines for using Journey Orchestrator email's HTML coding option:

  • Know which email clients you are targeting and ignore the rest
    • makes the building process easier
    • saves lots of time in the testing phase
  • Using DOCTYPE

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • Use tables for layout and as a main/body container
  • Set width for each cell
  • Avoid whitespace in table cells since it makes code unreadable
  • Inline CSS
  • Avoid shorthand for fonts
From To
font:bold 1em/1.2em georgia,times,serif; font-weight: bold;
  font-size: 1em;
  line-height: 1.2em;
  font-family: georgia,times,serif;
  • Avoid shorthand for colors
From To
color : #fff color:#ffffff
  • Set margin for Paragraphs inline
  • Add a redundant SPAN inside the A/Link tag
From To
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a> <a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
  • Avoid using Spacer Images
  • Avoid HTML comments. For example, <!-- -->
  • Avoid using "display:none" and "visibility:hidden" properties
  • Always include the dimensions, ALT tag and fallback background color of image
  • Avoid PNG’s
  • Use img{display:block;} always to avoid unnecessary paddings
  • Use align attribute for containers or images to align right, left, center
  • Use CENTER tag to align all block level elements
  • Keep the width within 600 pixels
  • Avoid typos and using all caps
  • wp_outlook.pdf 

Why Inline CSS

For better results in Gmail and Outlook, move all CSS class attributes into inline for individual elements. The following sample images show the incorrect and proper usage of inline css: 

AA-Email without inline css.png

Note: The above mentioned inline CSS is not applicable in the Gainsight application. The styles will not be honored.

AA Email with inline css.png