Bulletproof Buttons in Outlook

Topics covered in this HTML Email tutorial:

VML, Bulletproof buttons in Outlook

Exercise Preview

Exercise Overview

In this exercise we will take a closer look at buttons. It’s important to make your call to action visible, and to clearly direct readers to the action you want them to take. We have an email with a button styled using CSS. It works well in most web email clients, but doesn’t look great in Outlook on the desktop.

Getting Started

1. We’ll be switching to a new folder of prepared files for this exercise. Close all open files in your code editor to avoid confusion.

2. For this exercise we’ll be working with the Bulletproof Buttons folder located in Desktop > Class Files > yourname-Responsive HTML Email Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).

3. In your code editor, open dogr-launch-email.html from the Bulletproof Buttons folder.

Button Best Practices

Based on the ho-hum look of the Sign Up button in desktop Outlook, you may think about using an image for the button. This would work, but has some downsides:

• Many email clients disable images by default, which would leave only the alt description visible. The call to action would not be very clear to the reader.
• Images are not as easy to update or change without a design app.
• Each image needs to be downloaded, putting more strain on mobile data connections.

If you spend time researching buttons in HTML email, you’ll find several resources that offer different methods. Earlier in the project, we opted to use a thick border and a background color directly on the anchor tag. This creates a button that’s fully clickable, and that looks passable in Outlook:

If your core audience is made up of Outlook users, it may be more important to you to ensure the button looks more like the intended design, with the wider sides and rounded corners.

VML (Vector Markup Language)

Outlook 2007, 2010, 2013, and 2016 all use the Microsoft Word engine to render email. What this means for email developers is that certain design elements, namely background images and border-radius do not work as expected in these version of Outlook.

The solution is to use something called VML, or vector markup language. VML is a proprietary Microsoft language for vector graphics that we can use to draw shapes and elements in Outlook. VML is officially deprecated from Internet Explorer, but, as is often the case in HTML email, is still commonly utilized when building emails.

Creating “Bulletproof” Buttons

The good news is, you don’t need to learn VML from scratch because other developers have done some of the heavy lifting for us. Campaign Monitor has two very solid tools that will generate the code you need:

• Email buttons buttons.cm
• Background images backgrounds.cm

1. In a browser, go to buttons.cm

2. Enter the following button attributes:

   Button text:	Sign Up
   Background image:	Uncheck
   Background color:	#04cc6b
   Font color:	#ffffff
   Button width:	160 px
   Button height:	50 px
   Border color:	Uncheck
   Border radius:	10 px
   Button URL:	http://www.dogr.io

3. The VML code will be automatically generated in the panel on the right.
4. Take a moment to review the code. Some of it should look familiar, such as the conditional comments surrounding the VML code. This is because we only want the VML to render when the email is opened in a version of Outlook that uses the Word engine.
5. Click on the code. It should highlight all of the code.
6. Copy it.
7. Return to dogr-launch-email.html in your code editor.
8. Find the anchor with the class of button, around line 112.
9. Press Enter or Return to create a new line below the button.

10. Paste the code as shown below:

    <h1>Schedule playdates<br> for your dog with Dogr</h1>
    <a class="button" href="http://www.dogr.io/">Sign Up</a>
    <div><!--[if mso]>
       <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.dogr.io" style="height:50px;v-text-anchor:middle;width:160px;" arcsize="20%" stroke="f" fillcolor="#04cc6b">
          <w:anchorlock/>
          <center>
       <![endif]-->
    

    Code Omitted To Save Space

       </v:roundrect>
    <![endif]--></div>
    

11. The button generator also created the CSS inline styling necessary to render the button in web email clients. We have a CSS rule created for the button with our own styling that we want to use instead.
12. Select the entire line of code for the anchor tag (with button class), around line 112.
13. Cut the code, and delete any extra whitespace.

14. Select the anchor tag that is sandwiched between the VML conditional comments, around line 117:

    <a href="http://www.dogr.io" style="background-color:#04cc6b;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">Sign Up</a>
    

15. Paste the code, replacing the generated button. Your code should look as follows:

    <div><!--[if mso]>
       <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.dogr.io" style="height:50px;v-text-anchor:middle;width:160px;" arcsize="20%" stroke="f" fillcolor="#04cc6b">
          <w:anchorlock/>
          <center>
       <![endif]-->
          <a class="button" href="http://www.dogr.io/" target="_blank">Sign Up</a>
       <!--[if mso]>
          </center>
       </v:roundrect>
    <![endif]--></div>
    

16. Save the file.
17. Preview the page in a browser. Note that the button shouldn’t look any different than before. This is because VML is only read by Microsoft, and because the generator also uses a conditional comment to ensure the button is rendered only in a version of the Outlook desktop application.

18. If you have access to a desktop version of Outlook, re-inline the email and send a test to preview the email in Outlook. The button should now look as follows:

    

    The email will now look largely the same between different email clients! Feel free to save an inlined copy of the code, and close the files.