En Marketing, l'emailing reste le moyen le plus rentable et efficace lorsqu'il s'agit d'atteindre vos prospects. Percutant, attrayant, et responsive, il doit pouvoir s'adapter à toute les plateformes. Aujourd'hui, c'est d'Outlook que nous allons parler - et cela va donc forcément intéresser nos lecteurs B2B, Outlook restant le client mail le plus utilisé dans les entreprises à partir d'une certaine taille.
Or, Les développeurs le savent, l’envoi d’emailing sur Outlook n’est pas forcément évident : les problèmes d’affichage sont fréquents et le rendu peut être bien différent des autres messageries, différent de ce qu'on avait codé.
Pourquoi Outlook semble donc nous mettre des bâtons dans les roues ? Quelles sont les petites astuces à adopter ? À quoi faire attention sur les e-mails et sur Outlook ?
Premièrement, il est à noter que dans les versions antérieures à 2007, Outlook utilisait le moteur de rendu Internet Explorer. Depuis 2007, c’est celui de Microsoft Word qui est utilisé, ce qui génère des problèmes avec certains CSS.
Pour un bon affichage sur le client mail de Microsoft, il faut donc s’en tenir à un développement à l’ancienne, avec des tableaux… Hé oui ! Les bons vieux tableaux qui ne sont plus utilisés pour le web restent la meilleure solution pour le développement d’emailing, oubliez donc tout ce qui est flexbox, float et soyez vieux jeu !
Coder vos emails avec des tableaux garantira un affichage optimal sur un maximum de clients mails. Toutefois, Même si vous codez comme au bon vieux temps, vous rencontrerez des obstacles récurrents liés à Outlook.
Voici donc un petit tour d’horizon des difficultés ou des particularités liées à la messagerie de Microsoft : (sur les différentes versions)
L’utilisation du background image ne fonctionne pas sur Outlook ainsi que sur certains autres clients de messagerie qui ne l’affichent tout simplement pas.
Il y a la possibilité de forcer cette restriction en utilisant le VML (Vector Markup Language) qui est un langage basé sur le XML mais il n’a pas toujours le meilleur rendu car il génère des lignes ou des problèmes d’alignement aléatoires sur certaines versions d’Outlook. Si toutefois vous souhaitez insérer des images, voici un générateur de code créé par Campaign Monitor qui permet l’intégration d’images d’arrière-plan : https://backgrounds.cm/
Vous aviez de jolis boutons Call-to-action aux angles délicatement arrondis ? Dommage, car Outlook aime les lignes droites et les angles à 90°. Si vous souhaitez conserver ces arrondis, il va falloir utiliser des images (au risque qu'elles ne s'affichent pas)
Aïe. Jusque là, nous parlions de menues contraintes... Qu'Outlook ne comprenne pas le responsive est une toute autre dimension ! En effet, cela implique qu'à la création de votre email, vous ayez déjà Outlook en tête et évitiez de monter vos emails sur plusieurs colonnes par exemple.
Une solution si votre base de données est assez conséquente et le justifie : développez 2 versions de votre email, une version au top du design et de la créativité pour votre base sur gmail ou autre (et Outlook sur Mas OS, voir ci-dessous), et une plus simpliste pour votre base sur Outlook.
Et ne testez jamais, JAMAIS, vos emails sur Outlook pour Mac, car celui-ci comprend bien le responsive depuis de nombreuses années (et cela à occasionné quelques malentendus avec certains clients) !
Avec les récentes évolutions de la suite Office, soyez certains qu'Outlook est là pour rester. Et en attendant que la solution évolue, il va donc falloir continuer à adapter nos emails afin qu'ils s'affichent correctement sur Outlook.
Pour vous aider à vérifier le rendu de vos emails et créer votre code, nous vous conseillons deux outils :
Besoin d'un coup de main pour optimiser l'affichage de vos emails sur Outlook ?
Photo by Mathyas Kurmann on Unsplash