Imagine spending hours to create the perfect print ad for a new product launch. You have created the perfect visuals and bold headlines. Finally satisfied that everything is perfect, you submit all of the materials to the magazine and sit back to see how your ad performs.

Now imagine getting a copy of this magazine and opening it to find your ad, but there´s no graphic and the headline text is the same size as the rest of the copy. The critical elements designed to convey your message have been lost in translation. After getting over the shock of seeing your mangled message, you´d be on the phone with your agency and magazine reps to understand how this happened and what could be done to prevent it in the future.

Unfortunately, this scenario is being played out on a daily basis in the online world. The difference is that many people don´t know (or realize) that the e-mail broadcast that they so painstakingly created may not be received by the reader intact. The result is a loss of control in how the marketing message is presented, and confusion on the reader´s behalf, because an e-mail that doesn´t display properly may not make sense.

What´s going on here?
In a nutshell, the problem lies in how different e-mail readers render (or translate) and display HTML code and the graphics they link to. Over the years, e-mail readers had made considerable progress in terms of rendering HTML consistently, so that what one person viewed in Microsoft´s Outlook would be close to what someone else might see in Mozilla´s Thunderbird or some other e-mail reader.  Sure, there were still problems and little idiosyncrasies that were needed to be worked around, but it was manageable. 

That all changed when Microsoft released Outlook 2007. Outlook now uses the HTML rendering engine that's a part of Microsoft Word instead of Internet Explorer for both displaying and sending e-mail. The result is that what displayed properly in Outlook 2000, Outlook 2003 and Internet Explorer may not display correctly in Outlook 2007 because of differences in how these two engines render or translate the code.

As Outlook 2007 becomes more widely adopted, these problems are getting worse. When you also consider that other e-mail programs, including Google, Hotmail, AOL etc., all have different ways to render the same HTML code and rules for how they read Cascading Style Sheets, you have a real mess in terms of trying ensure consistency in how your marketing message is presented to readers.

What can be done?
We have been working hard to test and help provide support for our sponsoring partners who are using our e-mail broadcasts. We have begun including a link to an identical version of every e-mail broadcast we send that is located on our website for the people who don´t have the capability to see graphics or animations in their e-mails. As always, our development team runs every broadcast through a series of quality tests prior to sending them to ensure they display with reasonable consistency in a variety of e-mail readers, including the various versions of Outlook, Yahoo, Hotmail and Gmail. The key is to keep the HTML layout code clean and simple — the more complicated your layout, the more likely your mailer will render with unexpected results.

As a marketing person, you need to carefully balance the advantages that the more complex layouts offer vs. the trade-off in potential problems with producing consistent results in all of the e-mail readers. Realize that until e-mail readers become more consistent, this will be an ongoing problem.

To help address these problems, we have created some suggestions for your design and development teams to help address these problems and to make things easier. Please share these with anyone who is involved in the actual creation of the files and media for your team.

Three tips for developers and designers

• E-mail broadcast layouts
  Keep your e-mail broadcast simple. HTML rendering is not exact, which means that line spacing, margins, indents and bulleted lists can vary in how they display. Layouts that are simple and have some margin to accommodate these inconsistencies will save you a lot of time and frustration.
  
  

• Animated GIF files
  Animated GIF files have long provided bullet-proof animations that were guaranteed to display correctly in any e-mail reader. No longer. Outlook 2007 displays only the first frame of an animated GIF — there is no animation. Designers and agencies that want to use animated GIFs need to remember that only the first frame of an animated GIF will display in Outlook 2007. That means that if there is nothing on that first frame, then the reader will see nothing — the rest of the animation will not run. Unfortunately, you cannot use Flash in an e-mail broadcast as a way to get around this problem either.
  
  
  

Outlook 2007 with improper animated GIF

click to enlarge

Correct example of animated GIF in Outlook 2007

click to enlarge

Solution:
Use non-animated GIF or JPEG files. However, if you have to use animation, then be sure to put all of the ad content into the first frame. Build your transition frames and then make sure that the last frame is a duplicate of the first frame so that when the animation ends, the essence of your message is available for the recipient to view.

• Cascading Style Sheets (CSS)
  Cascading Style Sheets are a very powerful design tool; however, there are many e-mail readers that will ignore all linked styles and therefore your text and design elements will simply be ignored.

Text formatting with
"Inline" CSS

Text formatting with
"Linked" CSS

click to enlarge

Solution:
When using Cascading Style Sheets, use “inline styles” instead of stylesheets when coding your e-mail broadcasts. This approach will provide greater consistency in how your e-mail appears in many readers.

*Sample of stylesheet ignored by some mail clients:

This is the body.

*Sample of inline styles accepted by most mail clients:

This is the body.

Closing Thoughts
Getting your marketing message to display and perform correctly in all of the e-mail readers available today is a more daunting task than ever before. However, if you follow the suggestions outlined above and share them with your designers, developers and ad agencies as you create your e-mail broadcasts, we believe you will avoid a complete “loss in translation.”

If you have further questions or suggestions please feel free to contact me at [email protected] or call me directly at 520.751.6847.

Paul Davis

Director of Marketing