Outlook is a popular email client and is known to have its own unique rendering rules. This guide aims to offer solutions for the following four common issues Outlook users face:
- Rounded buttons get square-shaped in some versions of Outlook
- Container or structure backgrounds do not render in Outlook
- Menu items lose their styles in some versions of Outlook
- Images are not downloaded automatically
- Email rendering in the mobile Outlook app looks different from other mobile email clients
Rounded buttons get square-shaped in some versions of Outlook
A CTA button must be noticeable and have a clear and appealing copy. Its shape does not impact the CTR or CTOR, yet it matters to users, as you might want your emails to be brand-consistent.
.webp)
What does Outlook do to buttons?
Some Outlook versions align all the angles right and remove all whitespace in buttons, which makes buttons less attractive.
How can you resolve the square-shaped buttons?
The VML method is invented exclusively for Outlook. To optimize your buttons for Outlook:
1. Go to Appearance > Button on the editor.
2. Toggle on the Support for Outlook button.
Once enabled, this option inserts a special VML-code element and ensures the most accurate display of your buttons in Outlook.
Now, the buttons in Outlook remain rounded and keep their style and colors.
(1).png)
Outlook 2016, WindowsContainer or structure backgrounds do not render in Outlook
Setting a background image for modules and separate elements on Outlook Web might be problematic.
Outlook renders backgrounds that are set for entire emails across its web version, all versions of its desktop application, and Office 365.
If you want to set a background for a particular element in your email that renders in Outlook, you should build it as a banner. Since all the banner layers make a single image when exported anywhere or downloaded as an HTML file, a banner would work well across all email clients.
.png)
To build a banner, you need to:
1. Add the Banner block to your email.
2. Upload a banner image as the structure background.
3. Upload the additional image as the main image for your content module, or upload the image of the button.
4. Place your CTA text over the images.
5. Add a hyperlink to this structure.
How can you set a background image for a container/element that renders in Outlook?
Sometimes, you might need to set a background for a separate container or a column in a row. The container backgrounds render correctly across all versions of Outlook.
.png)
You can do it in two ways: Build a banner or a VML-based background.
1. Build a banner
This time, you need to use a 2-column structure to build your banner.
2. Build a VML-based background
You need to build the structure and element where you will add the background. Once you build it,
1. Hover over the respective element in the template.
2. Find the Container label above this element.
3. Click the label to see the container settings.
4. Open the code editor.
.png)
5. Insert this code above the line starting with “table width”.
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:327px;height:100%;">
<v:fill type="frame" src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png" color="#7bceeb" ></v:fill>
<v:textbox inset="0,0,0,0">
<![endif]-->
6. Insert the following below the very same line.
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
7. Replace the underlined links with your URL to your background image.
If the image is hosted on our servers, then you might get the URL here:
1. Click the background image in your HTML email template.
2. Click the URL button in the settings panel.
3. Copy the link in the image path field.
Menu items lose their styles in some versions of Outlook
Menus and buttons might lose their styles, including colors, font sizes, etc., in some versions of Outlook.
For example, the example below shows two different displays of the menu items. The first menu item in the left example has a Trebuchet font family and 18px font size, but Outlook renders it as a black copy in Times New Roman and 12px.
What causes the menu items to lose their style?
It means that this element does not have a hyperlink. If an element does not have a link, it loses its style properties.
Check if you have added links to all elements before testing or sending emails to your recipients.
Images are not downloaded automatically
Outlook has a security feature that prevents images and some HTML elements from being automatically downloaded if they are from external emails. This feature applies to Outlook 2003 and all subsequent versions.
When the images are not downloaded, you will see a message that says, "Click here to download pictures. To help protect your privacy, Outlook prevented automatic download of some pictures in this message”. You can click this button to download them or configure the following settings to download images automatically for all incoming messages or only for some emails.
Add the sender's email address to Safe Senders list
Adding the sender's email address to the Safe Senders list allows automatic image downloads only for some email addresses. It indicates that you trust the sender and allow pictures to be downloaded automatically.
Windows
Right-click on the message header to click either Add button.
Mac
Go to Outlook > Preferences > Junk > Safe Senders tab and click the “+” symbol to add a safe sender.
Check any antivirus software
Your antivirus software might be preventing images from downloading. In this case, you can try disabling it temporarily to see if the issue is resolved.
Automatically download images
This configuration allows images to be downloaded for all incoming messages.
Windows
In Outlook 2007, 2010, 2013, 2016, and 2019, navigate to Trust Center > Automatic Download to uncheck the "Don't download pictures automatically in HTML e-mail messages or RSS items" box.
In Outlook 2003, navigate to Tools > Options > Security tab > Change Automatic Download Settings to uncheck the “Don’t download pictures or other content automatically in HTML e-mail” and “Warn me before downloading content when editing, forwarding, or replying to email” boxes.
Mac
In Outlook, navigate to Outlook > Preferences > Reading > Security to select "In all messages" for the Automatically download pictures from the Internet option.
Reset Internet Explorer settings
To reset your Internet Explorer settings to default, go to Internet Explorer > Tools > Internet Options > Advanced and click the Reset option.
Other possible solutions
You can also consider these solutions:
- If you use Outlook in safe mode, the images might be displayed in safe mode. You can consider checking your add-ins.
- You might want to review your internet settings. Go to your computer's Start menu and navigate to Advanced > Security to check the "Do not save encrypted pages to disk" box.
- You can consider reviewing the Outlook picture placeholder settings and enabling the "Show picture placeholders" option.
Email rendering in the mobile Outlook app looks different from other mobile email clients
Email rendering in the Outlook mobile app can look different from other mobile email clients like Gmail or Apple Mail mobile apps when using irresponsive images.
If you add an image block to the same structure with the text or button blocks and disable the Responsive Image setting, then your text or button will inherit the irresponsive setting from the image block as they are in the same structure, so that text and the button can also look irresponsive.
Irresponsive designs can render differently in different email clients. For example, text can be smaller in Outlook mobile than in Gmail or Apple Mail apps due to the clients' different rendering engines.
If you don’t want your text and buttons to inherit the irresponsive design of the image block, we suggest you have an irresponsive image in one structure and text or button blocks in a different structure, as in the example below.
The following is an example of an image, text, and the button blocks in a single structure, with the Responsive image setting disabled.
The text and button will inherit the irresponsive design, which might look different in Outlook mobile than in other email clients.
Gmail App
Apple Mail
.jpg)
Outlook App
.jpg)
The following is an example of an image block in one structure, with the Responsive image setting disabled, while the text and the button blocks are in different structures. 
Text and button will be responsive and will not inherit the irresponsive design of image block as they are in different structures.
Gmail
.jpg)
Apple Mail
.jpg)
Outlook
.jpg)