badsender logo

Designing Calls to Action in an email

14/02/2020

Article updated on 20/06/2022

Do you know that Badsender offers emailing strategy audits ? It's enough to get caught up in it and bite it, as it were. When we proceed to this type of service, we are used to rely on an Excel table with criteria and good practices to respect. It acts as a sort of reference for scoring. In this doc, we judge (among other things) how Call to Actions are designed in an email.

But, by the way, what is a Call to Action?

The call to action is a formulation inciting the advertising contact or the recipient of a direct marketing document to undertake more or less immediately an action sought by the advertiser.

definitions-marketing.com

Calls to Action are therefore an incentive to action, to click, especially in email. A Call to Action can take many forms, but in this article we'll deal specifically with "buttons". They are undoubtedly one of the major elements in the content of the emailing: They generate traffic on your site, sales on your products, and you are normally able to quantify the click rate on this type of element...

Example of a "Button" type Call to Action in an emailing.

Why on earth is it so important to judge this element?

Because it is the main marketing tool used to get a recipient to convert. End of story. Go home. And, once you have this objective in mind, you cannot ignore certain key criteria that contribute to the strength and power of this element:

  • Its accessibility (Is the contrast between the background color of the button and the text color sufficient? Is the typography used legible? If I use a background image, and my background image doesn't show up, will the text still be readable? If I design my button as an image, and the images are not uploaded, what happens?)
  • Its size and therefore the click area Is the button easily clickable? Can I make it fully clickable? Is it as easy to click with a mouse as it is to "tap" on it with my finger on the mobile version?
  • Its readability on mobile version: Shouldn't I enlarge the text size on the responsive version to optimize the understanding of the button on mobile devices?
  • Its appearance : Nos habitudes sur le web nous enclavent parfois dans des « a priori » de styles ou de mises en forme. Un bouton sera généralement pensé avec des coins arrondis, parfois une ombre portée, un effet au survol ou au clic, avec un pictogramme en plus du texte… Puis-je, ou dois-je garantir ces mises en forme graphique lors de la conception d’un bouton ?

So, what to do...

You have several options.

1. The first one: design your buttons with images

I'm telling you right now, we're not going to be friends. Designing image buttons in an emailing allows you to obtain all the desired effects in terms of graphic layout: rounded corners, drop shadows, and so on... But by doing so, you forget the fact that (or you hide it, it depends on your mentality) that images will not always be downloaded on your recipient's email program. Worse, you think you're safe from a server problem, and that the images will always be returned. Or you think your hosted image paths are foolproof, and you're wrong.

I hope that you have planned a concrete alternative text, and a graphic layout of your alternative text, otherwise "Well done eh...". In any case, I position myself as a fervent supporter of this method.

I won't repeat the example of what happens when an image is not displayed in the inbox, I already mentioned this in a recent article on the dissociation of elements in the emailing design. However, I'm going to focus a bit more on how to design a button in HTML and CSS, while giving it some style. So we go to...

2. The second possibility: design your buttons in HTML and CSS

Now we'll get along. This is without a doubt the best solution to adopt. Why?

  • Because when the images are not downloaded or displayed, there is a problem in the paths of your images, or the server hosting the images is out, your button will still be displayed. For that alone, it's worth it.
  • Because via media queries you can easily change the width and/or height of your button, and thus improve the ergonomics and power of your button by offering a more comfortable click zone.
  • Because you can easily enlarge the size of your text and therefore, make it more readable on mobile devices. And this, always thanks to media queries. Isn't that wonderful?
  • Because you can bring animations to the hover, to the click and that, that's great (Don't tell me that it won't be supported everywhere, I'm not interested).
  • Because then, you don't need to add a fucking image of your button for the desktop version, and another one for the mobile version, and therefore, you don't need to fill in the button link twice. No alternative text to add, and no graphic formatting for this alternative text. Sliiiiiiiip party!

So ok, it requires a bit more work in terms of code, but hey, that's what we like, right? So first of all we'll consider a rather simple button. Let's take the one presented earlier in this article.

Button with internal margins

If we want to code this button in HTML and CSS, we will insert a table <table> with a fixed width (or not) centered within a cell <td> (or not, it all depends on the final result). In this table, there will be (as logic would have it) a line <tr>inside which we will have a cell <td>. And on this cell, we can apply a black background color, with border-radius:5px for example. And now we just have to insert the text in a paragraph in the cell <p>and this text will be included in a link <a>. When you say it like that, it sounds fuzzy, but here is the final code:

I skip the email preview tests, everything is ok everywhere (well the rounded corners are not displayed everywhere, especially on Outlook, but it's not very serious...). This is probably one of the methods that has the best support. The advantage is that there is no need to specify a width or a height, since everything is managed with the internal margins: this leaves a lot of freedom on the content, and the button automatically adapts to its content. However, in this case, only the text is clickable, and not the whole button. This can be annoying... But there are solutions!

Button with borders

It is a method developed by Litmus that I find relatively interesting, even if unfortunately, it suffers from a degraded rendering on Outlook tag: basically, the system consists in providing margins around the text as borders designed directly on the <a>. This same tag will be designed as a display:inline-block element. But then, Outlook reduces the size of the borders, so here is the code for this method:

See the Pen Button HTML CSS email borders by DEFOSSEZ (@Badsender) on CodePen.

Button with internal margins + borders

Well, simply put, if both methods have their advantages, then we'll compile them. Again, on the support, it's not the best, but it works quite well anyway. So here is the code adapted to this method:

See the Pen ZEGQopa by DEFOSSEZ (@Badsender) on CodePen.

As the support of the internal margins on the left and on the right is not necessarily optimal on Outlook, Litmus recommends to set up a small hack with conditional comments for Outlook to insert unbreakable spaces on the left and on the right of the text... Mouairf...

And if you absolutely want to have the button fully clickable and guarantee the rounded corners: There is the VML.

I won't go into detail, I don't understand this system at all and I'm not a fan of 100%. I'll tell you why:

  • This solution does not allow to have a text that can evolvesince the button must be given a fixed width and height.
  • Forget also the possibility to have a button with two lines of text for example (even if it is quite rare).
  • A VML code cannot be nested in another VML code so, if you manage an insert with a background image via VML, you won't be able to have a VML button inside this same insert... CQFD.

On the other hand, the big advantage of the VML is to have a background image inside the button. That's interesting. If you want to use VML, you can go directly to the button generator, developed by Campaign Monitor. Don't forget to don't put your fingers in the door, you risk getting pinched very hard fill in a target="_blank " in the VML code.

Conclusion

Well, there's no shortage of solutions! For each pot its lid (nothing to see, only son). In any case, you now have some ideas to stop designing your button in images, and that's already a good thing. Now, you can go a little further, and have fun planning effects on these buttons in HTML and CSS (which you couldn't necessarily do when it was an image). I'll give you an example of what it can look like on the fly:

See the Pen QWbyrOv by DEFOSSEZ (@Badsender) on CodePen.

Et pour le mobile alors, on ne fait rien ?

Bah si justement, on fait quelque chose ! Autant il est difficile de rendre un bouton entièrement cliquable sur Bureau parce que la propriété CSS display with the value block is not supported everywhere (mainly Outlook), autant sur mobile, le logiciel Outlook n’est pas vraiment la priorité ! On peut donc tout à fait passer notre lien <a> en comportement bloc et pourquoi pas, lui attribuer, à ce lien, des marges internes verticales et horizontales, pour rendre tout le bouton cliquable !

<style type="text/css">
.hover01:hover {
  background-color:#000000 !important;
  transition:all 1s ease;
  box-shadow:0px 5px 0px #202021 !important;
}
@media only screen and (max-width:600px) {
.displayblock {display:block !important;}
.paddingt0px {padding-top:0px !important;}
.paddingb0px {padding-bottom:0px !important;}
.paddingt15px {padding-top:15px !important;}
.paddingb15px {padding-bottom:15px !important;}
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><table border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;" align="center" role="presentation">
        <tr>
          <td class="hover01" bgcolor="#202021" style="border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:15px 40px; background-color:#202021; background:#202021;"><p style="padding:0px; margin:0px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:12px; text-align:center; color:#FFFFFF; letter-spacing:4px; mso-line-height-rule:exactly; line-height:16px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="displayblock width100pc paddingt15px paddingb15px">DISCOVER</a></p></td>
        </tr>
      </table></td>
  </tr>
</table>

That's it! Same thing, don't talk to me about support, that's not the idea : we're here to S'A-MU-SER ! Too much effect kills the effect, my friend, use it with moderation... Do you have any particular method to code a button in HTML ? How do you do it ? Tell me everything, I'm curious...

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

Leave a Reply

Your email address will not be published.