Message Editor And Outlook

Because desktop versions of Microsoft Outlook do not support responsive design, some elements of a message you create with the email message editor may not appear as expected when a contact opens the message in Outlook's desktop client.

In order to provide an optimal viewing and interaction experience across multiple email clients, the email message editor utilizes responsive design practices. This means whether your contacts view an email on mobile device, on the web, or on a desktop email client the elements in the email are scaled to the correct dimensions for their user experience.

However, desktop versions of Microsoft Outlook not yet supporting responsive design can cause some issues with the design of a message when a contact views it using Outlook. Contacts who use the Outlook desktop client might experience display issues with the text alignment and image design in emails that are created using the email message editor. But there are workarounds you can use when you create a message to help minimize these issues. It's important to note, while Bronto provides some basic suggestions for managing the lack of responsive design support, we cannot predict with complete accuracy how Outlook will render your message.

Image Design

When you add an image to a Container in the message editor, the image is automatically scaled in the message based on a percentage width. Outlook does not respect percentage widths, so when the message is opened in Outlook the image will not display as expected. If the image is smaller than the Container it is in, Outlook stretches the image to fill the Container. If the image is larger than the Container it is in, Outlook displays the image at its actual size. So, if you used an 800 px image in a 100px Container, the image will display 8 times larger than you wanted or expected it to.

There are two ways you can design images in the editor so that they appear as desired in Outlook:
  • Open the image in an image editor and resize the image to the exact dimensions you want it to be in your email. The image will not be distorted as long as it isn't significantly smaller than the Container it is placed in.
  • In the Design menu for an Image element, set the Width to the desired image width using px instead of a percentage. This width should be close to the width of the Container so the image is not artificially stretched.
    Note: Setting a pixel width for images may distort the responsiveness of images in other email clients. Test your message in multiple email clients to determine the best width to use.

Text Alignment

Outlook does not properly manage text alignment that is set at the element level. If you want to align text within a Container, you should use the container or message level Design menu settings to align the text. You can also write and import CSS to manage text alignment in a message.