Zoom | Comment mieux délivrer vos messages grâce à un contenu email & HTML optimisé ?

Agir sur votre délivrabilité avec un contenu email & HTML optimisé

Les outils de messagerie ne sont pas soumis aux normes édictées par le W3C (World Wide Web Consortium). Chacun interprète différemment le code HTML et a développé ses propres spécificités et restrictions. Apprendre à les connaître et à les respecter est donc essentiel pour minimiser les risques de mauvais affichage de vos messages et, par rebond, de mauvaises performances. Des chiffres démontrant un mauvais engagement de vos contacts seront des signaux négatifs remarqués par les filtres anti-spam. Pour que vos messages restent lisibles et génèrent de la réactivité, soignez votre code, images, textes et liens.

Les bonnes pratiques de contenu email & spécificités HTML qui favorisent la délivrabilité

• La majorité des outils de codage HTML sont optimisés pour la création de pages web. Afin de maximiser leur compatibilité avec des outils de messageries très variés, le code des emails répond à des critères et des normes strictes, différents du web. Préférez l’utilisation d’outils de conception de messages intégrés aux plateformes de routage email ou d’éditeur spécifique à ce canal (appelé également “email builder”). Les solutions les plus évoluées intègrent même des outils de templating et l’intégration native du Responsive Design pour vous faciliter la tâche.
• Composez les messages dans une structure type “tableau” de 600 à 650 pixels de large. Réglez l’épaisseur des bordures du tableau à 0 pour les rendre invisibles.
• Respectez un ratio texte/image de 70/30 maximum et ne misez pas tout sur des visuels. En effet, un nombre non négligeable d’internautes consulte leurs emails sans en activer les images. Votre message risque donc d’être illisible.
• Préférez des polices standards (système) pour le Web (Arial, Times New Roman, Verdana…), sans quoi celles-ci seront automatiquement remplacées sur les clients de messagerie (Helvetica pour Apple Mail, Arial sur Gmail, Calibri sur Microsoft Outlook).
• Utilisez la référence hexadécimale pour définir une couleur (exemple : #ffffff et non “white” ou rgb 255, 255, 255).
• Utilisez avec parcimonie les conteneurs tels que <div>, <article>, <nav>, <span> car certains clients de messagerie ne les interprètent pas correctement.
• Utilisez uniquement des images au format GIF (.gif) ou JPEG (.jpg) pour vous assurer d’un bon affichage. Si vous souhaitez utiliser du PNG (.png), ayez à l’esprit que la transparence ne fonctionne pas sur certains clients de messagerie. Le GIF animé, bien que de plus en plus largement accepté sur les webmails, peut encore parfois poser des problèmes d’affichage sur des outils plus anciens. Pensez à rendre le contenu de la première image le plus pertinent possible car elle sera possiblement la seule visible par votre destinataire.
• Enregistrez vos images en RVB, et non en CMJN, pour ne pas rencontrer de problème d’affichage sur certains navigateurs.
• Définissez la largeur de toutes vos images sans exception (balise “width”) sous peine de les voir totalement déformées sur Outlook ou Lotus Notes. Si vous
  utilisez une image de fond dans votre message, ajoutez-lui une couleur de fond (“bgcolor”) car l’attribut « background » n’est pas bien interprété par Outlook.
• Ajoutez un texte alternatif à l’affichage de vos images avec l’attribut “alt”.

« Deux points sont essentiels en matière de création de messages : la qualité technique de conception de l’email avec le respect desprérequis HTML propre à l’email. Mais la qualité rédactionnelle, et de contenu au global, doit elle aussi concentrer toute votre attention. Il est important de vous projeter et d’envisager comment votre destinataire va le percevoir et réagir. Laissez-vous guider par les attentes et centres d’intérêt de votre audience, en étant toujours fidèle à votre promesse lors de l’inscription. Côté format, un message très long est par exemple assez inadapté au canal email et aux comportements actuels des contacts. Ils accorderaient moins de 8 secondes d’attention par message. Votre challenge est donc d’associer qualité des contenus et qualité de création pour générer de l’intérêt et de la réactivité. »

Stéphane, spécialiste délivrabilité Dolist

Les points de vigilance à connaitre pour un contenu email & HTML optimisés pour la délivrabilité de vos messages

• Évacuez les commentaires de votre code HTML (cela n’a pas d’utilité et alourdit le code).
• Proscrivez l’utilisation de raccourcisseurs d’URL, y compris ceux développés en interne. Ce type de liens étant utilisé par les spammeurs et les phishers pour camoufler les liens néfastes dans leurs emails, ces derniers se font systématiquement filtrer.
• Utilisez toujours des liens absolus pour vos appels à l’action (liens débutant par http). N’y intégrez aucun caractère spécial ni espace. Si les pages de destination disposent de la protection https, vos liens doivent alors également utiliser ce chiffrement pour éviter une rupture de la chaine de protection.
• Vérifiez la validité de tous les liens contenus dans votre message lors de la phase de BAT, avant et après leur réécriture par votre plateforme d’emailing.
• Evitez autant que possible l’ajout de pièces jointes à vos messages. Ce type d’élément étant très souvent utilisé comme vecteur d’attaque par les pirates informatiques, le risque de rejet des messages par les filtres anti-spam est donc élevé. Il est préférable d’inclure un lien dans le corps du message vers la page où votre destinataire pourra télécharger le document ou bien directement vers le document hébergé en ligne.
• Oubliez les zones de clics “Map Area” qui ne sont pas prises en compte par les webmails. Bannissez les langages XHTML, PHP, Javascript, Flash… du code de votre message email, perçus comme risqués en termes de sécurité. Seuls l’HTML et le CSS sont acceptés par les filtres anti-spam des outils de messagerie. Attention tout de même, les styles CSS utilisés dans vos emails doivent y être directement intégrés (“CSS inline”) car les feuilles de style externes (hébergées sur votre site par exemple) ne sont pas prises en charge par les logiciels de messagerie et les webmails.
• Limitez nombre de classes CSS présentes dans votre message afin de ne pas alourdir le poids de votre email.
• Veillez au poids de votre message ! Pas plus de 60Ko pour passer la barrière des filtres anti-spam, et globalement le plus léger possible pour un message moins énergivore. D’autre part, s’il dépasse 100 Ko, votre message sera tronqué sur certaines messageries.
• N’utilisez pas de façon excessive les majuscules ou les couleurs trop vives qui peuvent entraîner l’assimilation de votre email à du courrier indésirable par les filtres anti-spam. N’utilisez que deux polices de caractères dans un même message.
• Ne négligez pas les balises et intégrez l’attribut target=“_blank” afin que le lien s’ouvre dans une nouvelle fenêtre.
• N’oubliez pas le codage des caractères spéciaux (« è » = “è”, « à » = “à”, etc.) et des signes HTML utilisés dans du texte (« » = “”, « > » = “>”, etc.). Puis vérifiez le bon affichage avant envoi.
• Évitez l’affichage d’une bordure disgracieuse autour de votre image, indiquez l’attribut “border=0” dans vos balises <img>. Intégrez le style=“display:block;” dans les balises <img> pour supprimer les espaces blancs qui apparaissent autour des images sur Outlook.com et Gmail.