Even though campaigns created in Kiliba are designed to display correctly in most email clients, certain quirks in Outlook can cause unexpected differences between what you see in the Drag & Drop editor and what your contacts actually receive.
This guide covers the main display issues with Outlook and best practices to fix them.
Why do display differences occur?
Outlook — especially older versions (2003, 2007, 2010) — uses Microsoft Word to render HTML content. This limits support for many CSS properties used in modern emails.
Other factors can also affect how emails appear:
the recipient’s email client settings,
screen resolution,
automatic image blocking.
Before looking for a solution, compare how your campaign displays in several clients (Gmail, Yahoo, Apple Mail, etc.). If only Outlook has issues, it’s likely the cause of the display problem.
Common display issues in Outlook
Tip
Not all Outlook users will experience these issues. However, we recommend testing your messages in different email clients before sending.
Images and visuals
Image margins ignored
Outlook ignores margins set in the editor, which can cause text to stick to your images.
➡️ Solution: add a border directly to the image file before importing it.
Images blocked by default
Outlook doesn’t display images automatically. The recipient has to choose to allow them.
Improve the experience:
Add ALT text to your images,
Set a background colour if you use a background image,
If some versions don’t load hosted images, import them directly into your email (making sure your campaign’s total size isn’t too large).
Images cropped, cut off or resized
Outlook applies a maximum height of about 1728 px. Images larger than this may be cut off.
➡️ Good practice:
Resize your images beforehand,
If needed, split a large image into several sections displayed one after the other.
GIFs and animations
Animated GIFs only work in Outlook 365, Outlook.com and the mobile app. Older versions will only show the first frame.
➡️ Tip: make sure the key message appears in the first frame.
Buttons and calls to action
Text cut off or misaligned
Outlook can break button text onto two lines.
Wrong font in a button
A single space at the start or end of the text can cause an inconsistent font in Outlook.
➡️ Check and remove any spaces.
If that doesn’t work, also use a clickable image as a button.
Rounded corners not supported with a new imported font
The CSS property border-radius isn’t interpreted properly by Outlook if an extra font has been added.
➡️ Reliable solution: We can disable this for Outlook only on request via support
or you can use an image as a button instead.
Text formatting
Fonts
System fonts (Arial, Calibri, Verdana, etc.) are recommended. Google Fonts can display unpredictably depending on the device.
➡️ Always specify a fallback font.
Line height
Outlook doesn’t handle all values in the same way.
➡️ If you code your emails, provide values in both percentages and as whole numbers.
In the Kiliba editor, this is set automatically.
Background management in Outlook
Background image not displayed correctly
Many versions of Outlook display background images (background-image) very poorly. They may:
not load at all,
be stretched or cut off,
only show on part of the block.
➡️ Recommendation: Use a background colour instead. Don’t use background images for anything essential to understanding your message.
Background-repeat not supported
The CSS property background-repeat, which repeats a small image across a block (like a tile), isn’t handled properly by Outlook.
This can cause:
partial display,
an incomplete background,
distorted or missing patterns.
➡️ Possible solutions:
Avoid repeated patterns in emails sent to a wide audience including Outlook users,
Use a single image resized to the desired size,
Or replace the pattern with a solid colour that looks similar.
Layout and structure
Unexpected white space
Outlook can insert spaces, as if it’s adding a page break.
➡️ Rearrange your campaign’s structure and test to find where Outlook is “breaking” the display.
Content too wide
A plain text URL can make the display area wider.
➡️ Always turn links into clickable text.
How to optimise your emails for Outlook
Use images in JPEG or PNG format.
Keep important information in text rather than images.
Check the mobile version of your campaign.
Test your messages in several email clients, including Outlook.
Include a “View in browser” link to get around any display issues.