Outlook has many products available and they all render differently. Some of these Outlooks are Outlook 2003, Outlook 2007, Outlook 2010, Outlook for Mac, and Outlook.com. That is why you need to be more careful when sending your emails. Also, not in all Outlooks, you can add your HTML template. In this article, you will learn how to insert your HTML template to Outlook, some of the most common rendering issues, differences between rendering in Outlooks, and how to fix them.

Rendering issues in Outlook and solutions:

Overridden HTML code when inserted to Outlook

Solution: Use an email service provider to send your emails 

Blocked Images

Solution:  Add alt text.  Alt-text is a simple phrase or word inserted in your email’s HTML document that tells the viewer what the image contains. That way, if an image isn’t displayed correctly (i.e. if it gets blocked by Outlook), your recipient will see a blank box with the alt text instead.

Custom fonts not rendering 

Solution:  If you use a font that isn’t within its scope of capabilities, Outlook changes your custom fonts to Times New Roman. To avoid Outlook surprising your subscribers can use one of these safe fonts instead: Courier, Courier New, Arial, Arial Black, Veranda, Tahoma, Georgia.

Inconsistent spacing, text wrapping, and floating images

Solution: Use tables

Email width not compatible

Solution: Use 600px for your email width (Chamaileon has by default 600px width)

Background not rendering

Solution: Unfortunately, Outlook 2007 – 2013 does not support background images. If you want the background image to show on Outlook, you need to use Vector Markup Language or VML. Chamaileon code supports background images. So if you add a background image in Chamaileon that will be present in Outlook as well. One thing to note: the background image should be sized adequately and the actual image file needs to have the required size because we can't configure different background image size from the original in the VML code.

If the image doesn’t render, the fallback red color shown in the image below will.

Other know Outlook issues

Round corners are square corners

Like background images, Outlook 2007 – 2013 also doesn’t support round corners.

Here you can see the background image and round corners not rendering. In this case, we haven’t used a fallback background color.

No GIFs in Outlook

Outlooks display the GIF, but won't play them. Only the first slide displays.

Poor padding and margins support

Outlook.com dropped support for the following CSS properties:

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • Margin-left

Link color converted

Blue/purple underline persists when viewed on different email clients. In Chamaileon, we managed to overwrite this behavior with some coding hacks.

You can see in the footer section under the ”Unsubscribe” link. The link color stayed the same in Outlook 2010.

Feel free to reach out via chat or email if you have more questions!

Did this answer your question?