Common Email Rendering Issues in Outlook and How Stripo Solves Them
Outlook is a quite popular email client. It holds 11% market share (Outlook apps hold 9%, and the web version is used by 2% of people worldwide).
It is said to be sufficient for all businesses' needs.
Though, Outlook is also famous for its "unique" rendering rules. The most common issues that people face when opening in or sending emails to Outlook are:
rounded buttons get square-shaped;
backgrounds for individual containers and rows do not render;
menu tabs lose their styles.
These issues are widely discussed on the web, which made us want to cover solutions to them on our blog.
Some, when trying to fix these problems, make changes to entire codes. But as it sometimes happens, you get one problem fixed, the other one occurs.
For instance, email templates with renewed code do not twist buttons in Outlook, but then they do not render banners. Or what is even worse — these email layouts might get broken in other email clients, like Gmail or Yahoo.
Which is why we think, the problem should be solved locally — only for the elements that demand it, not entire emails.
1. Rounded buttons get square-shaped in some versions of Outlook
It’s been proven by numerous investigations that the shape of a CTA button does not impact CTR and CTOR at all.
The first cardinal rule for making your buttons effective is — to make it noticeable with clear and appealing copy on it.
Yet, the shape of the buttons matters to us, designers, coders and email marketers, as we want our emails to be brand consistent.
So, what does Outlook do to buttons?
First of all, some versions of it just make all the angles right. Then, it removes all whitespaces in buttons which makes them look less attractive, yet they are still quite noticeable.
What causes this bug?
There are 3 major methods for button layouts in emails:
The table based method;
The Stripo method. Let’s give it this name because it was developed for our email template builder as, in our opinion, it fits our needs best);
The VML method.
The third one was invented exclusively for Outlook. While others are not supported by this email client, but have wider support among other email clients.
How to set a VML-based
Solution for today:
In case, you make rounded buttons and want them to display the way you planned across all email clients, including Outlook, then you need to build them this way:
Step 1: Building your VML-based button
You can do it in the following ways:
use the code that tool buttons.cm offers if you need your buttons left-aligned. Here you set font color, button size and color, add links to proper pager, apply or untuck “border radius”, etc.;
use the code given below if you need your buttons center-aligned:
<div style="text-align:center;"> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://stripo.email/templates/" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="83%" stroke="f" fillcolor="#1dd360"> <w:anchorlock></w:anchorlock> <center> <![endif]--><a href="http://stripo.email/templates/" style="background-color:#1dd360;border-radius:33px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px!important;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;" class="esd-frame-element esd-hover-element esdev-disable-select">VML button for Outlook</a> <!--[if mso]> </center> </v:roundrect> <![endif]--> </div>
(We customized the code provided by the buttons.cm tool, it now meets our editor standards. And all the buttons that you build by using this code sample do not alter/get narrow on mobile devices).
Step 2. Adding buttons in your HTML email templates:
drag a 1-column structure;
drag an “HTML” block in it;
insert the chosen embed code.
Important to note:
If you need to add a few VML buttons in your emails, you can just copy and move this container to any other module of your HTML email template (if you need to .
Wanna do the same?
Limitations of the VML buttons:
Limit on characters — if your button copy contains more than 27 symbols, it will have “line breaks”. Thus, if you need a longer call-to-action copy, you will need to increase the button’s width in the code;
The code is really heavy. And if you need a few buttons in your campaign, this can lead your email to be clipped in Gmail;
This button works well across all versions of the Outlook application, but it’s not supported by the Outlook web version in Google Chrome, consequently, it gets right angles in the aforementioned browser.
The Stripo team is now actively working on embedding this code to our editor. By default, all buttons will be built according to our regular button layout method which works perfectly well across all email clients and all devices that support media queries. But you will just need to toggle the “control” that will empower you to set the VML button if the vast majority of your recipients prefer Outlook over other email clients.
Once we have this option released, we will publish a detailed manual on how to use it.
2. Container or structure backgrounds do not render in Outlook
The lion’s share of questions about Outlook on the web is “how to set a background image to modules and separate elements”.
The email on the right looks pretty cool, though the sample on the left looks complete.
This is the main goal of all backgrounds — to make email designs look complete.
The most amazing and the most interesting fact about this is that Outlook does render backgrounds, that are set for entire emails, across its web version, across all versions of its desktop application and in Office 365.
So, what if you need to set a background for a certain element in your email?
First of all, let us remind you that you can set backgrounds for entire email template in the Appearance tab in the General Settings section — it will render correctly across all desktop email clients.
How to set a background image for a structure/row that renders in Outlook
Very easy to do it — just build it as a banner. Because all the layers of the banner that you build with Stripo, when being exported anywhere or downloaded as HTML-file, make a single image. And as we know all images work well across all email clients.
To build a banner, you need to:
upload a banner image that will serve as the structure background;
upload the “additional” image which will serve as the main image for your content module or upload the image of the button— remember to use our “Sticky notes” option to place additional images at equal distances from all sides of the banner image;
place your CTA text over the images;
add a hyperlink to this structure.
Important to note:
This trick works only if you add just one product item in this structure/row.
How to set a background image for a container/element that renders in Outlook
In some cases, you might need to set a background for a separate container or a column in a row.
Our background for containers renders correctly across all versions of Outlook:
There are two ways of doing it:
Way 1. Building a banner
Yes, you will need to build it the way we described in the section above, but you will need to use a 2-column structure.
Way 2. Building a VML-based background
You need to prepare the structure and the element that you are going to add a background in.
Once it’s done, you have to work with email template code.
put a mouse pointer over the necessary element right in the template;
above this element, find the “container” label;
click this label to activate the container’s settings;
now open the code editor;
insert this code right above the line that starts 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]-->
(The source of the code: backgrounds.cm. We optimized this code to make it meet our editor requirements better);
- insert this code sample below the very same line:
<!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]-->
replace the underlined links with your URL to your background image;
in the embed code, edit image width in accordance with the width of the container — you can see it in the top line after the "width" tag. In our case, it is 600 px.
If the image is hosted on our servers, then you may get the URL here:
in your HTML email template, click the very background image that you have chosen;
in the settings panel, click the “URL” button;
in the image path field, copy the link.
Important to note:
If you have previously added the VML-based button to the container or a structure, then your VML-based background will not work. Outlook displays just one of the two VML objects — the one that was set first.
Glad to announce that very soon, we will add a control, similar to the button control, to background images. This means, you will not have to cope with code — you will only need to choose whether you want to set special backgrounds for the Outlook users.
3. Menu items lose their styles in some versions of Outlook
Our users rarely face this problem, yet we decided to put it on the list, too:
menus and buttons may lose their styles, including colors, font sizes, etc.
When building my email, I set font type: Trebuchet, and font size 18 px.
But in Outlook, I saw this:
If you look closely, you will see the first menu item is written in Times New Roman, 12px, and in black.
What causes this bug:
You simply forget to add a hyperlink to these elements. When the element that should have a link does not have one, it will lose its styles.
Check if you’ve added links to all elements prior to testing or sending your emails over to recipients.
Important to note:
When building email templates, we add links to all the elements that should have them. If you do not remove one intentionally, but simply forget to replace with yours, your menu won't lose its style as it has all necessary links.
Outlook is really sufficient for many businesses' needs. And we do not have to be afraid of it. Quite the opposite - we need to learn to cope with it. Besides, Outlook now supports animated GIFs and as of this summer, it will support AMP for emails. Isn't it great?
Due to our open HTML code editor, we allow our users to embed special codes elements to enable them to send beautiful sophisticated emails to all recipients, including those who use old or new versions of Outlook.
In the short run, you will not have to cope with codes — we will do it for you.
You will only have to activate respective options.
Please, read this blog post on how to build and export email templates to Outlook with Stripo.