Creating Bulletproof Email Buttons

May 1, 2012
CSS HTML
By

Regardless of the social media networks that are popular at the time, email marketing will always be the number one way for a company or organization to connect with customers or clients. But, the average internet user has 2.3 email addresses and sends and receives an average of 112 emails a day.

So what does that mean?

That means your emails need to be clean, lean and quick to digest. With that in mind, I’m going to show you a great button replacement technique that will limit the number of images your email uses, and provide great calls to action regardless of whether images are downloaded.

Let’s Back Up and Talk About Images

By default, nearly every email client blocks images when a user opens an email. The only ones that don’t block images include Apple’s Mail and iOS Mail client. But a large majority of internet users use web based clients such as Gmail, Hotmail, Yahoo! Mail or AOL, or they use desktop clients such as Outlook (00, 03, 07, 10), Lotus Notes, or others. One of the most difficult aspects of coding HTML emails is the variance in support for basic HTML and CSS properties across a multitude of email clients.

As of February 24, 2012, Litmus shows that 43% of users use some version Outlook, while no other client even came close. Hotmail came in second at 17% followed by Yahoo! Mail (13%) and Gmail (8%). Apple products came in with a total of 8% split between iOS (4%) and Apple Mail (4%).

So if a large majority of your customers or clients are using email clients other than iOS (and let’s be honest – they are), you’ll need to make sure that you can provide a clear cut call to action regardless of whether or not the user chooses to download images.

That’s where our bulletproof buttons come in.

The concept behind bulletproof buttons in emails is to provide the user with a compelling, attractive and inticing call to action without the use of images. Granted, this might not be possible with your particular design, but I’d highly recommend looking into it if you can.

The Code

If you’ve done any work in HTML emails, you know that you should break out your old HTML book circa 2003 and brush up on your tables code. Tables are one of the most simplistic and structured code in the world, and with the unpredictability of HTML and CSS support (don’t even think about JavaScript) in email clients, tables are the way to go.

Another concept to keep in mind as we look at the code for our button is you won’t want to use padding and margin. Support varies widely and you’ll get a lot of funky looking results. Stick with nested tables. Just try and keep them straight – it can get complicated quickly.

Our bullet proof buttons are a nested table with one table row and one table cell. The CSS is declared inline for a lot of reasons, but mainly for web based browsers that strip out embedded styles, and I utilize some CSS3 effects that will render in some clients, but will degrade gracefully in other clients.

Take a look at the code, try and break it down, then we’ll go through each part.

<table>
  <tr>
    <td align="center" width="300" bgcolor="#cf142b" style="background: #cf142b; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; font-weight: bold; text-decoration: none; font-family: Helvetica, Arial, sans-serif; display: block;"><a href="" style="color: #fff; text-decoration: none;"></a></td>
  </tr>
</table>

Simple, right? Yeah, I know that is a lot of code in the <td> tag, but let’s break it down.

First off, you will most likely want the text of the button centered within the button, so we add the align=”center” to the <td> to kick things off. Next we add in a width for the <td> and a solid background color. This creates the appearance of a button, using the table cell as the box. Then we jump into our inline style tag and make some magic happen.

All styles for HTML emails should be done inline, so thus, you get a long, not very clean line of code there. But for the most part it’s self explanatory. I’ll clean it up and show you how it looks non-inline below:

background: #cf142b;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
display: block;

That makes it easier to read, right? So again, we declare a background color via CSS. This is a good practice to get into because some email clients won’t read the CSS background, and other clients won’t read the bgcolor=”” in the <td> tag.

Next, we add padding to the button. It is important here that you declare the padding individually, and not using the shorthand. Again, email clients are fairly rudimentary when reading CSS, so the best practice is to separate them out when styling them.

Moving on, I’ve added some CSS3 properties to create a nice rounded border look on the button. Border-radius will only come into play on a certain number of email clients, including iOS, Gmail, Yahoo! Mail, and Hotmail on Firefox, Safari, Chrome or Opera (basically, not Internet Explorer). But this doesn’t break the design of the email, unless your email absolutely must have a rounded button. For me, this is a perfect example of graceful degradation.

The rest of the CSS is pretty self explanatory, setting the color, font-weight, font-family and text-decoration.

How Do They Look?

Great question! Let’s take a look at the following screenshots from an email campaign I used this technique on for a work email. This was a sales email offering up tickets to a hockey game in Washington, D.C. during December. The screenshots are annotated, but shown are Outlook 2010 with images on and off, and Gmail in Firefox with images on and off. Take a look below.

Conclusion

Have you used bulletproof buttons in any of your HTML email campaigns? How have they worked for you? Let us know in the comments below.

Author: Alex Ball
Alex has been working in web design and development for over five years, and loves learning and expanding his skill set. A fan of CSS3 and HTML5, he also enjoys going old school with HTML (table) Emails.
  • http://liftmyvoice.bitofgrace.com bitofgrace

    Screenshots missing?

    • http://twitter.com/AlexBall12 Alex Ball

      Yes, not sure why they didn’t come through when the article published. I’m working on getting them included as soon as possible!

      • zeroxp

        now we need a bulletproof screenshot

    • http://twitter.com/AlexBall12 Alex Ball

      Screenshots are up now everyone!!

  • Philsbury

    Just use an image for buttons, it’ll save time, code and rendering headaches when CSS isn’t supported properly – I’m looking at you, Outlook!

    • http://twitter.com/AlexBall12 Alex Ball

      That causes the image rendering problem though. When email clients (such as Outlook, as well as Gmail, Hotmail, and Yahoo! and more) block images by default, you lose the button UNLESS the user downloads the images.

      Why would you want to put it in the users hands to decide whether or not to get the call to action?

  • http://twitter.com/AlexBall12 Alex Ball

    Great point – I’ll add that to my code when using that in real world use. Thanks!

  • http://twitter.com/toasterdroid Jedediah White

    I often make buttons when creating a newsletter. I just style the link such as Call to Action Something like that makes a simple enough button, but makes for a nice break from just text blocks.

  • http://twitter.com/AlexBall12 Alex Ball

    That’s very true. The intent behind my concept (actually, I certainly can’t say it’s my concept, it’s widely used) but to gracefully degrade in non-supporting email clients.

    As far as usage, as of June 2011, Lotus Notes has 0.2% market share, while Outlook 2007 and 2010 are less than 10% combined. 07 and 10 are the only Outlook products to render with Word (rest use IE, which isn’t much better), but for about 70% of email clients, we’ll see CSS3 support in all of them, depending on the browser used to read the email (for web based emails).

  • http://www.fromdev.com Sachin

    How funny that average email user has 2.3 email addresses :) … I suspect gmail, aol n yahoo combo ? Means you are never sure if the users is actually reading our emails or not. Anyways … thanks for the nice post.

  • http://www.socialdon.com/ Fanpage Monitoring

    Ajay u did literally nice work!

    • http://tutiez.com/enum-in-java-with-java-enum-examples.html pranav

      Alex and Ajay very nice work..

  • Luis Guzman

    I’ve just implemented it, and it works fine. Thank you very much for the tip

  • http://encosion.com/ Tim Ferguson

    Your display:block tip doesn’t appear to be working for me. Am I doing something wrong? (I did a straight cut ‘n paste from your code)

  • http://encosion.com/ Tim Ferguson

    I’m using the following code at the moment. Unfortunately it’s not rendering CSS rounded corners / gradient in Gmail or Yahoo. Am I doing something wrong?


    Button text goes here

  • http://twitter.com/evolvedwebsites Yari from EvolvedWeb

    What about using a regular input button, styled with the same CSS? This would be easier than a table, and should also work across many email clients as above.

    e.g.

    Has anyone tried this?

    • Davor

      if you have clients that draw in paint how email should looks…

  • http://www.uglyfashionmedia.com/ Eoin

    This button is not great for UX. How could I make the whole button clickable? Why haven’t you used font-size to create a consistent font size? Margin and padding have poor support don’t they?

  • http://www.uglyfashionmedia.com/ Eoin

    You should aim to make your HTML emails work on all clients, unless you specifically know that your target audience will never use these email clients. Always assume images are turned off, as well over 50% of the time they are. You can also use image replacement techniques to draw images as tables with 1x1px cells, but they are a lot larger in file size than the images. Images off = low click through rate. Design your email to look good when basic, then add images as necessary.

  • Thomas Grimes

    Any tips for Outlook 2003? This method is working PERFECTLY in Outlook 07, 10, 11, and 13 for me. I am using white text on an orange button, all against a white background. The orange background color of the button doesn’t show up in Outlook 2003, so the white text of the link is getting lost.

    I did try setting the orange background color on the button’s table tag, but that just results in all of the other clients having sharp corners as opposed to the 4px radius I have set on the containing cell.

    • Ben Walters

      Set the background on the td instead of the table

  • kevinjgallagher

    how to get it so the link the same colour and without the underline?

  • Joana

    In Outlook 2010, the link disappears to me… anyone experiencing the same thing?

  • Joana

    Why you keep erasing my questions??? if you dont want guests, dont give permissions to write… wtf