Un email réalisé sur une solution externe d’emailing est systématiquement retranscrit sous forme de code au format HTML. C’est ce code qui sera ensuite envoyé à vos destinataires, puis interprété par le webmail ou client de messagerie de chacun d’entre eux.
Il existe une multitude de clients email lourds, c’est à dire d’applications installées localement sur votre ordinateur, comme Microsoft Outlook ou Thunderbird, mais également des webmails comme Gmail, Yahoo ou Hotmail qui elles, sont des messageries sur le web ayant chacune leurs spécificités et donc leur propre interprétation.
Par exemple, Microsoft Outlook utilise le moteur de rendu de Microsoft Word depuis 2007 et n’a donc que très peu évolué ces dix dernières années, contrairement aux webmails.
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 (le lien derrière la phrase “Si vous avez des difficultés à visualiser ce message, suivez ce lien”). 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.
Voici plusieurs exemples de problèmes d’affichage que vous pourriez rencontrer :
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 d’intégrer uniquement 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.
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.
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é.
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.
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.
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 de développeurs.
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. 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 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 propriété css border radius n'est pas prise en charge nativement). Pour afficher des boutons avec angles arrondis sur Outlook, il faut donc les insérer en tant qu’image. Attention cependant, comme vu précédemment, 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.
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).
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 contourner 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.
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 contourner 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.
De manière globale, si nous mettons tout en œuvre pour optimiser l’affichage des emails créés avec Sarbacane sur le plus grand nombre de messageries possibles, une compatibilité entre tous les outils de messagerie est impossible et il pourra, à de rares occasions, être constaté des disparités dans la mise en page des messages en raison de ces contraintes.
C’est notamment pour cette raison que tous les emails générés par notre Email Builder proposent par défaut en haut de l’email un accès à la version en ligne, qui permet à vos destinataires d’accéder au contenu conforme à la création directement depuis leur navigateur internet.
Ci-dessous, nous vous proposons l’interprétation d’un même mail dans Gmail et Outlook.
Version Gmail
Version Outlook : pour voir le contenu du mail, il est obligatoire de se rendre sur la copie web “Si vous avez des difficultés à visualiser cet email, suivez ce lien”.
