Outlook sometimes skews HTML emails because all versions since Outlook 2007 use Microsoft Word to render HTML/CSS. Because of this, an email display may look slightly off in newer versions of Outlook from what you initially design and preview in Klaviyo.
Optimizing for Outlook
You may see issues with the following HTML Emails in Outlook 2007/2010/2013:
- 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
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.
Outlook is Stretching/Resizing Images
If your images appear stretched or too large in Outlook, make sure to set a width for every image in your template. To do this, select the image block, click Block in the sidebar, and then add a number to the Image Width field. For full width images, use 600 (or whatever width your message is set to, found in the Styles tab).
This article from Litmus provides more detail on Rendering Differences in Microsoft Outlook Clients. You can use tools like Litmus or Email on Acid to test your messages on various devices.
Additionally, you can check the advanced reports tab of your campaign analytics and flow analytics to get a sense of how much of your customer base is opening your emails on Outlook.