How to make bulletproof buttons and backgrounds

How to Make Your Emails Bulletproof


If you’ve been in the email development field for a while, you might have heard the word “bulletproof” thrown around. Developers often use the term in conjunction with an email element, such as a bulletproof button.

But what makes an email element bulletproof? And how do you code a bulletproof element?

What Does ‘Bulletproof’ Mean?

As we’ve tested emails over the years, we’ve learned that there is a weird and wonderful world of email client quirks. These quirks 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 word 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 rounded border that shows on more modern clients will drop off in Windows Outlook clients. It’s a minor aesthetic change, but it won’t change the functionality of the button.

Bulletproof Buttons

What Is a Bulletproof Button?

When email developers refer to bulletproof buttons, they’re often talking about a button that doesn’t rely on images to display. Instead, it uses live text to display the call-to-action. When you create a bulletproof button, you use HTML and CSS to ensure the button’s core content will work on every email client.

How Do I Create a Bulletproof Button?

Coding bulletproof buttons takes more time investment than simply using images, but the results are well worth it. With this code, you can ensure your button will show up for every email subscriber.

Below you’ll see an example of how the bulletproof button looks and the code for a bulletproof button.

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>

 

There are many ways to create bulletproof buttons. If you’re not ready to start coding your own, our friends over at Campaign Monitor created a fantastic tool that allows you to generate bulletproof buttons with a few clicks.

Why Should I Use Bulletproof Buttons?

Bulletproof buttons are always preferable to image buttons.

All-image buttons don’t work as well because when the content is in an image, a screen reader is forced to read the alt text. Image buttons also don’t work when the user or email client blocks 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.

Bulletproof Backgrounds

Why Should I Use a Bulletproof Background?

Bulletproof backgrounds are better than simply using images for your email backgrounds. One benefit to bulletproof background images is that you can use live text over them. This means that when the email client does not support images, the email still works and your subscribers can still read your text. With a bulletproof background code, the image will fall back to a solid color if the subscriber or email client blocks image.

How Do I Create a Bulletproof Background?

Bulletproof backgrounds are coded using a combination of traditional background image methods combined with some Vector Markup Language (VML) work.

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

Bulletproof background example

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

Bulletproof background with images blocked

Below is the code we used to create this. You’ll notice we’ve included a line for you to add the hex code for your fallback color in case the subscriber or 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 this other fantastic Campaign Monitor tool 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.

How Do You Handle 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 buttons? Do you have a snippet of code that you’d like to share with the world? Let us know in the comments or on Facebook or Twitter.

Test your email first!

Make sure your email looks flawless before you send 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.

Sign up today!

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies