Concevoir des Call to Action dans un email

Dis, tu sais que Badsender propose des audits de stratégie emailing ? Y a de quoi s’la prendre et s’la mordre comme qui dirait. Lorsqu’on procède à ce type de presta, on a l’habitude de s’appuyer sur un tableau Excel regroupant des critères et bonnes pratiques à respecter. Ça fait office de référence de notation en quelque sorte. Dans ce doc, nous jugeons (entre autres choses) la manière dont les Call to Action sont conçus dans un email. 🧐

Mais, au fait, qu’est-ce qu’un Call to Action ?

Le call to action est une formulation incitant le contact publicitaire ou le destinataire d’un document de marketing direct à entreprendre plus ou moins immédiatement une action recherchée par l’annonceur.

definitions-marketing.com

Les Call to Action sont donc une incitation à l’action, au clic plus particulièrement dans l’email. Un Call to Action peut prendre de multiples formes, mais nous traiterons dans cet article particulièrement des “boutons” 🔴. Ils sont sans aucun doute un des éléments majeurs dans le contenu de l’emailing : Ils génèrent du trafic sur ton site, de la vente sur tes produits, et tu es normalement en mesure de quantifier le taux de clics sur ce type d’élément…

Exemple de Call to Action de type “Bouton” dans un emailing.

Pourquoi diable est-ce si important de juger cet élément ?

Parce qu’il s’agit du principal outil marketing utilisé pour obtenir la conversion d’un destinataire. Fin de l’histoire. Rentre chez ti. Et, une fois que l’on a cet objectif en tête, on ne peut ignorer certains critères clefs participant à la force, à la puissance de cet élément :

  • Son accessibilité (Le contraste entre la couleur de fond du bouton et la couleur du texte est-il suffisant ? La typographie utilisée est-elle lisible ? Si j’utilise une image de fond, et que mon image de fond ne s’affiche pas, le texte sera-t-il toujours lisible ? Si je conçois mon bouton en image, et que les images ne sont pas téléchargées, que se passe-t-il ?)
  • Sa taille et donc la zone de clic : le bouton est-il facilement cliquable ? Puis-je le rendre entièrement cliquable ? Est-il aussi facile de cliquer dessus avec une souris que de “tapoter” dessus avec mon doigt sur la version mobile ?
  • Sa lisibilité sur version mobile : Est-ce que je ne devrai pas agrandir la taille du texte sur la version responsive pour optimiser la compréhension du bouton sur des supports nomades ?
  • Son apparence : 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 ?

Donc, que faire…

Tu as plusieurs possibilités.

1. La première : concevoir ses boutons en image

J’te l’dis de suite, on va pas être copain. Concevoir des boutons en image dans un emailing permet bien sûr d’obtenir tous les effets souhaités en terme de mise en forme graphique : coins arrondis, ombre portées, et caetera… Mais en procédant de la sorte, tu oublies le fait (ou tu l’occultes, tout dépend de ta mentalité) que les images ne seront pas toujours téléchargées sur le logiciel de messagerie de ton destinataire. Pire encore, tu penses que tu es à l’abri d’un problème de serveur, et que les images seront toujours restituées. Ou bien, tu penses que tes chemins d’images hébergées sont infaillibles, et tu as tort.

J’espère en tout cas que tu as prévu un texte alternatif en béton, et une mise en forme graphique de ton texte alternatif, sinon “Eh ben bien joué hein…”. Dans tous les cas, je me positionne en tant que fervent assaillant de cette méthode.

Je ne vais pas vous refaire l’exemple de ce que donne une image qui n’est pas affichée dans la boîte de réception, j’ai déjà évoqué le sujet dans un article récemment sur la dissociation des éléments dans le design emailing. Cependant, je vais insister un peu plus sur la façon de concevoir un bouton en HTML et CSS, tout en lui proposant un certain style. On passe donc à…

2. La seconde possibilité : concevoir ses boutons en HTML et CSS

Là, on va s’entendre. C’est sans aucun doute la meilleure solution à adopter. Pourquoi ?

  • Parce que lorsque les images ne sont pas téléchargées ou affichées, qu’il existe un problème dans les chemins de tes images, ou que le serveur d’hébergement des images est out, ton bouton, lui, va tout de même s’afficher. Rien que pour ça hein, ça vaut le coup.
  • Parce que via les media queries tu peux facilement changer la largeur et/ou la hauteur de ton bouton, et donc améliorer l’ergonomie et la puissance de ton bouton en proposant une zone de clic plus confortable.
  • Parce que tu peux agrandir aisément la taille de ton texte et donc, le rendre plus lisible sur les supports nomades. Et ce, toujours grâce aux media queries. Si c’est pas merveilleux.
  • Parce que tu peux apporter ainsi des animations au survol, au clic et ça, ça claque (Viens pas me dire que ça ne sera pas supporté partout, ça ne m’intéresse pas).
  • Parce que du coup, pas besoin de prévoir une p*tain d’image de ton bouton pour la version Desktop, et une autre pour la version mobile, et donc, pas besoin de renseigner deux fois le lien du bouton. Pas de texte alternatif à ajouter, ni de mise en forme graphique pour ce texte alternatif. Fête du sliiiiiiiip !

Alors ok, ça demande un peu plus de boulot en terme de code, mais bon, finalement, c’est ça qu’on aime non ? On va donc tout d’abord envisager un bouton plutôt simple. Bah tiens, reprenons celui présenté un peu plus haut dans cet article.

Bouton avec marges internes

Si l’on souhaite coder ce bouton en HTML et en CSS, nous allons insérer un tableau <table> avec une largeur fixe (ou pas) centré au sein d’une cellule <td> (ou pas, tout dépend du rendu final). Dans ce tableau, il y aura (comme le veut la logique) une ligne <tr>, à l’intérieure de laquelle nous aurons une cellule <td>. Et sur cette cellule, nous pouvons appliquer une couleur de fond noir, avec des border-radius:5px par exemple. Et il ne nous reste plus qu’à insérer dans la cellule le texte dans un paragraphe <p>, et ce texte sera compris dans un lien <a>. Dis comme ça, ça semble flou, mais voici le code final :

J’vous passe les tests d’email preview, tout est ok partout (bon les coins arrondis ne s’affichent pas partout, en particulier sur Outlook, mais c’est pas très très grave…). C’est sans doute une des méthodes qui a le meilleur support. L’avantage, c’est qu’il n’y a pas besoin de renseigner une largeur ou une hauteur, puisque tout est géré avec les marges internes : ça laisse une grande liberté sur le contenu, et le bouton s’adapter automatiquement à son contenu. Par contre, dans ce cas de figure, seul le texte est cliquable, et pas le bouton dans son entièreté. Ça peut s’avérer gênant… Mais il existe des solutions !

Bouton avec bordures

C’est une méthode développée par Litmus que je trouve relativement intéressante, même si malheureusement, elle souffre d’un rendu dégradé sur Outlook : en gros, le système consiste à prévoir les marges autour du texte comme des bordures conçues directement sur la balise <a>. Cette même balise sera conçue comme un élément en display:inline-block. Mais bon, Outlook réduit la dimension des bordures, donc bon… Voici le code pour cette méthode :

See the Pen Bouton HTML CSS email bordures by DEFOSSEZ (@Badsender) on CodePen.

Bouton avec marges internes + bordures

Hé ben tout simplement, si les deux méthodes ont leurs avantages, alors on va les compiler. Encore une fois, sur le support, c’est pas ce qui se fait de mieux, mais ça marche pas mal quand même. Voici donc le code adapté à cette méthode :

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

Comme le support des marges internes à gauche et à droite n’est pas forcément optimal sur Outlook, Litmus recommande de mettre en place un petit hack avec des commentaires conditionnels pour Outlook pour insérer des espaces insécables à gauche et à droite du texte… Mouairf…

Et si on veut absolument avoir le bouton entièrement cliquable et garantir les coins arrondis : Il y a le VML.

Je vais pas rentrer dans le détail, je pige pas tout à ce système et j’en suis pas fan à 100%. Je vais t’expliquer pourquoi :

  • Cette solution ne permet pas d’avoir un texte qui peut évoluer, puisqu’il faut renseigner une largeur et une hauteur fixe au bouton.
  • Oublie aussi la possibilité d’avoir un bouton avec deux lignes de texte par exemple (même si c’est assez rare).
  • Un code VML ne peut être imbriqué dans un autre code VML ; donc, si tu gères un encart avec une image de fond via du VML, tu ne pourras pas avoir un bouton en VML à l’intérieur de ce même encart… CQFD.

Par contre, le gros avantage du VML, c’est de pouvoir avoir une image de fond à l’intérieur du bouton. Ça, c’est intéressant. Si tu veux faire appel à du VML, tu peux directement passer par le générateur de boutons, développé par Campaign Monitor. N’oublie pas de ne pas mettre tes doigts dans la porte, tu risques de te faire pincer très fort renseigner un target=”_blank” dans le code VML.

Conclusion

Hé ben c’est pas les solutions qui manque hein ! A chaque pot son couvercle (rien à voir, fils unique). En tout cas, t’as maintenant des pistes pour ne plus concevoir ton bouton en image, et ça, c’est déjà une bonne chose. Maintenant, sache que tu peux aller un peu plus loin, et t’éclater à prévoir des effets sur ces boutons en HTML et CSS (ce que tu ne pouvais pas forcément faire quand c’était une image). J’vais te donner un exemple de ce que ça peut donner au survol :

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

Voilà ! Pareil, viens pas me parler de support, c’est pas l’idée : on est là pour S’A-MU-SER ! 😜 🥳 🥴 🤢 Trop d’effets tue l’effet l’ami, à utiliser avec modération… T’as des méthodes particulières toi pour coder un bouton en HTML ? Comment tu fais ? Dis-moi tout, je suis curieux-curieux…

Contactez l'auteur de l'article

Responses

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Newsletter

On a déjà beaucoup d’inscrits à notre newsletter… Et peut-être que vous serez le prochain ? L’occasion de se tenir informé sur toute l’actualité de l’email marketing !
Inscrivez-vous maintenant !