Solved

Why is my Styling Rending Different in Outlook?

  • 11 November 2021
  • 2 replies
  • 93 views

Badge

Hi,

Has anyone of you tried optimizing your campaigns on Outlook?

I’m designing some flows but are struggling to get the design right for example on both Gmail and Outlook at the same time.

Here are the things I’m struggling with:
- footer padding: odd white space in Outlook while the email looks perfect in Klaviyo/ Gmail, or the other way around
- product block style, especially the font and the click button styling. I can't display the selected font style in outlook and the buttons look really off in Outlook.
- random thin padding under some of the blocks in Outlook
- No text spacing in Outlook, but again, looks perfect in Klaviyo & Gmail

Would love to learn more about your experience and how you worked with that.

Thank you for your help.

icon

Best answer by Taylor Tarpley 12 November 2021, 22:29

View original

2 replies

any help on this please? 

Userlevel 5
Badge +32

Hi @lavc and @hashimumar

 

Thanks for sharing your question with the Community! 

 

Unfortunately, Outlook is one of the trickiest providers to work with for various reasons, we have provided further documentation in our Help Center:  Why Does my Email Look Different In Outlook. Basically, from Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. This is awful for email marketers and developers who use HTML. Try copying and pasting an HTML web page into a Word document and you’ll get a glimpse as to how Word translates HTML. There is not much control Klaviyo has over how Outlook renders images/styles.

 

Optimizing an email specifically for recent versions of Outlook can take a lot of time and extensive testing, as there are no established guidelines. Doing this also requires making significant changes to how images are positioned, and this can skew how emails render across other email clients and devices.

 

For instance, Outlook has the following issues

  • No support for background images in divs and table cells
  • No support for CSS float or position
  • No support for text shadow
  • Poor support for padding and margin
  • Poor support for CSS width and height
  • Problems with nested elements background colors 

 

You can use tools like Litmus or Email on Acid to test your messages on various devices. Additionally, Litmus wrote an insightful article to further explain Rendering Differences in Microsoft Outlook Clients

 

Finally, a fellow user had a similar issue optimizing their emails for Outlook. 

 

Thanks for being a part o the Community! 

-Taylor 

Reply