Contact Us
Visual 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.
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
|
Images Off
|
||
Code<table cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#c61210" background="http://masstransmit.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
|
Images Off
|
||
Code<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://masstransmit.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
|
Images Off
|
||
Code<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://masstransmit.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: bulletproof button, design, development, examples, html, images off, programming
BROADCAST online marketing
Pingback: You should marry me…now! What to tweak and test in your call to action