Enfin un bouton pour vos emails sur mobile!

La semaine dernière, je suis tombé sur une super news qui est pourtant passée inaperçue.

Cette news concerne les boutons dans les emails, aussi appelés CTA signifiant « call to action ». En effet, le but de ces boutons étant de stimuler le clique donc une action de notre lecteur. Ces boutons marchent beaucoup mieux pour stimuler l’action qu’un simple lien hypertexte.

CTA

J’ai déjà parlé de l’impact des CTA sur vos emails.

Pendant des années, lorsque l’on voulait mettre un bouton dans un email on avait 2 choix:

– soit on mettait une image du bouton. Cela garantissait un rendu parfait sur l’ensemble des webmails/outlook/… Le problème est que les images ne sont pas affichées par défaut partout et surtout sur mobile on n’a pas toujours une connexion 3g pour récupérer les images. Bref, on se retrouvait avec un carré blanc en lieu et place de CTA. Du coup, peu de clique et avec l’ouverture de plus en plus importante des emails sur mobile, cela érodait le taux de clique…

– Soit on mettait du code HTML. Le plus gros point noir, seul le texte était cliquable. Oui vous avez bien lu, on avait un gros rectangle mais il n’y avait que le texte de cliquable. Donc il fallait impérativement mettre le texte le plus gros possible et laisser peu de marge sur les cotés.

Litmus et mailchimp avait publiés 2 façon différentes de faire des CTA  et campaign monitor avait même fait un outil pour nous aider. Et puis, un badsender a publié un article proposant une solution à ce vieux problème.

Un bouton HTML enfin cliquable sur l’ensemble de sa zone et compatible avec l’ensemble des webmails. L’astuce: utiliser une propriété de style display :table-cell sur le lien.

Voici le code HTML complet donné en exemple:

  <td align="center" bgcolor="#FFFFFF">
    <table width="280" border="0" cellspacing="0" cellpadding="0">      <tr>
        <td height="60" valign="middle" align="center" bgcolor="#f5a316" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; mso-line-height-rule:exactly; line-height:16px; font-weight:bold; border:1px solid #CA8209; border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; -webkit-border-radius:2px;">
          <a href="http://www.google.com" target="_blank" style="color:#FFFFFF; text-decoration:underline; display:table-cell; text-align:center; height:60px; width:600px; vertical-align:middle;">mon CTA cliquable </a>
        </td>
      </tr>
    </table>
  </td> 

ce qui donne un rendu:

mon CTA cliquable

Il ne reste plus qu’un petit problème: chaque webmail a des contraintes d’affichage et du coup, on a des rendus dégradés: les bords arrondis et les dégradés peuvent sautés. Mais bon on a quand même un rectangle entièrement cliquable !

Pour finir, un petit conseil, ce n’est pas parce que vous avez un CTA que ce doit être la seule partie cliquable dans votre email. Essayer au maximum de rendre l’ensemble de votre texte et image cliquable. Vous gagnerez quelques précieux cliques.

Publicités

Une réflexion au sujet de « Enfin un bouton pour vos emails sur mobile! »

  1. Ping : 5 astuces qui marchent pour votre stratégie de contenu | Marketing & Hacking

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s