Les erreurs de codage des e-mails les plus courantes et comment les éviter

Malgré toutes les cloches et les sifflets de votre courrier électronique, les erreurs de codage peuvent le ruiner complètement. Un seul lien mal raccourci ou un mauvais format de couleur - et votre e-mail aura l'air misérable, surtout si un utilisateur décide de le vérifier via un smartphone au lieu d'un client de messagerie Web ou passe à un gadget avec une résolution d'écran différente.

Dans cet article, nous parlerons des erreurs courantes de codage des e-mails HTML et partagerons quelques conseils pour les éviter.

D'où viennent les problèmes d'affichage des e-mails ?

Pour faire simple, il y a deux raisons possibles pour lesquelles un utilisateur voit votre e-mail en dehors de la façon dont vous l'avez prévu. La première est liée aux caractéristiques techniques de l'appareil de votre utilisateur. Le second est le client de messagerie, pour être plus précis, son moteur de rendu.

Caractéristiques techniques de l'appareil d'un utilisateur

Il y a au moins deux caractéristiques techniques de tout appareil que vous devez prendre en compte :

1. Résolution de l'écran — la taille de l'écran, exprimée en pixels. Par exemple, l'iPhone X a une résolution d'écran de 1125 × 2436 pixels. Si votre email contient deux colonnes de texte, 600 pixels chaque colonne, il ne s'affichera pas correctement.
2. PPI, ou pixels par pouce — le nombre de pixels dans un pouce de l'écran. Le PPI de l'iPhone X est de 458. Imaginez : vous devez ajouter un bouton d'action dans votre e-mail. Si le bouton fait moins de 44 points, ce qui pour l'iPhone X signifie 132 × 132 pixels, cela prendra moins d'un tiers de pouce carré de l'espace de l'écran, et l'utilisateur pourra à peine appuyer dessus.

Une dernière chose à garder à l'esprit : les utilisateurs font souvent pivoter leurs appareils mobiles, de sorte que votre courrier électronique doit être soigné et avoir toutes les fonctionnalités en mode portrait et paysage.

Pour éviter les problèmes liés aux caractéristiques techniques de l'appareil de l'utilisateur, vous devez utiliser une conception d'e-mail réactive.

Tout d'abord, vous devez ajouter des requêtes multimédias dans l'en- head de votre e-mail. Par exemple, la @media screen et (max-width: 600px) signifie que la conception de l'e-mail sera optimisée si la largeur de l'écran est inférieure à 600 pixels. Si la largeur de l'écran est supérieure à 600 pixels, l'utilisateur verra la version à largeur fixe de cet e-mail.

Deuxièmement, vous devez créer un e-mail sous la forme d'un tableau contenant des cellules :

 <tableau>
<tr>
    <td>...</td>
</tr>
</table>

Ensuite, vous ajoutez un style pour chaque cellule, par exemple :

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Cependant, même après avoir pris ces mesures, vous pouvez toujours rencontrer des problèmes d'affichage de vos e-mails. La source du problème est le moteur de rendu du client de messagerie.

Un client de messagerie

La deuxième source de problèmes d'affichage possibles est le client de messagerie que vos destinataires utilisent pour ouvrir vos campagnes. La partie centrale d'un client de messagerie est un moteur de rendu. Il reçoit un e-mail sous la forme d'un long script de code, le traite et génère de la manière dont nous sommes habitués à recevoir des e-mails : du texte compréhensible, structuré et formaté avec des images, des liens et d'autres médias.

Jetez un œil à l'exemple ci-dessous. C'est un morceau de code d'un e-mail promotionnel, comme le voit le moteur de rendu de Gmail. Si cet e-mail a été affiché comme ça à un client potentiel, il aura à peine coupé le code et comprendra qu'il existe un code promo pour 40% de réduction.

Chaque client de messagerie a son propre moteur de rendu, ce qui signifie qu'un même e-mail, ouvert via différents clients de messagerie, peut avoir une apparence totalement différente.

Voici une liste des clients de messagerie les plus populaires dans le monde. Évidemment, vos destinataires en utilisent un ou même plusieurs pour ouvrir les e-mails que vous envoyez.

Tous ces clients de messagerie ont des particularités que vous devez prendre en compte lors du codage des e-mails HTML.

Par exemple, Apple Mail pour iOS ne prend pas en charge :

• propriété CSS de inline-size ;
• @media (orientation) requête média ;
• liens d'ancrage;
• Formats d'image HDR, PPM et SVG, etc.

Gmail prend en charge diverses propriétés CSS et requêtes multimédias, à l'exception de :

• box-shadow, text-shadow, et quelques autres propriétés CSS ;
• @media (prefers-color-scheme) requête média, et plus encore.

Erreurs courantes de codage des e-mails et comment les éviter

Le meilleur conseil général pour éviter les erreurs de codage des e-mails est de limiter votre inventaire au code pris en charge par la plupart des clients de messagerie, quel que soit l'âge de leurs versions. En termes simples, prendre du recul et coder comme s'il s'agissait de 1999. Par exemple, il est largement recommandé d'utiliser :

• CSS2 au lieu de CSS3,
• HTML4 au lieu de HTML5,
• la couleur au lieu des images d'arrière-plan,
• table-layout au lieu de <div> ,
• CSS en ligne au lieu de jeux de styles ou de blocs <style> .

Cette approche est censée éviter la plupart des problèmes d'affichage des e-mails. Mais examinons de plus près certaines erreurs de codage particulières qui peuvent ruiner votre courrier électronique et essayons de leur trouver des solutions.

Pas de version en texte brut

Problèmes potentiels. Certains clients de messagerie, tels que Outlook et Gmail, peuvent définir votre e-mail comme spam s'il n'a pas de version en texte brut. De plus, les clients de messagerie ont parfois des problèmes avec le rendu du code HTML. Pour cette raison, les e-mails HTML peuvent être affichés de manière incorrecte, tandis que les e-mails en texte brut ont toujours la même apparence.

La prévention. Ajoutez une version en texte brut dans votre e-mail. Heureusement, la plupart des fournisseurs de services de messagerie l'ajoutent automatiquement.

Vous pouvez implémenter des e-mails en texte brut dans votre stratégie de marketing par e-mail. Tout d'abord, ces e-mails semblent plus personnels et peuvent donc améliorer votre communication avec les abonnés. De plus, certaines personnes préfèrent aller directement au but de l'e-mail, et une mise en page colorée les rebute.

Utilisation de JavaScript, ActiveX, Flash, etc.

Problèmes potentiels. La plupart des clients de messagerie ne prennent pas en charge ces langages, frameworks et plugins, donc une partie de votre e-mail ne sera pas rendue et vos abonnés ne verront qu'un espace vide. De plus, l'e-mail peut être interdit par un logiciel anti-virus.

La prévention. Conservez les langages que vous utilisez pour coder les e-mails en HTML et CSS. Si vous avez besoin d'ajouter de la vidéo ou de l'audio, téléchargez-la sur un site Web et donnez-lui un lien.

Découvrez comment NiftyImages présente les nouvelles fonctionnalités du produit : la société a choisi une séquence d'images bien qu'il puisse s'agir d'une vidéo explicative.

Trop de redirections

Problèmes potentiels. Les redirections, bien que nécessaires pour l'analyse, peuvent faire plus de mal que de bien à votre e-mail. Par exemple, ils allongent considérablement le temps de chargement d'une page Web. Ensuite, il est possible que le navigateur d'un utilisateur bloque les redirections - ainsi, l'URL sera inaccessible.

La prévention. Essayez d'éviter les redirections. Mais si vous devez encore les utiliser, vérifiez combien de temps prend le chargement d'une URL de destination - testez votre e-mail avant de lancer toute la campagne. Tenez compte de l'expérience de vos abonnés : s'ils sont prêts à attendre le chargement de l'URL ou non.

Liens raccourcis

Problèmes potentiels. Les liens raccourcis mettent vos e-mails en danger de se retrouver dans le dossier spam. Le fait est que dans les liens raccourcis, l'URL de destination n'est pas claire. En termes simples, cela pourrait mener n'importe où. Naturellement, les pirates et les spammeurs en profitent.

La prévention. N'utilisez pas de liens raccourcis. Si votre objectif est de rendre votre e-mail soigné, sans URL longues, vous feriez mieux d'utiliser la balise HTML suivante : <a href="URL">...</a> . Vous pouvez insérer n'importe quelle URL ici, quelle que soit sa durée.

Si vous êtes toujours avide de liens raccourcis, raccourcissez vos propres URL au lieu d'utiliser des outils tiers. Au moins, scannez les listes noires des raccourcisseurs de liens à l'avance.

Taille du corps de l'e-mail de grande taille

Problèmes potentiels. Les clients de messagerie et les fournisseurs de services de messagerie ont des limites de taille de corps de courrier électronique, car ils sont conçus pour transférer des volumes d'informations relativement petits. Si vous ne respectez pas ces limites, votre e-mail peut être tronqué – sa fin sera masquée.

Jetez un œil à une newsletter d'un label de musique. Lorsqu'il est ouvert via Gmail, il est coupé.

Pour voir sa version complète, l'abonné doit appuyer sur un lien.

Une taille de fichier de corps d'e-mail importante peut également entraîner des problèmes de délivrabilité. De plus, en raison de sa grande taille, l'e-mail peut être considéré comme une menace pour la sécurité par le logiciel antivirus de l'utilisateur.

La prévention. Vérifiez les limites de taille du corps des e-mails de votre fournisseur de services de messagerie et des clients de messagerie utilisés par vos abonnés. Par exemple, Google revendique une limite de taille de corps d'e-mail de 200 Ko. Mais il est largement recommandé de limiter vos e-mails à 100 Ko afin de répondre aux exigences de la plupart des clients de messagerie. En fait, l'e-mail de l'exemple ci-dessus a une taille de 136 Ko.

Trop de polices et de couleurs

Problèmes potentiels. En raison des différences entre les clients de messagerie, toutes les polices et couleurs ne peuvent pas être affichées correctement. De plus, toutes les polices et toutes les couleurs ne se combinent pas bien les unes avec les autres, vous risquez donc de créer une conception de courrier électronique faible.

Vous devez également garder à l'esprit que les appareils de vos abonnés ont des paramètres d'écran différents, tels que la luminosité, par exemple. Et pendant que vous essayez de rendre votre e-mail plus vivant, les utilisateurs peuvent souffrir de cette émeute de couleurs.

C'est un exemple discutable de conception d'email : chaque bloc a ses propres couleurs ; cette abondance distrait l'utilisateur des informations les plus importantes.

Prévention . Choisissez des polices adaptées aux e-mails, telles que Arial, Comic Sans MS, Courier New, Times New Roman ou Verdana : elles sont prises en charge par les clients de messagerie les plus courants. La taille de votre police de texte ne doit pas être inférieure à 12-13 px ; sinon, un utilisateur devra zoomer sur votre e-mail ou se fatiguer les yeux.

En ce qui concerne les couleurs, vous ne devriez pas en utiliser plus de deux : une pour le bloc de texte général et une autre pour mettre en évidence les éléments importants, ainsi que pour les liens et les boutons. Assurez-vous que les couleurs que vous avez choisies correspondent à l'arrière-plan et qu'elles ont fière allure si un utilisateur passe en mode sombre.

Copier le code HTML d'un modèle d'e-mail à partir d'un éditeur de texte ou d'un site Web

Problèmes potentiels. Si vous utilisez Microsoft Word ou quelque chose du genre pour créer du texte pour votre e-mail, puis le copier, vous risquez d'attraper une mise en forme inutile, ce qui peut gâcher la mise en page de votre e-mail. Et si vous copiez des images ou des parties de texte d'un site Web, des éléments JavaScript ou Flash peuvent être ajoutés à votre courrier électronique.

La prévention. Pour coder un e-mail, utilisez des éditeurs de texte qui n'ajoutent pas leur propre mise en forme, comme le Bloc-notes pour Windows ou TextEdit pour Mac. Il existe également des outils en ligne qui peuvent nettoyer votre mise en forme, tels que TextCleanr. Vous pouvez également utiliser un outil HTML Cleaner, qui vous permet de créer un e-mail dans un éditeur convivial et de vérifier le code en même temps.

Utilisation de codes de couleur HEX à trois chiffres

Problèmes potentiels. Bien que les formats de couleur à trois et six chiffres soient équivalents, les clients de messagerie affichent parfois un format à trois chiffres d'une manière légèrement différente. Par exemple, avec Gmail, vous risquez d'obtenir du violet au lieu du noir que vous aviez prévu : la color: #000 se transforme en color: #500050 .

Prévention . En règle générale, respectez le format de couleur à six chiffres et assurez-vous de l'utiliser dans tout l'e-mail.

Pièces jointes

Problèmes potentiels. Habituellement, les spammeurs et les pirates attachent des fichiers à leurs e-mails. Si vous ajoutez une pièce jointe, elle peut être considérée comme une menace pour la sécurité.

La prévention. Donnez un lien vers une page de chargement de fichier au lieu d'ajouter le fichier directement à l'e-mail.

Voici un exemple de la façon dont vous pouvez accorder aux utilisateurs l'accès au fichier que vous avez promis. Faites attention à la façon dont le lien est désigné : il doit s'agir d'un texte compréhensible et cliquable afin que l'utilisateur sache ce qui va se passer lorsqu'il appuie sur le lien.

Texte alternatif manquant

Problèmes potentiels . Certains utilisateurs désactivent le téléchargement d'images dans leur navigateur. S'ils reçoivent un e-mail, y compris des images sans texte alternatif, ils ne verront que des espaces vides au lieu d'images et ne comprendront pas l'objet de l'e-mail.

Cela fonctionne de la même manière lorsque la connexion Internet de quelqu'un est trop faible pour télécharger les images assez rapidement. Le texte alternatif aide à résoudre ce problème d'une certaine manière : lorsque le téléchargement des images se passe mal, un utilisateur peut voir un texte à la place.

La prévention. Ajoutez un attribut alt à toutes les images que vous utilisez. Assurez-vous de le faire correctement — en l'ajoutant à une balise img : <img alt="text"> . Limitez le texte de remplacement à 125 caractères, espaces compris. Habituellement, il suffit d'ajouter quelques mots qui décrivent précisément l'image. S'il vous reste de la place, vous pouvez ajouter un peu de contexte à cette description.

Jetez un œil à un extrait d'un e-mail de Sephora.

Si vous consultez le code de cet e-mail, vous pouvez trouver un CTA comme texte alternatif pour l'image. Même si les utilisateurs ne voient pas l'image, ils comprendront toujours ce que propose la marque.

Mise en page image uniquement

Problèmes potentiels. Si votre e-mail ne contient que des images et ne contient aucun texte, vous pouvez rencontrer des problèmes de délivrabilité, d'affichage, etc. Par exemple, si un utilisateur bloque le téléchargement d'images, il ne verra littéralement rien dans votre e-mail. Deuxièmement, de nombreuses images agrandissent la taille du corps de l'e-mail et les clients de messagerie sont susceptibles de la couper. Troisièmement, un utilisateur ne pourra pas trouver votre e-mail dans un dossier via une recherche par mot.

La prévention. Lors de la création d'un e-mail, combinez du texte et des images. N'oubliez pas d'ajouter une version en texte brut de l'e-mail et du texte alternatif pour les images ; tenir compte des autres conseils que nous avons donnés ci-dessus.

Jetez un oeil à cet e-mail d'Ecwid. Il a une conception réactive qui inclut la disposition du tableau et les requêtes multimédias, telles que max-width: 570px . L'e-mail combine différents types de contenu : une image et un texte colorés et captivants. Le format de couleur à six chiffres est utilisé, par exemple color:#979797 ou color:#4A4A4A . Il n'y a pas beaucoup d'images dans l'e-mail, sa taille n'est donc pas trop grande. De plus, ne trouvez ni liens raccourcis ni redirections dans l'e-mail. Dans l'ensemble, cet e-mail répond à la plupart des recommandations ci-dessus.

Nous avons donc jeté un coup d'œil aux erreurs de codage des e-mails HTML les plus courantes. Appliquez nos conseils et n'oubliez pas de tester vos e-mails avant de les envoyer : utilisez au moins trois clients de messagerie populaires pour ouvrir votre e-mail ; si possible, vérifiez-le également via différents appareils. Les émulateurs seront également utiles.

Une autre façon d'éviter les erreurs de codage des e-mails

Il y a une vérité : vous ne ferez pas d'erreurs de codage HTML si vous ne codez pas. Heureusement, la conception d'e-mails sans code vous attend avec SendPulse.

Grâce à notre éditeur de glisser-déposer intuitif, nous vous avons déjà empêché de commettre des erreurs de codage des e-mails. Ajoutez simplement des images, du texte ou une vidéo à votre e-mail, définissez les polices et les couleurs en fonction du style de votre marque et ajoutez des liens vers vos pages de médias sociaux.

Pour rendre le tout encore plus simple, vous pouvez choisir parmi nos modèles d'e-mails gratuits. Tous les e-mails créés avec SendPulse sont réactifs, ils auront donc fière allure, quel que soit l'appareil choisi par l'utilisateur pour les ouvrir.

Liste de contrôle pour éviter les erreurs courantes de codage des e-mails HTML

Vous trouverez ci-dessous les principales règles permettant d'éviter les erreurs courantes de codage des e-mails HTML. En suivant ces règles, vous pouvez éviter les problèmes de délivrabilité et d'affichage de vos e-mails.

• Ajoutez une version en texte brut à vos e-mails.
• N'utilisez pas JavaScript, ActiveX, Flash ou autre. Si vous avez besoin d'ajouter de la vidéo ou de l'audio, téléchargez-la sur un site Web et donnez-lui un lien.
• Essayez d'éviter les redirections pour ne pas augmenter le temps de chargement d'une page Web.
• N'utilisez pas de liens raccourcis — transformez un morceau de texte ou une image en un lien en utilisant HTML.
• Essayez de limiter la taille du corps de votre e-mail à 100 Ko - ou au moins vérifiez les limites de votre fournisseur d'envoi et les clients de messagerie que vos abonnés utilisent le plus.
• Choisissez des polices adaptées aux e-mails, telles que Arial, Comic Sans MS, Courier New, Times New Roman ou Verdana.
• Essayez de ne pas combiner plus de deux couleurs dans un seul e-mail, sinon, cela semblera distrayant.
• Ne copiez pas le texte et les images de vos e-mails à partir d'éditeurs de texte tels que MS Word ou de sites Web : vous risquez d'attraper une mise en forme inutile.
• Utilisez un format de couleur à six chiffres.
• Ne joignez pas de fichiers - donnez plutôt un lien vers une page de chargement de fichiers.
• N'oubliez pas d'ajouter du texte alternatif aux images.
• N'envoyez pas d'e-mails uniquement avec des images - ajoutez toujours du texte.
• N'oubliez pas de tester un email avant de lancer une campagne. Utilisez au moins trois clients de messagerie et des appareils différents.

Et pour ne pas avoir à penser à tout cela, commencez à utiliser SendPulse gratuitement !