Rédiger un mail

Rédiger un mail

introduction

Créer une page de site c'est facile. Vous maîtrisez les différentes balises et leur fonctionnement

structure d'un mail

Pour commencer il faut savoir que chaque messagerie applique ses règle d'affichage à sa façon. Donc oublier les flexbox et autre règles de position car il y a 90 % de chance que ne soit pas interprétées

Tableau HTML, la meilleur mise en page

Les positions et float en CSS ne seront pas interprétés. Donc contrairement à ce que l'on vous a appris on va faire de l' HTML sale et bien bourrin.

Pour la structure c'est comme d'habitude, sauf qu'il n'y aura pas de balise d'entêtes et comme il faut oublier les bloc on utilis les taboleux HTML. Ca va faire <HTML>,⇛ <META>, ⇛<TITLE> ⇛ <BODY> ⇛ <TABLE>

  • <html>
    • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    • <title>Exemple de mail </title>
    • <body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: Arial, sans-serif;">
      • <table width="100%" height="100%" cellpadding="0">
        • <tr>
          • <td colspan="2"><a href="https://monsite/mail.html>voir le mail en ligne</a></td>
          • <td colspan="2">TITRE DU MAIL<td>
        • </tr>
        • <tr>
          • <td style="height:180px; background:#00F;">Bloc de gauche</td>
          • <td>Bloc de droite</td>
        • </tr>
        • <tr>
          • <td colspan="2" height="180px">Pied de page>
        • </tr>
      • <table>
    • </body>
  • </html>

Les règles

Pour réussir à coup sur sa campagne de mailling voici les quelques règles d'or à respecter

  1. Toujours laisser un accés au mail directement en ligne

    certaine boîte mail ne vont pas intérpréter les éléments comme vous voudrez où les images risque de ne pas s'afficher correctement. La première chose à voir c'est : Voir ce mail en ligne

  2. Pas de balise style

    C'est simple les balises </style> ne sont pas intérprétées par aucune des boîtes mail seule solution l'attribut style de la balise

    • [...]
        <td style="height:180px; background:rgb(255,0,0);">
    • [...]
  3. Vous affichez des image jamais de sources absolue

    Pour rappel, il y a deux façons d'indiquer une source pour un média /

    • Absolue (src=dossier/mon_image.png)
    • en ligne (src=https://monsite.fr/dossier/mon_image.png)

    Ici on opte pour la deuxième option.

Partager
Partager sur Twitter