email => Boutons à l'épreuve des balles

Introduction

Les boutons peuvent être l’un des éléments les plus frustrants du développement du courrier électronique, mais ils peuvent être générés avec du code plutôt que des images et s’afficheront bien dans tous les principaux clients de messagerie. Lorsqu'il est intégré en HTML / CSS, un bouton s'affiche dans tous les clients de messagerie, même avec des images désactivées. Le contenu et le style de chaque bouton peuvent être rapidement modifiés dans un modèle HTML / CSS.

Remarques

Amélioration progressive avec les requêtes média

Pour les clients qui prennent en charge les requêtes multimédias, tous les exemples ci-dessus peuvent être progressivement améliorés.

Par exemple. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }

Ajouter plus de remplissage horizontal dans Outlook

L'ajout conditionnel d'espace insécable de chaque côté d'un lien de bouton peut augmenter le remplissage horizontal pour Outlook. Particulièrement utile pour les boutons basés sur la bordure.

`<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->Link Text<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->`

Bouton Boutons.cm

Campaign Monitor a créé un outil astucieux qui génère du code pour les boutons dans les e-mails HTML. Il utilise une combinaison de CSS et de VML (pour Microsoft Outlook) pour afficher des images de fond ou des modèles dans la plupart des principaux clients de messagerie.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
    <v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
  </v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>

Affichera quelque chose comme ceci:

Remarque : l'hyperlien cliquable dans Outlook se VML dans une balise VML , certains fournisseurs de services de messagerie ont du mal à suivre les clics sur ce lien.

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">

Boutons à base de rembourrage

Cette technique repose sur le remplissage au niveau des cellules de la table pour structurer le bouton, ainsi que sur les attributs HTML et CSS pour donner un style au bouton. No VML signifie code plus simple, mais pas d'images d'arrière-plan dans Outlook.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

L'inconvénient des boutons basés sur le remplissage est que la zone entière du bouton n'est pas cliquable, seul le lien dans la cellule du tableau est.

Boutons basés sur la bordure

Cette technique repose sur l'ajout de bordures épaisses au lien lui-même pour créer le CTA du bouton. L'utilisation des bordures est universellement comprise par les clients de messagerie, mais les couleurs unies des boutons apparaissent.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

La balise de lien est définie pour être un élément de niveau bloc et les bordures sont utilisées pour fournir le remplissage, de sorte que le bouton entier peut être survolé + cliqué, même dans les anciens clients de bureau.

L'inconvénient des boutons basés sur des bordures est qu'Outlook réduit légèrement la taille des bordures et, comme mentionné ci-dessus, les images d'arrière-plan ne sont pas prises en charge.

Rembourrage + Boutons basés sur la bordure

Cette technique utilise une combinaison de boutons basés sur des bordures et des bourrages, en stylisant le lien à la fois avec un remplissage et au moins une bordure solide de 1px. La couleur d'arrière-plan doit être appliquée à la place de l'instance car Outlook reconnaît le remplissage horizontal sur la balise (car ce n'est pas une balise de niveau bloc).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

L'inconvénient des boutons padding + border-based est qu'ils séparent le style entre une <td> et <a> , ce qui rend la maintenance difficile. Mais un seul bouton est utilisé, les dimensions spécifiques ne sont pas requises et les images de fond peuvent être prises en charge.

Bouton anti-balles avec entretoises

Ce bouton dérive de cet exemple par Email on Acid. Il est entièrement basé sur un code, il sera donc affiché sans images téléchargées et le bouton entier sera survolé + cliquable.

En outre, cet exemple comprend également des entretoises pour contrôler la quantité d'espace vertical qui apparaît avant et après le bouton.

<table width="100%">
    <tr>
      <td>
        <!-- Top Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Top Spacer : END -->
        <!-- Button : BEGIN -->
        <table border="0" align="left" cellpadding="0" cellspacing="0">
          <tbody>
          <tr>
            <td align="left">
              <table border="0" cellpadding="0" cellspacing="0" width="150">
                <tr>
                  <td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                    <a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- Button : END -->
        <!-- Bottom Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Bottom Spacer : END -->
      </td>
    </tr>
  </table>

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

email
Boutons à l'épreuve des balles

Recherche…