To understand the Outlook 2013 HTML email issues, one must first understand the shaky structure upon which it was initially built. Towards the end of 2006–beginning of 2007, Microsoft “de-revolutionized” the email marketing industry by releasing Outlook 2007. With its adoption of the MS Word rendering engine to display HTML emails (Outlook 2003 used Internet Explorer’s), email creative suddenly needed to accommodate some pretty severe limitations.
For instance, attention-capturing GIF animations wouldn’t play, CSS-controlled graphics wouldn’t display properly, and background images wouldn’t load. Combined with the increasing penetration rate of Outlook 2007 in corporations and, more importantly, client managers who approve email campaigns, creative teams needed to adapt quickly.
Fast forward seven years and two updated editions of Outlook later—we cautiously welcome the newest version, Outlook 2013. Perhaps Microsoft has heard the email development community’s unified cry for change? Maybe this version uses a better rendering engine? Not a chance.
Nothing has changed with regards to how email creative renders in Outlook 2013 from its 2007 relative. GIF animations still won’t play, designers are forced to use file-size increasing images to achieve the same visual effects as one line of CSS code, and we’ve pretty much stopped the use of background images. What has changed, though, is the email development community’s effective workarounds to deal with Outlook, and its willingness to tolerate technical limitations.
Here are several tips and workarounds we’ve seen that work well at solving some of the issues associated with Outlook 2013 email rendering:
• Since only the first frame of the GIF animation loads, make sure it communicates the main message of the graphic, with the other frames acting in support.
• Ensure the design’s integrity doesn’t solely rely on CSS to work. For instance, if the email design calls for rounded corners on the graphics or text areas, make sure the overall design can still work with them as square corners.
• Specify an increased amount of leading (the space between lines of text) by placing the CSS “line-spacing” attribute inside the table cell that contains the text.
• Stay away from design techniques that place HTML-created text overtop of an image and, instead, use a background color.
• We recommend not using list items, because Outlook 2013 does not support them. Instead, use the bullet symbol “•” and create inner tables.
• Use 2×2 spacer GIFs since Outlook will ignore images with a 1×1 measurement.
Another issue that demands specific attention is that Outlook 2013 will automatically insert a page break into an email when the email’s content (text/images) reaches 1600 pixels (11 inches) vertically. This makes sense, as the Outlook rendering engine is based on Microsoft Word. While this feature works great in word processing, it causes serious rendering issues in email campaigns. To get around this feature, we suggest that content be edited down so the total vertical length is around 800 pixels. Another idea is to design a very flexible template in which the design is “clean” enough to minimize this type of break.
At Dana Communications, our developers typically start by testing code rendering in the full suite of Outlook versions 2003-2013. Once the code is fully tested and approved, we test it across the remaining 40 email clients, browsers and mobile devices in our email testing strategy.
To find out how your email marketing campaigns measure up to Outlook 2013 and other popular email clients, contact Lynn Kaniper for a free email test and best practices evaluation.
