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.

❓Quels formats HTML puis-je utiliser dans ma campagne d'e-mails ?

Dans Sendinblue, vous pouvez utiliser le langage HTML depuis…

L'éditeur HTML Pour concevoir toute votre campagne d'e-mails		Le bloc HTML (Éditeur Drag & Drop) Pour ajouter votre propre code au design de votre e-mail
	OU

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
Mise en page statique à base de tableaux Tableaux HTML et imbriqués Largeur du template de 600 px-800 px CSS simple, inline Polices pour le web Images cliquables	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 :

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.

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