Search

Display of your mailing in Outlook

Unfortunately, unwanted and unexpected display errors may occur when displaying newsletters and mailings in Microsoft Outlook 2007, 2010 and 2013.

To help you design your mailing and prevent possible frustrations, we would like to provide you with some useful tips and tricks. These should help you avoid any obstacles and make small adjustments so that you can achieve an appealing presentation of your emails:

Improve the display of e-mails in Outlook

Different font size and fonts

The fonts you use in your email may differ in size and style from what you selected in the drag and drop editor. Pay attention to:

  1. Native fonts such as Arial and Calibri are displayed correctly on all email clients, including Outlook. In contrast, Google fonts are almost always displayed differently.
  2. The display of fonts in email clients depends on several factors, including the operating system (PC/MAC) and the web browser the recipient is using.

Note: We recommend using standard system fonts for your email campaigns.

Margins around images are not displayed

In all versions of Outlook (except Outlook.com), margins around images are not taken into account. This means that there may be no space between your text and the image, even if you have added margins in the settings.

Note: Therefore, padding or table cells with fixed heights should be used for desired spacing. You can also work with hspace and/or vspace:
<img scr="http://www.test.de/test.jpg" align=“left“ vspace=“10“ hspace=“10“ />

Images are not displayed correctly

  1. Outlook does not support background images. 

  2. Images that are too tall will be cut off from the top if they are taller than 1728 pixels. For example, if your image is 2000 pixels tall, 272 pixels will be cut off from the top.

  3. Images with different dimensions than the original image will be displayed incorrectly if it is stretched, for example. Images should always have correct dimensions in the HTML code if the images are important for the layout. Preferably, the images should have been edited in advance.
  4. Animated GIFs are no longer supported since Outlook 2007.
  5. Images merged via HTML can cause unwanted spacing (about 10 pixels) in Outlook 2013, while in Outlook 2010 and 2007 they are displayed correctly.

Buttons are incorrect

  1. Buttons with incorrect text or text that wraps to a second line are due to a rendering problem in Outlook.

    Note: Try to make the padding of your button larger than the font size.

  2. You can also insert an image of a button and upload it to your email like any other image. By linking it, recipients who click on the image can then be redirected to your stored URL.

  3. Buttons with rounded corners appear as rectangles in Outlook. This happens because the border-radius CSS property is not natively supported. To make buttons with rounded corners appear in Outlook, you need to create an image of your button and import it into your email as mentioned in step 2.

Customize the display of tables

  1. Generally, newsletters should be created in table layout (with fixed widths) and divs should be avoided.
  2. Tables automatically create an unwanted gap if it exceeds a height of about 1790 pixels. Outlook wants to force a subdivision with this. This can be circumvented by working with multiple tables.

  3. For tables (<table>) you should use cellpadding and cellspacing, because margin and padding are passed to their table cells more often.

  4. Automatic line breaks have to be adjusted manually with inline style of a table cell if the words are too long.
  5. Outlook automatically inserts a 1px border around cells.

Note: You should avoid lists if spacing is important. Instead, you should use tables (<table>) with their cells.

Most often Outlook problems occur with self-programmed templates. In such cases, please test the use of a basic template from CleverReach.

Help & Support

Please note that we cannot provide detailed support for display problems in Microsoft Outlook.
If you have any questions or need assistance, please feel free to contact our service team at any time.