Don’t let random lines spoil your experience on Outlook 2016

Good news, everyone!

Following the announcement in August 2016 of a partnership between Litmus and Microsoft to #MakeEmailBetter, a collective cheer went up from email designers and developers the world over. Finally, there was hope that the creators of one of the biggest problem children of the email reader world, Outlook 2007+, was actively going to do something to make emails look better in their Microsoft Word-based reader rather than continuing to turn deaf ears to our pleadings.

 

In the meantime…

As someone famous once said, Rome wasn’t built in a day, so in the short-term we can still expect that outstanding niggles in the way Outlook deals with HTML will prevail. For most things there are workarounds – for example our factsheet here outlines what you need to do to get Outlook 2013 to play nice. But for the latest Outlook 2016 incarnation, in amongst the usual list of bugbears (Geoff Philips of Email on Acid wrote an excellent article about these) another issue has presented itself which is a bit more tricky (read ‘nigh on impossible’) to address. I think you all know what I’m talking about…

 

Where did those come from?

So, you’re minding your own business, creating an HTML email and testing it (thoroughly) in different readers as you go. All is looking as expected until you check how it looks in Outlook 2016 on Windows and find…

What's going on, Outlook?!

 

What’s going on? You check back in Outlook 2016 for OS X: nope, can’t find anything wrong there.

What you have come across is what’s known in email design circles (probably) as the ‘Outlook 2016 Random Lines of Pure Evil™’.

 

So what in the name of HTML email is going on?

Search your email’s HTML and CSS code all you like, you won’t find anything obviously wrong. Looking around the various excellent web forums and blog articles including ones by Litmus and Mosaico there are all sorts of suggestions, from trying CSS border-collapse:collapse inside the email’s <head>, or as inline CSS in each <table> tag, to splitting the HTML structure into smaller sections using separate tables. I even tried running through a list of likely-looking mso- specific attributes as listed here – but none presented any kind of fix for this issue.

However, courtesy of excellent work by Tim Hansson at Apsis, we do now have the closest thing to a workaround. It’s not perfect – only a complete fix from Microsoft would be (ahem) – but it’s certainly better than nothing. So, without further ado…

 

Step 1: change the colour of the lines

Turns out that where those random lines appear, they are actually showing the colour of the email’s <body> background colour, as if it’s bleeding through to the foreground. So, one thing you can do is use CSS in the <head> to set the <body> colour to match the colour of the areas that are likely to show the most lines – usually where the most content is going to be inserted. And to make it specific to Outlook 2016 and not affect any other readers, it’s a good idea to use an MSO conditional comment around it.

<head>
...
<!-- [if gt mso 15]>
<style type='text/css'>
  /*set as whatever colour the main content area is*/
  body { background-color:#FFFFFF}
</style>
<![endif]-->
</head>

A few caveats though:

  • You can only pick one colour, which is a pain for email designs that have a number of differently coloured areas
  • If you have a background image set in the <body> though, this will always show through
  • The colour you choose will also show through as a stonking great margin all around your email design – no amount of zero or negative margin or padding can stop this – it’s part of the way Word 2016 allows space for its rulers apparently
Hmm, getting better but...

 

However, we can still see the lines breaking out of the email and across the screen, so now we have to…

 

Step 2: limit the width of the lines

To do this you need to wrap your HTML content in a container <table> and use an inline CSS overflow:hidden on the <td> like so:

<table border="0" width="650" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="overflow: hidden;" align="center" valign="top">
        <!-- Rest of email HTML code here -->
      </td>
    </tr>
  </tbody>
</table>

The result:

That's more like it!

 

Hallelujah! I’m cured!

Whoa there, Kimosabe! As previously mentioned, these techniques are mainly about damage limitation rather than being all-round fixes. So they really work best on the simplest of email designs – those with a single background colour and single width.If your email has areas of varying widths and a multitude of funky background colours or images you are still likely to see lines appear in various places – nothing can prevent this. You can reduce the chances of multiple lines showing by keeping content short and sweet in areas not targeted by the CSS background-color.

Also, think carefully about where you need to place the container <table> – you may need several to cater for content of differing widths.

At NewZapp we have added these workarounds to all the free templates that come with a NewZapp account (you can get your free Christmas-themed ones right now), but like everyone else in the email marketing world we’re hoping a fix for this random line madness in Outlook 2016 is at the top of Microsoft’s to-do list.

 

@zanethehamster, Tea-quaffing Rodent on Twitter @zanethehamster

Share this post

Tweet this blog    Share this blog

Read my other design related blog posts here.