Buttons. You’ll see them in almost every email you open. They are one of the best ways to get people to interact with your email campaigns. However, unless you’re in the know with the latest techniques, not everyone may see your button the way you intended or even at all. That could very well make your call-to-action (CTA) effectively useless!
Here are a few guidelines on having nice looking buttons, no matter what email client or device they are viewed on. Follow these tips and you won’t have to worry about missing or ugly CTAs.
Avoid image buttons
You may be tempted to show off your Photoshop skills to design an elaborate looking image button. I’m sure it’s beautiful, but unfortunately there’s a good chance that a lot of people won’t see it. Many email clients block images by default, requiring the recipient to click to enable images. This affects email clients such as Lotus Notes, Outlook, AOL, and Yahoo. A lot of people will ignore that prompt and opt to read only the text of the email.
Additionally, some may even prefer to view emails with images disabled. A recent study by Litmus revealed that 43% of Gmail users read their email with images turned off. When you consider that a significant number of your audience won’t see images, it’s clear that image buttons are the wrong way to go.
Bulletproof buttons to the rescue
The best solution is to have pure HTML/CSS buttons. With the right techniques, your buttons will be bulletproof. You can even use more modern features like background images and rounded corners. Not all email clients support this, but those that don’t will gracefully degrade to a square button with a single colour.
Read on to the next section if you’d like more specifics on how it’s done…
The nitty gritty
The trick is to create a table with the width of your button. The table cell (<td>) should have the width, height, text alignment and bgcolor set. In addition, you can also set a background image here as well. Then, you’ll want to apply all of the same CSS styles as well, via both a class and inline styles, for redundancy. That includes width, background color, background image, as well as border-radius if you’d like rounded corners.
Inside your table cell is where your text goes, wrapped in an anchor tag (<a>). To the <a> tag, you must apply styles to the text inside your button. This would include font family, size, and color, again via both a class and inline styles.
Having your button and text styles set as attributes, classes and inline styles are necessary to cover all the bases for every email client.
In the image below, you can see how the same button looks in multiple email clients. Every client will render the button slightly different, but it still maintains most of the desired characteristics. For example, you’ll see that Outlook doesn’t support background images or rounded corners, yet the button looks just fine with squared off corners and a flat red color. Most importantly, the recipient can see the button and interact with it.
Using these techniques, you can be assured that everyone will see your CTA button as you intended, whether they have images enabled or not. Rest easy knowing that your message is being seen!
For more information on bulletproof buttons and how they can be incorporated into your emails, please get in touch at firstname.lastname@example.org