EMAIL BEST PRACTICES GUIDELINES
In order to guarantee maximum deliverability and consistency of design across platforms (Outlook for Desktop being the biggest culprit), the following guidelines should be upheld during the email design process.
1
When designing the email, width should be hard set to 600 pixels wide. This will insure all mobile and desktop email renderers will render at the correct size and the email will not be cut off on mobile screens.
2
When laying out items side by side in the email, keep the divisions between sections consistent (1/2 by 1/2, 1/3 by 2/3, 1/3 by 1/3 by 1/3, etc). Pixel specific columns (for example, one column at 210 pixels and the next at 490) break and layout differently across email platforms.
3
When laying out a multi-column design, keep row heights consistent. Varying row heights break and layout differently across email platforms. This is especially apparent in bordered sections. See example below:
For example of rows and columns, see the design below. Column widths are kept consistent, and no column is outside the bounds of its given row.
4
If it is necessary to divide up space further for margins or padding, columns and rows should not nest more than 2 layers deep. Please see example below
5
Images and live html text must be kept separate. Background images are not supported in Outlook for Desktop. Background images can still be used behind rasterized banner or header text. See example below.
FONT GUIDELINES
1
When designing, always use web safe fonts (see list below). These fonts are guaranteed to work on all web, desktop, and mobile browsers. Outlook for desktop does not support Google, Adobe, or external fonts.
2
Do not set custom character width, height, tracking, baseline shift, or skew on text during design. These settings cannot be replicated in html markup. Custom font weights (300, 400, 700, etc) are also not supported.
3
Line heights in email design should remain consistent across the design. Line height in emails have to be set as a percentage of the font size for compatibility. A list of Illustrator/Indesign equivalents are listed below. Please insure body, list, and html live header text used in designed emails uses one of the combinations provided below.
4
Margins on centered text should remain left-right consistent. This may cause the text to shift across email clients.
5
Text should remain a consistent size over the same line. Some email renderers will not respect different font sizes in the same line.
6
Google, Adobe, or custom fonts can still be used in rasterized banner or header text. The email client will not recognize rasterized images as live text however.
OTHER GUIDELINES
1
Bullets in emails can be used in 2 ways:
• Inline with text - Multiline text cannot indent against the bullet.
• Separated lists - Single line text can indent against bullet.
2
When links are provided, they should always be fully secure (https links, not http). Security settings on some user’s account may not let them access insecure links.
3
When planning on deploying the email campaign through Salesforce or similar tools, a text-only version of the email should also be prepared. In order to guarantee compatibility with the online platform, this text only version should be prepared on a Windows machine. Apple computers use non-standard encoding for characters that cause character replacement issues when uploading to online tools.
These guidelines are to establish a fast, efficient, and best-practice informed design that renders well across all email clients. These rules can be broken but may cause cross-browser, cross-email client rendering issues. Following best practices insures consistent results across all platforms.
From Name and Address Rules
NoReply is default
Customize from name and anything before the @
Examples
Basic Examples
Click the examples to enlarge.
Advanced Examples
Click the examples to enlarge.
