Pourquoi mes e-mails semblent mauvais avec le client Outlook ?

Faisons face à la vérité. Créer des e-mails est une tâche assez simple. Mais formater ces e-mails pour qu'ils soient compatibles avec Outlook est une tâche ardue. En fait, plus difficile que vous ne le pensez.

Outlook est le client de messagerie le plus utilisé, mais le plus ancien, que vous trouverez jamais. Cependant, il ne prend pas en charge plusieurs avancées que vous trouvez dans d'autres clients de messagerie comme Gmail.

Exemple ceci :

Si vous avez utilisé une image PNG avec une transparence d'arrière-plan, Outlook va paniquer ! Il ne sait pas rendre de telles images. De même, vous pouvez vous demander pourquoi vos boutons arrondis (créés à l'aide de la propriété CSS border-radius) ressemblent à Square dans le client Outlook. Parce qu'Outlook ne prend pas en charge border-radius et plusieurs autres propriétés CSS.

Voici les raisons pour lesquelles vos e-mails Outlook ont ​​l'air terribles et ce que vous pourriez faire pour améliorer la conception de votre e-mail.

Pourquoi mes e-mails sont-ils mal vus avec Outlook ?

Le plus grand défi pour les spécialistes du marketing par e-mail est désormais de créer un modèle d'e-mail pour Outlook. En effet, à partir d'Outlook 2007, Microsoft a cessé d'utiliser Internet Explorer pour afficher les e-mails et a commencé à utiliser Microsoft Word comme moteur de rendu. Ce changement convenait mieux aux utilisateurs de Microsoft Office, car il leur permettait de simplement copier ou coller du contenu de Word ou Excel dans les e-mails Outlook. Mais cela a rendu le scénario difficile pour le constructeur d'e-mails basé sur HTML. Étant donné que les e-mails HTML ont un aspect différent dans les perspectives, pour surmonter certains défis, suivez les étapes ci-dessous pour améliorer les campagnes par e-mail.

Défis du rendu des e-mails avec Outlook

Un spécialiste du marketing par e-mail doit prendre beaucoup en considération avant de concevoir une campagne par e-mail. Il a besoin de connaître son abonnement client qui utilise Outlook. La version de bureau, la version mobile et la version Web d'Outlook diffèrent complètement les unes des autres dans le rendu d'un e-mail. En ce qui concerne le rendu des e-mails avec Outlook, voici les éléments à prendre en compte.

Pourquoi l'image est-elle coupée et se charge-t-elle lentement ?

En ce qui concerne l'inclusion d'images dans les e-mails, Outlook a certaines limitations sur la taille des images.

Les newsletters par e-mail jouent un rôle majeur dans les campagnes de marketing par e-mail. Ils sont rendus dynamiques en y ajoutant des images. Parfois, lorsqu'une longue image est ajoutée au modèle de la campagne, elle est coupée ou redimensionnée à la réception. Cela est dû aux clips Outlook de la partie supérieure de l'image qui dépasse la hauteur de 1728 pixels. Donc, dans ce cas, nous devons redimensionner l'image sous 1728px pour la faire apparaître sans écrêtage.

Dans les situations où l'image ne peut pas être redimensionnée, la meilleure alternative consiste à recadrer l'image en deux images distinctes, puis à l'utiliser dans la campagne.

L'image ne se redimensionne pas

Outlook ne fonctionne pas bien avec les images contraintes par HTML. Autrement dit, si le modèle d'e-mail est ajouté avec une image redimensionnée à l'aide de HTML, Outlook affichera l'image uniquement dans la taille d'origine et non dans la valeur redimensionnée. Nous devons donc nous assurer que l'image est redimensionnée bien avant qu'elle ne soit utilisée dans l'automatisation des e-mails.

Images d'arrière-plan

La meilleure stratégie pour « épater » un client consiste à créer un e-mail avec une image de fond représentant la marque. Nous pouvons rendre les images d'arrière-plan plus utiles en superposant des textes en direct sur l'image. Le texte en direct nous aidera également à transmettre le but de l'e-mail même à des moments où le client n'est pas affiché avec l'image.

Cependant, Outlook ne prend pas en charge les images d'arrière-plan avec HTML. Nous devons utiliser VML (Vector Markup Language) pour que les images d'arrière-plan soient visualisées par l'abonné.

Entrez le code ci-dessous dans la <body> de votre code HTML pour que l'image d'arrière-plan couvre toute la fenêtre de l'e-mail

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

Le code ci-dessus a parfaitement fonctionné pour afficher l'image d'arrière-plan avec les e-mails ouverts dans Outlook 2007, 2010 et 2013. Mais Windows Mail 10 avait besoin de quelques modifications dans le code pour ajouter l'image avec sa source autorisant l'image d'arrière-plan.

Le code ci-dessous permettra à la couche supérieure de l'image d'être transparente et aidera à corriger l'image d'arrière-plan.

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

Les GIF animés ne conviennent pas

La vidéo parle plus que des mots.

Mais, techniquement parlant, un modèle d'e-mail nécessite un codage complexe pour prendre en charge les vidéos. En pensant aux alternatives, en tant que spécialiste du marketing par e-mail, je considère le GIF comme une option dynamique. Les GIF sont des images animées pour transmettre un message sous la forme la plus simple. Outlook ne prend pas en charge les GIF.

L'image GIF se charge mais seule la première image du GIF est rendue au client.

Si vous avez des abonnés Outlook dans la liste de diffusion, assurez-vous que la première image de l'image partage le contexte principal du GIF.

Envisagez d'utiliser la partie animation comme un avantage supplémentaire pour les abonnés avec d'autres clients de messagerie.

Propriété de rayon de bordure

En parlant de marketing par e-mail, le bouton d'appel à l'action est une fonctionnalité qui permet à l'e-mail de générer un prospect. Combien de fois avons-nous cliqué sur le bouton CTA à bout rond ?

La propriété Border radius est une propriété CSS courante, mais cela ne fonctionne pas bien avec Outlook. Avec Outlook, les abonnés disposent de boutons CTA avec des bordures carrées.

Espaces vides supplémentaires

Parfois, des espaces vides au-dessus de l'image, comme nous le voyions dans l'option d'aperçu avant impression après le rendu de l'e-mail avec Outlook.

Comme indiqué précédemment dans le blog, cela est dû au fait qu'Outlook 2007 utilise Microsoft Word pour afficher les e-mails HTML.

Par conséquent, l'e-mail est un peu différent de la conception réelle.

Problème de police principale

Si l'appareil de l'abonné ne dispose pas du style de police principal, Outlook affichera l'intégralité de l'e-mail en Times New Roman, en ignorant la police de secours mentionnée dans le code.

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

Le modèle d'e-mail doit être parfait

Vous lancez une campagne par e-mail pour une boutique de commerce électronique. Le modèle que vous concevez devrait vous aider à envoyer des e-mails efficaces car il ne s'agit pas de l'ancien marketing de terrain traditionnel où les clients peuvent vous rencontrer en personne.

L'apparence du responsable marketing définit la crédibilité de la marque. Alors, qu'envoyons-nous maintenant pour représenter notre marque ?

E-mails. Le modèle de conception de votre e-mail donne la première impression de votre marque au client. Plus un e-mail est beau avec le contenu, meilleure est la marque

Cependant, nous n'avons pas la liberté d'utiliser des options de format avancées pour rendre notre e-mail attrayant. Nous pouvons voir que l'e-mail a l'air parfait dans Outlook, mais ce ne sera pas le cas lorsqu'il sera rendu par d'autres destinataires d'e-mails.

Vous devez vous en tenir à l'utilisation de tableaux dans votre e-mail HTML. N'essayez pas d'utiliser des éléments div avec position et floats car Outlook ne le prend pas en charge. Malheureusement, il n'y a pas de solution de contournement pour cela pour le moment.

L'option de désabonnement est un must

Gérant une boutique de commerce électronique, nous voulons toujours garder nos clients engagés avec notre marque.

Comment faire?

Bulletins. Donnez aux clients des informations potentielles sur la tendance et les mises à jour dans votre créneau commercial.

Mais en fin de compte, c'est le client qui décide de suivre ou non votre marque. Une fois qu'un client s'est abonné auprès de nous, il doit avoir la possibilité de se retirer de la liste d'abonnement à tout moment.

Le bouton de désabonnement est un must dans chaque newsletter que nous envoyons à nos clients et si nos clients ne voient pas ce bouton,
Attendez-vous à quoi ?
Nous pourrions être spammés !

L'envoi d'e-mails à partir d'Outlook expose notre marque à ce risque car il ne donne pas cette option standard.

Les liens sont remplacés par du texte bleu/violet souligné

En tant que spécialistes du marketing par e-mail, nous devons utiliser pleinement l'e-mail que nous envoyons aux clients.

Nous pouvons inclure des liens d'abonnement, des liens vers nos blogs tendance, des liens de redirection vers notre site Web pour obtenir l'engagement des clients.

Lorsqu'un e-mail HTML est envoyé à partir d'Outlook, ces liens apparaissent en texte bleu/violet souligné lorsqu'il est affiché sur différents clients de messagerie.

Pour éviter ce problème, utilisez la <font> et enveloppez le texte avec une <span> et un attribut de style.

Essayez d'utiliser le code suivant-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook peut suffire à remplir votre boîte de réception personnelle.

Mais, parlant affaires, regardez hors de la boîte.