Quand vous créez et testez un modèle email html, il est possible que vous constatiez : « Tiens Gmail affiche mon email différemment ? ».
Il y a plusieurs spécificités à connaitre, nous allons vous donner les clés pour comprendre pourquoi Gmail peut sembler avoir un comportement différent si comparé à d’autres clients de messagerie.
1/ Les feuilles de style, ou plus communément les CSS
Il y a un certain nombre d’éléments à connaitre sur la relation entre Gmail et les feuilles de style CSS. Gmail ne gère les feuilles de CSS que si elles sont présentes dans la section HEAD de votre code email HTML.
Note très importante, Gmail enlève systématiquement tout bloc de style s’il détecte ne serait-ce qu’une seule erreur dans le code. Le bloc de style peut aussi être supprimé si ce dernier dépasse les 8192 caractères.
A l’instar de Yahoo, d’Outlook.com et d’autres clients Webmail, Gmail n’autorise pas les valeurs de marges négatives.
2/ Le poids du message mail
Autre particularité de Gmail, le client de messagerie réduit l’aperçu de votre email html si ce dernier dépasse les 102ko. Cette technique appelée Clipping permet d’afficher le début du message. Si le destinataire veut connaitre la suite de l’email il sera alors obligé de cliquer sur un lien « Voir l’intégralité du message ».
Il est fortement recommandé de ne pas insérer d’images directement dans le corps de l’email (Embedded). Utilisez plutôt des liens HTML classiques comme par exemple :
[dt_code]
<img src=“https://www.monserveur.com/images/monimage.jpg” alt=“texte de remplacement”>
[/dt_code]
Essayez de toujours rester sous la barre des 102ko. C’est aussi un gage de rapidité de téléchargement de vos messages notamment pour les applications de clients de messageries mobiles.
3/ Ecrire un bloc de PREHEADER
Une bonne majorité des clients de messagerie font apparaitre du texte de votre email juste après le sujet. Ce texte est issu d’une balise appelée PREHEADER.
4/ On dirait presque mon Emoji
Ce point a fait l’objet d’un article spécifique sur les Emojis. Pour faire simple, Gmail affiche les Emojis partout quelque soit l’ordinateur, la tablette ou le smartphone que vous utilisez. Néanmoins, il n’affiche que ses Emojis à lui.
5/ Gmail utilise le DOCTYPE HTML5
Voici une autre information qui permet de mieux comprendre pourquoi Gmail affiche le contenu de votre email différemment de votre navigateur. Quelque soit le DOCTYPE que vous utilisez dans votre code, Gmail va utiliser uniquement le moteur de rendu DOCTYPE HTML5.
Avec son moteur de rendu DOCTYPE, il arrive qu’un espacement supplémentaire soit créé par Gmail (il n’y a pas que lui, Outlook.com aussi par exemple). Une des astuces consiste à appliquer un style à votre image comme dans l’exemple ci-dessous :
[dt_code]
<img src=“monimage.jpg” alt=“texte de remplacement” style=“display:block”>
[/dt_code]
Vous pouvez aussi utiliser des méthodes d’alignement du style [dt_quote type= »blockquote » font_size= »big » animation= »none » background= »plain »]texttop[/dt_quote] ou [dt_quote type= »blockquote » font_size= »big » animation= »none » background= »plain »]absbottom[/dt_quote].
6/ Gmail et les images
Pour continuer sur le sujet des images, avez vous remarqué que Gmail peut afficher une petite icône sur les images pour aider au téléchargement de ces dernières ? Cela se produit sur les images de taille importante qui ne sont pas enveloppées dans une balise ancre. Il suffit juste, pour éviter l’ajout de cette petite icône, d’entourer les images dont la taille est supérieure à 300×150 par un lien et le tour est joué.
