Silverpop | Engagement Marketing Solutions  -  From First Click to Lifetime Customer
Home   |   Support   |   Partners   |   News/Events   |   Contact   |   CLIENT LOGIN
English   |   Deutsch
Engagement Marketing Blog
Subscribe to this blog
Subscribe by Email
Subscribe by RSS Add this blog to your RSS reader
     
Home > Blogs > Engagement Marketing > The "Bulletproof" Button

« Silverpop Share-to-Social Study Establishes New Benchmarks | Main | Email: In Transition, Not Fading Away »

The "Bulletproof" Button

We all know that image blocking by ISPs and email clients can wreak havoc with your HTML emails and affect click-throughs and conversions.

This is particularly a critical issue with image-based call-to-action (CTA) buttons. But all hope is not lost.

In our recent Webinar, "Using Innovations in Email Creative to Drive Increased Engagement," Aaron Smith and Lisa Harmon of the email creative agency Smith-Harmon outlined a great technique that enables email marketers to use image-based buttons but still convey the CTA if images are blocked.

Here is Smith-Harmon's "bullet-proof" button approach:

This technique uses the BACKGROUND attribute in HTML to place a graphic beneath font or link tags. For optimum results, also using a background color (with the use of the BGCOLOR attribute) will ensure the area still shows up as a color block even without images enabled.

It also will render in Outlook 2007 when images are disabled, either by purpose or without changing the default images-off setting.

Aaron and Lisa said they've tested this technique many times against purely graphical buttons. The vast majority of results come out in favor of the bulletproof button technique.

Here's what the HTML code looks like. In this example, "View the Catalog" is the text block that will appear even when images are disabled:

<table cellpadding="0" cellspacing="0"> <tr>     
<td align="center" width="118" height="21" background="http://www.smith-harmon.com/downloads/btn.gif" bgcolor="#e1792e">        
<a href="" style="color: #ffffff; font-family: arial; font-size: 12px; text-decoration: none;">View the Catalog</a>
</td> </tr> </table>
View the Catalog

One final caveat: The width and height of the container object (in the example above, the TD tag around the link with "View the Catalog" text) should match the dimensions of the image being used.

Otherwise, if the container happens to be bigger, the background image will repeat in a tiled fashion (much like old Windows 3.1 wallpaper patterns).

If you or your email designers would like more tips and advice on creative innovations in email, download the hour-long recorded presentation and the slideshow.

|

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Whitepaper
Newsletter
Get exclusive news and best practices with our free e-newsletter.
Sign Up
Resources
More Resources
Check out Silverpop's Resource Center for the latest white papers, industry studies, case studies, and much more!

Resources