Mastering Outlook: A Look Back at Common Rendering Issues0
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.
Common rendering issues in Outlook
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:
Using tables in email development
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.
Background images with VML
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.
No support for animated GIFs
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.
No support for padding on p, div, and a tags
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>
It’s not just Outlook
While the desktop client has posed problems for email developers for years, there’s now a new version Outlook.com for email developers to tackle, which itself has thrown up it’s own share of rendering quirks. A lot of which are different to the quirks found in Outlook. (Of course.)
One change has not been a step in the right direction—Outlook.com strips out anything that’s placed within a set of media queries. So there’s no way to differentiate between the mobile or desktop version of an email.
There is some good news though. There are a few rendering bugs that were in older versions of Outlook.com which have been repaired. Most notably: the float/margin hack. To get the older version of Outlook.com to understand these CSS attributes, they had to be written using either uppercase or a mixture of upper and lowercase. Now case doesn’t matter.
Previously, for Outlook.com to understand the margin attribute, you had to use:
But now you can use:
For a more complete list of changes, email developer Rémi Parmentier has written a great blog what you need to know about the new Outlook.com, and what email developers should look out for.
Keeping your code relevant
If you’ve ever worked as an email developer, it can often feel like the goal posts of email render-ability move more than they should. As email development continues to evolve, there are always going to be new techniques that need “translating” to Outlook.
For example, when hybrid/spongy email development was introduced to ensure the Gmail mobile app rendered a mobile version of an email, email developers also created new techniques to enable Outlook to render those emails.
As email developers push the envelope further, with many aspiring to create table-less emails, these new techniques will have to be simplified for the many versions of Outlook that are still in use.
It’s fair to say that innovative and talented email developers have never been in more demand. VML has yet to be mastered in email, and as long as Outlook uses Word as its rendering engine, this will be a key area in which email developers can continue to push their knowledge and worth.
Building emails takes time
With all these challenges that Outlook imposes on email developers, as well as the growing list of email clients and devices that need to be supported, it’s no wonder that a sizeable chunk of time spent in email marketing is in developing and testing HTML emails.
In our 2016 State of Email Production, over 44% of respondents reported to spending more than 3 hours in email development. This is no short amount of time, and needs to be factored in when looking at an entire email marketing workflow.
Outlook has always been a tricky beast for email developers to wrangle. Unfortunately it can’t be disregarded since it has a sizeable email client market share, which could be larger if you work in the B2B marketing sector. Simply, Outlook can’t be ignored.
Struggling to make your emails work in Outlook?
We’ve partnered with Microsoft to prioritize email rendering bugs in Outlook, identify issues faster, and announce improvements and fixes to the community.
Help us make Outlook better and submit your rendering bug.