Key Points✨
|
Have you heard of the analogy of email design shops? If your webpage is your store and your email is your store window, then you Call Action (CTA) Buttons are amazing window displays that attract people. Needless to say, your CTA is one of the most important parts of your email, and if it’s hard to find, difficult to use, or break in any way, your subscribers won’t click!
Don’t worry. We are here to help make sure your CTA buttons are bulletproof and can be seen by all customers regardless of the email client or view preferences.
In this blog post, we will dig deeper into how to make bulletproof buttons for your subscribers to improve the user experience and your experience Email activity performance.
Table of contents
What is a bulletproof button?
Bulletproof buttons are call buttons built with code rather than images. You can reliably swap GIF, PNG, and JPEG for HTML and CSS. By using only code, the button will appear in all email clients even if the image is turned off, making it “bulletproof”.
More importantly, you can update the content and style of the button by simply editing the HTML template. You no longer need to waste time in one Email Design Tools Like Photoshop, upload them to the server and update your HTML.
Do not use bulletproof button images
I’m going to say it once and never say it again. The only one real The bulletproof button is an image.
I know. But this is indeed the only way you can guarantee that the 100% email client guarantees the buttons look exactly the same. Because we all know how our emails are viewed inconsistently on different email clients, applications and devices.
despite this, You should never use image-based buttons. Image button is lost when the image is closed Image blockingthey are not Subscriber access Who uses the screen reader (more about it in one second).
If your CTA is included in the image, there is a good chance that the subscriber missed your message. Worse, they won’t interact with your campaign.
Using image-based CTA buttons also affects Accessibility Your email. If you hide the context of your CTA in your image, the screen reader may not be able to read them, leaving your email unable to access your vision-impaired subscribers.
Now that you know more about the image buttons, you should realize that my initial statement is only correct. Image-based buttons look the same in each email client Where to open the image and only subscribers do not use the screen reader. So are they actually bulletproof? no. Since neither of these above cases can be tracked using standard email tracking, you can’t know what proportion of experiences you have in your subscribers.
So, throw the image CTA away to ensure your subscribers can see and use the CTA, regardless of the device they are using.
What makes beautiful button design?
But, buttons are more than just code. There are several factors that make your button available and compelling.
Email Button Shape
Rule One: Make your button look like a button.
We all love making fun and unique buttons, but generally, if you’re too far from what you expect, subscribers miss the intention and don’t take action. Yes, these words may click, but as they say, “A picture is worth a thousand words.”
Use standard button shapes to ensure you get attention, especially when scanning. Standard shapes include:
- Round corners
- Square corner
- Pill-shaped
- Ghost Button
- Shadow button
This is not to say that you can’t do interesting things with buttons. Magic Spoon adds some fun Animated gifs Their buttons attract more attention.
Email button size
According to us, over 40% of subscribers open emails on mobile devices Email Participation Reportbuttons must be designed to work on all devices.
If your button is too small, it will be difficult to click on the mobile device. If it is too big, it doesn’t look like a button, but rather a design element.
The ideal size of the button that can be clicked easily has been translated into 42px and 72px (approximately 11-19mm). This seems to be the average level of button height seen around the network, and the buttons we use here on Litmus also fall within that range.
Email button space and fill
Make sure there is enough space around your buttons, too, so they stand out. This also makes it easier for your subscribers to click the correct button.
The best example is an email with multiple links. If you stack the links together, your subscribers will never click exactly what you want, especially on mobile devices.
Visual feedback
Not every email client supports it Interactive Emailbut where possible, adding some interactivity to provide visual feedback can help subscribers know that their interactions have been registered.
This is an extra sign that something can be clicked.
Depending on your preference, this can be simple, or more complex color changes or more complex. (We know that it’s fun to go all out sometimes, so don’t back down, but also know when to curb yourself.)
Our own standard buttons have color changes as well as button effects.
But we also tried something new and had a lot of fun with our January newsletter button. A great design element is also fun.
Email button text and font size
Keep your actual CTA copy or tag actionable and focus on. Tell subscribers what you want them to do as clearly and as clear as possible.
Usually, one to five words are enough.
This length also makes your email scanable. What if you have more to say? Include it in the title on the button. By keeping your CTA in one to five words regularly, this makes you really stand out in a more meaningful way.
Data-driven email success
Make smarter decisions with rich, reliable data. Understand subscriber behavior and improve your ROI.
5 ways to encode bulletproof CTA buttons
Finish 300,000 potential email renderingsit’s really amazing, can’t you make a universal button style that you can use everywhere?
What you can do is make an effective button almost everywhere. And there are several different ways to create these buttons according to your needs. Take a closer look at these to find out which one is most effective to support your subscribers.
1. Conditional padding buttons
because Mark Robins Lining button for this condition. This is the one we use at Litmus.
This button uses style on the link for everyone except for the appearance. It then uses the conditional code to add Outlook-specific padding and Border-Radius. Because Outlook fillers are individually controlled, you can edit Outlook fillers without affecting the appearance of buttons in other email clients.
