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?

[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!!