How to Make Bulletproof Email Buttons and Backgrounds

Bulletproof: it’s not just for coffee and flak jackets. If you’ve been in the email development field for a while, you’ve probably heard the term “bulletproof” thrown around. Developers often use the term in conjunction with an email element, such as a “bulletproof button” or a “bulletproof background.”

But what makes an email element bulletproof? And how do you code one? Most importantly, why does it matter for your email marketing campaigns?

In this article, we’ll start by defining what bulletproof means for email design, some things to consider, and then go over how to create a bulletproof button and a bulletproof background.

As we’ve tested emails over the years, we’ve learned email clients are full of quirks and exceptions. For instance, the same HTML and CSS might not render on Microsoft Outlook but appear as intended on Gmail. And, let’s not even get started about media query support. These are the “bullets” from which we’re protecting our email elements.

An email element that is bulletproof retains its functionality on any email client, regardless of the level of HTML and CSS support that client has. Developers also use the term to refer to email elements that don’t rely on image support for rendering.

It’s worth noting that bulletproof elements may vary visually across clients, but the element’s functionality remains bulletproof. For example, a button with rounded corners will display properly on more modern clients, but it will appear unrounded in Outlook clients. Despite this minor aesthetic change, the button’s functionality remains essentially unchanged.

Bulletproof buttons don’t rely on images to get their message across. Instead, they use live text to display the call-to-action (CTA). When creating a bulletproof button, you use HTML and CSS to ensure the button’s core content will work on every email client.

Bulletproof buttons are always preferable to image buttons. Check out some instances when all-image buttons fail to measure up:

• Screen readers are forced to read the alt text if the CTA is in an image. As such, all-image buttons don’t work as well, and they aren’t accessible.
• Some email clients or users block images in an email. This means the call-to-action (CTA) may not be immediately obvious to the reader, which can result in lower click-through rates (CTR) and potential loss of email ROI.

Still not convinced? Bulletproof buttons can improve the performance of your marketing email because they:

• Display correctly even when email clients do not support images or the user has images turned off. Since a bulletproof button is only HTML and CSS, it will display no matter what. Don’t make it tough for your user to click through to your content.
• Are easy to edit. Rather than crafting buttons in an email design tool like Photoshop, uploading them to a server, then updating your HTML, you can simplify your workflow to one step. All you have to do is edit your HTML email template to change your button’s content or style.
• Give screen readers a script to read. Keep your email marketing campaign accessible by providing the exact text you want a screen reader to read. Don’t leave it to an undefined alt text to say what you want to say.

Before we dive into how to code a bulletproof button, here are some things to consider:

How big should a button be in an email?

Given that many of your users are probably using mobile devices, a good rule to follow is to use a font size of 16px. Remember, bigger isn’t always better. You do want your button to stand out, but you don’t want to distract your user from the rest of your content. Look at the International Women’s Media Foundation (IWMF) email below. Their CTA button is neither too large nor too small: it balances out the headline and is the right size to catch the reader’s attention.

Does your bulletproof button fit your brand?

Even though bulletproof buttons are usually just text on a colored background, you can still make sure they fit your brand image. Check out ModCloth’s email campaign below. Their goldenrod button with its dark brown text echoes the same Fall colors in ModCloth’s email. Even though their button is simple, ModCloth created a cohesive, on-brand look with their bulletproof button.

How wide should your button be?

We talked about font size above, but now let’s talk about width. In the examples above, the buttons are centered on the emails and aren’t full-width because the email content continues below the button. A full-width button segments your email, which may not be a good idea if you want your subscribers to keep reading. However, sometimes they work really well as an endcap to your email, as shown below.

With these design considerations out of the way, let’s get coding!

In this section, we’ll go over how to use HTML and CSS to create a bulletproof button.

Here’s a picture of what we’re trying to create:

We’ll use the following code to create this bulletproof button:

                            

                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="center" bgcolor="#933e71" style="border-radius:5px;">
                        <a href="www.example.com" style="border-radius: 5px; padding: 15px 30px;
                        border: 1px solid #933e71; display: inline-block; font-size:17px; color:#ffffff;
                        text-decoration: none; font-family:sans-serif;">Insert text here</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
                            
                        

Insert the code above into your HTML email template to get started. You can play around with font-weight, font-size, and color until you’ve created an on-brand, visually effective button.

If you’re not ready to start coding your own, you can try out some of these fantastic tools that allow you to generate bulletproof buttons with a few clicks. For more resources, check out our code-based bulletproof button or our HTML code for bulletproof buttons in Office 365

Bulletproof email background images are HTML/CSS backgrounds that use a combination of a traditional background image combined with some Vector Markup Language (VML) to create backgrounds that display properly regardless of your subscriber’s email client. Even though it’s technically possible to get traditional background images to display in any email client with a workaround, it’s a little tough to code these techniques into email newsletters.

Here’s an example of how Email on Acid uses bulletproof backgrounds to give the newsletter a bit more pop at the top:

And here’s what that newsletter would look like if the email client blocks the images  – not too bad, right?

Bulletproof backgrounds are better than simply using images for your email backgrounds. Some benefits include:

• Images increase engagement. Use a background image or background color to keep your emails interesting and engage users.
• Images make your emails memorable. Stand out from that crowded inbox with engaging content that sticks in your subscriber’s memory.
• Ensure that you’re delivering quality content. Keep control over what your subscribers see with a coded bulletproof background. This means that even if an email client or subscriber blocks an image, the bulletproof background code will display as a solid color of your choice.

Without further ado, let’s dive in! In this tutorial, we’ll create the Email on Acid bulletproof background from above.

Let’s start with the code below. You’ll notice we’ve included a line for you to add the HEX code for your fallback color (#fallbackcolor) in case your subscriber or their email client blocks images.

                            

                                <table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;" role="presentation">
    <tr>
        <td background="image/source" valign="top" align="center" style="background-repeat: repeat-x; background-color: #fallbackcolor;"> 
            <!--[if (gte mso 9)|(IE)]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
            <v:fill type="tile" src="image/source" color="#fallbackcolor"/>
            <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
            <![endif]-->
            <div>
            <!--[if (gte mso 9)|(IE)]>
            <table width="660" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
            <![endif]-->
            // Content goes here
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
            </div>
            <!--[if (gte mso 9)|(IE)]>
             
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>
                            
                        

VML can be tricky to get right, so we advise using these other fantastic tools for bulletproof backgrounds. This tool allows you to input your image and where it will be placed in the email, and it will generate your background code for you. With this handy tool, you can spend less time coding VML and more time testing your email to ensure it’s truly bulletproof.

We’re always interested in hearing from our talented readers about the way you achieve your goals in email. How do you code your bulletproof email buttons or backgrounds? Do you have a snippet of code that you’d like to share with the world? Let us know in the comments below.

And as always, make sure your email looks flawless before sending it out to your subscribers. Remember: a broken email is an unengaged email. With Email on Acid, you can preview your email in more than 70 email clients and devices before you hit “send.” Sign up for our free trial, and start testing today.