One of the major challenges of email marketing is designing and implementing email templates that render consistently across platforms. While there are standard methods for putting an email template together, the technology that provides you with the final email preview is constantly changing. Email application providers are constantly working on upgrading their platforms. Occasionally, these changes come with unexpected glitches.
A notorious example of such glitches is the case of some strange horizontal lines rendering randomly in Outlook 2016. We at itracMarketer, along with other well-known Email application providers and industry experts, have identified the latter rendering issue. Read on to find out more about the intriguing issue of horizontal lines in Outlook 2016…
Our issue: Mysterious horizontal lines in Outlook 2016
After its 2007 release, Outlook decided to change the way in which HTML code is rendered. This is how your email templates are displayed by the email client.
In previous versions, Outlook used an Internet Explorer rendering engine to process HTML code. For Outlook 2010, 2013 and 2016, they got rid of both Word and Outlook as the email editor. This was then replaced it with a completely revamped Word processing editor. This change deteriorated Outlook’s HTML rendering capability, causing endless issues. This includes some mysterious horizontal lines in Outlook 2016 that are breaking template aesthetics.
Figure 1 – Behold the horizontal lines in Outlook 2016
Strange horizontal lines in Outlook 2016 are appearing at the bottom of table components (which can be illustrated by figure 1). If your content’s background colour is different from that of the body, you may see horizontal lines leaking through your template. Although not entirely random, this is still difficult to predict. All we know is that this issue has something to do with font-sizes and line-heights. What exactly? No one knows yet….
This is an Outlook 2016 specific bug
Only one thing is certain at this point: This is an Outlook 2016 specific bug and Microsoft Outlook is aware about it. This problem does not appear in Outlook 2007, 2010 or 2013, all of which are also using the Word engine. As expected, this issue does not affect Outlook 2016 for Mac, because Apple knows best and doesn’t use Word for rendering. This is a known bug in Windows 10 mail and Outlook 2016. Unfortunately for us, there is no known workaround out there.
No one is safe from the dreaded Outlook 2016 lines! Even email platforms like MailChimp have reported having issues with these weird lines. Litmus (known for best practices on email templates) has entire community discussion forums dedicated to this problem. You can also find places like GitHub, where developers are uniting forces to defeate these annoying lines once and for all!
In the meantime, what can be done?
Since these lines are the same colour as the background of the email, if you use the same background colour in both the content area and its background, these lines will be harder to “spot”. Additionally, by keeping colours consistent, the User Experience across all other email clients and platforms won’t be compromised.
Moreover, the people in charge of creating the look and feel of your email template can begin taking into consideration this issue during upcoming designs. In many cases, there is no need to make changes. Most likely, your team has already considered email clients that support even less HTML and CSS features than Outlook.
In sum
Changing the HTML rendering engine from Internet Explorer to Word has been quite a drastic change (catastrophic even, if one takes into consideration what competitors like iOS are up to in terms of CSS support). Although this affects the way in which some templates render, it doesn’t necessarily have a great impact on everyday Outlook use. The change, however, should have a positive effect on future development of Outlook.
At the end of the day, the best strategy is to get to know your subscribers, their email clients and invest your time accordingly. If not a lot of your users are opening your emails in Outlook 2016, then this issue isn’t worth spending time nesting your code inside extra tables.
Got additional questions? Feel free to contact the itracMarketer Customer Success Team here!
Sources
https://www.howto-outlook.com/faq/wordhtml.htm https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/ https://litmus.com/community/discussions/5695-outlook-2016-horizontal-white-border-line https://github.com/voidlabs/mosaico/issues/93 https://www.emailonacid.com/blog/article/email-development/horizontal_spacing_issues_in_outlook_2007_and_2010 https://litmus.com/blog/episode-25-absolute-positioning-in-email-fixing-white-lines-in-outlook-and-email-marketing-salaries
