Making Bulletproof Buttons 100% Clickable
We've obviously big fans of the bulletproof button at Litmus—you'll see them used in every email we send. This is typically the HTML we use:
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" style="padding: 25px 0 0 0;" class="padding2" colspan="2"> <table border="0" cellspacing="0" cellpadding="0" class="responsive-table"> <tr> <td bgcolor="#d75742" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="url" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Learn More →</a></td> </tr> </table> </td> </tr> </table>
A customer recently pointed out that only the text in our buttons was clickable, and suggested that we make the entire button clickable, including the colored background:
using a block link and defining a width and height on the td instead of all the padding, so the link fills the space
I was concerned that defining the height and width would make our buttons less scalable on mobile, unless we were to add a class to the td and include a query to adjust the height/width for small screens. After polling my fellow internal email geeks, this is what they had to say:
I used to wrap my button tables in <A> tags, which made the entire thing clickable, except, I think, in Outlook. The problem with it was that it throws off click tracking in some ESPs.
I'm not a massive fan of adding height/width due to some limitations in older clients. I've been considering using -moz/-webkit media queries to make the link an actual button in modern clients, and fall back to the live text version we do now for older clients.
Anyone else care to share their favorite "bulletproof" techniques?