Bulletproof Buttons and Bulletproof Backgrounds for Email

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

Bulletproof: Not just for coffee and flak jackets If you've been in email development for a while, you've probably heard the term “bulletproof.” Developers often use the term in connection with an email element, such as a “bulletproof button” or a “bulletproof background.”

But what makes an email element completely secure? And how do you encode one? And most importantly, why is it important for your email marketing campaigns?

In this article, we'll first define what “bulletproof” means in email design, explain some things to consider, and then move on to how to create a bulletproof button and background.

What does “bulletproof” mean?

In testing email over the years, we've learned that email clients are full of quirks and exceptions. For example, the same HTML and CSS elements may not appear in Microsoft Outlook, but appear as intended in Gmail. And don't even get me started on media query support. These are the “cues” we protect our email elements from.

A bulletproof email element maintains its functionality on any email client, regardless of the client's HTML and CSS support. Developers also use the term for email elements that do not rely on image support for rendering.

It should be noted that Bulletproof elements may look different visually depending on the client, but the functionality of the element remains Bulletproof. For example, a button with rounded corners will display correctly on more modern clients, but will be unrounded in Outlook clients. Despite this slight aesthetic change, the functionality of the button remains essentially the same.

What is a bulletproof button?

Bulletproof buttons do not rely on images to convey their message. Instead Use live text to display the call to action (CTA).. When you create a bulletproof button, you use HTML and CSS to ensure that the core content of the button works on every email client.

Why should I use bulletproof buttons?

Bulletproof buttons are always preferable to image buttons. Check out some examples where image-only buttons can't keep up:

• Screen readers are forced to Alt text when the CTA is in an image. Therefore, buttons that only contain images don't work as well and aren't accessible.
• Some email clients or users block images in an email. This means that the call to action (CTA) may not be immediately apparent to the reader, which can lead to lower click-through rates (CTR) and a potential loss of email ROI.

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

• Displays correctly even if email clients do not support images or the user has disabled images. Since a bulletproof button is made of only HTML and CSS, it will appear no matter what. Don't make it difficult for your users to click through to your content.
• Are easy to edit. Instead of creating buttons in an email design tool like Photoshop, uploading them to a server, and then updating your HTML, you can simplify your workflow to one step. All you need to do is edit your HTML email template to change the content or style of your button.
• Give screen readers a script to read aloud. Keep your email marketing campaign accessible by specifying exactly the text you want a screen reader to read. Don't rely on undefined alt text to express what you want to say.

What tips should I keep in mind when making bulletproof buttons?

Before we get into coding a bulletproof button, there are a few things you should keep in mind:

How big should a button be in an email?

Since many of your users are likely to be on mobile devices, a good rule of thumb is to use a font size of 16 pixels. Remember, bigger is not always better. While you want your button to stand out, you don't want to distract your user from the rest of your content. Check out the International Women's Media Foundation (IWMF) email below. Their CTA button is neither too big nor too small: it balances out the headline and is the right size to grab the reader's attention.

Does your bulletproof button match your brand?

Even though bulletproof buttons are usually just text on a colored background, you can still make sure they match your brand image. Check out ModCloth's email campaign below. Their goldenrod button with dark brown text mirrors the same fall colors in ModCloth's email. Although their button is simple, ModCloth has created a consistent, 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 in the middle of the emails, rather than full width, as 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 very well as the conclusion of your email, as shown below.

Now that we have these design considerations cleared up, we can start coding!

How do I create a bulletproof button?

In this section, you will learn how to create a bulletproof button using HTML and CSS.

Here is a picture of what we want to create:

We use the following code to create this bulletproof button:

<Table Width=”100%” Border=”0″ Cell Spacing=”0″ Cell Padding=”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 hereA>td> tr> Table> td> tr> Table>

Paste the above code into your HTML email template to get started. You can experiment with font weight, font size, and color until you create a branded, visually appealing button.

If you're not ready to code yourself, you can try some of these amazing tools that help you create bulletproof buttons in just a few clicks. For more resources, check out our code-based bulletproof button or our HTML code for bulletproof buttons in Office 365.

What is a bulletproof background?

Bulletproof email background images are HTML/CSS backgrounds that use a combination of a traditional background image and some Vector Markup Language (VML) to create backgrounds that display correctly regardless of your subscriber's email client. While it's technically possible to display traditional background images in any email client with a workaround, it's a bit difficult to program these techniques into email newsletters.

Here's an example of how Email on Acid uses bulletproof backgrounds to add some extra pizzazz to the newsletter above:

And this is what the newsletter would look like if the email client blocked the images – not so bad, right?

Why should I use a bulletproof background?

Bulletproof backgrounds are better than using images as email backgrounds. Some benefits include:

• Images increase engagement. Use a background image or background color to make your emails interesting and capture users' attention.
• Pictures make your emails unforgettable. Stand out from a crowded inbox with engaging content that will stick in your subscribers' minds.
• Make sure you provide high-quality content. Stay in control of 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 appear in a solid color of your choice.

How do I create a bulletproof background?

Without further ado, let's get started! In this tutorial, we will create the bulletproof Email on Acid background from above.

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

VML can be tricky to get right, so we recommend using these other fantastic bulletproof background tools. This tool lets you enter your image and specify where to place it in the email, and it will then generate your background code for you. With this handy tool, you'll spend less time coding VML and more time testing your email to make sure it's truly bulletproof.

How do you deal with bulletproof buttons and backgrounds?

We're always interested to hear from our talented readers about how you achieve your goals with email. How do you code your bulletproof email buttons or backgrounds? Do you have a code snippet 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 to your subscribers. Remember: a broken email is an email with no interaction. Email on Acid lets you 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.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet us at @EmailonAcid on Twitter for more interesting stuff and great conversations about email marketing.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps