9 bonnes pratiques pour vos e-mails HTML

Concevoir un e-mail HTML beau et percutant, avec une expérience de lecture homogène, est une tâche redoutable, même pour des experts. Le problème, c’est que les fournisseurs de messagerie sont moins avancés que les navigateurs web et ne s’accordent ni sur les fonctionnalités qu’ils prennent en charge ni sur la façon de les afficher. Résultat : vous vous retrouvez avec une boîte à outils limitée, un lot de problèmes et des bugs imprévus. Cela ne veut pas dire pour autant que vous ne pouvez pas réussir seul le développement de vos e-mails.

La clé d’un développement d’e-mails réussi tient à l’adoption des bonnes pratiques, au respect des standards, au choix d’options sûres et à l’usage d’outils éprouvés. Notre guide des bonnes pratiques de développement d’e-mails HTML explique comment les professionnels de l’emailing créent des designs d’e-mail à la délivrabilité élevée et aux conversions impressionnantes, sans y laisser leurs nerfs.

Bonnes pratiques HTML pour le design

Commençons par le design, puisque c’est la première chose que vos clients voient, comprennent et à laquelle ils réagissent. C’est lui qui porte les conversions et les taux d’ouverture. D’après des études, plus de 90 % des personnes interrogées regardent l’apparence visuelle au moment de décider d’acheter. Donc, tout comme le cœur et les fonctionnalités d’un e-mail HTML, le design doit être irréprochable. Passons en revue les bonnes pratiques de l’e-mail HTML pour savoir quels aspects clés vous devez maîtriser.

Contrôler votre e-mail HTML

Connaître votre audience

Toute campagne d’emailing commence par la définition de votre audience cible et la segmentation de la liste d’abonnés en conséquence. Cela semble sans rapport avec le design, mais c’est en réalité la pierre angulaire de tout ce qui se fait dans un logiciel d’emailing, et la création d’un design d’e-mail HTML n’y échappe pas.

Connaître votre audience et, surtout, savoir quels clients de messagerie elle utilise, voilà la base. Comme nous l’avons déjà souligné, les clients de messagerie, y compris les grands noms comme Gmail, Outlook, Apple iOS et Windows Mail, ne prennent pas en charge les mêmes fonctionnalités d’e-mail HTML. Vous devez donc savoir quelles solutions et quelles propriétés employer pour éviter que le design s’effondre.

Avec des outils d’analyse, vous pouvez cerner les habitudes et les préférences d’appareils de vos lecteurs. Cette information peut vous aider à créer un design le plus compatible possible avec leur client de messagerie. Beaucoup de petites entreprises qui visent une clientèle locale ou un marché précis en profitent en permanence.

Mais que faire si vous visez le marché international, ou s’il vous faut servir des données à toutes sortes de groupes ? Vous devez alors gérer une situation où un mélange de clients de messagerie est en jeu. Dans ce cas, la segmentation peut vous aider à définir plusieurs types d’appareils à couvrir. Suivez cette procédure simple en 3 étapes :

• D’abord, définissez le client de messagerie principal, l’appareil le plus répandu chez vos abonnés.
• Ensuite, créez un design d’e-mail HTML avec des fonctionnalités compatibles avec ce client de messagerie principal.
• Enfin, testez le design de l’e-mail sur le plus petit dénominateur commun. Il faut trouver ici un compromis pour que le design reste beau dans toutes les situations.

Cette approche fonctionne très bien pour la majorité des clients de messagerie, sauf Outlook. Le problème, c’est qu’il fait partie des clients de messagerie les plus délicats. Le compromis est difficile à trouver, surtout quand les anciennes versions entrent en jeu. Il est bien plus simple d’isoler ces abonnés et de créer un design d’e-mail spécialement pour eux. Donc, si vos lecteurs emploient majoritairement Outlook, il est vivement recommandé de créer une version réservée à ce client de messagerie et de l’envoyer au segment d’abonnés correspondant.

Et s’il s’agit de votre première campagne ? Si vous n’avez jamais écrit à cette liste d’abonnés, ou si vous n’avez simplement aucune information sur les appareils utilisés ? Suivez alors cette approche :

• Tenez-vous aux options sûres.
• Appliquez les dix règles d’or d’un bon design d’e-mail HTML.
• Faites vos propres recherches. Vous pouvez analyser l’audience vous-même, puisque les adresses e-mail donnent des indices sur les clients de messagerie que vos abonnés utilisent probablement. Par exemple, s’ils ont des comptes chez Outlook.com, Yahoo ou Gmail, ils passeront sans doute par les plateformes correspondantes.
• Commencez par des tests A/B pour voir ce qui fonctionne le mieux.

E-mail de Grammarly

Donner la priorité au design mobile

D’après des études récentes, plus de 70 % des e-mails sont aujourd’hui ouverts sur un téléphone. Il va sans dire qu’un design d’e-mail HTML doit être adapté au mobile. Il y a toutefois un piège caché : les professionnels de l’emailing emploient souvent « design responsive » et « design adapté au mobile » comme des synonymes, alors que ce ne sont pas les mêmes choses, même si leurs caractéristiques se ressemblent.

Quand vous créez un e-mail HTML, il est crucial de penser le design du point de vue du téléphone. Par exemple, pour les petits écrans, Apple recommande de fixer la typographie à 16px, parce que les caractères restent lisibles et distincts. À l’inverse, le design responsive, qui est une solution unique pour tous, n’implique que des changements progressifs de proportions. C’est pourquoi on voit souvent des mises en page mobiles où la police est fixée à 14px, voire 12px.

Pour certains appareils, les principes du responsive peuvent faire merveille. Mais si vous voulez garantir la meilleure expérience aux lecteurs mobiles, il est vital d’appliquer les bonnes pratiques propres aux petits appareils.

Voici les règles de base du design adapté au mobile que tout professionnel de l’emailing devrait connaître :

• Quand vous concevez pour des iPhone, n’oubliez pas les écrans Retina, qui exigent des visuels (images et graphiques) en haute résolution.
• Les éléments de commande comme les boutons d’appel à l’action et les liens de désabonnement doivent être faciles à toucher. D’après Apple, la zone tactile doit mesurer au moins 44px de large.
• Tous les détails nécessaires de l’interface (navigation, appel à l’action, lien de désabonnement et contacts) doivent être faciles à atteindre. Si vous créez un design d’e-mail pour téléphones et phablettes, ils doivent se trouver dans la partie centrale. Si vous créez un design pour tablettes (iPad mini ou vues paysage sur phablette), ces détails doivent être placés sur les côtés.
• Poussez la mise en forme au maximum. Gardez des titres courts. Découpez le texte en petits blocs faciles à parcourir.
• N’utilisez pas de polices décoratives. Choisissez des caractères nets et simples.
• Évitez un corps d’e-mail HTML trop long. N’obligez pas vos lecteurs à faire défiler. Les longues newsletters sont difficiles à lire sur petit écran, surtout en déplacement.
• Placez le bouton d’appel à l’action en haut et répétez-le en bas.
• Trouvez le contraste optimal entre l’arrière-plan et le premier plan. Gardez des designs très contrastés, car l’e-mail peut être ouvert en plein soleil.
• Ne comptez pas sur les hyperliens. Ils sont difficiles à cliquer. Si c’est possible, transformez-les en boutons.
• Ne laissez pas l’image principale occuper tout l’écran. Trouvez l’équilibre entre l’information visuelle et l’information textuelle, et montrez le message central sur le premier écran.
• Jouez finement avec les espaces blancs. Le blanc peut faire ou défaire votre design. N’en abusez pas. Trop de blanc dégrade le confort de lecture, tandis que son absence peut ruiner toute l’expérience. La bonne pratique consiste à ajouter de l’espace autour des boutons, des liens isolés et des images, puis à soigner la longueur des lignes et l’espacement entre les caractères.

Infographie sur les statistiques d’usage mobile

Miser sur la personnalisation

L’un des piliers d’un bon emailing dit ceci : si vous voulez qu’une newsletter produise des taux de conversion élevés, il faut que vos clients se connectent émotionnellement à votre produit ou à votre service. Sans lien émotionnel, vous ne toucherez pas la corde sensible et vous n’obtiendrez pas de résultats significatifs.

La clé de ce lien tient à la personnalisation, qui passe par le message et par le design. Les fonctions de personnalisation (le nom du destinataire ou une offre fondée sur l’historique d’achat du client) parlent au lecteur, tandis que le design encadre ce dialogue et rend le lien percutant et émotionnel.

Quel que soit le design que vous préparez, il est crucial de le personnaliser. Analysez votre audience, segmentez vos abonnés selon leurs préférences, leurs habitudes d’achat, leur genre, leur localisation et leur âge, puis ajustez le design en conséquence.

Un bon exemple de personnalisation par le design est l’usage de la bonne couleur. Nous savons que les gens jugent inconsciemment un produit d’après sa couleur. Si vous employez la bonne couleur pour votre marché cible, vous renforcez le lien émotionnel avec l’audience et, ipso facto, vous augmentez les taux de conversion.

Par exemple, quand vous créez un design d’e-mail pour une audience féminine, il est conseillé de choisir des teintes douces de bleu et de violet puisque, selon la psychologie des couleurs, les femmes les préfèrent. À l’inverse, une audience masculine sera ravie de voir des nuances vives de bleu et de vert, tandis que les adolescents se laissent surtout prendre par des couleurs installées par le marketing, comme le rose ou le bleu.

Les 10 règles d’or d’un design d’e-mail réussi

Comme nous l’avons déjà souligné, pour assurer la réussite d’un design d’e-mail HTML, vous devez connaître votre audience, recourir à la segmentation et capitaliser sur la personnalisation. Mais ce n’est pas tout : d’autres conseils peuvent servir votre projet.

Passons en revue les pratiques qui sont au cœur de chaque campagne réussie, quels que soient la niche et la taille de l’organisation. Ce sont les dix règles d’or d’un bon design d’e-mail HTML. Gardez-les en tête et essayez de les appliquer à chaque projet :

• Créez un objet solide. Un objet solide peut faire beaucoup de bien à votre campagne d’emailing. Par exemple, il aide la newsletter à sortir du lot en boîte de réception, éveille l’intérêt et pousse les lecteurs à ouvrir puis à réouvrir la newsletter.

En plus, il aide la newsletter à franchir les filtres antispam, parce qu’il fait partie des facteurs que les ESP contrôlent avant d’accorder à la newsletter l’accès à la boîte de réception. Si l’objet « paraît louche », le serveur destinataire bloquera l’e-mail.

Assurez-vous donc que votre objet est solide, unique et porteur de valeur. Pour cela, vérifiez qu’il respecte les règles de base :

• il ne contient aucune expression classique de spam ;
  • il va droit au but ;
  • il apporte de la valeur ;
  • il est personnalisé ;
  • il n’emploie que des caractères légitimes ;
  • il est correctement mis en forme.
• Contrôlez les liens cassés. En plus de la grammaire et de la ponctuation du corps HTML de votre e-mail, il est crucial de vérifier que tous les liens et tous les boutons fonctionnent. Des liens cassés peuvent ruiner l’expérience de lecture et vous empêcher d’arriver en boîte de réception, puisque les ESP y voient un signe de spam. C’est un faux pas courant : sur les e-mails que nous testons, 22 % contiennent un lien cassé, donc une relecture rapide avant l’envoi vous place devant près d’un quart des expéditeurs.
• Contrôlez les liens blacklistés. Avoir un lien cassé est mauvais, mais avoir un lien blacklisté est encore pire. Si le corps HTML de votre e-mail contient des liens qui mènent vers des sites blacklistés ou peu fiables, les ESP peuvent marquer la newsletter comme spam et la rejeter. Avant d’envoyer une newsletter, revérifiez donc les sources et les liens que vous voulez faire visiter à vos lecteurs.
• Évitez les liens raccourcis. Le raccourcissement de liens réduit la taille du fichier HTML, mais il est aussi de plus en plus populaire chez les spammeurs. Beaucoup d’ESP s’en méfient énormément. En raccourcissant vos liens, vous augmentez vos chances d’être signalé comme spam. Évitez-les donc à tout prix.
• Ne dépassez pas 600px de large pour votre mise en page. Vous pouvez étendre la zone à 800px si votre audience cible le permet, mais avec cette option sûre il sera bien plus facile de garantir que votre e-mail HTML fonctionne sur de très nombreux appareils. En plus, une largeur de 600px concentre discrètement l’attention du lecteur sur l’information importante et donne à la newsletter un air de valeur.
• Ne comptez pas sur les images pour porter le message et évitez les designs tout en images. Les gens mangent avec les yeux, ce qui fait des images la force visuelle principale, celle qui porte le message et crée l’impression. Mais côté design d’e-mail HTML, rien n’est aussi simple. Le problème, c’est que beaucoup de clients de messagerie bloquent les images des expéditeurs inconnus, tandis que d’autres ne prennent tout simplement pas ce format en charge. Compter sur les images peut donc être une mauvaise idée.
• Utilisez des polices sûres comme Arial, Comic Sans, Courier, Times New Roman, Trebuchet MS, Verdana et Georgia. Si vous voulez employer l’une des superbes polices web de Google, prévoyez une police de repli, car les fournisseurs de messagerie ne les prennent pas largement en charge. En plus, placez-les derrière une media query conditionnelle WebKit pour traiter les problèmes d’Outlook. Enfin, déclarez explicitement la famille, la taille et la couleur de la police pour que le client de messagerie ne les écrase pas.
• Optimisez le corps HTML de votre e-mail. L’optimisation est cruciale pour un e-mail HTML. Si votre newsletter dépasse un certain poids, le serveur destinataire peut la rejeter en la prenant pour une cyberattaque. Il est donc vivement conseillé de minifier votre code et d’optimiser vos images.
• Soignez le tout avec quelques ressorts psychologiques. Plusieurs ressorts psychologiques peuvent aider le corps HTML et le design de votre e-mail à atteindre l’objectif visé. Par exemple :
  • Assurez-vous que la zone principale appuie l’offre centrale avec une image percutante.
  • Employez le principe de la pyramide inversée pour porter le message et pousser les lecteurs à cliquer sur le bouton sans être intrusif.
  • Ajoutez des éléments dynamiques comme des effets de survol sur les images et les boutons, des infobulles, des boutons radio ou des transitions, pour enrichir l’expérience.
  • Utilisez des GIF animés pour laisser une impression durable. Les clients de messagerie les prennent largement en charge, vous pouvez donc y aller sans trop d’inquiétude.
  • Adaptez des fonctions interactives et impressionnez vos visiteurs avec une expérience ludique. Les fonctions interactives posent quelques problèmes de compatibilité et de prise en charge, mais beaucoup de nouvelles versions de clients de messagerie savent les servir. Donc, si votre marché cible utilise les dernières versions d’Apple Mail et de Gmail, il appréciera certainement l’animation.
• N’employez jamais de choses comme :
  • Flash ;
  • JavaScript ;
  • les vidéos ;
  • l’audio ;
  • les formulaires.

Leur prise en charge est minimale, voire inexistante.

E-mail animé d’Adobe

Bonnes pratiques de développement d’e-mails HTML

Pour profiter de tous les bénéfices du design d’e-mail, vous devez vous assurer que le cœur de la newsletter (structure, mise en page et blocs fonctionnels) fonctionne comme prévu. Suivez donc les bonnes pratiques de développement d’e-mails HTML. Cela compte plus que la plupart des expéditeurs ne l’imaginent : sur les e-mails que nous testons, seuls 30 % passent notre contrôle des bonnes pratiques HTML, ce qui veut dire que l’immense majorité laisse place à des problèmes de rendu et de délivrabilité que les étapes ci-dessous vous aident à éviter.

Tirer le maximum des tableaux

Vous aimeriez utiliser flexbox ou grid dans votre mise en page HTML, mais c’est malheureusement impossible : les clients de messagerie ne prennent pas en charge ces fonctionnalités CSS particulières. Vous pouvez essayer les div et les flottants, mais leurs capacités sont elles aussi limitées. Pour jouer la sécurité, tout ce que vous pouvez faire, c’est utiliser des tableaux. Ce sont les outils les plus fiables pour construire une mise en page.

Quand vous utilisez des tableaux, souvenez-vous du conseil général : restez simple et tenez-vous à une structure sur une colonne. Vous pouvez tout de même tenter des mises en page à deux ou même trois colonnes si vous envoyez vos newsletters à une audience qui les ouvre sur ordinateur de bureau ou sur portable.

Pour construire une structure complexe, vous pouvez imbriquer les tableaux. Gardez toutefois plusieurs points importants en tête :

• Employez l’attribut « align=left » avec une largeur fixe sur chaque tableau pour les disposer horizontalement.
• Évitez les cellules de tableau vides, car certains clients de messagerie peuvent les interpréter de travers. À la place, vous pouvez utiliser un caractère d’espace insécable dont la taille est définie en CSS.
• Supprimez tout espace entre les balises, il peut casser la mise en page.
• Tirez le maximum des attributs natifs du tableau comme cell padding, valign, align et width pour fixer les dimensions ou positionner les éléments dans les cellules.
• Utilisez un seul tableau parent.

Les tableaux HTML

Rester prudent avec les styles CSS

Les styles CSS sont l’un des points les plus faibles du développement d’e-mails. La majorité des fonctionnalités modernes de CSS3 ne sont pas prises en charge par les clients de messagerie. S’y ajoutent de nombreux interdits de mise en forme. Vous devez par exemple vous tenir à l’écart de pratiques aussi courantes que :

• les déclarations de style composées ;
• les déclarations raccourcies ;
• les sélecteurs complexes ;
• les pseudo-éléments ;
• les propriétés de mise en page.

Ce n’est pas tout : pour les styles en HTML, c’est ici que vous devez recourir aux styles en ligne, une pratique largement jugée mauvaise pour les sites web mais qui sauve la vie du design d’e-mail.

Pire encore : si vous voulez jouer la sécurité, il vaut mieux utiliser

• CSS2 plutôt que CSS3,
• les attributs HTML plutôt que le CSS,
• padding plutôt que margin,
• background-color plutôt que background.

Passer au responsive

Le design responsive est l’une des bonnes pratiques HTML les plus cruciales, puisque le web mobile est aux commandes aujourd’hui. Voici les principales recommandations qui aident un design d’e-mail à s’adapter avec élégance aux différentes tailles d’écran :

• Utilisez une mise en page sur une colonne pour éviter de réorganiser des éléments, ce qui peut être délicat avec des tableaux imbriqués.
• Utilisez des media queries pour soigner le design à chaque point de rupture important.
• Redimensionnez les images pour qu’elles tiennent dans l’écran. Centrez-les aussi, pour que l’information vitale saute aux yeux immédiatement.
• Ajustez la taille de police à chaque point de rupture. Souvenez-vous que les petits écrans exigent une police plus grande que vous ne le pensez. Vérifiez aussi que l’interlettrage et l’interligne créent un confort de lecture optimal.

Il y a plusieurs façons de réussir un design responsive : des media queries avec un jeu de points de rupture, ou une mise en page fluide dont les calculs sont faits côté CSS. Chaque approche a ses avantages et ses inconvénients.

Consultez ces articles utiles pour partir sur de bonnes bases :

• Design d’e-mail responsive : conseils et points de vigilance
• Comment créer un modèle d’e-mail responsive

Enfin, et ce n’est pas le moins important

Quand vous créez un design responsive, il est vital de respecter les standards du bon code, à savoir :

• gardez votre code aussi léger que possible ;
• gardez votre code propre ;
• structurez votre code ;
• ajoutez des commentaires ;
• contrôlez et recontrôlez non seulement la logique et la structure, mais aussi la syntaxe.

Exemple de design d’e-mail responsive

Déployer les protocoles d’authentification

Les protocoles d’authentification (SPF, DKIM et DMARC) apportent une couche de sécurité à vos e-mails. Ils ne sont pas obligatoires, mais ils sont vivement recommandés pour toute entreprise. Plusieurs bonnes raisons plaident pour leur mise en place :

1. Ils aident à combattre la cybercriminalité.
2. Ils aident à établir un lien clair et transparent entre les abonnés et l’expéditeur.
3. Ils aident à augmenter votre réputation d’expéditeur, ce qui améliore la délivrabilité avec des services et les taux d’ouverture.
4. Ils font paraître fiables même les entreprises à faible réputation.
5. Ils permettent aux entreprises d’établir une politique concernant les newsletters rejetées.
6. Ils donnent des indications sur ce qui s’est passé dans l’écosystème expéditeur-destinataire.
7. Ils vous donnent une vraie chance d’arriver en boîte de réception, parce que la plupart des ESP s’en servent comme facteurs principaux pour décider du sort d’un e-mail.

SPF, DKIM et DMARC aident les professionnels de l’emailing à faire arriver leurs e-mails à destination sains et saufs. Ils doivent donc être en place.

Mettre en place l’en-tête List-Unsubscribe et le reverse DNS

En plus des protocoles d’authentification, il y a une chose de plus à régler avec l’administrateur de votre serveur de messagerie : mettre en place un en-tête list-unsubscribe et une résolution DNS inverse.

Ces deux mécanismes n’ont aucun rapport entre eux, mais ils travaillent vers le même but : faire paraître votre e-mail digne de confiance et votre entreprise fiable.

Regardons-les d’un peu plus près.

L’en-tête list-unsubscribe est un en-tête d’e-mail qui contient la commande permettant de désabonner un lecteur directement d’une liste de diffusion. Il porte des instructions qui indiquent aux clients de messagerie quel mécanisme intégrer à l’e-mail pour que les lecteurs puissent se désabonner vite et sans douleur. Notez qu’un lien de désabonnement dans le corps HTML de l’e-mail ne suffit plus aujourd’hui. Pour que vos lecteurs se sentent à l’aise dans la relation et pour garantir aux ESP que votre entreprise respecte la loi, il est important de mettre en place un en-tête list-unsubscribe.

La résolution DNS inverse est une technique d’interrogation qui associe noms de domaine et adresses IP. Elle est au cœur de nombreux instruments d’analyse. C’est aussi l’un des nombreux facteurs que les ESP prennent en compte pour juger de l’authenticité de votre newsletter. Si le reverse DNS n’est pas configuré, les ESP peuvent facilement rejeter l’e-mail venu de ce serveur. Vous devez donc demander à votre fournisseur de service de messagerie de le configurer pour votre domaine, car ce n’est pas fait par défaut.

Contrôler les blacklists

Personne ne veut traiter avec des entreprises blacklistées, et personne ne se demande comment elles y sont arrivées. Votre réputation est tout : elle doit être irréprochable. Point final. Les blacklists, ces listes noires, peuvent donc être une véritable malédiction. Elles peuvent tout détruire, de votre réputation d’expéditeur dans les étendues numériques jusqu’à la réputation de votre marque dans le monde réel. Voici leurs conséquences néfastes pour votre marque :

• dégradation de la réputation d’expéditeur ;
• dégradation de la réputation de la marque ;
• perte de chiffre d’affaires ;
• perte de clients et de fans.

Le problème principal des blacklists, c’est qu’il est ridiculement facile d’y entrer et de se faire bloquer. Par exemple, si vous franchissez les limites des bonnes pratiques de l’e-mail HTML, ou si vous vous emballez pendant les fêtes et envoyez trop d’e-mails à vos abonnés, vous pouvez très vite vous attirer des ennuis.

Le deuxième gros problème des blacklists, c’est que vous n’êtes pas averti que vous y êtes. Vous restez dans le noir pendant que la blacklist commence à détruire votre réputation d’expéditeur et à réduire à néant votre délivrabilité et vos taux d’ouverture.

Le troisième problème, c’est qu’il existe plus d’une centaine de blacklists sur le web : blacklists de malwares, blacklists DNS, blacklists d’adresses IP, blacklists d’hameçonnage, blacklists de spam. Chacune a sa politique et ses critères. Toutes n’ont évidemment pas le même impact sur votre campagne, mais à la fin, même une blacklist peu connue peut ruiner votre stratégie marketing.

Il est donc crucial de rester à l’écart des blacklists. Comme le dit l’une des bonnes pratiques de l’e-mail HTML, contrôlez les blacklists régulièrement et agissez vite. Vous pouvez par exemple utiliser des outils comme

• Unspam.email,
• Spamhaus Block List,
• Barracuda.

Si vous y êtes, ne paniquez pas. Rendez-vous sur le site officiel du fournisseur de la blacklist et prenez connaissance de la procédure de sortie. Corrigez tous les problèmes de votre campagne, de votre domaine, de votre adresse IP et de votre serveur de messagerie, puis déposez une demande de délistage.

Contrôle de blacklist par Unspam.email

Défendre l’accessibilité

L’accessibilité reste toujours négligée par les développeurs d’e-mails, surtout parce qu’ils la considèrent comme une prérogative du web design. Pourtant, votre newsletter numérique devrait elle aussi être accessible à toute personne. Un handicap ne devrait jamais être un obstacle. C’est aussi plus atteignable que sa réputation ne le suggère : sur les e-mails que nous testons, 84 % passent les contrôles d’accessibilité, donc les pratiques ci-dessous sont largement à la portée de la plupart des expéditeurs.

Suivez donc ces bonnes pratiques de l’e-mail HTML pour garantir un niveau d’accessibilité correct :

• Adoptez un code sémantique. Une mise en forme correcte, avec des balises pour les titres ou

  pour les paragraphes, aide les lecteurs d’écran à interpréter correctement le corps HTML de l’e-mail. Cela améliore aussi le confort de lecture et permet de naviguer facilement dans le contenu.

• Renseignez tous les attributs essentiels. Cela comprend l’attribut « lang » pour définir la langue, la balise « title » pour définir le titre de l’e-mail, et « Content-Type » avec la balise méta « charset » pour encoder correctement les caractères. Cette démarche évite non seulement de casser le rythme de lecture de l’abonné, mais garantit aussi que le corps HTML de l’e-mail est valide du point de vue du code.
• Renseignez le texte alternatif quand il le faut. Mettre un alt sur les images est une pratique bien connue. Il est toutefois important de comprendre que toutes les photos n’en ont pas besoin. Les textes alternatifs sont obligatoires uniquement pour les éléments qui apportent de la valeur au lecteur. Si l’image est redondante, elle ne doit pas porter de texte alternatif, puisqu’il serait inutile. Idem pour les éléments décoratifs ou le matériel graphique qui ne joue qu’un rôle esthétique. Notez aussi qu’un texte alternatif peut être mis en forme.
• Garantissez un contraste optimal. Selon WCAG 2.0, il doit être d’au moins 4,5:1.
• Garantissez une hiérarchie de l’information correcte et une structure logique au corps HTML de l’e-mail.
• Capitalisez sur ARIA. Les Accessible Rich Internet Applications sont un mécanisme puissant qui aide les lecteurs d’écran à mieux comprendre la situation. Suivez ces conseils éprouvés :
  • Réglez role sur « Presentation » pour chaque tableau qui sert à construire la mise en page.
  • Réglez role sur « article » pour chaque bloc d’information.
  • Réglez role sur « img » pour chaque image.
  • Réglez role sur « listitem » pour indiquer une liste.

Consultez Accessibilité du design d’e-mail : pourquoi il est important de l’améliorer pour en savoir plus sur ce sujet.

Tout tester

Quoi que vous créiez, il est crucial de mener des tests réguliers. C’est l’une des bonnes pratiques de l’e-mail HTML les plus importantes et, malheureusement, les plus négligées. Des contrôles réguliers garantissent que tout va bien avec votre e-mail et votre campagne. Avant d’envoyer un e-mail à vos clients, assurez-vous donc d’avoir fait ceci :

• Contrôlez la grammaire. Personne n’aime les coquilles dans le corps HTML d’un e-mail. Elles font paraître votre marque incompétente et bon marché. Suivez la checklist de Comment créer et vérifier une newsletter avant l’envoi pour garantir un corps HTML sans erreur.
• Contrôlez la compatibilité des appareils avec un test de rendu d’e-mail gratuit pour repérer les problèmes de rendu qui vous ont échappé. C’est l’un des enjeux les plus importants, puisque garantir que votre e-mail HTML fonctionne de la même façon dans tous les clients de messagerie populaires, sur tous les appareils et dans tous les navigateurs relève du cauchemar. Même si vous avez parfaitement fait vos devoirs et segmenté vos abonnés selon les appareils, il reste important de vous assurer que votre design est beau quoi qu’il arrive. Si le prix de la prévisualisation dans tous les clients de messagerie vous inquiète, notre alternative à Litmus couvre les mêmes contrôles de rendu sans le coût d’un poids lourd.
• Contrôlez les blacklists et le spam. Cet article utile, Vérifier les newsletters pour le spam et tester la délivrabilité, vous en dira plus sur le sujet.
• Contrôlez le score global de votre e-mail HTML. Il est temps d’entrer plus profondément dans la santé de votre campagne d’emailing actuelle. Avec des outils professionnels comme Unspam, vous pouvez repérer vite ce qui pourrait vous coûter une place en boîte de réception. Unspam contrôle des aspects vitaux comme
  • les protocoles de sécurité SPF, DKIM et DMARC, pour savoir s’ils sont correctement configurés ;
  • l’objet, pour savoir s’il est à l’épreuve du spam ;
  • le corps HTML de l’e-mail, pour savoir s’il suit les bonnes pratiques et ne déclenche ni les filtres antispam ni les blacklists, et bien plus encore.

Enfin, et ce n’est pas le moins important, faites des tests A/B. Soigner le design HTML de votre e-mail ne suffit pas à garantir la réussite de la campagne : il est crucial de comprendre comment vos abonnés réagissent au design, à l’offre et au propos de la newsletter, puisque chacun a ses goûts. Une heatmap d’e-mail rend cette réaction visible, en montrant exactement où les lecteurs regardent et cliquent, pour que vous puissiez déplacer l’appel à l’action là où l’attention se trouve déjà. Pour cela, vous devez lancer des tests A/B. Ils vous donneront des indices sur ce qu’il faut inclure dans votre newsletter pour obtenir la bonne réaction de vos abonnés et transformer des prospects en clients qui achètent.

Des moyens simples de créer un e-mail HTML

Ce qui est formidable dans le développement d’e-mails HTML, c’est que personne n’a dit que vous devez tout faire vous-même. Créer un e-mail correct est un défi : il y a tant de pratiques à respecter, tant d’instruments à mobiliser et tant de contrôles à mener. Vous pouvez pourtant vous en sortir facilement avec un peu d’aide.

Par exemple, si vous savez coder, vous pouvez profiter de modèles d’e-mail HTML prêts à l’emploi qui offrent une base fiable sur laquelle bâtir. Découvrez ces modèles d’e-mail HTML gratuits.

Si vous n’avez aucune compétence technique, vous pouvez déléguer cette tâche à des outils qui font tout le gros travail, comme Postcards. Postcards est l’un des atouts les plus populaires et les plus fiables des professionnels de l’emailing partout dans le monde. Il embarque un créateur de modèles d’e-mail en glisser-déposer intuitif, des centaines de blocs magnifiques faits main et éprouvés sur le terrain, des options de personnalisation pratiques et de nombreuses fonctions comme l’historique de versions ou l’intégration native avec des ESP populaires comme Mailchimp. C’est aussi notre premier choix parmi les meilleurs créateurs de modèles d’e-mail pour 2026.

Postcards

Conclusion

Soyons honnêtes : le design d’e-mail est resté à l’âge de pierre. Nous ne pouvons pas utiliser les fonctionnalités CSS modernes ni mettre en place du JavaScript pour fournir des solutions de repli. Nous restons avec des solutions rares qui ne s’affichent même pas de la même façon dans tous les clients de messagerie. Résultat : nous devons affronter de nombreux défis en créant un design d’e-mail correct. Cela ne veut pas dire que nous ne pouvons pas y arriver.

Pour franchir tous les obstacles, il est essentiel de suivre les bonnes pratiques de l’e-mail HTML, qui font une énorme différence sur la façon dont votre newsletter s’affiche dans les différents clients de messagerie et sur la façon dont votre audience cible réagit à votre campagne, et bien sûr de profiter des outils créés pour aider les professionnels de l’emailing à sentir un sol solide sous leurs pieds.