Email HTML : mieux délivrer vos messages grâce à un design et un code optimisés

Design et code HTML : un levier pour votre délivrabilité

Les messageries ne respectent pas les normes du W3C (World Wide Web Consortium) : chacune interprète différemment le code HTML, avec ses propres spécificités et restrictions. Les connaître et les respecter réduit les risques de mauvais affichage et, par rebond, de mauvaises performances. Pour que vos messages restent lisibles et suscitent des réactions, soignez votre code, vos images, vos textes et vos liens.

Les bonnes pratiques de design et de code HTML qui favorisent la délivrabilité

• Utilisez un outil conçu pour l’email. La plupart des outils de codage HTML sont pensés pour le web. Le code des emails répond à des règles strictes et différentes : privilégiez l’éditeur intégré à votre plateforme ou un email builder spécialisé. Les plus aboutis intègrent des modèles et gèrent nativement le responsive design.
• Structurez vos messages en tableaux de 600 à 650 pixels de large, avec des bordures réglées à 0 pour les rendre invisibles.
• Gardez un équilibre texte/image d’au moins 60 % de texte et ne misez pas tout sur les visuels : de nombreux destinataires consultent leurs emails sans afficher les images, et un message composé d’une seule image devient illisible.
• Privilégiez des polices système (Arial, Verdana, Georgia, Times New Roman…). Les autres polices risquent d’être remplacées par une police par défaut, parfois Times New Roman sur Outlook. Si vous utilisez une police personnalisée, prévoyez toujours une police de secours.
• Définissez vos couleurs en code hexadécimal (par exemple #ffffff plutôt que « white »).
• Utilisez avec parcimonie les balises <div>, <article>, <nav> ou <span>, que certaines messageries interprètent mal.
• Choisissez des formats d’image compatibles : JPEG pour les photos, PNG pour les visuels avec transparence, GIF pour les animations légères. Le WebP n’est pas affiché par toutes les versions d’Outlook. Rendez la première image la plus pertinente possible, car c’est parfois la seule que voit votre destinataire.
• Enregistrez vos images en RVB, et non en CMJN, pour éviter les problèmes d’affichage.
• Définissez la largeur de toutes vos images (attribut « width ») pour éviter qu’elles ne soient déformées sur Outlook. Si vous utilisez une image de fond, ajoutez aussi une couleur de fond (« bgcolor »), car l’attribut « background » est mal interprété par Outlook.
• Ajoutez un texte alternatif à chaque image avec l’attribut « alt ».
• Anticipez le mode sombre : vérifiez que vos logos et textes restent lisibles lorsque la messagerie inverse les couleurs.

« Deux points sont essentiels en matière de création de messages : la qualité technique de conception de l’email avec le respect des prérequis HTML propres à 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, qui 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 pour un code HTML optimisé pour la délivrabilité

• Supprimez les commentaires de votre code HTML : ils sont inutiles et alourdissent le message.
• Proscrivez les raccourcisseurs d’URL, y compris ceux développés en interne : utilisés par les spammeurs pour masquer des liens malveillants, ils sont souvent filtrés.
• Utilisez des liens absolus en https, sans espace ni caractère spécial, pour ne pas rompre la chaîne de sécurité vers vos pages de destination.
• Vérifiez tous les liens lors du BAT, avant et après leur réécriture par votre plateforme d’envoi.
• Évitez les pièces jointes, très souvent utilisées comme vecteurs d’attaque et donc filtrées. Préférez un lien vers le document hébergé en ligne.
• Limitez-vous au HTML et au CSS. Javascript, Flash ou PHP sont bloqués par les messageries et perçus comme risqués. Les zones cliquables de type « image map » sont mal prises en charge par les webmails.
• Intégrez vos styles directement dans le code (« CSS inline ») : les feuilles de style externes ne sont pas prises en charge par les messageries. Limitez aussi le nombre de classes CSS pour alléger le message.
• Surveillez le poids : visez moins de 100 Ko de code HTML (Gmail tronque les messages au-delà de 102 Ko), moins de 200 Ko par image et moins de 500 Ko pour le message complet. Un message léger s’affiche plus vite et consomme moins d’énergie (voir nos pratiques d’éco-conception et les scores de taille de Campaign).
• Évitez l’excès de majuscules et de couleurs trop vives, associées aux messages indésirables. Limitez-vous à deux polices par message.
• Ajoutez l’attribut target= »_blank » à vos liens pour qu’ils s’ouvrent dans un nouvel onglet.
• Encodez correctement les caractères spéciaux : déclarez l’encodage UTF-8, ou utilisez les entités HTML (par exemple &eacute; pour « é », &laquo; et &raquo; pour les guillemets). Vérifiez l’affichage avant envoi.
• Supprimez les bordures et espaces parasites autour des images : ajoutez l’attribut border= »0″ et le style display:block; à vos balises <img>.