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 ?
Outlook, la Némésis des développeurs d'emails
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)
#1 - Le redimensionnement des images
Si vous souhaitez redimensionner des images directement dans le code, le style ne sera pas pris en compte par Outlook qui affichera votre image à la taille d’origine...
Le mieux est alors de redimensionner vos images sur un outil d'édition et de retouche d'image comme Photoshop ou Gimp, Fotor, Pixlr…
#2 - Les Gif animés
Dans la plupart des messageries les GIF fonctionnent correctement mais sur les différentes versions d’Outlook, de 2007 à 2019, les gifs ne s'animent pas. Ils affichent néanmoins la première image du gif. Pour les versions web en revanche, (Mac, Outlook Office 365 pour bureau depuis février 2019) et les applications mobiles d’Outlook qui supportent ce type de fichier, il n’y a pas de contrainte, les gifs sont supportés.
Comme la première image apparaît, vous pourrez intégrer un gif dans vos emails, il sera lu par toutes les autres messageries. Assurez-vous toutefois que la première image soit assez claire et éloquente afin que vos contacts sur Outlook comprennent tout de même votre message.
#3 - Les images d’arrière-plan
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/
#4 - Les arrondis
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)
#5 - Le responsive
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.
#6 - Outlook sur Mac OS
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) !
Conclusion
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 :
- vous pouvez vérifier les css pris en charge par les différents clients de messagerie avec l’outil de campaign monitor
- et vérifier l’affichage du code de vos emails sur les différents supports avec Litmus ou un autre simulateur
Besoin d'un coup de main pour optimiser l'affichage de vos emails sur Outlook ?
Photo by Mathyas Kurmann on Unsplash
