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!