Best Practices for Third-Party Email Design

HTML can be a fickle thing, especially because the best practices for web design do not always align with the best practices for email design. Consequently, when you design a mailing using web design principles, you may find that your subscribers encounter some unexpected behavior. For example, a responsive design based on web principles probably contains additional code that is unnecessary for an email!

This short guide outlines some of the best practices for mailing design. While primarily designed for non-Informz designers, these ideas are useful for all mailing designs (especially those that are hand-coded directly). By adhering to these principles, you'll find your mailings render consistently and look great!

Layout

Listed below are some general layout guidelines for your mailing.

  • Keep template width within 650 pixels (or fewer).
  • Use buffer tables.
    • Each large component (e.g. headers, content areas, footers) should have its own buffer table.
    • If the main content is too long, separate it into two location codes by putting them into their own, unique buffer tables. This will eliminate the Outlook 2007/2010 page break.
    • Use nested tables - these are far more reliable than setting left or right padding and/or using colspan and rowspan styles.

Mobile-Optimized versus Responsive Design

Choosing between mobile-optimized and responsive design is a critical decision when deciding the look, feel, and behavior of your mailing.

  • Your audience will dictate whether you use mobile-optimized or responsive design.
  • If you are not using responsive design, choose mobile-optimized so it looks good on both desktop and mobile devices.
  • A hybrid coding approach works, but it is not recommended for novice users.

Responsive Design

  • Keep your media queries as simple as possible. The most important styles that you use in your responsive templates are the resizing elements that match screen width. For example:
.fullwidth
{
Width:100% !important;
height:auto !important;
}
  • Always define a viewport for your responsive templates. This tells the email client or browser that the email/webpage is as wide as the screen's width. For example:
<meta name="viewport" content="initial-scale=1">
  • Use HTML Doctype 5 for responsive templates (this is available in the Informz Template Editor). If you do not use Doctype 5, certain media queries may not work properly.
  • Never include JavaScript, Videos, or Flash Files. These are likely to be stripped from the mailing.

Always Use

  • Always use attribute selector methods to define your media queries.

Below is the preferred method (this is a widely-supported method):

.fullwidth {with:100% !important;}

Below is a poorly-supported method (for example, the Gmail app does not support this attribute selector method):

[class=fullwidth] {width:100% !important;}
  • Always apply display:block to your img tags to avoid unnecessary spacing between multiple images.
  • Place your images in separate table cells.
  • Always add ALT text to your images. This is critical if your images are not displayed or are blocked.
  • When using tables to assemble sliced images, make sure you set the cellpadding and cellspacing to zero. Also, collapse all borders.

HTML and CSS

CSS Styles

  • Always use inline styles (except for media queries that are applied inside of the <head> tag of responsive templates). Never use an external stylesheet.
  • Use attributes to align your content. This is preferred over CSS styles. For example, use this attribute to left justify your content:
Align="left"

Common HTML Email Fixes

  • For images that are under 20 pixels tall, apply "line-height" to the table cell containing the image equal to the image height. For example:
<td style="line-heights:15px;">
<img src="http://www.iamap.org/image.jpg" style="display:block;" width="400" height="15" />
</td>
  • When designing your mailing, keep in mind that some subscribers might have their screen zoom set to 120% DPI or greater. Outlook typically breaks the layout during the scaling process.

Things to Avoid

  • Avoid using background images. These are stripped by most email clients.
  • Avoid <div> tags (tables are preferred).
  • Avoid <p> tags when creating line breaks wherever possible. The spacing tends to render inconsistently. Instead, use <br> for line breaks.
  • Use padding for cell spacing (avoid using margins).
  • Use web safe fonts whenever possible. Font stacking, using non-web safe fonts, often produces inconsistent rendering results in the desktop version of Outlook.
  • Always use Hex color codes for background, text, hyperlinks, etc. Do not use RGB or CYMK color values.
  • Use absolute source URLs. For example:
<img src="http://www.iamap.org/image.jpg" style="display:block;" border="0" alt="image" />

Other Considerations

GIFs

Animated GIFs are gaining popularity as a way to showcase your products and to draw in readers. However, most versions of Outlook do not support the animation. Rather, they simply display the first frame of the GIF. To circumvent this, make sure you have the most important information on the first frame of the GIF, including any calls to action.

Smart Watches

Smart watches pick up text versions of mailings (typically sent with the HTML version); mailings sent without text versions are generally not rendered on smart watches. Be sure to keep your text version as simple as possible. Avoid complex URLs - most smart watches will break the links.

Converting Templates from Other Marketing Systems

If you are transferring templates from another marketing system, using the above guidelines will go a long way. However, some additional steps may be necessary for mailings that were designed with a hybrid coding approach (e.g. MailChimp).

Converting Templates from MailChimp

Export the template as HTML from MailChimp.

Import HTML code in Informz by moving  <head> and <body> elements to their respective spots in Informz Template Designer.

Enable Doctype 5 (because most of the templates are responsive; this is not required for non-responsive templates).

Have you Advisor enable the extension called Disable Editor Media Filter. This prevents Informz from removing MSO code required for hybrid coding.

Move styles inline to HTML elements (Inclusion Method) from the internal stylesheet provided in the <head> tags.

Final Thoughts

There you have it! The principles and practices above will, quite simply, help make your mailings look and feel fantastic no matter how they are opened. Remember that many of these practices apply directly to the code of your mailing, so make sure that you are comfortable with HTML and CSS (or know someone who is!) before getting too deep. Finally, if you find that your code is getting a little out-of-hand, refer this guide to your designer! He or she can take a good look at the code and remove any erroneous tags and classes.