Handling Fallback Options for CTA Buttons in Outlook

[artur92]

Hey guys, it's me again with another topic related to Marketo's wonderful E-Mail Design capabilities 😄 

This time I have a question about fallback buttons in Outlook – a frustrating topic I guess but maybe some of you can give us useful tips and hints (apologies if there already are discussions regarding this topic – I couldn't really find relevant discussions which weren't from years ago or had a real 'solution' to this). 

I know that there is more than 1 possible way of handling buttons in Outlook. Since we are using Stripo to design our Emails, we make use of their "outlook-button-functionality" (which basically is the VML solution from what I know). 

Our CTAs consist of 2 variable parts users can fill out within the Marketo Editor – that's the CTA ButtonText and the CTA ButtonLink. 

We use this solution instead of the "mktoText" Fields as the changes have to be made in both variants of our button - outlook and all the other clients – and if I understood right, editing the visible button inside the Marketo Editor doesn't change anything inside the Outlook-fallback. So that's why we use the variables that changes are made within both variants of the button (because it's not feasible for everyone to go inside the code and edit the outlook-parts, too). 

However, we have a problem to find the best settings for this. When sending the Testmails to Litmus, we can see that Outlook Desktop (ironically only on Windows) & Windows Mail sometimes still have issues with the Button Text being cut-out or some weird line-breaks happening. Some of these issues are only minor, but sometimes the text gets cut off so badly that the CTA is not readable anymore. And as not everyone inside our team is familiar with HTML & CSS, we cannot expect that everyone is doing trial & error changes to the "outlook-variant" regarding the weight, the height and the line-height settings until the right settings for the particular wording are found. 

That's why I wanted to ask the community, if maybe somebody already found out some "best practice" settings for Outlook to ensure that the text is always visible. Is it possible to force a line-break for example if the text is too long to display inside the button? Or how do you handle CTAs in Outlook Mails in general? What hacks are you using to get this issue to work properly? Are you maybe even using another fallback option instead of the VML-solution and how are your experiences with this solution? 😄 

I would be glad to hear from your experiences 🙂 

Attached you can see the difference between the e-mail with "right" button settings for outlook and the "wrong" ones.
If needed I can also provide a code snippet as an example. 

[Jo_Pitts1]

@artur92 ,

firstly - and most importantly... this is nothing to do with Marketo.  It's ALL to do with Outlook Desktop for Windows.

secondly - I have a pretty standard set of code that I use for buttons.  It works like a charm across Outlook and all other clients, and handles rounded corners perfectly well.

What underlying code are you using that isn't working properly?

Cheers

Jo

[Disha_Goyal6]

Hi @artur92, I am using this code for every email client and it works fine.

<table class="mktoModule main_table" mktoName="CTA Module" id="CTAModule" mktoAddByDefault="false" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%">
<tr>
<td bgColor="${bgcolor-grey}" valign="top" style="background-Color:${bgcolor-grey};vertical-align: top;">
<table class="inner_table" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:570px;border-collapse: collapse;border-spacing: 0;" border="0" width="570">
<tr><td height="${top_Space10}" style="line-height:1px;font-size:1px;">&nbsp;</td></tr>
<tr>
<td class="center">
<div class="mktoText" id="CTA-btn" mktoname="CTA">
<table cellpadding="0" cellspacing="0" border="0" align="${CTAAlignment}">
<tr>
<td bgcolor="${CTABGColor}" style="text-align: center; color:${CTAColor}; background-color:${CTABGColor};text-decoration:none; font-size:14px;line-height:110%; font-family:'Manrope',sans-serif; padding: 13px 36px; border:${CTABorderWidth}px solid ${CTABorderColor}; font-weight:500; border-radius:${CTABorderRadius}px;"><a style="text-decoration:none; color:${CTAColor};" href="${CTAURL}">${CTAText}</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr><td height="${btm_Space20}" style="line-height:1px;font-size:1px;">&nbsp;</td></tr>
</table>
</td>
</tr>
</table>

 The only issue I encountered in this code is whole CTA is not clickable. Otherwise from layout point of vie, It works amazingly.

[SanfordWhiteman]

@Disha_Goyal6 that’s giving you rounded corners in every client?

[Jo_Pitts1]

@Disha_Goyal6 ,

to @SanfordWhiteman's point, that won't do rounded corners in Outlook for Windows.  

@artur92 , there is no irony that your problem is only in Outlook for Windows. 

Cheers

Jo

[NiharikaGoyal]

Hi @artur92 

Please share the HTML code with me so that I can check how you implement the buttons. As I am sure there is some problem in the HTML code that's why buttons are not expanding on its actual width in outlook email clients. 

Thanks!!

[NiharikaGoyal]

Hi @artur92 

Hope you are doing well. 

Here is the HTML code that you can use to create rounded buttons and it would render fine in outlook email clients. But make sure you will define correct value of width in below variable:

${outlook-cta-width} and also make sure ${outlook-cta-height} value for height variable should be correct

<div class="mktoText" id="mod-3-cta" mktoname=" CTA">

<table align="${Cta-align}" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center" style="text-align:center;">
<!--[if mso]>
<a:roundrect xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${CTAURL}" style="height:${outlook-cta-height}px;v-text-anchor:middle;width:${outlook-cta-width}px;font-family: Arial, sans-serif;" arcsize="50%" strokeweight="1px"
strokecolor="${CTABorder}" fillcolor="${CTABG}}">
<w:anchorlock/>
<center style="color:${CTAFontColor};font-family:Arial,sans-serif; font-size:16px;font-weight:700;">${CTAText2}</center>
</a:roundrect>
<![endif]-->
<a class="text_white" style="mso-hide:all;background-color:${CTABG};border-radius:50px;font-family:'Arial',sans-serif;padding: 12px 26px; font-weight: 700; font-size:16px; text-align: center; vertical-align: middle; color: ${CTAFontColor};display:block; border:1px
solid ${CTABorder};-webkit-text-size-adjust:none;text-decoration:none;outline:none;" href="${CTAURL}"> ${CTAText2} </a>
</td>
</tr>
</table>
</div>

[artur92]

Hey guys,

first of all, sorry for my delayed response. I was out of office for the last days and couldn't check the updates in this thread.

@NiharikaGoyal:
Thank you for the suggestion! From what I can see you have defined the CTA as "mktoText" and additionally used Variables (CTAText2) to fill in the CTA text. Is that right and what is the reason to use both ways? From what I understand it can be either the mktoText Solution or the Solution with Variables but I don't see the benefit of using both ways. Am I missing something here?

Using variables to re-define the width and height if needed is a good compromise in my opinion. If we detect some misaligned CTA Texts on Outlook/Win Mail when testing, we could still re-adjust these parameters without making edits inside the code. For now I think we would go with this solution - thanks again for providing it 🙂

@Disha_Goyal6:
Thanks for your suggestion, too. This was the previous solution we used before and - as others have already mentioned - it has the slight disadvantage, that the CTA buttons in outlook/win mail are not rounded anymore, but square. It would work as a compromise, but I think the solution above works a little bit better for our needs 🙂

Regarding our own HTML Code: While testing we've edited the asset several times now and it's finally working with our actual settings. Since there is no historization in Marketo, I cannot give you the faulty code anymore :/. What I can provide, however, is the result we got in Litmus – just keep in mind that this is the code AFTER we've send out the mail (so variables are already filled), not the code lying behind the email asset in the marketo editor. Also I've shortened the mail a bit (deleted some entries that basically had the same structure as the modules you can see in the example)

Here is the code:
https://privatebin.auxaws.de/?826533bcb1483b6d#CZvxhewd29WoX3Up2o1C9ojKJHpPHLNt2B33QXiiZWd8

The settings we use now are:
Line-height: 9px
width: 250px
height: 50px
Our finding for now is that using everything below 30 characters works fine.

Settings we used before:
Line-height: 9px
width: 183px
height: 75px

@Jo_Pitts1: I know that this is purely because of Outlook (and what makes it worse is the fact, that this only occurs in the Windows Version, the Mac Versions seem to be working fine). Sorry if that came across differently in my introduction and I saw Marketo as the main culprit ... sometimes, however, it is difficult to see what exactly is responsible for this result (especially if you are just getting started to "deep dive" into Marketo's own email syntax / email editor features). From my last post I got the advice to create a new email asset everytime we are doing changes inside our existing template, just to make sure that there is nothing weird going on inside the code. See https://nation.marketo.com/t5/product-discussions/is-using-the-rich-text-editor-and-variables-inside...

If you have any suggestions on how we can further optimise our code for fallback buttons (or can provide a snippet of your standardized solution) we would be glad to hear from you 🙂