Newsletter : pourquoi l’affichage est-il différent d’une messagerie à l’autre ?

Email rendering affichage newsletters

Sur Codeur.com, trouvez rapidement un freelance pour réaliser votre projet Emailing. Voir les consultants emailing disponibles

Vous venez de passer 2 heures à créer un e-mail qui déchire pour votre prochaine campagne d’emailing. Mais au moment de l’envoyer, vous remarquez que l’aperçu qui vient d’arriver dans votre boîte de réception n’est pas bon.
Il se peut qu’une image soit mal alignée, que la mise en page soit déformée, que le texte soit souligné alors qu’il ne devrait pas l’être, ou que d’autres éléments aient été ajoutés au pied de page, ce qui donne un rendu complètement désordonné.
Bienvenue dans l’enfer de l’email rendering. On pourrait penser qu’après presque 50 ans d’envoi de newsletters, nous aurions une solution à ce problème. On aurait tort.

Qu’est-ce que l’email rendering ?

Contrairement à d’autres supports visuels, les newsletters sont soumises à l’interprétation de leur code par différents systèmes. En tenant compte des différentes applications mobiles, des clients de Webmail et des navigateurs, il y a cinq facteurs principaux qui déterminent le rendu d’un e-mail :

Compte tenu du fait qu’une entreprise fait appel (en moyenne) à 2 services différents pour ses campagnes d’emailings, et si nous détaillons puis comptons tous ces facteurs, nous obtenons…
2 services de marketing x 15 systèmes d’exploitation x 50 clients de courriel x 5 tailles d’écran x 2 états d’image = plus de 15 000 rendus potentiels.
Le cauchemar… Voyons en détail ces 5 points critiques qui empoisonnent la vie des spécialistes de l’emailing depuis toujours.

Les fournisseurs de services de courrier électronique

Email rendering selon plateforme routage ESP
Saviez-vous que le service de messagerie que vous utilisez pour vos campagnes d’email marketing modifie le code de votre e-mail lorsque vous l’envoyez ?
C’est généralement une bonne chose : ils vont ajouter des pixels de suivi pour vos statistiques, réécrire des liens ou supprimer du code susceptible de ne pas passer les filtres anti-spam. Mais, comme pour toute modification, cela peut aussi être préjudiciable sur la façon dont les e-mails apparaissent.

À lire aussi : 10 logiciels d’emailing pour envoyer vos newsletters

Bien que les plateformes de routage d’emails (comme Mailchimp, SendinBlue, Actito, etc.) modifient le code de votre message, il est souvent plus sûr de créer votre message par leur intermédiaire. Lorsque vous passez par leurs email builder, elles adaptent le code HTML pour qu’il soit affiché selon la disposition que vous avez choisi sur la grande majorité des messageries.
Mieux vaut passer par ces outils si vous ne maîtrisez pas le codage HTML pour l’email marketing, dont les normes sont très différentes des normes HTML web classiques.

+250 000 freelances disponibles sur Codeur.com

Recevoir des devis gratuits

Rapide, gratuit et sans obligation

Les différents systèmes d’exploitation

Email rendering OS système d'exploitation affichage newsletter
Le système d’exploitation de l’ordinateur, de la tablette, du smartphone ou de tout autre appareil de votre abonné limite (ou améliore !) les capacités du client de messagerie utilisé.
Bien qu’une poignée de systèmes d’exploitation dominent le marché, de nombreuses versions différentes de ces systèmes d’exploitation sont utilisées par les consommateurs. Par exemple, Windows 10, 8 et 7 ont tous une part de marché considérable et ne vont pas se comporter pareil face à un même e-mail.

Les appareils Apple sont ceux qui modifient le moins le code de vos campagnes emailing. Par exemple, si vous utilisez un Mac, vous pourrez lancer une vidéo ou naviguer sur un carrousel directement dans votre messagerie, alors que cela est impossible avec les mêmes applications sur Windows.
Attention donc si vous testez vos campagnes emails sur Mac : votre test ne reflète peut-être pas l’affichage qu’obtient la majorité de votre cible !

À lire aussi : Emailing : 10 conseils d’experts pour éviter de tomber en spam

Les applications et clients de messagerie électronique sur le web

Email rendering clients de messagerie
Si vous voulez aller au cœur du problème de « l’email rendering », c’est sur le client que vous devez concentrer votre attention. Les clients de messagerie électronique, tels que Gmail, Hotmail, Outlook et d’autres, peuvent fonctionner dans des environnements de bureau, mobiles et web.
Les clients de messagerie basés sur le web présentent un niveau de complexité supplémentaire, car leur rendu diffère selon les navigateurs. Par exemple, Gmail fonctionne un peu différemment selon que l’abonné utilise Chrome, Firefox, Internet Explorer ou Safari.
Il existe environ 1 000 clients de messagerie électronique dans le monde, plus environ 250 applications mobiles, ainsi qu’un certain nombre (plus restreint, heureusement) d’applications de bureau. Apple détient le plus grand nombre d’applications et la plus grande part de marché.

Et l’Award de l’affichage le plus rudimentaire est attribué à… Outlook sur PC ! En effet, les différentes applications Outlook réinterprètent le code HTML de vos newsletters avec… Microsoft Word. Autant vous dire que vous pouvez oublier les vidéos lues automatiquement dans l’email chez vos clients utilisant une application Outlook sur PC.
Même les GIF ne sont pas lus par toutes les versions d’Outlook : les versions antérieures à 2019 n’affichent que la première image du GIF.

Les différentes tailles d’écrans

Email rendering mobile responsive
La taille de l’écran ou du moniteur de l’abonné a également un impact important sur le rendu du courrier électronique. Lire un mail sur un moniteur de 21 pouces ou sur un smartphone avec un écran de 5 pouces sont des expériences radicalement différentes.
Rien que dans la catégorie des smartphones, il existe des centaines de dimensions d’écran différentes. Pour simplifier les choses, supposons qu’il n’y ait que 5 catégories de taille d’écran qui nous intéressent :

  • ordinateur de bureau
  • ordinateur portable
  • tablette
  • phablet (hybride téléphone-tablette)
  • smartphone

Il s’agit toujours de cinq éléments différents auxquels il faut faire attention si l’on veut s’assurer que le design de notre email est adapté.

À lire aussi : Email builders : 7 outils gratuits pour créer vos emails sans coder

Les images activées/bloquées/dynamiquement insérées

Email rendering images bloquées newsletter
Les images distantes peuvent être activées ou bloquées par défaut dans de nombreux clients de messagerie électronique. Cela crée généralement deux rendus très différents d’un courriel.
Habituellement, en raison du paramétrage par défaut de leur client de messagerie ou d’une préférence personnelle, les images sont bloquées automatiquement pour de nombreux abonnés, ce qui donne des newsletters qui ont l’air cassées, et qui n’auront donc aucun impact immédiat sur l’abonné, qui ne prendra que trop peu souvent la peine d’afficher les images.
Enfin, si vous utilisez une méthode de mailing personnalisée (par exemple en adaptant les images en fonction des préférences de l’utilisateur), vous vous exposez à des problèmes supplémentaires, notamment si vos données et vos images ne sont pas normalisées.

Conclusion

Il n’est pas question de vous assurer personnellement que chaque campagne marketing que vous réalisez soit impeccable dans les +/- 15 000 combinaisons possibles. Sachez cependant qu’il existe des outils d’email rendering permettant de visualiser le rendu dans de nombreuses configurations, comme Email on Acid ou Litmus.
Si vous ne souhaitez pas payer l’abonnement à l’un de ces services,  mais souhaitez tout de même vous assurer que vos emails aient le meilleur rendu possible pour la majorité de vos abonnés, apprenez à mieux les connaître. Regardez quels sont les principaux OS / applications / navigateurs / appareils sur lesquels vos abonnés ouvrent vos emails et testez vos campagnes dans ceux qui sont les plus populaires.
Besoin d’aide pour mettre en place des newsletters qui s’affichent correctement sur la majorité des messageries ? Faites appel à un spécialiste freelance en postant votre annonce sur Codeur.com.