Aperçus par client mail

À quoi servent les aperçus par client

Un email n’a pas un rendu, il en a autant que de clients mail. Avant de l’afficher, chaque webmail et chaque application retouche votre HTML : Gmail remplace la balise <body> et ignore certaines propriétés CSS, SFR et La Poste suppriment entièrement vos blocs <style>, Outlook.com refuse le positionnement des éléments, et ainsi de suite.

Le résultat, c’est la campagne validée dans votre outil d’envoi qui arrive avec un bouton sans couleur, des colonnes empilées ou un fond disparu chez une partie de vos destinataires. Et personne ne vous prévient.

La section Rendus clients de l’onglet Rendu reconstitue l’affichage de votre email dans les principaux clients mail, avant l’envoi, et vous dit précisément ce que chacun d’eux a modifié. C’est l’écran à ouvrir avant de valider une campagne, en particulier si votre gabarit utilise une mise en page élaborée.

Un aperçu simulé, pas une capture Les aperçus sont reconstruits à partir des règles connues de chaque client. Ils montrent fidèlement ce qui disparaît ou change de place, mais les polices et les espacements par défaut peuvent différer légèrement du rendu réel.

Les clients couverts

Client	Version simulée
Apple Mail	iOS et macOS
Gmail	Webmail
Outlook.com	Webmail et nouvel Outlook
Yahoo Mail	Webmail
Orange	Webmail
SFR	Webmail
La Poste	Webmail
Free	Webmail

Outlook pour Windows (version classique) et les applications mobiles de Gmail et d’Outlook ne sont pas encore proposés en aperçu. Ils sont en revanche couverts par l’analyse de compatibilité, plus bas dans le même onglet.

Ouvrir les aperçus

Connectez-vous à votre compte, dont la création est gratuite, puis lancez un test depuis la page d’accueil : envoyez votre email, tel que vous l’enverriez à vos clients, à l’adresse de test qui vous est donnée.
Une fois l’analyse terminée, ouvrez l’onglet Rendu de la page de résultats.
L’aperçu d’Apple Mail iOS s’affiche. Cliquez sur un autre client pour basculer. Le premier affichage prend quelques secondes, les suivants sont immédiats.

Réservé aux tests lancés depuis un compte Les aperçus ne s’affichent que pour un test lancé en étant connecté à votre compte. Un test lancé sans compte montre à la place une invitation à en créer un : il faut alors relancer le test une fois connecté. En revanche, un rapport issu de votre compte affiche les aperçus à toute personne à qui vous partagez son lien.

Section Rendus clients de l'onglet Rendu, avec l'aperçu Gmail sélectionné et la liste des modifications appliquées par Gmail sous l'aperçu — L’aperçu Gmail du même email : le badge « NEW » a perdu son positionnement et le fond de la page a disparu. La liste en dessous explique pourquoi.

Lire un aperçu

Chaque aperçu est affiché à la largeur de ce client : 390 pixels pour Apple Mail iOS, entre 720 et 900 pour les autres. Sur iOS, un email plus large que l’écran est réduit pour tenir en entier, comme le fait l’application Mail.

Cochez Montrer les zones modifiées pour encadrer chaque élément que le client a retouché : une règle CSS ignorée, une balise remplacée, une image non affichée.

Aperçu SFR avec les zones modifiées encadrées en pointillés : sans bloc style, tous les éléments mis en forme par la feuille de style perdent leur apparence — Chez SFR, le bloc `<style>` est supprimé : tous les éléments mis en forme par la feuille de style sont encadrés.

Sous l’aperçu, Ce que ce client modifie dans votre email liste chaque changement, avec :

le nom de la fonctionnalité concernée, qui renvoie à sa fiche détaillée sur caniemail.com ;
son statut : non supporté quand le client l’ignore complètement, support partiel quand seule une partie des valeurs ou des syntaxes est refusée ;
le nombre d’occurrences dans votre email ;
pour un support partiel, la règle précise appliquée par ce client.

Deux informations peuvent s’ajouter en bas de liste. Les pixels de suivi de votre email sont neutralisés dans l’aperçu, pour que son affichage ne compte pas comme une ouverture dans les statistiques de votre outil d’envoi. Et quand le client remplace la balise <body>, ses attributs de mise en forme (bgcolor, background) sont perdus : placez votre couleur de fond sur un tableau englobant plutôt que sur le <body>.

Free : un aperçu à prendre avec précaution Les règles publiquement connues pour le webmail de Free sont encore très partielles. L’aperçu le signale par un avertissement : tant qu’il est affiché, considérez ce rendu comme indicatif.

L’analyse de compatibilité

Sous les aperçus, la section Compatibilité clients mail prend le problème par l’autre bout : elle repère dans votre code les fonctionnalités HTML et CSS à risque, puis indique client par client celles qui ne sont pas supportées.

Section Compatibilité clients mail avec les fonctionnalités détectées et, pour chaque client, le nombre de points bloquants et cosmétiques — Chaque ligne se déplie pour montrer le détail des fonctionnalités en cause chez ce client.

Les points sont classés en deux niveaux :

bloquant : la mise en page casse ou du contenu disparaît, par exemple des colonnes en display:flex dans Outlook pour Windows ou une image SVG non affichée ;
cosmétique : un effet est perdu, comme des coins arrondis, une ombre ou une police web.

Deux cas ne sont volontairement pas comptés. Les règles placées dans une @media sont des améliorations progressives : un client qui ne les comprend pas affiche simplement la version de base. Et si votre email contient des commentaires conditionnels Outlook (<!--[if mso]>), Outlook pour Windows est évalué sur le contenu qui lui est réservé, les autres clients sur le reste.

Questions fréquentes

Pourquoi le fond de mon email disparaît-il dans Gmail ? Gmail remplace la balise <body> par un bloc de sa propre page : la couleur de fond posée sur le <body>, en attribut comme en CSS, ne s’applique plus. Placez-la sur un tableau qui englobe tout l’email.

Pourquoi mon email perd-il toute sa mise en forme chez SFR et La Poste ? Ces webmails suppriment les blocs <style>. Seuls les styles écrits directement sur les éléments, dans leur attribut style, sont conservés. La plupart des outils d’envoi savent « inliner » les styles automatiquement avant l’envoi : activez cette option.

L’aperçu déclenche-t-il mes pixels de suivi ? Non. Les pixels de suivi sont neutralisés avant l’affichage, vos statistiques d’ouverture ne sont pas faussées.

Mon email est-il envoyé à Gmail, Orange ou aux autres clients pour faire l’aperçu ? Non. Les aperçus sont calculés sur nos serveurs, sans que votre email soit transmis à aucun de ces services.

Pour aller plus loin

L’article de blog Pourquoi votre email ne s’affiche pas pareil dans Gmail, Outlook et Orange explique en détail ce que chaque client fait à votre HTML, et comment concevoir un gabarit qui résiste à tous.