Back to blog

Proven Workarounds to Make Emails Render Well Across Outlook Variants

Workarounds to Make emails Render well Across Outlook

We live in a tactile society. Tell a man that the bench is just freshly painted, and he won’t believe it till he touches it. People love to have a touch-and-feel experience to whatever they buy or at least want to get what they see on their device. Same is true for emails too. A broken or misaligned email is a major turn-off for anyone and can force someone to stop engaging with your emails. But no one develops a bad email design intentionally.

So who’s the culprit?

Email developers who didn’t test their emails are those to be blamed for it. The progress in the field of email development has been in leaps and bounds but unfortunately most of the email clients are yet to catch up to the pace at which email development is evolving. Even though CSS coding was introduced in HTML emails around 2009, most of the email clients still don’t provide proper support to CSS3 and some clients even took a step back in the name of progress (Yes, Outlook… we are talking about you).

You must be wondering why different email clients treat the same email differently. The reason is the rendering engine used by the email client. The rendering engine, in general, draws structured text from the HTML and formats it properly based on the styles declared in CSS. If the rendering engine doesn’t support the CSS stylesheets or strips away the CSS, the email shall look different from the original design.

Email clients of certain devices employ proprietary rendering engines and webmails such as Gmail and Yahoo Mail ‘piggyback’ on the rendering engine used by the browser they are opened in.

  • Apple Mail, Outlook for Mac and iOS Mail use Safari rendering WebKit engine, which supports almost every type of innovation you throw at it.
  • Thunderbird makes use of Mozilla’s proprietary Gecko engine to support most of the email innovation element.
  • Microsoft Outlook used Internet Explorer till Outlook 2003 and then moved to Microsoft Word from Outlook 2007 onwards (Bad Decision).

As per a Litmus Survey, the following are the shares of the email clients used globally in June 2017.

Most popular email clients by users by Lirmus

So even though most subscribers use Apple mail (~49%), you need to make sure that your emails are rendered in Gmail, Outlook and Windows Mail the way it is on Apple devices. This is especially in case of Outlook which occupies 13% across all variants. So let’s focus on the different issues faced in Outlook and the fallbacks possible for it.

The Outlook Ordeal and Workarounds to Deal with It

Disabled images in email

As said earlier, till Outlook 2003, the rendering engine used was Internet Explorer, which would disable images by default and display a security message before ALT-Text.

Other than that, subscribers didn’t face any deal-breaking rendering troubles. But then Outlook adopted Microsoft Word as a rendering engine in 2007 and the entire email development went to the dogs. Here’s a list of issues that it gave rise to:

1) No support for GIFs: Outlook only displays the first frame of the GIF as a static image. So, marketers need to ensure that the message is conveyed in the first frame or have it in the ALT-text as a fallback.

Other email clients vs outlook

2) No support for background images: Outlook 2007-2013 do not support Full body, Pattern, Graphic or Section-wide backgrounds by default, but the ideal solution for rendering is by using VML (Vector Markup Language) in the <body> tag of your HTML.

 
<div style="background-color:#000000;">
 <!--[if gte mso 9]>
 <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
 <v:fill type="tile" src="IMAGE.png" color="#000000"/>
 </v:background>
 <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td valign="top" align="left" background="IMAGE.png">

3) Outlook scales images for High DPI displays: In displays greater than 1920×1080 resolution, Outlook tends to blow up images and text. The issue arises since Outlook considers widths and heights specified in HTML attributes and VML code as pixel values and any other pixel values (px) are converted to point (pt) values instead.

So a text of 10pt @ 150% desktop scaling would be equivalent in size to same text in 15pt @ 100% desktop scaling. So email developers need to test their emails at 125% or higher DPI scaling in order to do necessary corrections.

4) Unnecessary Page Breaks: Sometimes, Outlook tends to consider long emails as Word Documents and automatically adds a page break at every 1800px.

5) Outlook (and Hotmail) remove paragraph and margin spacing from the code: As a result, neatly spaced content will bunch together. To avoid this, email developers have to stick to traditional (yet outdated) table based layout.

6) Outlook tends to automatically display Times New Roman instead of specified Fallback font: When you specify a fallback font to your custom font, Outlook tends to automatically render the email copy in Times New Roman. So we need to ‘force’ the fallback font using provided VML code.

 
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Primary Font, Fallback web-safe font, fallback system font !important;}
</style>
<![endif]-->

7) Gaps between two sliced images: Sometimes, email developers slice images in order to speed up the loading time. The email client shall be downloading multiple slices of the image simultaneously, which is way faster than downloading a single big image. But Outlook tends to add a padding between the two sliced images. You can avoid it by adding div{display:block !important} to the <head> tag.

8) Bulleted List: Outlook doesn’t support <ul> and <li> HTML tags and so you need to include the following workaround.

 
/*This is for Outlook 2007-10-13-16*/
<!– [if gte mso 9]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
</style>
<![endif]–>
/*End for Outlook 2007-10-13-16*/

/*This is for Other all email clients*/ 
li {text-align:-webkit-match-parent; display:list-item;}
/*End for Other all email clients*/

Wrapping Up

In spite of the numerous rendering challenges faced in Outlook, it’s amazing that a small proportion of your subscribers are still loyally stuck to it while most have switched email clients. What are the challenges followed by you when coding an email for Outlook? Share your views in the comments below.

About the author: Kevin, the Head of Marketing at EmailMonks – one of the fastest growing Email design and coding companies, specializes in crafting beautiful email templates, PSD to HTML email conversion and HTML email templates free. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He enjoys sharing his insights and thoughts on email marketing tips and best practices at his email marketing blog.

Proven Workarounds to Make Emails Render Well Across Outlook Variants
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+Pin on PinterestEmail this to someone

© 2010-2018 Mailigen. All rights reserved.