The plugin includes all possible ways to make the email template to look great across all email clients. However, versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML email, which can cause problems with the email display.

Microsoft Word is meant for print design and attempts to render HTML like it would look in print preview, causing the display to look different from what you may have designed and tested.

When you design the email template, make sure that you are using tables, especially in the text and textarea elements as Outlook understands the table better.

Here are a few things to consider to make the template look good in Outlook:

Images:

  • Do not use PNG images as Outlook does not support background transperancy
  • Outlook will ignore set padding and margins around images. As a result, your wrapped text will be pushed against the image. So before including an image, add necessary space using a photo-editing software 
  •  Do not include long images. They will be clipped. The limit for image length is approximately 1728px tall and Outlook will clip the excess off the top of images taller than 1728px.
  • Outlook doesn't recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you use them.

CSS : 

  • Since Outlook 2007 and above do not support CSS floats, CSS positioning, Flash or other plugins, you need to use XHTML instead of HTML. 
  • Outlook does not support many CSS elements. So when you use any custom css (inline or in plugin settings), make sure that the CSS is compatible. Here is a list of support CSS elements by most email clients
  • Border-radius does not work in Outlook. That means if you have styles your button with a border-radius, they would appear as a Square button in Outlook. Unfortunately, there is no solution available for this Outlook issue
  • No support for Position and Float. The effective workaround is to use tables.

Links getting converted to purple or blue

Consider using all your links in a text box and use inline styles wrapped with font element.
Example:

<a style="color:#E3A216; text-decoration:none;">

<span style="color:#E3A216;">

<font color="#E3A216">

Click me

</font>

</span>

</a>


NOTE: See below to learn how to include custom line line styles via "Source Code" html.

Font style

In case the primary font is not available on the subscriber’s device, Outlook tends to render the entire email copy in Times New Roman, ignoring the specified fallback font. In such cases, you need to force Outlook to render the fallback font that is specified using a conditional code.
 

<!--[if mso]>

<style>
    h1 {
      font-family: Primary font, Fallback font;
    }
</style>

<![endif]-->

NOTE: You can include this conditional code in any one of the text blocks -> Wyswig Editor -> Tools -> Source code
See the screenshot below
 


Click the "Source Code" menu to get the source code editor and include.


What Next?

You can read further about the Outlook's email rendering issues and possible hacks from here:

Did this answer your question?