Stripo_Outlook Rendering Issues_Featured Image1
timer ~ 9 min read
rate it
23 December 2019

Common Email Rendering Issues in Outlook and How Stripo Solves Them

Stripo / Blog / 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.

This 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.

Stripo_Outlook Rendering Issues_Buttons1

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:

  1. The table-based method.
  2. 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).
  3. 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

If you are a Stripo user, to optimize your buttons for Outlook, you only need to:

  • open "General settings" on the side panel;
  • open the "Button" tab;
  • toggle the "Support for Outlook" button.

Support-for-Outlook_Control (1)

Now my buttons in Outlook remain rounded, keep their style and colors.

Outlook 2016

(Outlook 2016, Windows)

Wanna do the same? 

Use Stripo

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”.

Stripo_Outlook Rendering Issues_Background Images1

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.

Stripo_Outlook Rendering Issues_Background Image for Structure1

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:

Stripo_Outlook Rendering Issues_Background for Containers and Elements1

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.

Stripo_Outlook Rendering Issues_2-Coumn Structure1

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;

Stripo_Outlook Rendering Issues_Container Label

  • click this label to activate the container’s settings;

  • now open the code editor;

Stripo_Outlook Rendering Issues_Opening Code Editor1

  • 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="" color="#7bceeb" ></v:fill>

   <v:textbox inset="0,0,0,0">


(The source of the code: 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]>



  • replace the underlined links with your URL to your background image;

Outlook_Rendring Issues_Inserting Code Samples for Backgrounds

  • 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.

Outlook_Rendering Issues_Copying URL links

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.

Coming soon:

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:

Stripo_Outlook Rendering Issues_Menus Lose Their Styles.1

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 the necessary links.

Final thoughts

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 (some versions). Isn't it great?

Due to our open HTML code editor, we allow our users to embed special code 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. 

Optimize My Emails for Outlook

MisterIz 1 month ago

Unfortunately the banners resize entirely on mobile devices making any text or CTA buttons very small.

nicoletta arena 6 months ago

quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?

Lea Simpkins 1 year ago

The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?

Hanna Kuznietsova commented to Lea Simpkins 1 year ago

Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. -- email sent via an ESP -- email sent via Outlook.

Alaa Abdelrahim 2 years ago

17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(

Hanna Kuznietsova commented to Alaa Abdelrahim 2 years ago

Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you


Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código ( pero no me resulta. Adjunto el enlace de la plantilla que hice. Agradecería que me digan que tengo que corregir para que resulte.

Hanna Kuznietsova commented to GERWIN RUSSELL FARROÑAN ALBORNOZ 2 years ago

Hola. Intente utilizar "New Email Copy 3" y este contenedor como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: Si necesita más ayuda, envíenos un correo electrónico a oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.

Francis Monier 2 years ago

Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")

Hanna Kuznietsova commented to Francis Monier 2 years ago

Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces

Олег Темпов 2 years ago

Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...

Hanna Kuznietsova commented to Олег Темпов 2 years ago

Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту, и мы постараемся помочь устранить данную проблему. Спасибо

You might be interested in

previous next
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business, and make a good lasting impression on clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine the best email signature examples and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information. Use this email signature template to design your own email signature faster Use...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s