Solved

Tables Widen Emails in Outlook

  • 5 October 2022
  • 3 replies
  • 1547 views

Badge +1

I’ve noticed that whenever I build an email using tables rather than columns, the table width goes beyond the standard 600px width for the email itself in Outlook, forcing me to scroll to the right to see all the single-column imagery. Since it doesn’t appear to happen in Gmail, is this another issue of Outlook’s design causing rendering errors, and is there a way that I can set a hard limit for width that would function in Outlook?

 

Thanks!

icon

Best answer by alex.hong 5 October 2022, 23:31

View original

3 replies

Userlevel 7
Badge +58

Hi @Jmclellan ,

This particular issue has been caused by the Inbox provider you are viewing the emails in, which in this case is Outlook.

 

Much of formatting issues you’ve been seeing with Outlook are due to overlapping HTML. Overlapping HTML will typically break when re-rendering in Outlook.  If you are pasting any content from another source (Google Docs, internal email, online, etc) you would need to use the 'paste as plain text' button to clear any styles from the original source of the text. If you copy content from another source and then paste without the 'paste as plain text' button, then in the source code of the text, it will have all the inline styles of the original text. Meaning, the font family from the original source, padding, margin, etc. This can cause display issues once the email is sent, or the text will listen to the external inline styles instead of what you have added under Styles or Block Styles. 
 

Regarding the images, a common problem in Outlook inboxes is images that become stretched or oversized. To avoid this, set a width for every image in your template.

  1. Select an image block.
  2. In the classic editor, click Block in the sidebar. In the new editor, toggle Fixed width on.
  3. Add a number to the Image Width field (the field next to the Fixed width toggle in the new editor). For full width images, use 600 px (or whatever width your email is set to, found in the Styles section). In this case, because it is a Split Block, we've set the image as 300px. 

 
From Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. This creates a less than ideal environment for email marketers and developers who use HTML. Unfortunately, this is not an issue within Klaviyo, but across the Email Service Provider industry. We outline the issue in more detail in the following Help Center Article: My Email Looks Different When Viewed in Microsoft Outlook

To give you an idea of how this presents itself as an issue for email marketers, we’ve copied and pasted an HTML web page into a Word document to show you how Word translates HTML. You can see that the result leaves much to be desired.

?name=834f9d9d-856a-45f8-877f-71fdfdc7b4a2.gif

You are welcome to use email preview services like Litmus or Email on Acid to see what your emails would look like on different platforms, but ultimately emails viewed within Outlook will look different than they would in all other email clients.

 

 

Badge +2

So I didn’t seem to have this issue until all of my templates starting migrating to the new editor - didn’t seem to happen when using the classic editor. I think I have a handle on setting max width of images, but there doesn’t seem to be a way to do this to text blocks? I didn’t copy and paste the text from somewhere else, it was all created within Klaviyo but using the classic editor, so could it be an issue with migrating to the new editor? See image for what’s happening - I just want to set a max width for the text block to match the width of the images. 

 

We are experiencing the same issue and it’s causing major issues with sales. HELP! 

Reply