Rounded buttons in classic Outlook with VML in Adobe Marketo Engage
Updated: 3 days ago
Give a button soft corners in an Adobe Marketo Engage email and open it in classic Outlook for Windows, and the corners come out square. If the button is a padded link, it also shrinks to the height of its text.
How classic Outlook draws email
Classic Outlook renders email with Microsoft Word. Word draws no rounded corner from border-radius. It does draw VML, Microsoft's Vector Markup Language, so that's where the corner has to come from. Microsoft supports existing installations of classic Outlook until at least 2029. [1] You'll be building the VML side of your buttons for a while yet.
If square corners are fine for your brand, skip the VML: set line-height on the cell and let its bgcolor fill it. The button gets its full height back.
Drawing the corner in VML
I'd build the classic Outlook side of every button on a v:roundrect. One attribute, arcsize, sets the corner, and nobody has to draw a path. The label goes in a v:textbox inside it.
Wiring both versions to one set of variables
If each version holds its own value, a marketer's color change shows in the Adobe Marketo Engage preview and classic Outlook keeps the old one. Declare the button's variables once in the template head and use them in both versions, inside a conditional comment for Word and outside it for everyone else. [2]
<meta class="mktoColor" id="btnColor" mktoName="Button color" default="#1F5FA8">
<meta class="mktoString" id="btnText" mktoName="Button text" default="Register now">
<meta class="mktoString" id="btnLink" mktoName="Button link" default="https://www.example.com">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="${btnLink}" style="height:40px;width:200px;v-text-anchor:middle;" arcsize="20%" stroked="f" fillcolor="${btnColor}">
<v:textbox inset="0,0,0,0"><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;line-height:16px;">${btnText}</center></v:textbox>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="${btnLink}" style="display:block;width:200px;line-height:40px;background-color:${btnColor};border-radius:4px;color:#ffffff;font-family:Arial,sans-serif;font-size:16px;text-align:center;text-decoration:none;">${btnText}</a>
<!--<![endif]-->The attribute I'd check is fillcolor: it has to read the same color variable as the HTML button.
Matching the corner and placing the button
arcsize is a percentage and this border-radius is in pixels, so don't work one out from the other. Send arcsize="20%" on a button 208px wide and 48px high, and the corner comes out about 10px across in Outlook 2016, 2019, 2021 and the Microsoft 365 build. Match the two by eye on a sample.
The sample's button goes in a <td> your template supplies. Put align on that cell: Word moves the shape with it.
When the shape has to be a drawn path
Save a drawn path for a shape v:roundrect can't make. Draw it as a v:shape on a coordsize="21600,21600" grid, then widen the button and send a sample. The same path that curves 11px at 208px wide curves 21px at 416px, and the browser copy keeps its CSS radius. Draw each curved corner with an arc command such as qy. One straight segment across a corner gives you a chamfer.
If you give marketers a choice of corner shapes, don't offer the paths as a list variable. Adobe Marketo Engage splits list values on commas, and a VML path is almost all commas, so the path arrives in pieces. Put each path on a Boolean variable's true_value instead, where the whole value goes in as one. [2]
Testing it in classic Outlook
Select the email, open Email Actions, choose Send Sample and send it to an address you read in classic Outlook, and to one you read in a browser. [3]
Open it in the Microsoft 365 build of classic Outlook, and in the 2016, 2019 or 2021 build if your subscribers still use one. The corners are round, the label is centered, and the button sits where the cell puts it. Put it next to the browser copy and match the corners.
Change the button color in the email editor, send the sample again, and look for the new color in classic Outlook.
Switch Outlook 2021 or the Microsoft 365 build to dark mode and look at the button again. The fill stays put and the label's lightness flips. A white label on a dark navy fill turns near black and nearly disappears, and a dark label on a pale fill turns pale. I wouldn't sign off on a button until its label reads in both modes.
References
1. Stages of migration to new Outlook for Windows | Microsoft 365 Apps | learn.microsoft.com. https://learn.microsoft.com/en-us/microsoft-365-apps/outlook/get-started/guide-product-availability
2. Email Template Syntax | Adobe Marketo Engage, Variables | experienceleague.adobe.com. https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/email-marketing/general/email-editor-2/email-template-syntax
3. Send a Sample Email | Adobe Marketo Engage | experienceleague.adobe.com. https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/email-marketing/general/creating-an-email/send-a-sample-email
This post is not affiliated with, authorized, endorsed or sponsored by Adobe, publisher of Adobe Marketo Engage. Adobe, Marketo and Marketo Engage are either registered trademarks or trademarks of Adobe in the United States and/or other countries. Microsoft, Outlook and Word are trademarks of the Microsoft group of companies.
Comments