Pourquoi ma campagne email ne s’affiche pas correctement dans Outlook ?

Les campagnes emails créées avec Sarbacane sont conçues pour un affichage optimal quel que soit le client de messagerie utilisé par vos destinataires. Cependant, il est fréquent que le rendu des emailings envoyés sur Outlook ne corresponde pas à ce qui apparaît dans l’éditeur de Sarbacane. Si l’EmailBuilder de Sarbacane a été développé pour s’adapter au mieux aux divers services de messagerie, le moteur de rendu HTML d’Outlook est basé sur le rendu HTML de Word et n’est donc pas optimal pour afficher correctement un email. Aucun logiciel emailing professionnel n’est en mesure de garantir un bon affichage d’une campagne email identique sur Outlook. Quels problèmes d’affichage pouvez-vous rencontrer ? Comment y remédier ? Voilà les sujets que nous aborderons dans ce chapitre.

Quelles sont les raisons de ces problèmes d’affichage ?

Aucun routeur professionnel ne peut vous garantir un affichage 100% identique à votre création d'origine sur Outlook. En effet, la façon dont un email s’affiche dépend de plusieurs facteurs :

• La version Outlook utilisée
• Le format Outlook utilisé (webmail, desktop, application)
• La taille de l’écran utilisé
• Le nombre d'écrans utilisés : si vous utilisez un double écran, l'affichage peut être cassé sur l'écran secondaire. Il est donc conseillé de fermer Outlook, et de l’ouvrir à nouveau seulement sur l'écran principal.
• Le filtre anti-spam utilisé : le filtre anti-spam peut modifier le code HTML initial et perturber l’affichage du message

C’est pour toutes ces raisons qu’il est essentiel d’inclure un lien de copie web dans vos campagnes emailing. Ce lien permet aux lecteurs de visualiser votre campagne emailing dans un navigateur internet si celle-ci s'affiche mal en boîte de réception.

Pour vérifier que ce soit bien Outlook qui pose des problèmes avec l’affichage de votre emailing, vous pouvez regarder si le contenu et les images s’affichent correctement sur les autres clients de messagerie (Gmail, Yahoo, Hotmail…) et/ou dans un navigateur. Si c’est le cas, cela signifie que Outlook est bien la cause du problème.

Quels sont les problèmes rencontrés ?

Depuis la version 2007 de Outlook, Microsoft n’utilise plus un lecteur HTML propre à Outlook. En effet, il applique le moteur de rendu HTML de Word pour l'édition et la lecture des emails. De ce fait, plusieurs problèmes peuvent survenir.

Voici un exemple de problèmes d’affichage que vous pourriez rencontrer :

Les images ne s’affichent pas

Par défaut, Outlook n’affiche pas les images hébergées sur un serveur (sauf pour les versions les plus récentes). Vous avez la possibilité dans Sarbacane d’intégrer une image dans le corps du mail. Elle s’affichera alors dans Outlook. Cependant, chaque image embarquée dans le corps du mail augmente le poids de votre message et est donc susceptible d’impacter votre délivrabilité. Le nombre de crédits débités par envoi dépend également du poids de votre message. Plus votre message est lourd, plus il vous coûtera de crédits email. Pour ces deux raisons, nous vous conseillons de n’intégrer que votre logo dans le corps de votre campagne. Vous serez ainsi identifié à coup sûr par vos destinataires, même si les images de la campagne ne s’affichent pas par défaut.

Les images sont tronquées

Outlook impose une limite de taille dans la hauteur des images. Si votre image est tronquée, redimensionnée ou ne s’affiche pas, diminuez la hauteur de votre image. Si vous ne pouvez pas réduire la hauteur de l’image, nous vous conseillons de couper l’image en plusieurs parties et d’insérer chaque partie dans un nouveau bloc d’image.

La taille des images n’est pas correcte

Lorsque vous utilisez les propriétés HTML d’une image pour la redimensionner, il peut arriver qu’elle s’affiche malgré tout dans sa taille originale sur Outlook. Nous vous conseillons de redimensionner vos images avec un logiciel de retouche photo avant de les intégrer dans votre campagne ou d’utiliser notre éditeur d’images intégré.

Les marges autour des images ne s’affichent pas

Sur Outlook, les marges autour des images peuvent s’afficher de manière différente. En effet, le texte peut être collé à l’image malgré les marges configurées dans les propriétés. Pour pallier cette complication, vous pouvez utiliser un logiciel de retouche photo pour ajouter autour du visuel une bordure de la même couleur que l'arrière-plan de l’emailing, puis l’intégrer à votre campagne.

Exemple de problème de marge autour des images :

Les GIFs ne s’animent pas dans la campagne

Outlook n’est pas compatible avec les animations GIF. Seule la première image du GIF est affichée dans Outlook. Nous vous conseillons donc de faire apparaître l’information la plus importante de votre animation sur cette première image.

L’image en arrière-plan ne s’affiche pas

C’est un problème fréquemment rencontré sur Outlook et sur plusieurs autres clients de messagerie. L’image en arrière-plan ne s’affiche pas et une couleur de fond se substitue à l’image. Cette propriété css n'est pas prise en charge nativement dans Outlook. Il n’existe actuellement pas de solution pour remédier à ce problème sans disposer de compétences en développement.

La taille et la police de texte ne s’affichent pas correctement

Selon les polices de texte utilisées, il peut arriver que la taille et la police de texte diffèrent de la configuration initiale du texte dans Sarbacane. En effet, les polices systèmes ont l’avantage de s’afficher correctement sur tous les systèmes d’exploitation, y compris sur Outlook. En revanche, les Google Fonts ont un rendu aléatoire sur la quasi-totalité des boîtes de messagerie excepté sur mobile. L’affichage de la police sur les Webmails dépend du système d’exploitation (PC/MAC) et du navigateur web utilisé. Privilégiez donc les polices systèmes standards pour vos campagnes emails.

Les boutons « call-to-action » arrondis ne s’affichent pas correctement

Les boutons avec des angles arrondis s’affichent correctement sur la plupart des boîtes de messagerie (Webmails, Mobile, Desktop). Cependant, sur Outlook, la forme rectangulaire des boutons se substitue aux angles arrondis (car la proriété css "border radius" n'est pas prise en charge nativement). Pour afficher des bouton avec angles arrondis sur Outlook, il faut donc les insérer en tant qu’image. Attention cependant, les images ne s’affichant pas par défaut dans Outlook, vos boutons (y compris le texte de votre CTA) ne seront pas visibles dans Outlook à moins de télécharger les images.

Apparition d’un trait blanc entre deux images

Ce problème récurrent sur Outlook semble être lié au fait que certaines versions de la messagerie effectuent un redimensionnement de l’email en fonction de la taille et de la résolution de l’écran. Si vous rencontrez ce type de problème d’affichage, la seule chose à faire est d’effectuer des tests sur plusieurs tailles d’écran en modifiant à chaque fois un élément de la structure de votre campagne email (hauteur, largeur, etc).

Des problèmes d’alignement apparaissent

Plusieurs décalages apparaissent selon la résolution de l'écran depuis lequel Outlook est démarré. Sur Outlook, des difficultés d’alignement peuvent notamment survenir avec les blocs des éditeurs d’email : 2 colonnes, 3 colonnes et 4 colonnes. Pour parer à ce problème, lors de la création de votre campagne email sur Sarbacane, il vous suffit d’ajuster la largeur de la version PC. Par défaut réglé à 650 px, les problèmes d’alignements se règlent aux alentours de 400 px de largeur.

Des problèmes avec les bordures en pointillés et en tirets apparaissent

Sur Outlook, les bordures en pointillés et en tirets s'affichent automatiquement sur un fond blanc quelle que soit la couleur de fond configurée pour le bloc concerné. Ceci est un comportement hérité de Word. Ainsi, si vous intégrez des bordures sur un fond de couleur, vous pourrez voir apparaitre des traits blancs entre les points ou les tirets. Pour parer à ce problème, nous vous conseillons donc dans la mesure du possible d'utiliser les bordures en pointillés ou en tirets sur un fond de couleur blanc. Si vous devez utiliser un fond de couleur, privilégiez alors les bordures pleines.

Quelles sont les solutions pour optimiser l’affichage sur Outlook ?

Dans le but d’augmenter vos chances d’obtenir un affichage correct sur Outlook, voici quelques conseils supplémentaires.

4 conseils pour optimiser l’affichage de votre message

• Choisissez des images au format JPEG ou PNG
• Utilisez des polices systèmes standard : Arial, Helvetica…
• Pensez à optimiser la version mobile de votre email marketing
• Réduisez au minimum le nombre de colonnes

4 erreurs à éviter

• Evitez le copier-coller de texte directement à partir d’un autre logiciel. Cependant, vous pouvez copier le texte de votre logiciel, et le coller sur un bloc note, puis le collez dans votre message sur Sarbacane ou bien vous pouvez utiliser la fonction "coller en texte brut" proposée au clic droit sous Google Chrome (raccourci clavier ctrl shift v)
• Lorsque que vous souhaitez créer une campagne en partant de la structure d'une campagne existante, plutôt que de repartir du message d'une campagne précédente, privilégiez plutôt la création du message à partir d'une sélection de modèles.
  Cette méthode limitera les risques de surcharge du code HTML généré lors de l'édition du message.
  Dans le même but, exploitez la blocothèque de l'EmailBuilder qui permet d'enregistrer des blocs types que réutilisables rapidement.
• Ne transférez pas un email que vous avez reçu car le code HTML est réinterprété. Il n'est plus optimal et dégrade davantage le rendu.
• Ne placez pas de texte important sur une image de fond

NB : Tous vos destinataires utilisant Outlook en tant que messagerie principale ne rencontrent pas ces problèmes d’affichage. En effet, certains utilisateurs Outlook de votre liste de contacts n’ont jamais reçu d’emails tronqués dans leur boîte de réception. Néanmoins, nous vous conseillons de tester vos campagnes emailing sur plusieurs messageries, comme Outlook, avant de les envoyer à toute votre base de données.