Frequent E mail Rendering Points in Outlook and How Stripo Solves Them — Stripo.electronic mail



Outlook is a fairly standard electronic mail shopper. It holds 11% market share (Outlook apps maintain 9%, and the net model is utilized by 2% of individuals worldwide).

It’s stated to be enough for all companies’ wants.

Although, Outlook can also be well-known for its “distinctive” rendering guidelines. The commonest points that folks face when opening in or sending emails to Outlook are:

  • rounded buttons get square-shaped;
  • backgrounds for particular person containers and rows don’t render;
  • menu tabs lose their kinds.

These points are extensively mentioned on the net, which made us wish to cowl options to them on our weblog.

Some, when attempting to repair these issues, make adjustments to whole codes. However because it generally occurs, you get one drawback mounted, the opposite one happens.

As an illustration, electronic mail templates with renewed code don’t twist buttons in Outlook, however then they don’t render banners. Or what’s even worse — these electronic mail layouts may get damaged in different electronic mail shoppers, like Gmail or Yahoo.

Because of this we predict, the issue ought to be solved regionally — just for the weather that demand it, not whole emails.

1. Rounded buttons get square-shaped in some variations of Outlook

It’s been confirmed by quite a few investigations that the form of a CTA  button doesn’t impression CTR and CTOR in any respect.

The primary cardinal rule for making your buttons efficient is — to make it noticeable with clear and interesting copy on it.

But, the form of the buttons issues to us, designers, coders, and electronic mail entrepreneurs, as we would like our emails to be model constant.

So, what does Outlook do to buttons?

Initially, some variations of it simply make all of the angles proper. Then, it removes all whitespaces in buttons which makes them look much less enticing, but they’re nonetheless fairly noticeable.

What causes this bug?

There are 3 main strategies for button layouts in emails:

  1. The table-based methodology.
  2. The Stripo methodology. Let’s give it this title as a result of it was developed for our electronic mail template builder as, in our opinion, it suits our wants finest).
  3. The VML methodology.

The third one was invented solely for Outlook. Whereas others should not supported by this electronic mail shopper, however have wider assist amongst different electronic mail shoppers.

The best way to set a VML-based

In case you are a Stripo person, to optimize your buttons for Outlook, you solely have to:

  • open “Basic settings” on the facet panel;
  • open the “Button” tab;
  • toggle the “Assist for Outlook” button.

Support-for-Outlook_Control (1)

Now my buttons in Outlook stay rounded, preserve their type and colours.

Outlook 2016

(Outlook 2016, Home windows)

Wanna do the identical? 

Use Stripo

2. Container or construction backgrounds don’t render in Outlook

The lion’s share of questions on Outlook on the net is “easy methods to set a background picture to modules and separate components”.

Stripo_Outlook Rendering Issues_Background Images1

The e-mail on the fitting seems to be fairly cool, although the pattern on the left seems to be full.

That is the primary purpose of all backgrounds — to make electronic mail designs look full.

Essentially the most wonderful and essentially the most attention-grabbing truth about that is that Outlook does render backgrounds, which might be set for whole emails, throughout its internet model, throughout all variations of its desktop utility and in Workplace 365.

So, what if you might want to set a background for a sure aspect in your electronic mail?

Initially, allow us to remind you which you can set backgrounds for whole electronic mail template within the Look tab within the Basic Settings part — it can render appropriately throughout all desktop electronic mail shoppers.

The best way to set a background picture for a construction/row that renders in Outlook

Very straightforward to do it — simply construct it as a banner. As a result of all of the layers of the banner that you simply construct with Stripo, when being exported anyplace or downloaded as HTML-file, make a single picture. And as we all know all pictures work effectively throughout all electronic mail shoppers.

Stripo_Outlook Rendering Issues_Background Image for Structure1

To construct a banner, you might want to:
  • add a banner picture that may function the construction background;

  • add the “extra” picture which is able to function the primary picture to your content material module or add the picture of the button— keep in mind to make use of our “Sticky notes” choice to put extra pictures at equal distances from all sides of the banner picture;

  • place your CTA textual content over the pictures;

  • add a hyperlink to this construction.

Essential to notice:

This trick works provided that you add only one product merchandise on this construction/row.

The best way to set a background picture for a container/aspect that renders in Outlook

In some circumstances, you may have to set a background for a separate container or a column in a row.

Our background for containers renders appropriately throughout all variations of Outlook:

Stripo_Outlook Rendering Issues_Background for Containers and Elements1

There are two methods of doing it:

Manner 1. Constructing a banner

Sure, you will have to construct it the best way we described within the part above, however you will have to make use of a 2-column construction.

Stripo_Outlook Rendering Issues_2-Coumn Structure1

Manner 2. Constructing a VML-based background

You might want to put together the construction and the aspect that you’re going to add a background in.

As soon as it’s accomplished, you must work with electronic mail template code.

  • put a mouse pointer over the mandatory aspect proper within the template;

  • above this aspect, discover the “container” label;

Stripo_Outlook Rendering Issues_Container Label

Stripo_Outlook Rendering Issues_Opening Code Editor1

<!--[if gte mso 9]>

 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" type="width:327px;peak:100%;">

   <v:fill sort="body" src="https://iiqf.stripocdn.electronic mail/content material/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/pictures/26661559905688877.png" shade="#7bceeb" ></v:fill>

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


(The supply of the code: We optimized this code to make it meet our editor necessities higher);

  • insert this code pattern beneath the exact same line:

<!--[if gte mso 9]>




Outlook_Rendring Issues_Inserting Code Samples for Backgrounds

  • within the embed code, edit picture width in accordance with the width of the container — you may see it within the prime line after the “width” tag. In our case, it’s 600 px.

If the picture is hosted on our servers, then it’s possible you’ll get the URL right here:
  • in your HTML electronic mail template, click on the very background picture that you’ve got chosen;

  • within the settings panel, click on the “URL” button;

  • within the picture path subject, copy the hyperlink.

Outlook_Rendering Issues_Copying URL links

Essential to notice:

When you have beforehand added the VML-based button to the container or a construction, then your VML-based background is not going to work. Outlook shows simply one of many two VML objects — the one which was set first.

Coming quickly:

Glad to announce that very quickly, we’ll add a management, much like the button management, to background pictures. This implies, you’ll not have to deal with code — you’ll solely want to decide on whether or not you wish to set particular backgrounds for the Outlook customers.

3. Menu gadgets lose their kinds in some variations of Outlook

Our customers not often face this drawback, but we determined to place it on the record, too:

menus and buttons might lose their kinds, together with colours, font sizes, and so on.

When constructing my electronic mail, I set font sort: Trebuchet, and font measurement 18 px.

However in Outlook, I noticed this:

Stripo_Outlook Rendering Issues_Menus Lose Their Styles.1

In case you look carefully, you will notice the primary menu merchandise is written in Instances New Roman, 12px, and in black. 

What causes this bug:

You merely overlook so as to add a hyperlink to those components. When the aspect that ought to have a hyperlink doesn’t have one, it can lose its kinds.


Verify in the event you’ve added hyperlinks to all components previous to testing or sending your emails over to recipients.

Essential to notice:

When constructing electronic mail templates, we add hyperlinks to all the weather that ought to have them. If you don’t take away one deliberately, however merely overlook to interchange with yours, your menu will not lose its type because it has all the mandatory hyperlinks.

Closing ideas

Outlook is de facto enough for a lot of companies’ wants. And we would not have to be afraid of it. Fairly the alternative – we have to be taught to deal with it. Moreover, Outlook now helps animated GIFs (some variations). Is not it nice?

Attributable to our open HTML code editor, we permit our customers to embed particular code components to allow them to ship stunning refined emails to all recipients, together with those that use previous or new variations of Outlook.

Within the brief run, you’ll not have to deal with codes — we’ll do it for you.

You’ll solely need to activate respective choices.

Please, learn this weblog publish on easy methods to construct and export electronic mail templates to Outlook with Stripo. 

Optimize My Emails for Outlook