Premiers pas avec le courrier électronique

## HTML et texte brut Le courrier électronique HTML est l’utilisation d’un sous-ensemble de HTML et de CSS pour formater un message électronique comme une page Web en utilisant des couleurs, des graphiques, des colonnes de tableau et des liens.

Lorsque vous envoyez un e-mail, il est important d’envoyer à la fois du texte brut et du HTML. Pour ce faire, envoyez votre e-mail au format MIME en plusieurs parties. La plupart des fournisseurs de services de messagerie disposent d’outils pour créer automatiquement le MIME pour vous. Certains généreront une version en texte brut basée sur votre version HTML, et il existe également des outils tiers.

Exemple d’e-mail texte uniquement :

# EMAIL TITLE GOES HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-1

---

## Subheader goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-2

---

Footer and Sender information

Unsubscribe here: http://www.website.com/unsubscribe

[![entrez la description de l’image ici][1]][1]

Notez qu’avec le lancement récent d’Apple Watch, une nouvelle partie MIME a fait son apparition : text/watch-html. Ce contenu ne sera affiché que dans l’Apple Watch (et tout autre client prenant en charge ce type MIME).

[1] : https://i.stack.imgur.com/bTE1s.png

Clients de messagerie et moteurs de rendu

Les clients de messagerie utilisent différents moteurs de rendu pour afficher les e-mails HTML :

  • Apple Mail, Outlook pour Mac, Android Mail et iOS Mail utilisent WebKit
  • Outlook 2000/02/03 utilise Internet Explorer 6
  • Outlook 2007/10/13 utilise Microsoft Word
  • Les clients Web utilisent le moteur respectif de leur navigateur (par exemple, Safari utilise WebKit, Chrome utilise Blink)

Certains clients ajouteront également leurs propres styles au vôtre, par ex. Gmail définit toutes les polices <td> sur font-family: arial,sans-serif;, ce qui peut avoir un impact sur le rendu d’un e-mail.

Avant 2016, tous les produits Gmail supprimaient les balises <link>, tout CSS à l’intérieur des balises <style> et tout autre CSS non intégré. Fin 2016, Gmail a commencé à prendre en charge la balise <style> et les requêtes multimédias dans la plupart de ses produits. Voici une mise à jour en date du 23 novembre 2016 :

[![entrez la description de l’image ici][1]][1]

[1] : https://i.stack.imgur.com/T4FVl.png

Les bases (tableaux et CSS en ligne)

Tableaux pour la mise en page

La structure d’un fichier e-mail HTML est similaire à celle d’une page Web :

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>
</html>

Cependant, une mise en page CSS basée sur <div> ne fonctionne pas dans les e-mails comme sur le Web. Les principaux clients de messagerie n’offrent aucun support pour des éléments tels que les flottants et les boîtes flexibles, ou les modifient de différentes manières. <div>s ont également des problèmes de positionnement et de modèle de boîte dans différents clients, en particulier Outlook. Il existe quelques [techniques](https : //medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.wvj401pe5) pour coder un e-mail en utilisant uniquement <div>s, mais il est plus sûr de s’en tenir aux tableaux pour la mise en page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
            <tr>
                <td width="200">
                    <h1>Hello World!</h1>
                </td>
                <td width="400">
                    <p>This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>

CSS en ligne

L’application d’un style en ligne lui donne la priorité sur les styles plus éloignés (tels que les styles de client de messagerie Web), et contourne également les clients de messagerie qui suppriment le CSS des fichiers CSS principaux ou externes. Le CSS en ligne est le meilleur moyen d’assurer un affichage cohérent dans chaque client de messagerie.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body style="background: #000000;">
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
            <tr>
                <td width="200" style="padding: 20px; background-color: #eeeeee;">
                    <h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
                </td>
                <td width="400" style="padding: 20px;">
                    <p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>

Vous avez plusieurs options pour inline CSS :

  • Écrivez CSS en ligne au fur et à mesure
  • Utilisez des [extraits] locaux (http://www.hongkiat.com/blog/sublime-code-snippets/) dans votre éditeur
  • Utilisez un inliner CSS basé sur le Web [comme celui-ci] (https://inliner.cm/)
  • Utilisez un inliner CSS programmatique [comme celui-ci] (https://github.com/premailer/premailer)
  • Utilisez un processus de construction comme celui-ci ou un langage de template
  • Laissez votre fournisseur de service de messagerie gérer l’inlining pour vous (s’il le prend en charge)

Codage des e-mails pour tous les clients de messagerie

Méthode de codage utilisée : Hybride/Spongieux

Cela a toujours été un mythe que les div ne peuvent pas être utilisés dans les e-mails. Il existe des clients de messagerie (contrairement à Outlook) qui peuvent afficher correctement les div. L’exemple ci-dessous illustrera comment un e-mail peut être codé qui fonctionnera sur l’application Gmail (avec des mises à jour non encore déployées), les appareils Samsung et d’autres clients de messagerie qui ne lisent pas les requêtes multimédias.

Présentation des instructions conditionnelles Outlook

Les instructions conditionnelles d’Outlook sont très utiles lorsqu’il s’agit de rendre des e-mails ou d’afficher quelque chose de spécifique comme des replis pour Outlook.

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

Le code ci-dessus lit * si supérieur à Microsoft Outlook 9 ou IE *

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

Versions des instructions conditionnelles répertoriées.

Démarrage d’un modèle d’e-mail hybride

Chaque étape a été expliquée de manière à être facile à comprendre pour toute personne ayant des connaissances de base en HTML.

Nous commençons d’abord avec une table wrapper qui s’étendra sur tout l’écran et avec une classe de conteneur.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

Après cela, nous ajoutons une requête multimédia pour les clients de messagerie qui ne lisent pas la largeur maximale mais lisent le CSS dans l’en-tête. La requête multimédia ciblera tous les écrans et affichera le conteneur à une largeur de 700 pixels.

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

Ensuite, nous ajoutons une instruction conditionnelle Outlook qui maintient la table (avec le conteneur de classe) à une largeur de 700 pixels.

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->

Le code ci-dessus devrait maintenant contenir votre modèle dans Outlook à 700 pixels de large.

Maintenant pour les colonnes. Le code ci-dessous créera deux colonnes égales sur le modèle à la fois à 350 pixels de large.

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

Après cela, la limite n’est que votre imagination ou le concepteur. Lorsque les conceptions sont terminées, il est important d’être impliqué dans l’étape de cadrage filaire afin qu’il n’y ait pas de surprises une fois la conception en phase de codage.

Noter:

  • Les images Retina auront besoin d’images définies au niveau de l’élément et non sur son style <img src="" width="" …
  • Vous pouvez toujours choisir de faire du CSS en ligne ou vous pouvez choisir de CSS dans la tête uniquement si tous vos clients prennent en charge le CSS dans la tête.
Boutons pare-balles →