A Guide to Bulletproof Buttons in Email Design

[ 0 By

As designers and marketers, we all understand the importance of getting people to interact with our campaigns. That’s why the call-to-action, or CTA, is all-important.

I’ve written before about CTAs and their importance in email marketing, but today, I wanted to dive a bit deeper into one method of crafting calls-to-action—the bulletproof button.

Don’t Use Images

Traditionally, email designers have relied on images to craft their CTA buttons. Unfortunately, many email clients block image-loading by default. Subscribers, too, sometimes prefer to view emails with images disabled. In fact, we recently calculated that 43% of all Gmail users view emails with images off.

Losing impact when images are disabled.
Losing impact when images are disabled.

If your CTAs are contained with images, there is a good chance that many subscribers are missing out on your message. Even worse, they aren’t interacting with your campaigns.

Fortunately, there’s a better way to build your CTAs: bulletproof buttons.

Bulletproof Button Approaches

Bulletproof buttons allow you to build buttons with code instead of images. You can reliably swap your GIFs, PNGs and JPEGs for HTML and CSS.

By only using HTML and CSS, the button will display in all email clients even with images off, hence making them “bulletproof.”

What’s more, you can update the content and style of your buttons by simply editing your HTML template. You no longer have to waste time crafting buttons in Photoshop, uploading them to a server, and updating your HTML.

There are a few different ways to code bulletproof buttons. Let’s take a look at four different approaches.

If you’d like to follow along, you can check out the test email we set up illustrating the four approaches here.

1) VML-Based Buttons

The traditional approach to bulletproof buttons was popularized by Stig, a developer at Campaign Monitor. This approach uses styling on the link itself to structure and style the button for most email clients. Structure is supplied via the line-height and width properties. As a fallback for Microsoft Outlook, VML (Vector Markup Language) is used within an Outlook-specific conditional comment.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <div>
        <!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
          </v:roundrect>
        <![endif]-->
        <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
      </div>
    </td>
  </tr>
</table>
button-vml

The traditional approach has great support for most email clients. Additionally, the entire button itself is clickable. The main drawback to using this method is that it relies on VML, which is a proprietary language for Microsoft’s Office suite of applications. VML is an archaic language, one that most email designers aren’t familiar with. Therefore, creating new bulletproof buttons and maintaining existing email templates using this approach can be time-consuming and frustrating.

In using VML, this bulletproof button method essentially creates two versions of the button. The first uses a conditional comment to target Outlook desktop clients and uses VML markup to style the button.

<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
  </v:roundrect>
<![endif]-->

All other clients then use the standard <a> link directly after the
<!–[if mso]> statement.

<a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>

Another drawback is that you are forced to declare specific dimensions for the width and height of the button. Changes to the copy of the button then requires manual changes to the dimensions of the button, making the process quite tedious and unscalable.

If you don’t want to learn the ins-and-outs of VML (and honestly, who does?), Campaign Monitor has released a free, online tool for building traditional bulletproof buttons. Buttons.cm makes it easy to craft new CTAs that will look great and work well across most email clients.

2) Padding-Based Buttons

At Litmus, we use several alternate approaches for building bulletproof buttons.

The first uses a simple HTML table for the button. It relies on padding at the table cell level to structure the button, and both HTML attributes and CSS to style the button.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#EB7035" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-padding-based

Without having to rely on VML, we can create lean buttons that still work well across most email clients. More importantly, we can quickly update the message and style of a CTA using code that we’re familiar with—HTML and CSS. This makes creating new emails and updating existing templates a breeze.

The major downfall of this solution is that the entire area of the button is not clickable, only the link within the table cell is. This can lead to friction with subscribers that think they clicked or tapped on a button. And, if there’s one thing we want to avoid in email marketing, it is friction for our subscribers.

3) Border-Based Buttons

Border-based buttons takes a similar approach to the previous method. Using simple HTML and CSS, we can structure and style our calls-to-action. However, instead of relying on padding on the table cell level for structure, we add thick borders to the link itself to build our CTA.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">I am a button &rarr;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-border-based

Note that the link tag is set to be a block-level element and that borders are used to provide our “padding”, ensuring that the entire button is hoverable/clickable, even in older desktop clients. The main drawbacks are that Outlook will reduce the size of the borders by a small amount, background images aren’t supported with this method (since Outlook does not recognize <a> tags as block elements), and it eliminates the ability to add more advanced styling such as extra borders on the exact link element. However, we feel that this is a more than acceptable compromise.

Even with Outlook compressing the buttons and varied support for background images, this approach is fantastic for a few reasons:

  • All of the styling is on the actual link tag. No styling is required (except for advanced styling), which simplifies the code.
  • Only one button is used. No double buttons or confusing VML code needed.
  • You don’t need specific height or width definitions, making buttons highly scalable.

This leads us to the final method of creating bulletproof buttons…

4) Padding + Border-Based Buttons

The padding and border-based buttons combine elements of the previous two approaches.

Essentially, this approach uses the same structure of styling the link with both padding and at least a solid 1px border. Then, a background color is applied to the <td> to fill the entire background of the link. The background color needs to be applied to the <td> instead of the <a> in this instance because Outlook does recognize horizontal padding on the <a> tag (since it does not support such styling for non block-level HTML elements).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-padding-border

The downside to this method is that it once again separates the styling between a <td> and <a> tag. However, only one button is used, specific dimensions are not required, and background images can be supported with this method.

Horizontal Padding Hack for Outlook

A quick hack that can be used to increase the horizontal “padding” for Outlook is to conditionally add inline non-breaking space(s) on each side of the link.

<!--[if mso]>&nbsp;<![endif]-->

Progressive Enhancement with Media Queries

Using -webkit and -moz targeted media queries, we can progressively enhance the button for newer email clients for any of the methods above.

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }

@-moz-document url-prefix() { /* Insert -moz-targeted CSS here */ }

The -webkit-specific query allows us to selectively target clients in Chrome and Safari, as well as Apple Mail and the iOS Mail app. The -moz-specific query allows us to target Firefox. By targeting these clients we can provide a better button for subscribers, such as adding more advanced styling like borders, gradients, web fonts, hover effects, and more.

progressively-enhanced-button

Support

While we refer to code-based buttons as bulletproof, in reality, nothing in email design is actually bulletproof. Inconsistent rendering engines and lack of standards means that no bulletproof button will render perfectly in every email client. That shouldn’t dissuade you from using bulletproof buttons in your email campaigns, though, as all of the major email clients support the various techniques explained above.

You can check out the full Litmus tests here.

Desktop

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

Apple Mail

check-green check-green check-green check-green

Lotus Notes 8.5

check-X check-X check-X check-X

Outlook 2000-2003

check-green
*
check-green
*
check-green
*
check-green
*

Outlook 2007/2010/2013

check-green
check-green
*
check-green
check-green
*

Outlook 2011 (Mac)

check-green check-green check-green check-green

Thunderbird

check-green check-green check-green check-green

Webmail

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

AOL Mail

check-green check-green check-green check-green

Gmail

check-green check-green check-green check-green

Outlook.com

check-green check-green check-green check-green

Yahoo! Mail

check-green
*
check-green
*
check-green
*
check-green
*

Mobile

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

Android 4.x

check-green check-green check-green check-green

Gmail App

check-green check-green check-green check-green

iOS Mail App

check-green check-green check-green check-green

* Rounded corners do not render. † Buttons are collapsed.

Are your Campaigns Bulletproof?

Regardless of which approach you take, using bulletproof buttons for calls-to-action is vastly superior to relying on images. Even in email clients that block images, you can rest easy knowing that your message will be clear to your audience, increasing the likelihood of them interacting with your emails.

Are you using bulletproof buttons in your campaigns? Test them out in 30+ desktop, webmail and mobile email clients with a free 14-day Litmus trial.