Skip to main content

FAQ: Why Isn't My Email Rendering As I Expect?

It can be challenging to create emails that render well in all email clients, because email clients, unfortunately, have little standardization in the way they display HTML. Unfortunately, not much has changed between 2007 advice and more recent advice.

Email HTML Limitations

Our staff recommends sticking with our predesigned layouts and HTML styles, or custom CSS developed by a reputable third-party vendor who knows what they're doing. Always write your emails first, then design them if it absolutely needs it.

Design for the lowest common denominator. Remember: web browsers specialize in dynamic content that updates frequently. Interactive elements that won't work in most email inboxes:

  • <div> layering
  • Embedded audio
  • Embedded video
  • Flash
  • Forms
  • <iframe>
  • JavaScript

Elements that may not work in some email inboxes:

  • Animated GIFs
  • Background images
  • Web fonts

You have to ensure your email parses properly in the following email applications (and this is only a partial list):

  • AOL (multiple versions)
  • Comcast
  • Earthlink
  • Gmail
  • Hotmail
  • Eudora
  • Mail.com
  • Outlook (multiple versions)
  • Thunderbird
  • Yahoo!
  • iPhone mobile clients (multiple versions)
  • Android mobile clients (multiple versions)

Preview Vs. Test Email

The Email Preview displays an email as it would look in a browser, as one might do if clicking on the link at the top of an email that was stored for preview online. This Preview can and should be trusted to display a very close approximation for your desktop view. The tablet and smartphone views will be rough estimates but also very close to the final version, with some exceptions due to the number of different device and email browser types available. Flexbox code, for example, may render properly in the Preview but not render properly in the test or final email.

Another great resource is a program called Litmus. It allows you to test the email across various clients.

Another thing that you may wish to do is keep an eye on the results of your email blasts in the Email Client stats area of the results, to see what email clients your constituents are using. If you start seeing that a significantly large amount of your constituents are using Gmail, you may wish to tailor the emails towards Gmail.

Microsoft Outlook Issues

You have worked really hard to design your emails as you intended them to look, especially with regard to mobile responsiveness. Outlook, however, doesn't render them exactly as you intended.

What gives? In a nutshell, Outlook uses Microsoft Word to render HTML as you would see it in a print preview. This ignores universal code standards that work perfectly well in other email programs.

The Problem

Outlook has the following common issues...

  • Does not display background images.
  • Wrong link colors.
  • Images generated at greater than 96 dpi may break.
  • Images may not display automatically by default on every user's screen.
  • Only fonts installed on a user's computer will display.
  • No animated GIFs.
  • CSS coded within the <head> tag do not display.
  • No rounded corner buttons.
  • Table padding inconsistent.
  • Emails < 1800 pixels long or they break.
  • No float or position properties in div CSS.
  • Images shorter than 12px in table cells break the table.
  • Table strokes do not display correctly.
  • Problems with varying line heights.

The Response

  • Keep things simple. Use plain-text-only emails. That's a bit drastic, but you can guarantee that it looks exactly the same in every email program!
  • Determine what version of Outlook your subscribers use. Design and test for that version.  If a small percentage of your subscribers are Outlook users, is it worth the trouble?
  • Provide a link to view your email as a web page. At the very least, this provides an opportunity to show how you intended the email to look.
  • Establish tables or nested tables to ensure your content stays where you want, in custom HTML email messages.

    Salsa Engage offers a few different row layout options within the Visual Editor. Outlook will not generally handle this row alignment properly. Custom HTML is advanced work. If this becomes important to you, you may want to consider an email marketing consultant.

  • Use an email rendering tool to test your emails. Litmus.com is a great tool to check how your emails render in different email programs—desktop and mobile—that your subscribers are using.

 

Comments

0 comments

Please sign in to leave a comment.