Marketo Email Templates v2, Rounded Button in Outlook 2010/2013

Question

I know it there is a hack for outlook 2010/2013 for a rounded edged button, but it doesn't really work with the new Marketo templates. If you are familiar, these new email templates work on Modules that you drag and drop. For buttons, there is an input text field where you write the button text. The outlook hack is a comment with duplicate information, making it manual. So the person populating the email needs to access the backend (breaking the template from the modules) and enter the button text manually. This is not a viable solution for us.

I know my question is a bit confusing, so let me know what other information I can provide.

Here is the snippet with the button (provided in the original template):

 <tr> 
   <td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;"> 
     <center> 
       <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0"> 
         <tbody> 
           <tr> 
             <td style="hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-text-size-adjust: 100%; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="secondary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;border-bottom-color:${heroBorderColor2};font-size: 21px;font-weight: bold;font-family:'Open Sans', Arial, sans-serif;color: #ffffff;padding-top: 5px;padding-right: 70px;padding-bottom: 5px;padding-left: 70px;display: inline-block;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;border-left-color:${heroBorderColor2};-webkit-background-clip: padding-box;background-clip: padding-box;border-top-width:${heroBorderSize2};border-right-width:${heroBorderSize2};border-bottom-width:${heroBorderSize2};border-left-width:${heroBorderSize2};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${heroBorderColor2};border-right-color:${heroBorderColor2};-moz-background-clip: padding;text-decoration: none;background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td> 
           </tr> 
         </tbody> 
       </table> 
     </center> 
   </td> 
 </tr> 

Here is a screenshot of how the module input looks like:

These templates came out only a few months ago, but still hoping someone came across this.

Thanks so much in advance!

Answer 1

I've recently been wrestling with "rounded buttons" in emails as well. First, from what I can tell Outlook (even up to Office 2016) can't render that kind of rounded borders in emails (or simple divs with style "border-radius").

From what I can tell most email editors from other companies who DO have rounded buttons do what I think you're speaking about where the button code is doubled ... but in their case they simply that on the backend and allow the WYSIWYG authors to simply edit the button in one place. In Marketo's case, it appears they do not have this fancy backend logic so A) you have to add the fancy doubled button code yourself.. AND you or your email content people have to edit the code in two places (which is basically far too tedious/complicated to be a feasible workflow).

So for now it looks like rounded buttons are simply not an option when using Marketo by itself. We'll be asking Marketo about this specific issue soon in the event that somehow we're missing something ... but my assumption is that unless your workflow includes a 2nd tool to generate your email HTML code (like CampaignMonitor etc) ... we just can't have rounded buttons with a Marketo-only workflow.

I found this "button html generator" recently which is interesting but still not a viable workflow option (IMHO) for marketing people (vs. developers) - but others may find it useful for this situation: https://buttons.cm/

I'll report back if/when I find anything else - please do the same.