Aller au contenu principal

Les limites de l'HTML pour vos campagnes d'e-mails

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.

❗️ Important

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 :

Éditeur HTML Bloc HTML

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.

html-editor-example_FR.gif

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
  • Images d'arrière-plan
  • Polices pour le web personnalisées
  • Mises en page larges
  • CSS intégré
  • JavaScript
  • <iframe>
  • Flash
  • Audio intégré
  • Vidéo intégrée
    Pour insérer correctement une vidéo dans le design de votre campagne, veuillez consulter notre article dédié.
  • Formulaires
  • Couches <div>

🌐 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.
    ❗️ Important
    Certains 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 :

  1. Ajoutez un bloc d'image au design de votre campagne et cliquez sur l'image.
  2. Cliquez sur Ajouter un lien. La fenêtre Insérer/modifier un lien s'ouvre.
  3. 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.
  4. Cliquez sur Insérer.

insert-link-on-image_FR.png

🚨 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 ?

🤔 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.

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 4 sur 23