1/ L’absence de pré-header
Souvent oublié des marketeux et inconnu des développeurs, le pré-header permet pourtant de booster le taux d’ouverture. Il s’agit de la première balise en display:none ou visibility:hidden qui arrive dans le <body> et du texte qui s’affiche tout de suite après le sujet du mail.
Exemple sans pré-header : le texte alternatif du gif au début du corps de l’email s’affiche dans l’aperçu de l’email, on ne sait pas à quoi s’attendre.
Exemple avec pré-header : Les informations importantes sont affichées d’emblées, on reconnaît tout de suite l’intention de l’email.
Afin de bien intégrer un email et d’améliorer son taux d’ouverture, nous vous recommandons de prêter une attention tout particulière à cet élément.
2/ Ne pas utiliser des tableaux
Pour placer les éléments d’un email, il est quasiment impossible de se passer des tableaux.
Le support des attributs css display de type flex ou grid et float étant très partiel, les tableaux sont encore un moyen sûr d’avoir un layout cohérent sur toutes les plateformes. Ils sont encore nécessaires pour Outlook des versions 2007 à 2019 sur Windows, centrer le corps de l’email sur certains clients email et réaliser certains layouts avec des colonnes.
Le cas de Outlook sur Windows est vraiment singulier puisqu’il n’interprète pas les attributs css width, padding, background-color et border sur les balises div et retire même certains styles. Outlook représente presque 5% des utilisateurs de clients email et est encore très utilisé dans le monde professionnel, il est impensable de ne pas mettre en place des structures HTML alternatives dédiées à ce client email. Heureusement, pour un rendu optimal sur le maximum de clients, il est possible d’afficher conditionnellement ces tableaux à destinations d’Outlook grâce aux conditions if [mso].
Layout à deux colonnes avec une structure tableau est une bonne alternative pour Outlook, afin de bien intégrer un email.
3/ Négliger le choix du Doctype
Pour éviter des erreurs d’interprétation, il faut préciser un Doctype. C’est d’autant plus vrai pour les mails ouverts via un navigateur plutôt qu’une application.
Le doctype le plus fréquent utilisé par les clients mails est HTML5. En utilisant ce doctype vous vous assurez que votre mail sera affiché comme vous le souhaitez dans la grande majorité des cas. Cependant quelques rares clients mails retirent le doctype, assurez-vous que ceux-ci ne n’altèrent pas l’affichage de votre email.
4/ Mettre tout en image, mauvaise gestion des images
Lorsque votre nom de domaine n’est pas connu d’un client email, par défaut, il bloque le téléchargement automatique des images, le destinataire doit autoriser l’affichage des images. L’email arrive donc « cassé » ou vide. Il y a de forte chance alors qu’il finisse à la corbeille ou en SPAM. Un email composé d’une image unique a également plus de chance d’être classé dans les SPAMs.
De plus, l’accessibilité de ces mails aux personnes qui ont une vision réduite en est très affectée. Il est impossible pour un lecteur d’écran d’interpréter des images. C’est pourquoi, pour bien intégrer un email, il est important de contrôler la présence d’images qui contiennent du contenu sensible à la bonne lecture de l’email ainsi que d’y ajouter des textes alternatifs avec l’attribut alt.
Il est recommandé d’avoir un ratio texte/image de 80/20.
5/ Mal déclarer du CSS ou du JS
Aussi surprenant que cela puisse paraître, il est préférable d’utiliser du CSS inline sur les éléments concernés avec l’attribut style="" plutôt que la balise <style> dans le <head>. Certains clients email ignorent la balise <style> et bloquent les feuilles de style externes chargés dans une balise <link>.
Le css dans la balise <style> est souvent utilisé pour ce qu’on appelle de l’amélioration progressive (progressive enhancement), notamment pour contrecarrer des styles indésirable ajouté sur Outlook ou encore créer un layout responsive à plusieurs colonnes avec des media queries.
Pour des raisons de sécurité, le JavaScript est bloqué par la grande majorité des clients email. Assurez-vous de ne pas en mettre sur des boutons, ou des formulaires etc.
Dernier conseil pour bien intégrer un email : penser que les mails doivent absolument être identiques dans tous les clients mail est faux !
Pacomail vous propose un debug mode pour éviter toutes ces erreurs. Votre email est scanné, et des solutions directes sont proposées. Vous pouvez les appliquer instantanément dans l’éditeur de code et voir les modifications en direct grâce au live coding. Les erreurs sont hiérarchisées et classées (HTML, CSS, accessibilité, responsive etc.).
Testez dès maintenant le débug mode, on vous propose 15 jours d’essai gratuit !
Quelques ressources essentielles :
- Can I email https://www.caniemail.com/ est une ressource impulsée par Rémi Parmentier (ponte de l’emailing) qui référence la compatibilité des attributs HTML/CSS selon les clients mail
- https://www.hteumeuleu.fr/ le blog de Hteumeuleu
- https://www.badsender.com/blog/ le blog de Badsender agence d’emailing avec beaucoup de ressources et d’humour !
- Envanto https://webdesign.tutsplus.com/categories/email est un site d’apprentissage en ligne qui propose des tutoriels avec les dernières techniques d’intégration d’email