E-mail HTML

Pourquoi l’e-mail HTML est important

Les e-mails en texte brut ne sont que du texte. Pas de couleurs, pas d’images, même pas de gras ni d’italique. Les e-mails HTML, c’est tout le reste.

Les e-mails HTML ont de la couleur, du style, des images et parfois du multimédia, comme des pages web livrées dans la boîte de réception des utilisateurs. Cela signifie que vous pouvez respecter votre image de marque, utiliser votre logo et ajouter des boutons sur lesquels les gens peuvent vraiment cliquer. Vous pouvez utiliser les éléments visuels inhérents pour attirer l’attention sur les différentes parties du contenu de votre e-mail et tirer parti des éléments avec lesquels les utilisateurs s’attendent à interagir, comme les images et la vidéo.

La plupart des entreprises envoient désormais des e-mails HTML. Selon des enquêtes menées par des entreprises de marketing en ligne, l’adoption de clients de messagerie compatibles HTML est désormais presque universelle, avec moins de 1 % déclarant utiliser des clients en texte seul. Vos clients s’attendent à des e-mails soignés, et le texte brut peut paraître peu professionnel ou dépassé. Cela donne l’impression que vous ne prenez pas votre communication au sérieux.

Mais le HTML n’est pas automatiquement meilleur. Il y a des compromis. Les e-mails HTML sont plus volumineux, mettent plus de temps à charger et peuvent s’afficher incorrectement selon les clients de messagerie. Ils déclenchent aussi plus souvent les filtres anti-spam que le texte brut.

Comment fonctionnent les e-mails HTML

Quand vous envoyez un e-mail HTML, vous envoyez en gros une mini page web dans la boîte de réception de quelqu’un.

Le concepteur de l’e-mail écrit du code HTML, un peu comme pour coder une page web, en définissant la structure avec le HTML et le style avec le CSS. Vous ajoutez des images, mettez le texte en forme, créez des mises en page. Puis, lorsque le destinataire ouvre l’e-mail, son client de messagerie lit ce code HTML et l’affiche comme un navigateur afficherait une page web.

Voici le hic : il existe des centaines de services et d’applications différents que les gens utilisent pour lire leurs e-mails, comme Gmail, Yahoo! et Outlook, et chaque service affiche le HTML et le CSS de manière légèrement différente. Ce qui paraît parfait dans Gmail peut se casser dans Outlook. Ce qui fonctionne sur ordinateur peut échouer sur mobile.

C’est pourquoi de nombreux serveurs de messagerie sont configurés pour générer automatiquement une version en texte brut d’un message et l’envoyer avec la version HTML, en utilisant le Content-Type: multipart/alternative. Si le HTML ne s’affiche pas correctement, le client de messagerie bascule sur le texte brut. Vous êtes couvert dans les deux cas.

HTML ou texte brut

Vous avez deux options :

Les e-mails HTML vous donnent un contrôle total sur le design. Couleurs, polices, images, boutons cliquables, mises en page assorties à votre site web. Le HTML est le meilleur format lorsque vous voulez créer des messages qui ressemblent à des documents traditionnels, avec différentes polices, couleurs et listes à puces ou numérotées, et lorsque vous voulez afficher des images dans votre message. Parfait pour les newsletters, les campagnes marketing et les communications de marque.

Les e-mails en texte brut sont dépouillés. Juste du texte, sans mise en forme, sans liens intégrés. Le format texte brut ne prend pas en charge le texte en gras ou en italique, les polices colorées ni les autres mises en forme du texte, et ne permet pas d’afficher des images dans le message. Moins enthousiasmants, certes, mais ils fonctionnent partout. Ils paraissent aussi plus personnels et moins commerciaux, c’est pourquoi certaines personnes les préfèrent pour les échanges individuels.

Pour les comptes Microsoft, vous pouvez choisir comment recevoir vos e-mails dans votre boîte de réception. 

Cela fonctionne très bien pour les lettres commerciales et les mises à jour, et si vous êtes commercial et échangez par e-mail en tête-à-tête, les e-mails en texte brut sont probablement meilleurs. Mais pour la plupart des actions marketing ? Le HTML l’emporte.

Créer des e-mails HTML

Vous avez plusieurs options selon votre aisance technique.

Codez-le vous-même. Si vous connaissez le HTML et le CSS, vous pouvez écrire le code à partir de zéro. N’oubliez pas simplement que créer un e-mail en HTML est une spécialité, et que ce n’est pas exactement comme créer une page web. Les clients de messagerie sont bien moins tolérants que les navigateurs. Vous devrez utiliser des tableaux pour la mise en page (oui, vraiment), du CSS inline au lieu de feuilles de style externes, et tester sur plusieurs clients.

Utilisez un éditeur par glisser-déposer. La plupart des fournisseurs de services d’e-mail comme Mailchimp, Constant Contact ou Campaign Monitor proposent des éditeurs visuels. Vous glissez des blocs de texte, des images, des boutons, et l’outil génère le HTML pour vous. Aucune connaissance en code requise.

Commencez avec un modèle. Prenez un modèle d’e-mail HTML préconçu auprès d’un service comme Litmus ou Email on Acid, puis personnalisez-le avec votre propre contenu et votre image de marque. Plus rapide que de partir de zéro, avec plus de contrôle qu’un éditeur par glisser-déposer.

Quelle que soit l’approche utilisée, vous devez toujours vous assurer que vos e-mails s’adaptent à différentes résolutions et fonctionnent avec différents clients de messagerie. Testez tout avant d’envoyer à l’ensemble de votre liste.

Bonnes pratiques pour les e-mails HTML

Concevez d’abord pour le mobile. Plus de la moitié des e-mails sont ouverts sur téléphone. Maintenant que la navigation mobile a dépassé l’usage des PC de bureau et des ordinateurs portables, concevoir vos e-mails pour les appareils mobiles est plus important que jamais. Utilisez des mises en page sur une seule colonne, de grandes zones tactiles pour les boutons et des tailles de police lisibles sans zoom.

Gardez les choses simples. N’en faites pas trop avec le design. Lorsque vous développez un e-mail HTML, n’oubliez pas la simplicité : ne compliquez pas votre travail, mieux vaut vous en tenir à une mise en page à deux colonnes. Moins d’éléments signifie des temps de chargement plus rapides et moins de choses qui peuvent se casser.

Utilisez du CSS inline. La balise head, qui sert à contenir les règles de style CSS pour un document HTML entier, est mal prise en charge et parfois complètement supprimée, ce qui fait des déclarations de style inline la norme de facto. 

Testez sur plusieurs clients. Gmail, Outlook, Apple Mail, Yahoo et les clients mobiles s’affichent tous différemment. Vous pouvez essayer d’envoyer vos e-mails à différents comptes reliés à différents clients de messagerie, ou utiliser des outils de test d’e-mails pour simplifier le processus. Des services comme Litmus et Email on Acid sont spécialisés dans ce domaine.

Incluez une version de secours en texte brut. Envoyez toujours les versions HTML et texte brut dans le même e-mail. Si le HTML se casse, les destinataires reçoivent quand même votre message.

Surveillez la taille de vos fichiers. L’e-mail HTML est plus volumineux que le texte brut. Des images lourdes et un code alourdi ralentissent le chargement et peuvent déclencher les filtres anti-spam. Gardez la taille totale de l’e-mail sous 100 Ko si possible.

Ne vous appuyez pas uniquement sur les images. Certains clients de messagerie bloquent les images par défaut. Votre message doit toujours avoir du sens sans elles. Utilisez un texte alternatif pour toutes les images.

Contenu associé

• Comment créer des signatures d’e-mail professionnelles
• Fonctionnalités essentielles qu’une bonne application e-mail doit avoir

Termes associés

• Client de messagerie
• Modèle d’e-mail
• Filtre anti-spam
• Fournisseur de services d’e-mail
•