FAQ : La conception des E-mails est différente dans Outlook Windows ?

Les E-mails d'APSIS Un sont conçus pour être beaux sur tous les clients d'e-mail. Cependant, certaines versions d'Outlook peuvent poser des problèmes pour afficher votre conception exactement comme vous l'avez créée.

Pourquoi cela se produit-il ?

Depuis Outlook 2007, Outlook utilise Microsoft Word pour afficher les e-mails en HTML, ce qui peut poser des problèmes d'affichage de la conception de votre e-mail. Microsoft Word est conçu pour l'impression et tente d'afficher le code HTML comme s'il était imprimé, ce qui le rend différent de ce que vous avez conçu et testé.

Malheureusement, APSIS Un ne peut pas faire grand-chose sur la façon dont Outlook ou d'autres clients de messagerie affichent les e-mails HTML.

Envoyer un e-mail de test pour la version que la plupart de vos profils utilisent.

Nous vous recommandons d'essayer d'identifier la version d'Outlook utilisée par la plupart de vos destinataires d'e-mails et de créer une conception qui leur convienne. Le mode Prévisualiser vous donnera une bonne indication. Si possible, envoyez un e-mail de test et visualisez votre conception directement dans cette version d'Outlook.

Défis courants liés à la conception des e-mails Outlook

Passons en revue quelques-uns des problèmes de conception les plus courants que nous rencontrons avec Outlook.

Coins arrondis pour les boutons et les bordures : Outlook ne prend pas en charge le rayon des bordures, de sorte que vos coins arrondis seront droits.

Polices : Si Outlook ne reconnaît pas la police que vous avez sélectionnée dans votre conception, il sélectionnera par défaut une police standard.

GIF : Toutes les versions d'Outlook ne prennent pas du tout en charge les GIF animés. Les versions ultérieures d'Outlook prennent en charge un nombre limité de boucles d'animation.

Image Arrière-plan : Surrière-plan ne prend pas en charge d'autres styles sur les images d'arrière-plan que la Vignette et sera donc présenté avec une couleur d'arrière-plan.

Boutons : Vous ne pouvez pas cliquer sur le bouton en entier, mais uniquement sur le texte qu'il contient.

Apparition de lignes : est dû à un bogue dans le rendu de Outlooks. Quel(s) est(sont) en fait le jeu de couleurs derrière votre Contenu.

Il n'y a pas de prise en charge des fichiers SVG ou WEBP.

Le transfert de l'E-mail risque de rompre la conception.

Autres :...

Non prise en charge des images d'arrière-plan dans les divs et les cellules de tableau Non prise en charge des CSS float ou position

Non prise en charge de l'ombre du texte

Mauvaise prise en charge du rembourrage et des marges

Mauvaise prise en charge de la largeur et de la hauteur des feuilles de style CSS

Problèmes avec les couleurs d'arrière-plan des éléments imbriqués

Coins arrondis pour les boutons et les bordures

Coins arrondis, dans les boutons et dans la Bordure autour de l'e-mail. Les coins arrondis sont réalisés avec le paramètre css-proparty border- radius. Outlook n'a pas de support pour border-radius, donc vos coins arrondis seront droits.

Polices de caractères

Outlook ne gère pas les polices de secours de la même manière que les autres clients e-mail.

Si Outlook ne reconnaît pas la police que vous avez sélectionnée dans votre conception, il sélectionnera une police standard par défaut.

Si vous avez sélectionné une police Google, APSIS Un remplacera la police Google par une police compatible avec le web, afin d'obtenir au moins une police similaire à celle que vous avez sélectionnée.

Lato, Ouvert Sans, Ouvrir Sans, Roboto, Source Sans Pro s'afficheront comme suit :

Verdana, Geneva, sans-serif

Arvo, Lora, Merriweather, Noticia Texte, Playfair Affichage :

Heure Nouveau Roman, Times, serif

GIF

Toutes les versions ne prennent pas du tout en charge les images GIF animées. Les versions ultérieures d'outlook prennent en charge un nombre limité de boucles d'animation.

Les versions 2007, 2010, 2013 et 2016 afficheront l'image, mais ne l'animeront pas, elles afficheront la première image. La version 2019 animera l'image pendant 3 boucles. Quand on crée l'image GIF, la solution est de s'assurer que la première partie de l'image n'est pas vide.

Image-plan

Surrière-plan ne prend pas en charge d'autres styles sur les images d'arrière-plan que la Vignette et sera donc présenté avec une couleur d'arrière-plan.

Boutons

Vous ne pouvez pas cliquer sur le bouton en entier, mais uniquement sur le texte qu'il contient.

Lignes apparaissant

Vous voyez des lignes dans l'E-mail ? Ceci est dû à un bug dans le rendu d'Outlook. Quel(s) est(sont) la(les) couleur(s) définie(s) derrière votre Contenu. Si l'Arrière-plan de votre e-mail est défini en rouge et que la couleur du corps est définie en blanc, vous pouvez voir des lignes rouges.

Vous pouvez réduire le nombre de lignes en utilisant des nombres pairs pour la taille de la police, la hauteur des lignes, les interlignes et les marges. Identiquement, elles peuvent tout de même apparaître. Malheureusement, il n'y a pas de solution parfaite pour tous les cas.

La seule véritable solution est de choisir la même couleur d'Arrière-plan pour l'E-mail et le corps du texte.

SVG et images WEBP

Les fichiers SVG WEBP ne sont pas pris en charge. Par conséquent, si vous créez un lien vers un fichier image dans l'élément image de l'éditeur d'e-mails d'APSIS One, il ne s'affichera pas dans Outlook. Outlook et d'autres clients e-mail ne prennent pas en charge les fichiers SVG ou WEBP, c'est pourquoi nous avons bloqué le téléchargement des fichiers SVG et WEBP.

Le transfert de l'E-mail peut rompre la conception.

Veillez à inclure une version Web de l'E-mail afin que les destinataires aient l'option de consulter l'E-mail en ligne.

Détails supplémentaires

Il n'existe pas de lignes directrices officielles pour contourner Outlook, mais cet article de Litmus vous donne des détails supplémentaires.