Outlook is one of the most widely used email clients, but its various versions render emails differently. Earlier versions like Outlook 2000-2003 use Internet Explorer as the rendering engine. With the release of Outlook 2007, the rendering engine shifted to Microsoft Word, which lacks support for many standard HTML and CSS properties and comes with its own set of bugs.
Both Internet Explorer and Microsoft Word have distinct limitations, which may cause emails to display incorrectly or appear distorted.
To see how different Outlook versions render your email, use Mailjet’s Email Preview feature. This tool helps you preview your email as it will appear to recipients.
Common Outlook rendering issues
When designing your emails, keep the following common issues in mind:
-
Background images
Certain versions of Outlook do not support background images. To avoid display issues, use a solid background color and add the desired background image as an image block within your email. -
Image alt-text
Outlook, like many other email clients, can block images by default. To ensure clarity, include descriptive alt-text for all images so recipients can understand the intended message if the images are not displayed. -
Animated GIFs
Some versions of Outlook (2007, 2010, and 2013) display only the first frame of an animated GIF. Ensure key information or calls-to-action are visible in the first frame. Note that full GIF support is available in Outlook 365 desktop, Outlook mobile apps, and Outlook.com. -
Fonts
Font sizes and styles may vary depending on the email client and operating system. Standard system fonts like Arial, Calibri, Times New Roman, or Verdana are consistently displayed across most clients, including Outlook. Avoid using Google Fonts, as they render inconsistently. For the best results, stick to system fonts to ensure a consistent experience for your audience. -
Lists
Outlook does not support custom list bullet styles. Avoid using custom bullets or images for lists. -
Buttons
Outlook does not recognize CSS properties likeborder-radius, which are used to create rounded buttons. As a result, buttons may display as square. To achieve a rounded appearance, create an image of your button and link it to the desired URL. -
Page breaks
For Outlook versions using Microsoft Word as the rendering engine, emails may be treated like text documents, leading to unexpected page breaks and white gaps around images or text. To minimize this, keep your email length under 1,800 pixels. If gaps appear, reorganize your content to determine where Outlook inserts page breaks. Be sure to duplicate your email before making edits to avoid accidental content loss.
How to optimize email display in Outlook
To improve how your emails appear in Outlook:
- Use JPEG or PNG formats for images.
- Include important information as text and use images for supplementary content.
- Optimize the mobile version of your email campaign for a better experience across devices.
- Test your email campaigns on multiple email clients with Mailjet’s Email Preview feature before sending.