Pour tous ceux qui travaillent en B2B, Outlook est une messagerie incontournable.
Outlook est très spécifique au niveau du 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.
Et ce type de message à toutes les chances d’être supprimé sans avoir été lu, d’où un impact sur la délivrabilité des messages.
Pour approfondir le sujet, 2 interrogations :
- Quels sont les principaux éléments sur lesquels l’attention doit se porter ?
- 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. Elles connaissent de nombreux freins dont il vaut mieux tenir compte.
I.1 Les images ne s’affichent pas
Dans une messagerie Outlook, 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 été ouvert ou non.
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. 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 est très importante, la limite autorisée 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 ou un outil dédié au sein 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 faire du vectoriel dans Outlook.
Cette solution est complexe et nécessite des compétences en code, donc à voir si vous souhaitez aller plus loin sur le sujet ou non.
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 choisie, un Outlook utilise cette police.
Par contre, sur un Mac, Helvetica a un meilleur rendu comparé à de l’Arial. Dans cet environnement, l’Helvetica est 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é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 en image avec l’inconvénient de l’affichage.
III.2 Une extension de la largeur
L’url est mise en claire, c’est une bonne tactique pour les filtres antispams qui voient directement le lien.
Par contre, Outlook évite de briser un lien url en le 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 sous lequel est 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.
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 textes avec du html ou du css pour les couleurs, les polices, les tailles… sont les messages qui ont la plus forte probabilité de passer.
Avec un peu d’imagination, il est déjà 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 permettent 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
Outlook est une messagerie très spéciale dans l’interprétation du code ce qui conduit parfois à des compositions destructuré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éte 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 actifs.
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 🙂