Lorsque vous créez une campagne email, vous devez toujours prévisualiser et tester l'email sur différents clients avant de l'envoyer. En effet, certains clients email ne prennent pas en charge l'ensemble du contenu HTML, car l'HTML pour l'email n'est pas aussi développé que l'HTML pour le web. Les éléments interactifs tels que Flash ou JavaScript ne fonctionnent pas dans la plupart des clients email.
Nous recommandons l'utilisation du bloc HTML uniquement aux utilisateurs avancés. L'ajout d'un code HTML personnalisé peut affecter l'affichage de votre campagne email sur certains clients email. Le HTML personnalisé doit être aussi compatible et réactif que possible aux emails. Pour vous assurer que votre email s'affiche comme prévu sur les clients email, 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 à l'aide du HTML. Pour utiliser l'éditeur HTML, créez une campagne email et choisissez l'éditeur HTML à l'étape Design. Pour en savoir plus, consultez notre article dédié Importer un fichier HTML pour concevoir votre campagne.
Vous pouvez utiliser le bloc HTML dans l'éditeur Drag & Drop pour concevoir certains éléments de votre email avec le code HTML. Pour utiliser le bloc HTML, créez une campagne email, et dans l'étape Design, choisissez un template et faites glisser le bloc HTML pour le déposer dans la conception de votre email :
Quels formats HTML puis-je utiliser dans mes campagnes email ?
Consultez le tableau ci-dessous pour savoir quels formats HTML peuvent être utilisés en toute sécurité dans votre campagne email :
| ✅ Utilisation sûre | 🟠 À utiliser avec précaution | ❌ Ne jamais utiliser |
|
|
|
Le CSS est limité lorsqu'il est utilisé dans l'HTML pour l'email. Pour obtenir les meilleurs résultats lors de la conception de votre campagne email, voici nos recommandations :
- Utilisez des CSS très simples.
Utilisez ce site web comme un dictionnaire pour vérifier si votre CSS sera bien pris en charge par les clients email. - Utilisez le CSS uniquement pour les éléments de style généraux tels que la police et les couleurs.
- Utilisez du CSS en ligne plutôt que du CSS intégré. Sur le CSS en ligne, les couleurs d'arrière-plan ou les paramètres <body> doivent être gérés par une <table> d'une largeur de 100 % autour de l'email.
❗️ ImportantCertains clients email suppriment les lignes de code qui commencent par une virgule ou un point. Pour éviter cela, ajoutez un espace au début de chaque ligne commençant par une virgule ou un point.
Utilisez des polices faciles à lire et facilement lisibles par n'importe quel client email. Vérifiez les polices que vous utilisez avant d'envoyer votre campagne email. Pour vous assurer que vos clients pourront lire votre campagne email avec la police que vous avez choisie, ajoutez une police de secours dans l'éditeur Drag & Drop. Vous pourrez ainsi choisir les polices à utiliser si celle que vous avez choisie n'est pas prise en charge par le client email de vos destinataires. Pour en savoir plus, consultez notre article dédié Ajouter des polices Google Fonts et de substitution à partir de l'éditeur Drag & Drop.
Nous vous recommandons également d'utiliser au maximum deux ou trois polices dans une même campagne email. Pour faciliter la lecture de votre email, choisissez une taille comprise entre 14 et 16 px pour le corps du texte : 14px pour les emails longs avec des paragraphes et 16px pour les emails courts (deux ou trois phrases).
Vous pouvez facilement ajouter des cartes d'images à vos campagnes en ajoutant un lien à votre bloc Image dans l'éditeur Drag & Drop :
- Ajoutez un bloc Image à la conception de votre campagne et cliquez sur l'image.
- Cliquez sur Ajouter un lien. La fenêtre Insérer/éditer lien s'ouvre.
-
Complétez les informations suivantes :
- Type de lien, qui est souvent un lien absolu (URL) mais vous pouvez choisir n'importe quel autre type de lien.
- Cible du lien, qui est le lien vers lequel vous voulez que votre image redirige.
- Titre du lien, qui est le mot que vous souhaitez afficher lorsque vous survolez l'image.
- Cliquez sur Insérer.
Par défaut, nous échappons le contenu HTML (et JS) de toutes les variables. Cela signifie que tout code HTML passé dans une variable sera automatiquement échappé et imprimé en tant que texte. Par exemple, si le contenu de votre variable est <h1>Mon titre</h1>, votre template affichera exactement ce texte dans votre email : <h1>Mon titre</h1> au lieu d'afficher la phrase « Mon titre » mise en forme comme un titre H1.
Pour savoir 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 email
- Ajouter des polices Google Fonts et de substitution à partir de l'éditeur Drag & Drop
- Comment tester votre campagne email
🤔 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é.