Intégration email : Un bouton entièrement cliquable (même le “fond”), full HTML et avec deux lignes de texte centré

Vous désirez, au sein de votre campagne mail, insérer un Call to Action en HTML brut ? Belle initiative ! Cela permettra à votre bouton de s’afficher plus rapidement, et ce même si les images sont désactivées, et améliorera donc probablement votre taux de clics !

cta-cliquable-deux-lignes

Mais comment rendre le bouton entièrement cliquable (et pas uniquement le texte) ?

De plus, votre Call to Action comporte deux lignes de textes (voir plus), et quelques webmails récalcitrants refusent toujours de centrer verticalement ce texte au sein du bouton…

Voici notre solution, testée et validée sur l’ensemble des webmails* ! (exceptés Lotus Notes 6.5, Lotus Notes 7 et Lotus Notes 8. Autrement dit, une broutille). Retenez que notre solution ne fonctionne pas correctement sans Doctype renseigné sur les webmails suivants : Live Mail et Outlook 2003.

1. Tout d’abord, assurez-vous que la cellule (<td>) comprenant votre Appel à l’Action a bien une hauteur fixe. Ajoutez-lui l’attribut html valign=”middle”. Puis précisez dans l’attribut style de la cellule l’interlignage de votre texte (Par exemple : Pour une font-size de 13px, spécifiez un line-height de 16px, précédé d’un « mso-line-height-rule:exactly; » pour garantir un interlignage identique sur Outlook)

2. Vient ensuite votre lien en question (<a href=”#”>) : Spécifiez, dans l’attribut style du lien, qu’il doit se comporter comme une cellule de tableau (soit : style=”display :table-cell;”). Indiquez la hauteur du bouton (soit la hauteur de la cellule), sa largeur (soit la largeur de la cellule), et finissez ce travail avec un « vertical-align:middle; » toujours au sein de l’attribut style.

3. Testez. Nous sommes d’accord ? Si tout se passe bien, vous devez obtenir le même résultat que le Call to Action présenté sur cet email preview.

Exemple de code :

...
  
    
Test : Lien (<a href="">)
& attribut Line-height
...

Remarque : C’est une curiosité qui mérite qu’on en parle ; Terra, FAI aux Etats-Unis, Espagne et dans 16 autres pays d’Amérique Latine, ajoute non seulement un « target=”_blank” à tout code lien que vous pourriez mettre en présentation (comme dans cet exemple), mais garde la mise en forme de votre code HTML pour l’affichage. Concrètement, si votre éditeur HTML propose une indentation de votre code, Terra la retranscrira de la même façon. Cela explique donc de nombreuses interrogations que vous pourriez peut-être avoir quant aux emails rendering étranges sur ce webmail !

* Test effectué sur des documents XHTML au Doctype 1.0 Transitionnal, HTML au Doctype 4.01 Transitionnal, XHTML au Doctype 1.0 Strict, HTML au Doctype 4.01 Strict, HTML5, et sans Doctype

 

Related Articles

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 !