Solved

Why is my Styling Rending Different in Outlook?

  • 11 November 2021
  • 4 replies
  • 1651 views

Badge +3

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

4 replies

Badge +2

any help on this please? 

Userlevel 7
Badge +60

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 

Badge +2

I am having the same issues except it is rendering incorrectly with Gmail, though not consistently. Some of my templates are perfect, some padding is off and its duplicating lines and other elements...

Userlevel 7
Badge +60

Hi @Cantik

 

Thanks for sharing your question with us! 

 

Do you mind sharing whether or not you saw these issues when you or your customer were on the internet accessing their gmail account vs. actually using the gmail app to view the email, such as viewing it on Gmail.com? If you can ensure you have mobile optimization turned on and there is no external inline code in your blocks, this can be done by navigating into the source code of your bocks, then it would seem that the display issues you’re mentioning an issue of Google Chrome Browser Version not supporting media queries. Media queries are CSS statements that render content in mobile screen sizes, so it tells mobile only/desktop only to show at the appropriate screen size. 

 

So, unfortunately this cannot be controlled in Klaviyo it is dependent on the email client. All of the listed environments that do render media queries will show the correct blocks. This can be explained further in these similar Community topics I’d suggest checking out to gain more insight. 

 

Additionally, if it should be noted that there is a bug with padding being off in the new template editor that our team is actively working to fix. I would also recommend using tools like Litmus or Email on Acid to test your messages on various devices.

 

Thank you for participating in the Community! Hope this helps!

-Taylor 

Reply