Skip to main content
Gainsight Inc.

Email Template Best Practices

This article walks you through some of the best practices to be followed while sending emails using Gainsight Email Templates. It also addresses the challenges faced while testing emails across different email platforms to ensure that your emails for customers are displayed exactly the way you intend.

Overview

Email marketing is still the most popular mode of communication to reach your customers. The most important part of successful email communication is a well-designed and attractive email template. In order to make emails look more attractive, users copy existing email templates into Journey Orchestrator and edit accordingly. This creates some issues because most email clients do not provide the same support for modern web standards as web browsers do and there are no email specific standards in place.

This discrepancy between different email clients is due to the Rendering engine. When an email client receives an email, it is a long wall of HTML code wrapped by CSS animation. A rendering engine creates a structure based on the code specified in the HTML and adds specific styling accordingly to the CSS. Any unnecessary code is stripped out and not rendered in the post-processing stage.

The following best practices must be followed while sending emails to avoid display problems:

  • Always use the fonts in the email builder that are supported by the Gainsight email template. For more information on Gainsight supported fonts, refer to Gainsight Supported Fonts.
  • Avoid using background images or colors that match the font color of the text in the foreground.
  • Always use inline Cascading Style Sheet (CSS).
  • Code email using <table> instead of <div>.
  • Test the email message in email clients before sending.

Best Practices or Guidelines

The following are some of the best practices/guidelines to be followed while using Email Templates.

Fonts Compatibility

The fonts you choose should display as expected in the email builder and the web version of your email. But, they are displayed differently depending on the device and email client your recipients use. This is because not all devices have the same fonts, and not all email clients support web fonts.

For more information on the most commonly used fonts and their compatibility percentage with Windows and Mac platforms, refer to CSS Font Stack.

There are two types of fonts used when you build an email:

  1. System Fonts
  2. Web Fonts

System Fonts

System fonts are generally stored on the recipient's hard drive, and come with operating systems like Windows, iOS, and Android.

Web Fonts

Web fonts are generally loaded from the internet, instead of a recipient's device. So, they should display similarly everywhere as long as the recipient's email client supports them. Where a recipient's email client does not support web fonts, it depends on the available system fonts.

Note: If a recipient's device has a font with the same name as a web font, the device font is displayed instead of the web font, and may look different.

The following are some of the major email clients that support web fonts:

  • Apple Mail
  • iOS Mail
  • Android's native email app (not Gmail)
  • Outlook on Android and iOS
  • Thunderbird
  • Outlook for Mac

The following are some of the major email clients that do not support web fonts:

  • Gmail / Gmail Mobile Apps
  • Yahoo Mail
  • Outlook

The following are some of the web fonts available for selection in the email builder, and the fallbacks provided if they do not load.

Font Fallback Order Expected system font fallback if web fonts are not supported
Arvo Museo Slab, Rockwell, Verdana, serif
  • Windows: Verdana
  • MacOS: Times New Roman
  • Android: Droid Serif
  • iPhone: Times New Roman
Bitter Lucida Bright, PT Serif, Georgia, serif
  • Windows: Times New Roman
  • MacOS: PT Serif
  • Android: Droid Serif
  • iPhone: Georgia
Cabin Gill Sans MT, Gill Sans, Trebuchet MS, sans‑serif
  • Windows: Trebuchet MS
  • MacOS: Gill Sans
  • Android: Roboto
  • iPhone: Gill Sans
Crete Round PT Serif, Constantia, Georgia, serif
  • Windows: Constantia
  • MacOS: PT Serif
  • Android: Droid Serif
  • iPhone: Georgia
Droid Sans Apple SD Gothic Neo, Segoe UI, DejaVu Sans, Trebuchet MS, sans‑serif
  • Windows: Segoe UI
  • MacOS: Apple SD Gothic Neo
  • Android: Droid Sans
  • iPhone: Apple SD Gothic Neo
Hind Corbel, Segoe UI, Avenir, sans‑serif
  • Windows: Segoe UI
  • MacOS: Avenir
  • Android: Roboto
  • iPhone: Avenir
Karla Calibri, Geneva, sans‑serif
  • Windows: Calibri
  • MacOS: Geneva
  • Android: Roboto
  • iPhone: Helvetica
Lato Avenir, Adobe Heiti Std, Segoe UI, Trebuchet MS, sans‑serif
  • Windows: Segoe UI
  • MacOS: Avenir
  • Android: Roboto
  • iPhone: Avenir
Lora Palatino, Book Antiqua, Georgia, serif
  • Windows: Book Antiqua
  • MacOS: Palatino
  • Android: Droid Serif
  • iPhone: Palatino
Merriweather DejaVu Serif, Georgia, serif
  • Windows: Times New Roman
  • MacOS: Georgia
  • Android: Droid Serif
  • iPhone: Georgia
Montserrat DejaVu Sans, Verdana, sans‑serif
  • Windows: Verdana
  • MacOS: Verdana
  • Android: Roboto
  • iPhone: Verdana
Open Sans Segoe UI, Apple SD Gothic Neo, Lucida Grande, Lucida Sans Unicode, sans‑serif
  • Windows: Segoe UI
  • MacOS: Apple SD Gothic Neo
  • Android: Roboto
  • iPhone: Apple SD Gothic Neo
Oswald Avenir Next Condensed, Arial Narrow, MS UI Gothic, sans‑serif
  • Windows: MS UI Gothic
  • MacOS: Helvetica
  • Android: Roboto
  • iPhone: Helvetica
Playfair Display Didot, Bodoni MT, Times New Roman, serif
  • Windows: Bodoni MT
  • MacOS: Didot
  • Android: Droid Serif
  • iPhone: Times New roman
Raleway Trebuchet MS, Avenir, Segoe UI, sans‑serif
  • Windows: Trebuchet MS
  • MacOS: Trebuchet MS
  • Android: Roboto
  • iPhone: Trebuchet MS
Roboto -apple-system, BlinkMacSystemFont, Tahoma, sans‑serif
  • Windows: Tahoma
  • MacOS: San Francisco
  • Android: Roboto
  • iPhone: Helvetica
Roboto Condensed Arial Narrow, Avenir Next Condensed, Roboto, sans‑serif
  • Windows: Arial
  • MacOS: Helvetica
  • Android: Roboto
  • iPhone: Helvetica
Source Sans Pro Apple SD Gothic Neo, PT Sans, Trebuchet MS, sans‑serif
  • Windows: Trebuchet MS
  • MacOS: Apple SD Gothic Neo
  • Android: Roboto
  • iPhone: Apple SD Gothic Neo

For more information on the most commonly used fonts and their compatibility percentage with Windows and Mac platforms, refer to CSS Font Stack.

Gainsight Recommended Fonts

The following table lists the fonts that are recommended by Gainsight in the email builder, and their compatibility with different operating systems.

Font Fallback Order Windows OS Compatibility Mac OS Compatibility
Arial sans-serif 99.84% 98.74%
Arial Black sans-serif 98.08% 96.22%
Arial Narrow sans-serif 88.39% 94.77%
Courier New monospace 99.73% 95.68%
Georgia serif 99.4% 97.48%
Tahoma sans-serif 99.95% 91.71%
Times New Roman serif 99.67% 97.48%
Trebuchet MS sans-serif 99.67% 97.12%
Verdana sans-serif 99.84% 99.1%

Inline CSS

Ensure that you always keep your styles simple either by writing them inline or use a conversion tool. Gmail, in particular, does not support embedded or external CSS, and many clients only support the most basic formatting styles.

Images in Emails

Ensure that each image contains an “alt attribute” and try to avoid heavy design images to convey the message. Due to the existence of image blocking in most email clients, most recipients will see the email with images turned off.

The following are some of the checklist items to be considered while using images in email builder:

  • Ensure that design for images is off.
  • Always include Alt Attributes.
  • Use images as GIF or JPEG files for best results.
  • Set border attributes to 0.
  • Add display style “block” or “inline-block” to images for preventing gaps under the images.
  • Always include height and width attributes.
  • Use absolute references rather than relative.
  • Try to avoid background images.
  • Use the align attribute for containers or images to align right, left, center.

Shorthand

In certain scenarios, unexpected results occur when developers use shorthand in HTML emails. To avoid this issue, always use the full six digits for HEX color codes instead of RGB colors and do not combine multiple CSS properties into a single shorthand.

Tables for Layout

Use tables to structure the layout of the email to avoid display issues because many email clients do not support CSS positioning, floats, and clears. Ensure that the user properly nests the tables and closes all open tags.

Test the Emails 

Email clients are famous for making unannounced changes that affect the actual display of the intended email. Make a habit of testing every message in all the major clients before sending the email. 

Mobile-Friendly Font Sizes

When designing a mobile email, you must ensure that it is easily readable with one eye. Using media queries to increase an email’s text size when it is viewed on a mobile device is one of the easiest things you can do to make an email better for readers. Guidelines for achieving minimum font size of 16px:

  • Apple recommends 17 to 22px
  • Google recommends 18 to 22px. 

Gainsight Recommends

While a 14px font size is fine on a desktop, it can often be a struggle to read anything of that size on a small screen. We recommend a font size of at least 16px for main copy.

Usage of MS Word HTML files

Microsoft Word adds additional Microsoft Office specific markup tags that are not typically found in HTML files when HTML file saved using Microsoft Word. The additionally created code causes issues in many HTML editors because it cannot understand office-specific codes. Therefore, you might see only part of the HTML render properly, or you may not see anything at all.

Guidelines while using MS Word HTML

Best solution is to create HTML code using HTML editing applications such as Microsoft FrontPage or Adobe Dreamweaver. If the user-created HTML document using Microsoft Word, but have Adobe Dreamweaver installed, the user can clean out the extra HTML content using Dreamweaver's Clean Up Word HTML command after the affected HTML code has been opened in Dreamweaver. 

Note: Procedure of cleaning Word HTML code may vary depending upon the Microsoft Word and Dreamweaver versions used.

Else, you can use the following filter options available while using Word while saving it as HTML:

  • Microsoft Word 2000: If the document is created using Microsoft Word 2000, use Microsoft Office 2000’s filter tool for cleaning out the extra HTML code elements. This tool helps in filtering out the extra code elements added by Microsoft Word. 
  • Higher than Microsoft Word 2000: If the document is created using newer Microsoft Word (higher than 2000), use Web Page Filtered option from the Save as Type drop-down menu while saving the HTML file using the Save as Web Page option.

CSS Support in Email Clients

Each email client (Outlook 2007, Gmail, Yahoo, etc.) offers a different level of support for HTML and CSS. This makes designing an email template that looks good in all email across-clients is a daunting task. Fortunately, the Email Standards Project publishes reports on common clients. 

Each email client renders email templates differently. Below are the details to find out the level of CSS support the most popular inbox clients support:

Browser

Styles and Links

STYLE AND LINK Outlook.com Yahoo! Gmail AOL
<style> in <head> Yes Yes Yes Yes
<style> in <body> Yes Yes No Yes
<link> in <head> No No No No
<link> in <body> No No No No

Element Selectors

Element Selectors Outlook.com Yahoo! Gmail AOL
* No No Yes Yes
E Yes Yes Yes Yes
E[$attribute] No No No Yes
[$attribute="$val"] No No No Yes
E F Yes Yes Yes Yes
E > F No Yes Yes Yes
E + F No Yes Yes Yes
E - F No No  Yes Yes
E:link Yes No No Yes
E:visited Yes Yes No No
E:active Yes Yes No No
E:hover Yes Yes No Only in WebMail
E:focus No No No No
E:target No No No No
E:nth-child(n) No No No Yes
E:nth-last-child(n) No No No Yes
E:nth-of-type(n) No No No Yes
E:nth-last-of-type(n) No No No Yes
E:first-child No No No Yes
E:last-child No No No Yes
E:first-of-type No No No Yes
E:last-of-type No No No Yes
E.classname Yes Yes Yes Yes
E#id No Yes Yes Yes
E:not(s) No No No Yes

Box Model

BOX MODEL Outlook.com Yahoo! Gmail AOL
border Yes Yes Yes Yes
border-radius [CSS3] Yes No Yes Yes
box-shadow [CSS3] Yes No No Yes
height Yes Yes Yes Yes
margin No Yes Yes Yes
padding Yes Yes Yes Yes
width Yes Yes Yes Yes
max-width Partial Yes Partial Partial
min-width Partial Yes Partial Partial

Table

TABLES Outlook.com Yahoo! Gmail AOL
border Yes Yes Yes Yes
border-spacing Yes Yes Yes Yes
caption-side Yes Yes Yes Yes
empty-cells Yes Yes Yes Yes
table-layout Yes Yes Yes Yes

Fonts

FONTS Outlook.com Yahoo! Gmail AOL
direction Yes Yes Yes Yes
font Yes Yes Yes Yes
font-family Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes Yes Yes
font-size Yes Yes Yes Yes
font-weight Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes
line-height Yes Yes Yes Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes Yes Yes
text-overflow [CSS3] Partial Partial Partial Partial
text-shadow [CSS3] Yes Yes No No IE Support
text-transform Yes Yes Yes Yes
white-space Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes
word-wrap [CSS3] Yes Yes Yes Yes
vertical-align Yes Yes Yes Yes

Color and Background

COLOR & BG Outlook.com Yahoo! Gmail AOL
color Yes Yes Yes Yes
background No img Support Yes Yes Yes
background-color Yes Yes Yes Yes
Background-image Yes Yes Yes Yes
Background-position No Yes Yes Yes

Background-repeat

No Yes Yes Yes
HSLA Colors [CSS3] No No No No IE Support
Opacity [CSS3] Yes No No No IE Support
RGBA Colors [CSS3] No No No No IE Support

Position and Display

POSITION & DISPLAY Outlook.com Yahoo! Gmail AOL
bottom Yes No No Yes
clear Yes Yes Yes Yes
clip No No No Yes
cursor Yes Yes No Yes
display Yes Yes Yes Yes
float No Yes Yes Yes
left No No No Yes
opacity Yes No Yes Yes
outline [CSS3] Partial Partial Partial Partial
overflow Partial Yes Partial Yes
position Yes No No Yes
resize [CSS3] Yes Yes No Yes
right Yes No No Yes
top Yes No No Yes
visibility Yes Yes No Yes
z-index Yes Yes Yes Yes

Lists

LISTS Outlook.com Yahoo! Gmail AOL
list-style-image No Yes No Yes
list-style-position No Yes Yes Yes
list-style-type Yes Yes Yes Yes

Dekstop

Styles and Links

STYLE AND LINK Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
<style> in <head> Yes Yes Yes Yes Yes
<style> in <body> Yes Yes Yes No Yes
<link> in <head> Yes Yes Yes No Yes
<link> in <body> Yes Yes Yes No Yes

Element Selectors

Element Selectors Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
* No Yes Yes Yes Yes
E Yes Yes Yes Yes Yes
E[$attribute] No No Yes Yes Yes
[$attribute="$val"] No Yes Yes Yes Yes
E F Yes Yes Yes Yes Yes
E > F No No Yes Yes Yes
E + F No Yes Yes Yes Yes
E - F No Yes Yes Yes Yes
E:link Yes Yes Yes Yes Yes
E:visited No Yes Yes Yes Yes
E:active No Yes Yes Yes Yes
E:hover No Yes Yes Yes Yes
E:focus No No Yes No No
E:target No No No No No
E:nth-child(n) No No Yes No Yes
E:nth-last-child(n) No No Yes No Yes
E:nth-of-type(n) No No Yes No Yes
E:nth-last-of-type(n) No No Yes No Yes
E:first-child No Yes Yes Yes Yes
E:last-child No No Yes No Yes
E:first-of-type No No Yes No Yes
E:last-of-type No Yes Yes No Yes
E:first-line No Yes Yes No Yes
E:first-letter No No Yes No Yes
E:before No No Yes No Yes
E:after No Yes Yes No Yes
E.classname Yes Yes Yes Yes Yes
E#id Yes Yes Yes Yes Yes
E:not(s) No No Yes No Yes

Box Model

BOX MODEL Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
border Yes Yes Yes Yes Yes
border-radius [CSS3] No No No Yes Yes
box-shadow [CSS3] No No Yes No No
height No Yes Yes Yes Yes
margin Yes Yes Yes Yes Yes
padding Partial Yes Yes Yes Yes
width Yes Yes Yes Yes Yes
max-width No No Yes Partial Partial
min-width No No Yes Partial Partial

Table

TABLES Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
border Yes Yes Yes Yes Yes
border-spacing No No Yes Yes Yes
caption-side No No No Yes Yes
empty-cells No No Yes Yes Yes
table-layout Yes Yes Yes Yes Yes

Fonts

FONTS Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
direction No Yes Yes Yes Yes
font Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes
text-overflow [CSS3] No Yes Yes Partial Yes
text-shadow [CSS3] No Yes Yes No Yes
text-transform Yes Yes Yes Yes Yes
white-space Yes No Yes Yes Yes
word-spacing No Yes Yes Yes Yes
word-wrap [CSS3] No Yes Yes Yes Yes
vertical-align No Yes Yes Yes Yes

Color and Background

COLOR & BG Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
color Yes Yes Yes Yes Yes
background No img support Yes Yes Yes Yes
background-color Yes Yes Yes Yes Yes
Background-image Yes Yes Yes Yes Yes
Background-position Yes Yes Yes Yes Yes

Background-repeat

No Yes Yes Yes Yes
HSLA Colors [CSS3] Yes Yes Yes No Yes
Opacity [CSS3] Yes Yes Yes No Yes
RGBA Colors [CSS3] Yes Yes Yes No Yes

Position and Display

POSITION & DISPLAY Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
bottom No Yes Yes Yes Yes
clear No Yes Yes Yes Yes
clip No Yes Yes Yes Yes
cursor No Yes Yes Yes Yes
display No Yes Yes Yes Yes
float No Yes Yes Yes Yes
left No Yes Yes Yes Yes
opacity No Yes Yes No Yes
outline [CSS3] No No Yes No Yes
overflow No Yes Yes Yes Yes
position No Yes Yes Yes Yes
resize [CSS3] No Yes Yes No Yes
right No Yes Yes Yes Yes
top No Yes Yes Yes Yes
visibility No Yes Yes Yes Yes
z-index Yes Yes Yes Yes Yes

Lists

LISTS Outlook '07-'13 Outlook '00-'03 Apple Mail Windows Live Outlook for Mac
list-style-image No Yes Yes Yes Yes
list-style-position No Yes Yes Yes Yes
list-style-type No Yes Yes Yes Yes

Mobile

Styles and Links

STYLE AND LINK iOS 6 Android 4.2 Android 2.3 Gmail App
<style> in <head> Yes Yes Yes Yes
<style> in <body> Yes Yes Yes Yes
<link> in <head> Yes Yes Yes Yes
<link> in <body> Yes Yes Yes Yes

Element Selectors

Element Selectors iOS 6 Android 4.2 Android 2.3 Gmail App
* Yes Yes Yes Yes
E Yes Yes Yes Yes
E[$attribute] Yes Yes Yes No
[$attribute="$val"] Yes Yes Yes No
E F Yes Yes Yes Yes
E > F Yes Yes Yes Yes
E + F Yes Yes Yes Yes
E - F Yes Yes Yes Yes
E:link Yes Yes Yes No
E:visited Yes Yes Yes No
E:active No No No No
E:hover No No No Only in Android
E:focus Yes No No No
E:target No No No No
E:nth-child(n) Yes Yes Yes No
E:nth-last-child(n) Yes Yes Yes No
E:nth-of-type(n) Yes Yes Yes No
E:nth-last-of-type(n) Yes Yes Yes No
E:first-child Yes Yes Yes No
E:last-child Yes Yes Yes No
E:first-of-type Yes Yes Yes No
E:last-of-type Yes Yes Yes No
E.classname Yes Yes Yes Yes
E#id Yes Yes Yes Yes
E:not(s) Yes Yes Yes No

Box Model

BOX MODEL iOS 6 Android 4.2 Android 2.3 Gmail App
border Yes Yes Yes Yes
border-radius [CSS3] Yes Yes Yes Yes
box-shadow [CSS3] No No No No
height Yes Yes Yes Yes
margin Yes Yes Yes Yes
padding Yes Yes Yes Yes
width Yes Yes Yes Yes
max-width Yes Yes Yes Yes
min-width Yes Yes Yes Yes

Table

TABLES iOS 6 Android 4.2 Android 2.3 Gmail App
border Yes Yes Yes Yes
border-spacing Yes Yes Yes Yes
caption-side No Yes Yes Yes
empty-cells Yes Yes Yes Yes
table-layout Yes Yes Yes Yes

Fonts

FONTS Outlook.com Yahoo! Gmail AOL
direction Yes Yes Yes Yes
font Yes Yes Yes Yes
font-family Yes Yes Yes Yes
font-style Yes Yes Yes Yes
font-variant Yes Yes Yes Yes
font-size Yes Yes Yes Yes
font-weight Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes
line-height Yes Yes Yes Yes
text-align Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes
text-indent Yes Yes Yes Yes
text-overflow [CSS3] Yes Yes Yes Yes
text-shadow [CSS3] Yes Yes Yes Yes
text-transform Yes Yes Yes Yes
white-space Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes
word-wrap [CSS3] Yes Yes Yes No
vertical-align Yes Yes Yes Yes

Color and Background

COLOR & BG iOS 6 Android 4.2 Android 2.3 Gmail App
color Yes Yes Yes Yes
background Yes Yes Yes Yes
background-color Yes Yes Yes Yes
Background-image Yes Yes Yes Yes
Background-position Yes Yes Yes Yes

Background-repeat

Yes Yes Yes Yes
HSLA Colors [CSS3] Yes Yes Yes No
Opacity [CSS3] Yes Yes Yes No
RGBA Colors [CSS3] Yes Yes Yes No

Position and Display

POSITION & DISPLAY iOS 6 Android 4.2 Android 2.3 Gmail App
bottom Yes Yes Yes No
clear Yes Yes Yes Yes
clip Yes Yes Yes No
cursor Yes No No No
display Yes Yes Yes Yes
float Yes Yes Yes Yes
left Yes Yes Yes No
opacity Yes Yes Yes Yes
outline [CSS3] Yes Yes Yes No
overflow Yes Partial Partial Partial
position Yes Yes Yes No
resize [CSS3] Yes No No No
right Yes Yes Yes No
top Yes Yes Yes No
visibility Yes Yes Yes No
z-index Yes Yes Yes No

Lists

LISTS iOS 6 Android 4.2 Android 2.3 Gmail App
list-style-image Yes Yes Yes No
list-style-position Yes Yes Yes Yes
list-style-type Yes Yes Yes No

Create a Button in new Email Builder

The following example snippet can be used by the users if they want to add new buttons using the Email Builder that works in all email clients:

<table bgcolor="#ffffff">

<tr><td>

<div><!--[if mso]>

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:45px;v-text-anchor:middle;width:300px;" arcsize="9%" stroke="f" fillcolor="#06d02b">

<w:anchorlock/>

<center>

<![endif]-->

<a href="https://example.com"

style="background-color:#06d02b;border-radius:4px;color:#2f353e;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:45px;text-align:center;text-decoration:none;width:300px;-webkit-text-size-adjust:none;">Show me the button!</a>

<!--[if mso]>

</center>

</v:roundrect>

<![endif]--></div>

</td>

</tr>

</table>

General Email Coding Guidelines

Following are some of the generic guidelines for using Journey Orchestrator email's HTML coding option:

  • Avoid using "display:none" and "visibility:hidden" properties.
  • Avoid using “white-space” property. If it is used, it might affect the way email is rendered for outlook clients.
  • Use the CENTER tag to align all block-level elements.
  • Keep the width within 600 pixels.
  • Contents copied from external sources might impact on how it renders for outlook clients. For that reason, it is advisable to draft the content within the editor so that consistency will be maintained on how it looks to email recipients across email clients.
  • Was this article helpful?