Pour tous ceux qui travaillent en B2B, Outlook est une messagerie incontournable.
Cette messagerie est très spécifique au niveau du code html et du css supportés, ils correspondent à ceux d’un document Word. D’autres éléments perturbateurs sont aussi présents comme la taille de l’écran et les filtres antispam.
Une composition parfaitement structurée peut être totalement déstructurée lorsqu’elle parvient dans un Outlook ou dans une messagerie Office.
Et ce type de message à toutes les chances d’être supprimé sans avoir été lu, d’où une action négative sur la délivrabilité des messages.
Pour approfondir le sujet, 2 interrogations :
- Quels sont les principaux éléments à étudier ?
- Quelles sont les solutions à mettre en place quand elles existent ?
I Les images
Les messages très graphiques n’ont pas la faveur de Microsoft. Ils connaissent de nombreux freins dont il vaut mieux tenir compte.
I.1 Les images ne s’affichent pas
Dans une messagerie Outlook ou Office, par défaut, les images ne sont pas visibles.
Cette fonctionnalité sécurise la messagerie.
L’expéditeur n’est pas en mesure de savoir si le message a bien été ouvert ou non sans une action du destinataire.
Il faut bien sûr éviter une image qui couvre l’ensemble de la composition. Du texte est à privilégier, dans tous les cas, éviter plus de 50 % d’images. En B2B, les filtres antispam ont aussi tendance à sanctionner les messages dont le pourcentage d’images est supérieur à 50 %.
I.2 Les images sont tronquées
La troncature a lieu au niveau de la hauteur.
La limite autorisée est très importante, elle est de 1728 pixels.
La hauteur de l’image doit être inférieure à cette limite.
I.3 La taille de l’image est incorrecte
Pour redimensionner une image, utiliser un logiciel de retouche d’images (le logiciel Paint intégré à l’environnement Microsoft ou la plateforme du prestataire d’envoi) est indispensable.
Une image dont les dimensions sont diminuées dans le code html reste à sa taille initiale.
I.4 Les marges autour des images sont incorrectes
Des marges autour des images ont été indiquées et elles ne se sont pas affichées.
L’astuce est de bâtir un cadre identique à la couleur du fond, ainsi il n’y a pas besoin d’avoir recours aux marges externes.
I.5 L’image d’arrière-plan est inexistante
Une couleur de fond se substitue à l’image d’arrière-plan.
Éviter de mettre du texte sur cette image puisque le destinataire n’en prendra pas connaissance.
Il existe cependant une solution à ce problème, il faut utiliser le langage VML (Vector Markup Language), un langage propriétaire de Microsoft, basé sur du XML.
Il permet de réaliser du vectoriel dans Outlook. Cette solution est complexe et nécessite des compétences en code, il est toujours possible de s’aider d’Intelligence Artificielle pour générer le code. Néanmois, coder sans avoir de compétences en la matière, est toujours soumis à un risque d’erreur.
Conclusion : dissocier le texte de l’image.
II Les polices
Google propose des fontes.
Ce n’est pas une bonne idée de les utiliser, car Outlook ne les supporte pas et les change.
Les polices à utiliser sont très basiques : Arial, Helvetica, Georgia, Tahoma, Times New Roman et Courier.
La police Arial est recommandée pour Outlook.
Par contre, sur un Mac, Helvetica a un meilleur rendu comparé à celui de l’Arial. Dans cet environnement, l’Helvetica est alors choisie.
Vous l’avez compris, le choix initial n’est pas toujours celui qui est retenu.
Pour approfondir : 21 astuces sur la lisibilité en email marketing
III Les appels à l’action
Les appels à l’action sont sous la forme de boutons, de liens ou d’ancres.
Ils ne sont pas directement visibles quand le format est une image.
En effet, les images sont désactivées par défaut. Sans une réactivation, le clic est impossible, sauf à l’intégrer dans la description.
Une première règle est d’ors et déjà d’éviter les images dans les appels à l’action.
III.1 Les coins des boutons
La baguette magique de Microsoft transforme les coins arrondis en carrés.
Les boutons ronds se transforment en rectangles.
La solution est de coder le bouton ou de le mettre sous un format d’image avec l’inconvénient de l’affichage.
III.2 Une extension de la largeur
L’URL est mise en clair, c’est une bonne tactique pour les filtres antispam qui voient directement le lien.
Outlook évite de briser une URL en la mettant sur 2 lignes. La largeur de la composition est insuffisante pour l’afficher en entier, Outlook l’augmente pour la maintenir sur une ligne.
La solution est une ancre, au lieu d’afficher le lien, un texte prend sa place, en dessous se situe le lien.
III.3 La police du bouton n’est pas correcte
La police du bouton est identique au reste du texte et pourtant, elle ne s’affiche pas correctement.
Une autre police la remplace.
Un espace en début ou/et en fin vient perturber la lecture.
Pour approfondir : Susciter l’engagement avec des CTA efficaces
IV Les vidéos et les gif animés
L’animation se transforme en inactivité sur Office.
La solution est de réaliser l’animation sur la landing page.
Bien sûr, le destinataire doit effectuer un clic pour visualiser la vidéo.
Il existe de nombreuses autres problématiques comme des lignes verticales ou horizontales qui apparaissent suite au redimensionnement du message, un dysfonctionnement très visible pour les Outlook 2016 de plus en plus rare désormais dans les entreprises, 10 après leur introduction.
La meilleure solution est d’effectuer des tests de rendu de votre message avec une solution comme Litmus, Emailonacid. Vous pourrez ainsi visualiser le message dans différentes versions et configurations d’Outlook.
V Quel type de message pour un rendu correct ?
Avoir un joli rendu dans une messagerie n’est pas une tâche aisée.
Les messages de type texte avec du html ou du css pour les couleurs, les polices, les tailles… sont ceux qui ont la plus forte probabilité de passer.
Avec un peu d’imagination, il est possible de créer des messages qui se démarquent avec du texte, de l’html et du css basique comme précisé ci-dessus.
Pour des messages plus graphiques, penser à optimiser le poids des images.
Utiliser des images en png ou en jpeg afin d’obtenir le meilleur rendu.
Privilégier les compositions sur une colonne et éviter toutes les animations à l’intérieur du message.
Pour les calls to action, les ancres sont une excellente solution.
Enfin, il existe des sites comme caniemail qui référencent ce qui est supporté selon les différentes messageries et leurs versions. Ce type de site est indispensable pour tous ceux qui codent leur composition.
Et pour conclure, les plateformes d’envoi ont mis en place des blocs faciles à travailler qui réalisent des compositions de bonne qualité, c’est une solution pour réaliser un message sans avoir des connaissances techniques étendues.
Conclusion sur le rendu dans les messageries Outlook
L’environnement Microsoft en messagerie est très spécial dans l’interprétation du code ce qui conduit parfois à des compositions déstructurées.
C’est pourquoi, il existe, en règle générale, un lien en haut de la composition qui permet de la visualiser lorsqu’elle ne s’affiche pas correctement.
Malheureusement, ce lien n’est pas toujours utilisé. En emailing, la simplicité paye. Utiliser des graphismes légers, éviter les images. Lorsqu’elles sont indispensables comme un logo, il faut optimiser leur poids.
Chaque messagerie et sa version interprètent différemment le rendu du message, il est impossible de passer partout.
L’objectif est d’avoir un rendu acceptable dans les environnements des clients et des prospects les plus actifs.
Des questions : Dialoguer avec un expert
Merci pour cet article très utile ! La complexité liée à l’affichage des images et à la gestion des polices est un vrai casse-tête. J’ai particulièrement apprécié tes conseils pratiques, notamment l’importance d’éviter les appels à l’action sous forme d’images et de privilégier des ancres. La solution de tester avec des outils comme Litmus est une excellente idée que je vais sûrement adopter pour mes campagnes. Encore merci pour toutes ces astuces !
C’est souvent frustrant de voir ses emails apparaître incorrectement, mais grâce à tes conseils, c’est beaucoup plus facile à corriger.Tes solutions pratiques m’ont vraiment aidé à comprendre les erreurs d’affichage. Ces astuces techniques sont précieuses pour optimiser nos communications professionnelles !
Comme toujours un article concret et structuré. Ils me permettent vraiment d’améliorer mes envois.
Merci beaucoup !
Merci pour cet article très structuré et très complet 🙂
Ne faisant pas (encore) de campagne emailing, mais gérant mon serveur de messagerie personnel, j’ai été confronté au problème des emails déstructurés, avec des images un peu trop « flashy », qui avaient tendance à alourdir le mail et le faire passer en SPAM alors qu’il était valide. Je constate que les campagnes de mails sont plus qualitatives aujourd’hui qu’il y a encore quelques années.
En tout cas, je reprendrai les conseils de ton article quand je m’y mettrai 🙂