Lorsque vous créez une campagne d'e-mails, vous devez systématiquement prévisualiser et tester votre e-mail sur différents clients de messagerie avant de l'envoyer. En effet, certains clients de messagerie ne supportent pas l'ensemble des contenus HTML, car l'HTML utilisé dans les e-mails n'est pas aussi répandu que l'HTML pour le web. Les éléments interactifs, comme Flash ou JavaScript, ne fonctionnent pas dans la plupart des clients de messagerie.
Nous recommandons l'utilisation du bloc HTML uniquement aux utilisateurs avancés. L'ajout de code HTML personnalisé peut affecter l'affichage de votre campagne email sur certains clients de messagerie. Le code HTML personnalisé doit être aussi conforme et réactif que possible. Pour vous assurer que votre email s'affiche comme prévu sur les clients de messagerie, nous vous recommandons vivement de tester votre campagne email avant de l'envoyer à vos contacts.
Quelle est la différence entre l'éditeur HTML et le bloc HTML ?
Vous pouvez personnaliser le design de votre campagne email avec deux outils HTML différents :
L'éditeur HTML vous permet de concevoir l'ensemble de votre campagne email en utilisant le langage HTML. Pour utiliser l'éditeur HTML, créez une campagne email et choisissez l'éditeur HTML à l'étape Conception. Pour en savoir plus, consultez notre article dédié Importer un fichier HTML pour concevoir votre campagne.
Le bloc HTML peut être utilisé dans l'éditeur Drag & Drop pour concevoir certains éléments de votre email avec du code HTML. Pour utiliser le bloc HTML, créez une campagne email et, à l'étape Conception, choisissez un template et effectuez une action de glisser-déposer du bloc HTML dans la conception de votre email :
Quels formats HTML puis-je utiliser dans ma campagne d'e-mails ?
Consultez le tableau ci-dessous pour savoir quels formats HTML sont sûrs ou non dans une campagne d'e-mails :
| ✅ Sûr | 🟠 Avec précaution | ❌ À proscrire |
|
|
|
🌐 CSS
CSS est limité lorsqu'on l'utilise avec l'HTML pour rédiger des e-mails. Voici nos conseils pour obtenir les meilleurs résultats en concevant votre campagne d'e-mails :
- Utilisez un code CSS très simple,
Servez-vous de ce site Internet comme d'un dictionnaire pour vérifier si votre CSS sera bien supporté par les clients de messagerie. - Utilisez CSS uniquement pour les éléments de style généraux, comme la police et les couleurs.
- Préférez le CSS inline au CSS intégré. Avec le CSS inline, les couleurs d'arrière-plan ou les paramètres <body> doivent être gérés dans une <table> de largeur 100 % encadrant votre e-mail.
❗️ ImportantCertains clients de messagerie retirent les lignes de code qui commencent par une virgule ou un point. Ajoutez une espace au début de chaque ligne commençant par une virgule ou un point pour éviter cette suppression.
🔤 Polices conçues pour le web
Utilisez des polices de caractères faciles à lire et facilement utilisables pour n'importe quel client de messagerie. Vérifiez les polices que vous utilisez avant d'envoyer votre campagne d'e-mails. Pour vous assurer que vos clients pourront lire une campagne avec la police que vous avez choisie, ajoutez une police de substitution dans l'éditeur Drag & Drop. Vous pourrez choisir quelle police utiliser si celle que vous souhaitez n'est pas prise en charge par le client de messagerie de vos destinataires. Pour en savoir plus, lisez notre article dédié Ajouter des polices Google Fonts et de substitution à partir de l'éditeur Drag & Drop.
Nous vous recommandons aussi d'utiliser au maximum deux à trois polices de caractères dans une même campagne d'e-mails. Pour faciliter la lecture de votre e-mail, choisissez une taille entre 14 et 16 px pour le corps de texte : 14 px pour les e-mails longs avec des paragraphes, 16 px pour les e-mails courts (deux à trois phrases).
🏞 Images cliquables
Vous pouvez facilement ajouter des images cliquables à vos campagnes en ajoutant un lien à votre bloc d'image dans l'éditeur Drag & Drop :
- Ajoutez un bloc d'image au design de votre campagne et cliquez sur l'image.
- Cliquez sur Ajouter un lien. La fenêtre Insérer/modifier un lien s'ouvre.
- Renseignez les informations suivantes :
- Le type de lien, souvent un Lien absolu (URL) mais vous pouvez choisir n'importe quel autre type ;
- La cible du lien, à savoir la page vers laquelle votre image doit rediriger les utilisateurs ;
- Le titre du lien, c'est-à-dire le mot qui s'affichera quand la souris survole l'image.
- Cliquez sur Insérer.
🚨 Autoescape
Par défaut, on "échappe" le contenu HTML (et JS) de toutes les balises. Cela signifie que tout code HTML sera affiché comme du texte. Par exemple, si le contenu de votre balise est <h1>Mon titre</h1>, alors votre template affichera exactement ce texte dans votre email : <h1>Mon titre</h1> plutôt que d'afficher la phrase "Mon titre" formatée comme un titre H1.
Pour découvrir comment désactiver l'autoescape, consultez notre article dédié Désactivez l'autoescape et affichez les doubles accolades dans vos emails.
⏩ Et après ?
- Série d'articles sur l'Éditeur Drag & Drop
- Importer un fichier HTML pour concevoir votre campagne
- Créer une campagne d'e-mails
- Ajouter des polices Google Fonts et de substitution à partir de l'éditeur Drag & Drop
- Comment tester votre campagne e-mail
🤔 Vous avez des questions ?
Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.
Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec un Partenaire Brevo certifié.