Un des éléments que nous proposons lors d’un audit des pratiques emailing de nos clients, c’est l’analyse des emails. Afin de réaliser cette étude, nous avons mis en place une grille d’analyse qui nous permet d’évaluer la qualité du code, de l’ergonomie et de l’état général de l’email. Avec le temps, nous faisons évoluer cette grille pour rester au plus proche des évolutions tant en termes techniques qu’en bonnes pratiques marketing. Cette mise à jour est donc l’occasion d’écrire un article pour vous en dire un peu plus sur les points que nous prenons en compte.
Audit d’ergonomie des campagnes email
Pour qu’un email soit efficace, il faut que son message soit clair et précis ; que les informations pertinentes soient immédiatement accessibles, sans chercher. Et il faut également que l’email soit lisible avec le moins d’intervention de la part de l’utilisateur.
Le rendu de l’email
Le premier point, et le plus important, est évidemment d’avoir un rendu cohérent à travers l’ensemble des clients emails. Ça peut sembler évident, mais il faut tester l’email à travers l’ensemble des clients emails majeurs et ceux pertinents par rapport à votre cible. Des dégradations peuvent apparaître, et ce n’est pas forcément grave, tant que l’email reste clair et lisible. Un exemple classique : les coins arrondis qui disparaissent sous Outlook vont rendre l’email moins “joli”, mais n’impacteront en rien sa lisibilité. Par contre, si vos 3 colonnes prennent des largeurs maximales et forcent un scroll horizontal, alors il y a un souci.
La lisibilité du contenu
Le deuxième point, c’est la hiérarchisation de l’information. Il faut garder en tête que la plupart des personnes que vous ciblez sont bombardées d’email commerciaux, et que le temps d’attention sur un email est relativement court. Si l’objectif de votre message n’est pas clair, que les informations sont éparpillées dans un design haut en couleur et non aéré, mais peu lisible, avec peu de marges, alors vous passez à côté d’une partie de votre audience. Un email doit avoir un objectif précis, et son design, son contenu, doivent servir cet objectif. Attention que nous ne regardons pas ici le contenu, mais bien la mise en forme et la lisibilité. L’évaluation rédactionnelle se fera dans la suite de l’audit, mais pas au travers de cette grille.
Et s’il y a quelques années encore le rendu mobile n’était pas une priorité, il est maintenant capital d’avoir un email tout aussi cohérent sur des écrans plus petits.
Toujours dans cet esprit de délivrer votre message à votre cible le plus rapidement et de manière la plus claire possible, voici une liste de points plus concrets à garder à l’esprit :
Contenu textuel présent en HTML
Du contenu présent sous forme d’image présente plusieurs inconvénients. Cela nécessite souvent un clic en plus de la part de l’utilisateur pour afficher les images (un clic = une action supplémentaire —> vous perdez donc déjà une partie de l’audience). Les images demandent également un certain temps à se charger, en fonction de la connexion de la personne et de la taille de l’image. Et enfin, il faut que l’image soit de qualité suffisante pour que le texte soit parfaitement lisible, et que le texte alternatif de l’image soit correctement renseigné (notamment pour l’accessibilité, nous y reviendrons).
Et c’est encore plus important pour les appels à l’action !
Une largeur de template ne dépassant pas 640 pixels
Même avec des écrans larges, les clients emails proposent souvent des panneaux latéraux qui viennent réduire la zone d’affichage effective de l’email. Pour éviter d’avoir un scroll horizontal qui apparaît, gardez donc la largeur de votre email en dessous de 640 pixels.
Lisible sans images
Avoir des images dans un email n’est pas un souci, bien au contraire. Il faut simplement les utiliser à bon escient. Une image doit venir soutenir le message, elle ne doit pas être le message. Votre email doit rester lisible même sans les images. Et quand les images sont affichées, alors votre contenu s’en trouvera renforcé. De cette manière, encore une fois, vous évitez une action supplémentaire de la part de l’utilisateur pour qu’il reçoive votre message.
Bouton dans la partie supérieure de l’email
Ici aussi, on va éviter à la cible de devoir chercher trop loin le bouton qui permet de faire l’action que vous attendez de l’utilisateur. Plus il sera bas, moins il sera évident pour l’utilisateur que vous attendez une action de sa part.
Poids inférieur à 500ko
Toujours pour afficher votre email le plus rapidement possible, nous recommandons d’éviter d’avoir un email et ses images qui pèsent trop lourd. Plus les images seront lourdes, plus le message sera long à être affiché. 500ko est un nombre un peu sorti du chapeau, et ce n’est pas une valeur qui se veut trop précise. Un email qui fait 700ko ne s’affichera pas plus rapidement (pas de manière distinguable pour un humain en tout cas). Mais au plus l’email sera lourd, au plus il sera long à s’afficher, surtout dans le cas de connexions mobiles.
Analyse de code HTML pour l’email
La partie technique de votre email aura bien entendu un impact sur le rendu, mais également sur les différents filtres anti-spam et en dira long sur la capacité de développement HTML de l’émetteur, entre autre le fait d’avoir un code HTML lisible.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Sémantique HTML correcte
Écrire un template email se fait au moyen du langage HTML, et ce langage possède des règles. Les respecter vous permettra tout d’abord de vous assurer plus de chances d’avoir un rendu correct, mais également de moins éveiller les soupçons des filtres anti-spams. C’est vraiment LE point critique, dans la mesure où le code HTML représente la structure avec laquelle vous présentez votre contenu.
Images et textes alternatifs
L’attribut HTML alt est important. Premièrement, nous l’avons déjà mentionné, pour l’accessibilité. Si vous avez du contenu textuel dans des images, il ne sera pas pris en compte par un lecteur d’écran si l’attribut alt n’est pas renseignée. Deuxièmement, il peut également servir aux filtres anti-spam. Donc même si votre image est purement décorative, il sera important de lui coller un attribut alt ; même si ce dernier reste vide.
Attributs HTML et propriétés CSS
Les attributs HTML et les propriétés CSS sont parfois très proches, mais ils ont chacun leurs règles propres, et il convient de ne pas les confondre. Par exemple, l’attribut width prendra comme valeur soit un nombre entier sans unités, soit un pourcentage. La propriété CSS width pourra elle prendre un nombre entier avec unités, un pourcentage, ou encore d’autres valeurs prévues. Mélanger les deux montre une mauvaise connaissance du code HTML, et surtout risque de provoquer des problèmes de rendu.
Doctype
Au fil des années, le langage HTML a évolué, et il en existe différentes versions avec chacune de légères variations. La dernière version en date est le HTML 5. La doctype est une petite ligne de code, la toute première de l’email, qui indique sur base de quelle version votre code HTML a été écrit. Ça peut sembler anodin, mais cela peut avoir un fort impact sur le rendu de votre code.
Code HTML optimisé
Un même template email peut être écrit en HTML de plusieurs manières différentes. L’idéal est de factoriser le plus possible son code pour éviter d’avoir trop de lignes et un poids de fichier conséquent. Une raison marketing est de garder le poids l’email (sans compter les images) en dessous de 102ko. Au delà de cette limite, Gmail tronquera l’email et nécessitera une action en plus (si vous m’avez suivi jusqu’ici, vous savez que action supplémentaire = moins d’audience). Un autre point est de rendre le code plus lisible. Si un email à vocation a être réutilisé et modifié par un autre développeur, ce dernier devra être en mesure de lire et comprendre le code afin de le mettre à jour, même si les changements sont simples. Et enfin, l’éco-conception. Moins de poids signifie moins de place sur les serveurs, et donc moins de CO2 émis. On en reparle un peu plus bas…
Nomenclature CSS et indentation du code HTML
Il s’agit de mesure pour permettre à différents développeurs de gagner du temps en produisant de nouveaux emails sur base d’emails existants. Des noms de classes CSS explicites permettent au développeur qui lit le code de gagner parfois beaucoup de temps. Par exemple l’adaptation d’un texte sur mobile : si le texte passe de 30px en version desktop à 24px en version mobile, une classe nommée text-24 sera tout de suite compréhensible, alors qu’une classe nommée titre ne donnera aucune indication quand à son effet. L’indentation du code, elle, permet de lire le code HTML de manière beaucoup plus simple et claire. Après, tout dépendra de votre besoin, car ces mesures demandent souvent un peu plus de code. Et donc il s’agit d’un subtil équilibre entre vos besoins (e.g. email pouvant être repris par d’autres personnes) et d’autres priorités (e.g. éco-conception).
L’accessibilité
S’il y a encore quelques années presque personnes n’en parlait, l’accessibilité est un sujet qui devient de plus en plus important. J’entends souvent un raccourci entre “accessibilité” et “aveugle” ou “lecteur d’écran”. Si en effet, la partie technique de l’email aura un impact sur la capacité des lecteurs d’écrans à délivrer clairement le message de l’email, l’accessibilité touche bien plus que les personnes aveugles ou presque. Une personne peut avoir des problèmes de vues plus ou moins prononcés, et donc il faudra faire attention au contraste des couleurs. Ou encore à la taille du texte et son interlignage. Et les chiffres ne sont pas négligeables, 2,2 millards de personnes dans le monde sont atteintes de déficience visuelle Un message clair et concis dans son phrasé augmentera également l’accessibilité des personnes atteintes de troubles comme la dyslexie.
Si la partie technique de l’email, son code HTML, servira principalement aux lecteurs d’écrans, la partie design de l’email aura une grande importance sur l’accessibilité de l’email pour toute personne atteinte d’un handicap.
Éco-conception
Et enfin, l’éco-conception. La principale source d’émission de CO2 d’un email vient de son stockage et du stockage de ses ressources sur des serveurs.
Sans trop rentrer dans les détails, car nous avons déjà un guide assez complet sur le sujet, un petit rappel quand même : les serveurs sur lesquels sont stockés les emails consomment de l’énergie, et (très sommairement), cela se traduit par des émissions de CO2. Au plus il faut de serveurs pour stocker les données, au plus il faut d’énergie, et donc d’émissions de CO2. Donc réduire le poids de l’email de seulement quelques kilo-octets peut déjà avoir un impact non-négligeable. À titre indicatif, 10ko sur quatre emails par mois envoyés à 500.000 destinataires, ça représente 240Go par an…
Il est également possible de réduire le poids des images, de ne pas appeler de typographies exotiques ou de CSS externes (ce qui est déconseillé de toute manière).
Conclusion
Vous avez désormais un aperçu de notre approche pour évaluer la qualité d’un email. Il s’agit d’une prestation que nous proposons dans le cadre d’un audit qui couvre tous les aspects de la stratégie emailing. Et si vous avez besoin d’un rappel sur comment coder un email, on a un guide pour ça !
