Mastering Outlook: A Look Back at Common Rendering Issues

Microsoft is one of the biggest players in the email industry. Microsoft Outlook and its web-based counterpart Outlook.com hold a marketshare of over 10% collectively. This is pretty huge!

In a world where users are able to choose from a huge variety of email clients, how has Outlook remained so popular? Not only is Microsoft Office commonly installed on computers across businesses worldwide, but many home computers and laptops running Windows come with MS Office pre-installed. The default email client that is packaged with MS Office is…Outlook.

Then there’s Outlook.com, which began its career as an email client as Hotmail, back in 1996. In 1997 Microsoft acquired Hotmail for an estimated $400 million and launched Hotmail as MSN Hotmail. It was later rebranded again to Windows Live Hotmail. Finally, in 2013 Hotmail was replaced entirely by Outlook.com. With Outlook.com’s history interwoven with Hotmail, it shouldn’t be surprising to know that as of 2015, Outlook.com had over 400 million active users.

Building emails for Outlook has always been challenging. From Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. Great news for Microsoft Office users, who could seamlessly copy and paste items from Word or Excel into their Outlook emails. Not so great news for email marketers and developers who use HTML to build their emails. Try copying and pasting an HTML web page into a Word document and you’ll get a glimpse as to how Word translates HTML.

Naturally, the talented email developers out there began working their magic in developing a plethora of email hacks to make sure their beautiful HTML emails rendered just as beautifully in Outlook. Not an easy task, as a lot of hacks tend to involve VML (Vector Markup Language), which isn’t something you tend to learn in the school of hard-knocks for email development!

Here’s a short rundown on some of the more popular issues facing email developers, when developing emails for Outlook:

In modern web development, you can use containers such as divs to contain content, with tables solely used for tabular data. However, to position elements such as divs correctly within an HTML page, CSS attributes such as float and position are often required.

Outlook doesn’t support these attributes. To properly structure your emails for maximum cross-device/client/browser render-ability, developers use tables to build emails.

While tables have been working for email developers for years, they are restrictive in what can be accomplished in terms of email design. Designers must think in terms of rows and columns for their designs to be easily built with tables.

Live text. Live text. Live text. It’s the email marketer’s mantra. Have as much live text as you can in your emails to make sure your emails arrive in the inbox (rather than spam), are accessible to everyone, and readable with images turned off.

Background images can let you overlay live text on top of an image,whether it’s a pattern or a beautiful photo. Background images can create a beautiful sense of depth to your email designs, while still being accessible.

However, Outlook doesn’t support background images with pure HTML. Outlook requires the use of VML to make background images work. Thankfully, you don’t need to learn VML in full to be able to use background images in your email. Campaign Monitor has a great tool that will generate your VML and HTML code for you to give you bulletproof background images in your emails.

With the lack of support of video in email and email marketers driving to make their emails more dynamic and engaging, the humble animated GIF is the perfect way to bring some life to your emails.

However, Outlook doesn’t support animated GIFs. While the image will load and appear to the user, only the first frame of the animation will render.

If you have subscribers opening emails in Outlook and you’re using animated GIFs, make that first frame of the animation count. Keep the GIF simple and the animation not integral to the message but more like an added benefit to those who can see the full animation.

Padding is a great CSS attribute that can introduce space to your elements. It’s a useful CSS attribute to position elements in an email or to create breathing room around elements to enhance the design.

An easy workaround for this is to use the HTML attributes cellspacing and cellpadding in the table to create space around elements inside a table.

To introduce padding in your paragraphs—the p tag—use the style attribute mso-line-height-rule:exactly; combined with line-height to give your copy and text some breathing room, making it easier to follow:

<p style="mso-line-height-rule: exactly; font-size:14px; line-height:18px;">Your text here</p>

Margin: 10px;

margin: 10px;

KEEPING YOUR CODE RELEVANT

BUILDING EMAILS TAKES TIME

STRUGGLING TO MAKE YOUR EMAILS WORK IN OUTLOOK?