Stripo_Outlook Rendering Issues_Featured Image1
23 décembre 2019

Problèmes courants d’affichage dans Outlook et comment Stripo les règle

Optimiser les e-mails pour Outlook
Table des matières
  1. 1. Des boutons arrondis s’affichent carrés dans certaines versions d’Outlook
  2. 2. L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook
  3. 3. Les items des menus perdent leurs styles dans certaines versions d’Outlook
  4. Mot de la fin
1.
1. Des boutons arrondis s’affichent carrés dans certaines versions d’Outlook

Outlook est un client de e-mails assez populaire. Il détient 11 % du marché (les applications Outlook détiennent 9 % alors que la version Web est utilisée par 2 % des gens dans le monde).

Il est dit qu’il est suffisant pour tous les besoins des entreprises.

Cependant, Outlook est célèbre pour ses règles d’affichage « uniques ». Les problèmes les plus communs rencontrés par les gens lorsqu’ils ouvrent ou envoient un e-mail par Outlook sont :

  • Les boutons arrondis deviennent carrés ;

  • Les fonds pour des conteneurs individuels ou des rangées ne s’affichent pas ;

  • Les onglets de menus perdent leurs styles.

Ces problèmes sont largement discutés sur le Web, ce qui fait que nous voulons couvrir les solutions à ces problèmes dans notre blogue.

Certains, essayant de corriger ces problèmes, font des changements à leur code tout entier. Mais, comme c’est souvent le cas, vous réglez un problème et un autre surgit.

Par exemple, un modèle de e-mail avec le code corrigé peut ne pas modifier les boutons dans Outlook, mais les bannières ne s’affichent plus. Ou, pire encore, le format des e-mails est brisé dans d’autres clients comme Gmail ou Yahoo.

C’est pourquoi nous croyons que le problème doit être réglé localement – seulement pour les éléments avec problèmes et non pour le message complet.

1. Des boutons arrondis s’affichent carrés dans certaines versions d’Outlook

De nombreuses études ont démontré que la forme d’un bouton CTA n’impacte pas du tout le CTR ni le CTOR.

La première règle pour faire que vos boutons soient efficaces est de les rendre visibles avec un texte clair et attrayant.

Mais, la forme des boutons nous importe à nous, les designers, les codeurs et les gens du marketing par e-mail, car nous voulons que nos e-mails soient cohérents avec la marque.

Stripo_Outlook-Rendering-Issues_Buttons1

Alors, que fait Outlook aux boutons ?

Premièrement, certaines versions d’Outlook affichent simplement tous les angles droits (carrés). Puis, elles enlèvent les espaces blancs des boutons ce qui les rend moins attrayants, bien qu’ils demeurent visibles.

Qu’est-ce qui cause ce bogue ?

Il y a 3 méthodes principales de disposer des boutons dans un e-mail :

  1. La méthode par tableau.

  2. La méthode Stripo. Donnons-lui ce nom, car elle fut développée pour notre éditeur d’e-mails et, selon nous, elle répond le mieux à nos besoins.

  3. La méthode VML.

La troisième fut inventée uniquement pour Outlook. Alors que les autres méthodes ne sont pas acceptées par Outlook, elles ont un plus grand support parmi les autres clients e-mail.

Comment définir une méthode VML

Si vous êtes un usager Stripo, pour optimiser vos boutons pour Outlook, vous n’avez qu’à :

  • Ouvrir les « Paramètres généraux » dans le panneau latéral 

  • Ouvrir l’onglet « Bouton » ;

  • Et basculer le bouton « Prise en charge d’Outlook ».

Support-for-Outlook_Control-(1)Maintenant, vos boutons demeureront arrondis, avec leurs styles et couleurs même dans Outlook.

Outlook-2016

(Outlook 2011, OSX 10.8)

Vous voulez faire la même chose ? 

Utilisez Stripo

2. L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook

La majorité des questions à propos d’Outlook sur le Web tourne autour de « comment définir une image de fond dans des modules ou différents éléments ? ».

Stripo_Outlook-Rendering-Issues_Background-Images1L’e-mail de droite a l’air plutôt bien, mais l’exemple de gauche semble plus complet.

C’est le but principal des images de fond: de rendre le design des e-mails complet.

Le fait le plus intéressant et impressionnant à ce sujet est qu’Outlook affiche les images de fond qui sont définies pour l’e-mail entier, à travers l’ensemble de ses versions (applications de bureau, Web et même Office 365).

Et si vous avez besoin de définir un arrière-plan pour un certain élément de votre e-mail ?

Premièrement, laissez-nous vous rappeler que vous pouvez définir un arrière-plan pour le modèle entier de vos e-mails dans l’onglet Apparence de la section des Paramètres généraux et qu’il s’affichera correctement dans tous les clients e-mail d’ordinateur de bureau.

Comment définir un arrière-plan qui s’affichera dans Outlook

La solution est simple : faites-le comme une bannière. Puisque toutes les couches d’une bannière que vous créez dans Stripo sont exportées comme une image et nous savons que toutes les images sont bien affichées par tous les clients e-mail.

Stripo_Outlook-Rendering-Issues_Background-Image-for-Structure1

Pour construire une bannière, vous devez :
  • Envoyer une image de bannière qui servira d’arrière-plan de la structure ;

  • Envoyer une image « additionnelle » qui sera l’image principale de votre module de contenu ou envoyer l’image de votre bouton — rappelez-vous d’utiliser notre option « Sticky Notes » pour placer les images additionnelles à distances égales de tous les côtés de l’image de la bannière ;

  • Placez votre texte CTA sur les images ;

  • Ajoutez un hyperlien à cette structure.

Important de noter :

Ce truc ne fonctionne que si vous ajoutez un seul produit dans cette structure/rangée.

Comment définir une image de fond pour un conteneur ou un élément qui s’affiche dans Outlook

Dans certains cas, vous pourriez avoir besoin de définir un arrière-plan distinct pour un conteneur ou une colonne d’une rangée.

Notre arrière-plan pour les conteneurs affiche correctement dans toutes les versions d’Outlook.

Stripo_Outlook-Rendering-Issues_Background-for-Containers-and-Elements1Il y a deux façons de le faire.

Méthode 1. Construisez une bannière.

Oui, vous devrez la construire de la façon décrite dans la section précédente, mais vous devrez utiliser une structure de 2 colonnes.

Stripo_Outlook-Rendering-Issues_2-Coumn-Structure1

Méthode 2. Créer un arrière-plan VML.

Vous devez préparer la structure et l’élément auquel vous allez ajouter un arrière-plan.

Une fois que cela est fait, vous devez travailler avec le code de votre modèle d’e-mail.

  • Placez votre souris sur l’élément directement dans le modèle ;

  • Au-dessus de cet élément, trouvez l’étiquette « conteneur » ;

Stripo_Outlook-Rendering-Issues_Container-Label

  • Cliquez cette étiquette pour accéder aux paramètres du conteneur ;

  • Maintenant, ouvrez l’éditeur de code ;

Stripo_Outlook-Rendering-Issues_Opening-Code-Editor1

  • Insérez ce code immédiatement au-dessus de la ligne commençant par « table width »

<!--[if gte mso 9]> 
<v:rect xmlns : v=" urn : schemas-microsoft-com: vml » fill=" true » stroke=" false » style=" width:327px ; height:100%;”>   
<v: fill type="frame” src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png” color="#7bceeb”> 
</v: fill>    <v: textbox inset="0,0,0,0″> 
<! [endif]—>

(la source du code : backgrounds.cm. Nous avons optimisé ce code pour qu’il s’adapte mieux aux besoins de notre éditeur);

  • Insérez ce code exemple juste en dessous de la même ligne :

< ! – [if gte mso 9]>
 </v:textbox> 
 </v:rect> 
 < ! [endif]-->
  • Remplacez les liens soulignés par l’URL de votre image de fond ;

Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds

  • Dans le code imbriqué, modifiez la largeur de l’image en accord avec la largeur de votre conteneur — vous pouvez le voir dans la ligne supérieure après la balise « width ». Dans notre cas, c’est 600 px.

Si l’image est hébergée sur notre serveur, vous pouvez alors obtenir l’URL ici :
  • Dans votre modèle d’e-mail HTML, cliquez l’image de fond que vous avez choisi ;

  • Dans le panneau des paramètres, cliquez sur le bouton « URL » ;

  • Copiez le lien dans le champ « lien externe »

Outlook_Rendering-Issues_Copying-URL-links

Important de noter :

Si vous avez déjà ajouté le bouton VML au conteneur ou à la structure, alors votre arrière-plan VML ne fonctionnera pas. Outlook n’affiche qu’un seul des deux objets VML — celui qui a été défini en premier.

À venir bientôt :

Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non.

3. Les items des menus perdent leurs styles dans certaines versions d’Outlook

Nos usagers rencontrent rarement ce problème, mais nous l’ajoutons tout de même à la liste :

Les menus et les boutons peuvent perdre leurs styles, incluant les couleurs, taille de la police, etc.

Lorsque j’ai construit mon e-mail, je définis la police comme étant Trebuchet, avec une taille de 18 px.

Mais dans Outlook, j’ai vu ceci :

Stripo_Outlook-Rendering-Issues_Menus-Lose-Their-Styles.1Si vous regardez de près, vous verrez que le premier item du menu est écrit en Times New Roman, 12px, et qu’il est noir. 

Qu’est-ce qui cause ce bogue ?

Vous avez simplement oublié d’ajouter un hyperlien à ces éléments. Lorsqu’un élément devant avoir un lien n’en a pas, il perd ses styles.

Solution :

Vérifiez que vous avez ajouté les liens à tous les éléments avant de tester ou d’envoyer vos e-mails vers vos abonnés.

Important de noter :

Lorsque vous construisez vos modèles d’e-mails, assurez-vous d’ajouter un lien à tous les éléments qui doivent en avoir un. Si vous n’oubliez pas d’enlever un lien, mais oubliez simplement de le remplacer par votre lien, votre menu ne perdra pas son style, car il aura tous les liens nécessaires.

Mot de la fin

Outlook est vraiment suffisant pour plusieurs besoins d’affaires. Nous n’avons pas à avoir peur de lui. Tout le contraire — nous devons apprendre à bien le gérer. Par ailleurs, Outlook supporte maintenant les GIFs animés et, à partir de cet été, il supportera AMP pour les e-mails. N’est-ce pas fantastique ?

Grâce à notre éditeur de code HTML, nous permettons à nos usagers d’imbriquer des éléments de code spéciaux pour leur permettre d’envoyer des e-mails à la fois magnifiques et sophistiqués à l’ensemble de leurs destinataires, incluant ceux qui utilisent différentes versions d’Outlook.

Bientôt, vous n’aurez plus à jouer avec le code — nous le ferons pour vous.

Vous n’aurez qu’à activer les options correspondantes.

Veuillez lire cet article de blogue sur créer et exporter des modèles d’e-mail vers Outlook avec Stripo. 

Optimiser mes e-mails pour Outlook
Cet article a-t-il été utile ?
Tell us your thoughts
Merci pour votre avis !
12 commentaires
MisterIz il y a 1 an
Unfortunately the banners resize entirely on mobile devices making any text or CTA buttons very small.
nicoletta arena il y a 2 ans
quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?
Lea Simpkins il y a 3 ans
The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?
Hanna Kuznietsova il y a 3 ans
Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. https://stripo-cdn.stripo.email/photos/shares/Blog//Containers-Get-Moved-to-Next-Rows.png -- email sent via an ESP https://stripo-cdn.stripo.email/photos/shares/Blog//Email-Sent-Through-Outlook.png -- email sent via Outlook.
Alaa Abdelrahim il y a 3 ans
17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(
Hanna Kuznietsova il y a 3 ans
Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you
GERWIN RUSSELL FARROÑAN ALBORNOZ il y a 3 ans
Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código (https://stripo.email/photos/shares/Blog//Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds.png) pero no me resulta. Adjunto el enlace de la plantilla que hice. https://viewstripo.email/f9949d8f-3dd3-4452-ab85-a2f603d0360e1599420348110 Agradecería que me digan que tengo que corregir para que resulte.
Hanna Kuznietsova il y a 3 ans
Hola. Intente utilizar "New Email Copy 3" y este contenedor http://prntscr.com/ucvqve como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: https://prnt.sc/ucvp5o Si necesita más ayuda, envíenos un correo electrónico a support@stripo.email oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.
Francis Monier il y a 3 ans
Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")
Hanna Kuznietsova il y a 3 ans
Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces
Олег Темпов il y a 4 ans
Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...
Hanna Kuznietsova il y a 4 ans
Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту support@stripo.email, и мы постараемся помочь устранить данную проблему. Спасибо
Type
Industrie
Saisons
Intégration
Éditeur Stripo
Simplifier le processus de production des e-mails.
Plugin Stripo
Intégrez l'éditeur drag-n-drop de Stripo à votre application web.
Commandez un modèle personnalisé
Notre équipe peut le concevoir et le coder pour vous. Remplissez simplement le formulaire et nous vous répondrons dans les plus brefs délais.

Éditeur Stripo

Pour les équipes d'email marketing et les créateurs de mails en solo

Plugin Stripo

Pour les produits qui pourraient bénéficier d'un constructeur de mail intégré en marque blanche.