Email Design Guidelines

There can be a number of factors as to why an email may not be formatting as desired within a specific mail client. Unfortunately, all mail clients render HTML email in their own unique way and unfortunately this is out of the control of any email marketing solution provider. With that said, there are some design guidelines that should be adhered to:

Known Email Client Issues

Outlook 2007 and 2010
On occasion, you may notice unwanted horizontal space in your email. If you are viewing the email in Outlook2007 or 2010, the cause is more than likely the length of the email. Outlook 2007 and 2010 use the MicrositeWord rendering engine to display HTML emails. When an HTML email is rendered in the viewer, there is amaximum parent element height of 23.7 inches or approximately 1,790 pixels before it automatically inserts aline break. Therefore, if a table exceeds this height, the viewer will insert a break at random. In some cases,if an image is in the space where the line break will be inserted, the viewer will only display a portion of thatimage.

We suggest a couple of solutions for this issue:

1. Shorten your content and link to detailed information.
 2. Break your email into two or more stacked tables that are less than 23.7 inches in height. This may requiremultiple rounds of testing to overcome the issue.

Lotus Notes
It is strongly advised that refer to the Lotus Notes Design Guidelines documentation if your organization utilizes Lotus Notes.

Email Templates in the DMP

MS Office
It is strongly advised that you don't copy and paste directly into the HTML editor from MS Office applications such as MS Word. Microsoft utilizes a series of special characters proprietary to MS Office applications that will not be interpreted by the DMP or other non Microsoft email Clients.

Edit Tags
When incorporating DMP edit tags (example - [edit: xyz]) into your template its important that you don't place the edit tag within <p> tags (example, <p> [edit: xyz] </p>). Often times, within the edit tag content itself you could have a <p> tag and it is illegal to have a <p> tag within a <p> tag. Doing so will cause a system conflict and could lead to malformed content as well as cause edit tags to not function properly.

One example of a <p> tag - edit tag conflict may look like this:

 

Layout

Set your width to 600 pixels or less. Most users will view your email in a preview pane which typically has a small visible area on the computer screen. Also when designing your email keep in mind that the top most 250 pixels by 250 pixels is most visible. Don't use background images in your email; many email clients do not support them.

Use Tables
Most clients have poor support for float, margin and padding, requiring you to use tables for the code framework of your email. For complex layouts use nested tables. The most reliable way to set the width of a table of is to set the width on each cell. Stick to pixels when setting width, avoiding percentages will increase the likelihood of your email rending the same in multiple email clients. Don't forget to set bgcolor, align and valign on your td as well.

CSS and Font Styling

Follow the following rules when using CSS and styling font.

Don't:

Don't link to external style sheets

Don't use shorthand, see examples below for setting properties individuality and HEX colors values

Do:

Use embedded styles sparingly
Use inline styles
Use <font> tags 

Note: It is recommended that you do not specify an inline style for this tag (i.e., <font style=") or the DMP editor will not be able to control font attributes as the style specified in the font tag will override the DMP editor regarding font control.  It is recommended that you utilize traditional font tag attributes instead (i.e., face, color and size) if you wish to allow users to manipulate font characteristics of the template using the DMP editor.  

For more information on standards/styling support in popular email clients visit http://www.E-Mail-standards.org/clients/.

Example: Declare Properties Individuality

Example: HEX Color Values

Links

Set the color attribute on each link. This may seem redundant but it is the best way to ensure your link color will stay consistent across email clients. Tip: Outlook 2007 and 2010 will override inline link colors and visited link colors so you must declare the link color in the embedded CSS, see example links in Outlook 2007 and 2010.

Example: Code Format for Links

Example: Links in Outlook 2007 and 2010

Images

When using images in email follow these general rules.

Don't:

Don't use background images

Don't use float

Don't use spacer images. Some email clients will remove spacer images completely so be sure to use fixed cell widths and heights to keep your formatting.

Do:

Do use images at 72 dpi

Do set meaningful descriptive ALT text

Do set the width and height

Do set the border=0 so that if they image is a link the default blue border will not show

Do use absolute paths, see example below

Example: Absolute Paths

Video, Flash, Forms, JavaScript and ActiveX

Don't embed video, Flash or forms, they are simply not supported in email. Also, JavaScript and ActiveX are not supported in email therefore should not be used.

Webmail Clients

Webmail Clients, including Yahoo, Gmail and Hotmail, will remove the <html>, <head> and <body> tags fromyour email. Place embedded CSS below the <body> tag so that it is not removed by webmail clients. The best way to ensure your background color will show across email clients wrap your entire email in a 100% width table and set the background color on the td.

Plain-Text

Always include a plain-text version of your email for recipients who cannot view or have turned off HTML emails. Follow these rules when creating you plain-text version.

Do:

Do use line breaks

Do use ************************* and ----------------------------- to divide content and headers

Do give full URL paths as links will not be clickable

Do keep lines less than 50 characters

CAN-SPAM Act of 2003 (Unsubscribe/Opt-Out link)

It's the law, if you are sending a commercial email, an email that is selling or promoting a service or product, you must provide your physical mailing address and an unsubscribe/opt-out link. You should also never use deceptive headers including, from-names, reply-to address or subject lines. For more information about the CAN-SPAM Act of 2003 please visit http://business.ftc.gov/documents/bus61-can-spam-act-Compliance-Guide-for-Business.

Don't Forget to Test

The best way to know how your email will look across email clients is to send a preview and open it in your targeted email clients. We supply a service called email Reach that will provide screenshot of your email in popular email clients. For more information about this service contact your administrator.