The Email “Bulletproof” Button Generator

June 17th, 2010 | By Jonathan Miller | 6 Comments

Bulletproof ButtonVisual inconsistency is the hobgoblin of email creation.

Despite the best efforts of email marketers, many variables affect the look of an email campaign. One of the biggest, default image handling, is based entirely on a reader’s email setup.

Some of the most used email clients, such as Gmail and all the Outlook variations, block images by default. Though this can be changed with a few mouse clicks, the majority of campaign subscribers stick to their email client’s stock set up to deal with images.

Besides being a minor annoyance for the reader, this development decision can wreak havoc on a brand’s ability to deliver consistent information by email.

Enter the bulletproof button.

Originated by the fine folks at Smith Harmon, the bulletproof button offers the best of both worlds. A brand can simultaneously ensure that a reader will see the most salient points of an email with images turned on or off.

The concept involves using tables for the HTML of the email and including both a background image and background color in the tag. The tag that holds the call-to-action (CTA) must be the same size as the image it houses.  With images enabled, the CTA is shown with an image as the background and the CTA as text. With images off, the end user sees a colored box instead of an image while the CTA looks the same.

We’ve prepared a number of examples and variations that you can use to maintain visual consistency. What’s even better is that we’ve provided all the code underneath the examples so feel free to copy it and use as you see fit.

We’ve also created a BULLETPROOF BUTTON GENERATOR for everyone to use. All you need to do is fill out the form and click submit. We’ll do the rest.

We hope you find the Bulletproof Button Generator helpful.  If you use it for any of your campaigns let us know (leave a comment below) and if you’re able to report your success metrics we’d love to hear its impact on your campaign.

For more information on the writing copy for buttons, check out Anthony Schneider’s Click Here article.

Bulletproof Button Examples

Feel free to borrow our button background images if you’d like, but please replace the absolute path of the image we’ve used with ones of your own.

Images On

Free Trial
Images Off

Free Trial
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#c61210" background="http://infocenter.emailtransmit.com/wp-content/uploads/2010/06/star.gif" height="135" width="135" style="color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle"><a href="" style="color:#ffffff; text-decoration:none;">Free Trial</a></td></tr></table>
Images On

Click Here
Images Off

Click Here
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://infocenter.emailtransmit.com/wp-content/uploads/2010/06/rectangle.gif" width="146" height="41" bgcolor="#c73f11" style="color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle"><a href="" style="color:#ffffff; text-decoration:none;">Click Here</a></td></tr></table>
Images On

Register
Images Off

Register
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://infocenter.emailtransmit.com/wp-content/uploads/2010/06/rounded.gif" bgcolor="#dda30e" style="color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle" height="55" width="175"><a href="" style="color:#000000; text-decoration:none;">Register</a></td></tr></table>

Tags: , , , , , ,

  • Steve R.

    Very interesting- great ideas. I didn't realize this was possible. I'll try this on my next email campaign.

  • Jeff

    The big problem here is that Outlook does not render background images.

  • Justin

    Correct, Outlook does not display background images but it does display background colors.

  • http://news.email-marketing-forum.com/general/you-should-marry-me%e2%80%a6now-what-to-tweak-and-test-in-your-call-to-action/ You should marry me…now! What to tweak and test in your call to action

    [...] The Email “Bulletproof” Button Generator [...]

  • Daniel

    outlook 2007 / 2010 bg image solution:
    http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

  • zac

    I can not get the image or color to render in Thunderbird 8.0.  Anyone else noticed that?


Email Transmit Info Center – Email Marketing Blog is proudly powered by WordPress | Entries (RSS) and Comments (RSS).