Créer des campagnes visuellement engageantes est essentiel pour capter l'attention de vos contacts et générer des conversions. Si Positive User aide votre équipe à concevoir des emails propres et responsives, les clients de messagerie de bureau comme Microsoft Outlook affichent souvent ces messages différemment des services de webmail.
Comprendre l'origine de ces différences d'affichage vous permet de faire les bons choix de conception dès le départ. En adaptant la mise en page de vos emails dans Positive User, vous pouvez préserver votre identité visuelle et vous assurer que vos emails s'affichent correctement auprès de votre audience.
Les problèmes d'affichage dans Outlook sont liés au fait que les versions de bureau de Microsoft Outlook utilisent le moteur de rendu HTML de Microsoft Word pour afficher les emails, plutôt que les moteurs de rendu des navigateurs web. Contrairement aux services de messagerie modernes comme Gmail ou Apple Mail, Outlook interprète le code des emails selon les règles d'un logiciel de traitement de texte. Il ignore ainsi fréquemment certaines propriétés CSS, les images d'arrière-plan et les règles de mise en page modernes.
Lorsque votre équipe crée et envoie une campagne via Positive User, la plateforme génère un code HTML propre, conçu pour s'adapter parfaitement aux services de messagerie standards. Cependant, lorsque Microsoft Outlook reçoit l'email, il réinterprète ce code selon les règles de rendu de Word.
Plusieurs facteurs liés à l'environnement déterminent la manière dont un email s'affiche dans Outlook :
Version d'Outlook : certaines versions de bureau appliquent les règles CSS différemment d'Outlook sur le web ou des applications mobiles.
Paramètres d'affichage et configurations multi-écrans : déplacer Outlook sur un écran secondaire ou consulter des emails avec différentes résolutions d'écran peut entraîner des problèmes de mise à l'échelle. Rouvrir Outlook sur votre écran principal permet souvent de résoudre les problèmes d'affichage liés à l'écran secondaire.
Filtres anti-spam : certains filtres de sécurité modifient le code HTML entrant avant de distribuer le message, ce qui peut perturber sa mise en page d'origine.
Par exemple, si vous envoyez une campagne avec un bouton d'appel à l'action aux coins arrondis, les applications de messagerie standard utilisent la propriété CSS border-radius pour créer des angles arrondis. Outlook ignore complètement cette règle et supprime cette mise en forme, affichant alors le bouton sous la forme d'un rectangle aux angles droits.
Comprendre les limitations de rendu HTML d'Outlook aide votre équipe à mieux structurer les éléments visuels et les mises en page dans Positive User.
La gestion des modèles de campagne et des éléments visuels nécessite certains ajustements de conception afin d'éviter les problèmes d'affichage courants :
Hébergement des images vs intégration : Outlook bloque par défaut les images hébergées en ligne. L'intégration des images directement dans le corps de l'email force leur affichage, mais augmente le poids du message et peut nuire à sa délivrabilité. Limitez donc les images intégrées aux éléments essentiels, comme votre logo.
Dimensions et mise à l'échelle des images : Outlook ignore le redimensionnement des images défini en HTML et applique des limites strictes à leur hauteur. Utilisez un logiciel de retouche d'image ou l'éditeur d'image intégré pour redimensionner les images à leurs dimensions exactes avant de les importer. Si une image est tronquée, divisez-la en plusieurs blocs d'image plus petits.
Marges des images : Outlook supprime souvent les marges autour des images, ce qui peut faire apparaître le texte directement contre le visuel. Pour recréer cet espacement, ajoutez directement une bordure au fichier image, dans la même couleur que l'arrière-plan de votre email, à l'aide d'un éditeur d'image.
GIF animés : Outlook n'anime pas les GIF et affiche uniquement leur première image. Veillez à faire apparaître votre message principal, votre offre et votre appel à l'action dès cette première image.
Images d'arrière-plan : les images d'arrière-plan définies en CSS ne sont pas prises en charge nativement par Outlook et sont remplacées par une couleur d'arrière-plan unie. Évitez donc de placer du texte important sur des images d'arrière-plan. Si vous créez votre email dans l'éditeur HTML, vous devez déclarer vos images d'arrière-plan en HTML plutôt qu'en CSS. Les arrière-plans déclarés en HTML sont pris en charge.
Polices et typographie : les polices web personnalisées, comme Google Fonts, peuvent s'afficher de manière imprévisible dans les versions de bureau d'Outlook. Utilisez des polices système standard telles qu'Arial, Helvetica, Georgia ou Times New Roman pour garantir une mise en forme cohérente.
Boutons CTA arrondis : pour forcer l'affichage de coins arrondis sur les boutons dans Outlook, insérez le bouton sous forme d'image. Notez que si les contacts ont désactivé le téléchargement des images, le bouton ne s'affichera pas tant que les images ne seront pas activées.
Alignement multi-colonnes : les mises en page comportant 2, 3 ou 4 colonnes peuvent se déformer ou se décaler lors de la mise à l'échelle de l'écran. Réduisez la largeur de votre mise en page dans l'Éditeur d'email, de la valeur par défaut de 650 px à environ 400 px, afin de stabiliser l'alignement.
Bordures en pointillés et en tirets : Word ajoute des lignes d'arrière-plan blanches entre les points et les tirets, quelle que soit la couleur de votre conteneur. Utilisez les bordures en pointillés ou en tirets uniquement sur des arrière-plans blancs, ou utilisez des bordures pleines sur les arrière-plans colorés.
Évitez de copier-coller directement du texte provenant de logiciels de traitement de documents externes, comme Microsoft Word, dans l'Éditeur visuel en glisser & déposer. Word ajoute du code HTML masqué qui peut perturber la mise en forme de l'email.
Collez d'abord le texte dans un éditeur de texte brut avant de le copier dans l'éditeur, ou utilisez le raccourci permettant de coller du texte brut (Ctrl + Shift + V dans Chrome) lorsque vous ajoutez du contenu à votre campagne.
