Prévisualisation d’e-mail HTML
Voyez votre e-mail dans Gmail sur ordinateur et mobile

Ce que vous montre une prévisualisation d’e-mail HTML

Une prévisualisation d’e-mail HTML montre votre e-mail avant que quelqu’un d’autre le voie. Vous collez le code, et la page le dessine comme Gmail le ferait. Puis vous le vérifiez sur ordinateur et sur mobile.

Cela évite de vrais ennuis. De plus, Gmail change plus de choses que la plupart ne le pensent. Il retire certaines balises, ignore une partie du CSS et coupe les longs messages. Un coup d’œil rapide vaut donc mieux qu’un e-mail cassé plus tard.

Cette prévisualisation suit les règles que Google écrit pour les développeurs. Elle lit la même liste de propriétés CSS prises en charge que Google publie. Ainsi, les vérifications viennent de la source et non de suppositions.

Par ailleurs, tout se passe dans votre navigateur. Votre e-mail, avec ses noms et ses offres, ne quitte jamais cette page.

Regarder un e-mail avant son départ

Collez ou ouvrez votre HTML, et l’aperçu apparaît aussitôt. Il n’y a même pas de bouton à toucher pour voir le résultat. Si vous voulez juste jeter un œil, choisissez un exemple et appuyez sur Essayer un exemple.

D’ailleurs, l’aperçu vit dans une boîte à part. Le CSS de votre e-mail ne peut pas toucher cette page, et cette page ne peut pas toucher votre e-mail. Ainsi, l’aperçu reste fidèle.

Aperçu d’e-mail sur ordinateur et mobile

Ordinateur montre votre e-mail à 760 pixels de large, proche de la largeur d’un volet de lecture Gmail. Ainsi, mobile le montre à 375 pixels, la largeur d’un téléphone courant.

Les media queries réagissent à ces largeurs. Une règle pour les écrans jusqu’à 480 pixels s’active quand vous choisissez Mobile. Vous voyez ainsi deux colonnes s’empiler en une.

Comment Gmail lit votre CSS

Google tient une page appelée CSS support in Gmail. Elle liste chaque propriété que Gmail prend en charge. En effet, Gmail ignore tout le reste.

Mettez Règles sur Gmail, et l’outil écarte tout ce que la liste omet. Par exemple, box-shadow, position et les mises en page flex disparaissent. Mettez Règles sur Navigateur simple, et il n’écarte rien, ce qui permet de comparer les deux.

Sélecteurs et media queries dans Gmail

Gmail lit les sélecteurs de classe, d’élément et d’ID. De plus, il saute les sélecteurs d’attribut et les pseudo-classes comme :hover. Pour les media queries, il prend en charge la largeur, l’orientation et la résolution.

L’outil suit les mêmes limites. Un sélecteur sauté apparaît dans les vérifications avec un exemple, pour que vous le trouviez vite.

Objet et texte d’aperçu

Saisissez un objet et un nom d’expéditeur, et la page dessine une ligne de boîte de réception. Par ailleurs, elle montre le nom, l’objet et les premiers mots du message. Ces premiers mots sont le texte d’aperçu.

Beaucoup d’e-mails commencent par Voir dans le navigateur, ce qui gaspille la meilleure ligne de la boîte. Ajoutez plutôt un court pré-en-tête caché, ou saisissez votre propre texte dans Texte d’aperçu. D’ailleurs, les vérifications vous avertissent quand l’e-mail s’ouvre sur une ligne faible.

L’allure approximative de l’e-mail en thème sombre

Beaucoup de lecteurs utilisent Gmail en mode sombre. Le menu Apparence donne une vue sombre approximative. Il inverse les couleurs claires en sombres et remet les images dans le bon sens.

Gmail ne publie pas sa propre méthode, prenez donc cette vue pour un voyant d’alerte et non pour une promesse. Elle montre pourtant vite un logo sombre qui disparaît sur une page sombre.

Images dans l’aperçu

Ainsi, votre navigateur empêche ce site de charger des images d’autres sites. C’est une règle de sécurité, et nous la gardons. Une image distante apparaît donc comme une case grise de la bonne taille.

La case montre quand même la mise en page. De plus, les vérifications signalent le texte alternatif manquant, les largeurs manquantes et les images intégrées en base64, que Gmail n’affiche pas.

Ce que Gmail retire d’un e-mail

Gmail n’exécute pas de scripts. En effet, il retire aussi les cadres, les formulaires, la vidéo et le SVG. Il supprime également les gestionnaires d’événements comme onclick et les liens qui commencent par javascript:.

L’outil fait de même et liste chaque retrait. Vous découvrez donc un bouton cassé avant vos lecteurs.

La limite de coupure de 102 Ko

Gmail coupe un message de plus de 102 Ko. Il cache le reste derrière un lien nommé Afficher le message dans son intégralité. Si votre ligne de désinscription est tout en bas, les lecteurs ne la verront peut-être jamais.

De plus, la case Taille montre votre e-mail en kilo-octets. Pour le réduire, retirez les commentaires, répétez moins de styles en ligne et passez le code dans un minifieur HTML.

Vérifications pour les modèles d’e-mail à froid

Un e-mail à froid marche mieux quand il ressemble à une note d’une personne. Gardez donc un design léger : quelques paragraphes, un lien et un moyen clair de se désinscrire.

Les vérifications signalent les ennuis habituels. Elles avertissent des e-mails faits surtout d’images, des liens qui ne mènent nulle part et d’une ligne de désinscription absente. Aux États-Unis, le guide de conformité CAN-SPAM explique pourquoi ce dernier point compte.

Charger un fichier HTML de votre ordinateur

Par ailleurs, la plupart des outils d’e-mail permettent d’exporter le HTML d’un modèle. Enregistrez-le en fichier, appuyez sur Ouvrir un fichier, et l’aperçu apparaît. Les fichiers jusqu’à 2 Mo fonctionnent, bien plus que ce que Gmail afficherait.

Vérifier vos liens avant d’envoyer

Un lien cassé vous coûte un lecteur. D’ailleurs, les vérifications comptent chaque lien et avertissent des liens vides, des liens http simples et des liens dangereux. Les liens restent désactivés dans l’aperçu, donc un clic perdu ne vous éloigne jamais de votre travail.

Avant d’envoyer, ouvrez chaque lien une fois dans votre propre navigateur. Lisez ensuite l’adresse dans la barre d’état et vérifiez qu’elle mène où disent les mots.

Comparer les règles de Gmail à un navigateur simple

Basculez le menu Règles d’avant en arrière et regardez ce qui change. Chaque différence est quelque chose que Gmail retirerait à vos lecteurs. Corrigez-les d’abord, car elles décident de l’aspect de votre e-mail dans la boîte que la plupart utilisent.

Un aperçu n’est pas un test complet

Ainsi, cette prévisualisation n’est pas Gmail lui-même. Elle suit les règles écrites de Gmail, mais le vrai Gmail a ses propres applis, comptes et mises à jour. Envoyez-vous aussi un test.

Outlook et Apple Mail se comportent aussi autrement. En effet, les tableaux et les styles en ligne sont le moyen le plus sûr de construire un e-mail pour tous.

Comment résoudre les ennuis d’e-mail les plus courants

Bâtissez la mise en page avec des tableaux et donnez à chaque image une largeur précise. Mettez les styles clés en ligne. Ajoutez un texte alternatif à chaque image et gardez la colonne principale près de 600 pixels. Puis prévisualisez de nouveau, sur les deux écrans.