Même si les campagnes conçues dans Kiliba sont pensées pour s’afficher correctement sur la plupart des messageries, certaines particularités d’Outlook peuvent entraîner un rendu inattendu entre ce que vous voyez dans l’éditeur Drag & Drop et ce que vos contacts reçoivent réellement.

Ce guide présente les principaux problèmes d’affichage liés à Outlook et les bonnes pratiques pour y remédier.

D’où viennent les différences d’affichage ?

Outlook — notamment ses anciennes versions (2003, 2007, 2010) — s’appuie sur Microsoft Word pour afficher le contenu HTML. Cela limite la prise en charge de nombreuses propriétés CSS utilisées dans les emails modernes.

D’autres éléments peuvent également perturber le rendu :

• la configuration de la messagerie du destinataire,

• la résolution de l’écran,

• le blocage automatique des images.

Avant de chercher une solution, comparez l’affichage de votre campagne sur plusieurs clients (Gmail, Yahoo, Apple Mail, etc.). Si seul Outlook pose problème, il est probablement à l’origine du rendu dégradé.

Problèmes d’affichage courants sur Outlook

Astuce
Tous les utilisateurs Outlook ne rencontreront pas ces soucis. Malgré tout, nous recommandons de tester vos messages sur différentes messageries avant l’envoi.

Images et visuels

Marges autour des images ignorées

Outlook ne tient pas compte des marges définies dans l’éditeur, ce qui peut faire coller le texte à vos visuels.

➡️ Solution : ajoutez une bordure directement dans le fichier image avant de l’importer.

Images bloquées par défaut

Outlook n’affiche pas automatiquement les images. Le destinataire doit choisir de les autoriser.

Optimisez l’expérience :

• Ajoutez un texte alternatif (ALT) à vos visuels,

• Prévoyez une couleur de fond si vous utilisez une image d’arrière-plan,

• Si certaines versions ne chargent pas les images hébergées, importez-les directement dans votre email (en veillant au poids global de votre campagne).

Images recadrées, coupées ou redimensionnées

Outlook applique une hauteur maximale d’environ 1728 px. Au-delà, les images peuvent être tronquées.

➡️ Bon réflexe :

• Redimensionnez vos images en amont,

• Si nécessaire, découpez un grand visuel en plusieurs sections affichées successivement.

GIFs et animations

Les GIFs animés ne fonctionnent que sur Outlook 365, Outlook.com et l’application mobile. Les versions plus anciennes n’afficheront que la première image.

➡️ Conseil : faites apparaître le message important dans la première frame.

Boutons et appels à l’action

Texte coupé ou mal centré

Outlook peut casser le texte d’un bouton sur deux lignes.

Mauvaise police dans un bouton

Une simple espace au début ou à la fin du texte peut provoquer une police incohérente dans Outlook.

➡️ Vérifiez et supprimez tout espace.
Si cela ne fonctionne pas, utilisez également un visuel cliquable.

Coins arrondis non pris en charge avec une nouvelle police importée

La propriété CSS border-radius n’est pas correctement interprétée par Outlook si une police supplémentaire à été ajouté.

➡️ Solution fiable : Nous pouvons le désactiver à la demande au support pour outlook uniquement  
ou vous pouvez utiliser un bouton sous forme d’image.

Mise en forme du texte

Polices

Les polices système (Arial, Calibri, Verdana…) sont recommandées. Les Google Fonts peuvent donner un rendu imprévisible selon l’appareil.

➡️ Indiquez toujours une police de secours (fallback).

Hauteur de ligne (line-height)

Outlook ne traite pas toutes les valeurs de la même manière.

➡️ Si vous codez vos emails, fournissez des valeurs en pourcentage et en nombre entier.
Dans l’éditeur Kiliba, cela est paramétré automatiquement.

Gestion des arrière-plans sur Outlook

Background image mal interprétée

De nombreuses versions d’Outlook affichent très mal les images de fond (background-image). Elles peuvent :

• ne pas se charger du tout,

• être étirées ou coupées,

• s’afficher uniquement sur une partie du bloc.

➡️ Recommandation : Utilisé plutôt une couleur de fond. N’utilisez pas d’image de fond pour des éléments essentiels à la compréhension.

Background-repeat non pris en charge

La propriété CSS background-repeat, qui permet de répéter une petite image sur toute la zone d’un bloc (mosaïque), n’est pas gérée correctement par Outlook.

Cela peut entraîner :

• un affichage partiel,

• un fond incomplet,

• des motifs déformés ou non répétés.

➡️ Solutions possibles :

• Évitez les motifs répétés sur les emails destinés à un large public incluant Outlook,

• Utilisez une image unique redimensionnée à la taille souhaitée,

• Ou remplacez la répétition par une couleur unie visuellement proche.

Mise en page et structure

Espaces blancs imprévus

Outlook peut insérer des espaces, comme s’il appliquait un saut de page.

➡️ Réorganisez la structure de votre campagne et testez pour identifier où Outlook « coupe » l’affichage.

Contenu trop large

Une URL inscrite en texte brut peut élargir la zone d’affichage.

➡️ Transformez toujours les liens en texte cliquable.

Comment optimiser vos emails pour Outlook

• Utilisez des visuels en JPEG ou PNG.

• Réservez les informations importantes au texte plutôt qu’aux images.

• Vérifiez la version mobile de votre campagne.

• Testez vos messages sur plusieurs messageries, dont Outlook.

• Prévoyez un lien « Voir dans le navigateur » pour contourner tout problème d’affichage.