Nous aimerions que tous vos courriels aient la même apparence partout - mais le monde des courriels est vraiment autre chose.
Contrairement à la conception Web, de nombreux éléments que nous prenons pour acquis ne sont pas pris en charge par les clients ou périphériques de messagerie les plus courants, tels que certaines polices ou un élément de style inline (CSS*).
Bien que ce texte se concentre sur les clients de messagerie et sur leurs particularités connues, votre pauvre courriel est soumis à un processus complet avant d’atteindre la boîte de réception, ce qui pourrait également avoir une incidence sur le résultat. Pour rendre les choses encore plus confuses, il existe de graves différences entre les clients de bureau, les clients Web et les applications, y compris au sein de la même marque de client.
Les meilleurs moyens de lutter contre l'anxiété liée au rendu sont:
- Testez, testez et ensuite testez votre courrier
- Vérifiez vos statistiques d'appareils et de clients dans vos rapports:
Dans le rapport, sous Livrabilité, cliquez sur Rapport sur les clients de messagerie. Vous y trouverez les appareils et les clients de messagerie les plus utilisés par vos destinataires, sur lesquels vous devriez vous concentrer. Ne passez pas des heures à adapter votre courrier à Lotus Notes si 0,0001% de vos destinataires l’utilisent.
Suivez les instructions ci-dessous pour minimiser les rendus déplorables
Outlook
Généralement reconnu comme le rabat joie du courrier électronique, Outlook ne prend pas en charge les CSS, les polices personnalisées et les images d’arrière-plan (dans le 'body') - la liste continue. Cela inclut les versions du navigateur d'Outlook, i. e. Hotmail, Outlook.com et Office 365. Étonnamment, l'application Outlook est bien meilleure. La liste ci-dessous répertorie certains des problèmes connus que les e-mails rencontrent avec Outlook:
Lignes blanches, verticales et horizontales - Habituellement sur des fonds sombres. Le seul véritable remède consiste à éviter les couleurs de fond sombres.
Image de fond ou couleur manquante - Ouaip. C’est juste un truc que Outlook fait.
Vos boutons arrondis apparaissent carrés? Outlook...
"Briser" les courriels (des parties du courriel qui débordent) - Cela peut être dû à un contenu trop large, vérifier la taille des images, n'utilisez pas de pourcentages, et de marges / paddings. Ne jamais ajouté de marge/rembourrage/bordure(margin/padding/border) à gauche/droite d'images réactive ou de blocs.
OU c’est Outlook 2013 120 DPI qui effectue un zoom avant. Les modèles réactifs peuvent avoir des problèmes de réaction face aux zooms du navigateur et du client, et il n’y a aucun moyen de contourner ce problème, si ce n’est une conception solide et infaillible.
Pas d'images - Le plus souvent, cela est dû au fait que le destinataire a désactivé les images téléchargées automatiquement et qu'après avoir activé le téléchargement manuel, le réseau n'autorise pas le téléchargement à nouveau. Il n'y a pas de code pour résoudre ce problème.
Lignes épaisses – Votre courriel a-t-il l'air envahi par de lourds intercalaires renégats? Ce serait un problème de hauteur de ligne qui est parfois dû à un diviseur, parfois non. Si vous utilisez des séparateurs, essayez plutôt d’ajouter une bordure aux blocs pleine largeur. Si vous n'utilisez pas de séparateurs, essayez de supprimer tous les blocs et vérifiez s'il reste des résidus d'une campagne précédente.
Outlook plante et ne rend que certaines parties d'un courrier – Cela est probablement dû au poids de votre courrier ou à la réactivité d'un contenu dynamique. En fonction des besoins de votre modèle, vous pouvez contacter notre équipe de production pour optimiser votre modèle.
Gmail
Nous adorons la façon de faire de Google sur les courriers - mais Gmail ne semble pas aimer la conception de courrier électronique.
Officiellement, la limite pour un courrier est de 102 Ko (ou il pourrait être «tronqué»), mais cela semble parfois aléatoire et si vous vous envoyez beaucoup de tests, préparez-vous à voir une petite boîte contenant trois petits points.
Gmail supporte de plus en plus de style inline, mais nous n’y sommes pas encore et tous les clients gmail; Gmail, Inbox by Gmail, G suite partagent certains problèmes.
Espace blanc à droite - Particulièrement visible sur Androids, mais cela dépend de l'appareil et du système d'exploitation. Cela peut être légèrement facilité par des conceptions pleine largeur sans menus et trois blocs de colonnes.
Espace blanc des deux côtés - Ouais, c'est juste Gmail. Peu importe la largeur de votre courriel, ils vont être là. Évidemment, ceux-ci seront moins visibles si votre courrier est blanc...
Comportement «non réactif» - Gmail est très sensible aux zooms dans le navigateur et / ou à la taille de la fenêtre, mais ne permet pas les zooms en pourcentage. Ainsi, certains blocs dans une fenêtre ou un zoom plus petits seront rendus «coincés» entre une petite taille d'écran et une grande. Le meilleur moyen d'éviter cela est d'avoir des blocs et des éléments de pleine largeur.
Android
Apparemment, les androids ne rêvent pas d’emails verts. S'ils le font, il est rempli de lignes blanches. Certains androids (selon le client également) prennent en charge les CSS, mais vous pouvez généralement vous attendre à:
Manque d'images de fond et de couleur
Rendu différent de l'iPhone (moins de pleine largeur)
Aucune police personnalisée
Lignes blanches dans les blocs de couleur - cela pourrait indiquer que quelque chose est trop large dans votre courrier. Vérifiez donc que tous les blocs et tous les éléments ont la bonne largeur. Certains clients natifs effectuent automatiquement un zoom avant. Cela pourrait également rendre les tableaux visibles:
Apple/iPhone natif
Vous êtes-vous déjà demandé pourquoi les mails d'Apple avaient toujours fière allure? Probablement parce que vous les lisez dans un client Apple. Si la plupart de vos destinataires sont des utilisateurs Apple, félicitations!
Les sacrifices que vous devez faire pour les autres clients / périphériques sont la seule chose qui pourrait nuire à la fête. Et les liens surprise:
Liens bleus - Apple a tendance à lier les numéros de téléphone et les dates, et décidé pour vous que les liens cliqués / liés / survolés devraient également être bleus (quelle que soit la couleur du lien que vous avez choisie). Il existe des moyens de contourner ce problème, mais ils peuvent changer toutes les couleurs de lien des autres clients.
Tous les clients ont leurs propres particularités et défis, mais souvenez-vous que l'envoi de courriers électroniques concerne la communication avec vos destinataires - assurez-vous que votre message est lisible et agréable en premier lieu. Et, consultez notre guide de conception...
*Le support CSS comprend des éléments intéressants tels que:
- Les polices personnalisées, i. e. TOUTES les polices autres que celles sécurisées pour le web.
- Cacher / afficher dans les mobiles
- "Réactivité" en pourcentages
- Liens "survolés" (et autres fonctions de liens intéressantes)
- Les animations
- La possibilités de contourner les zooms ou autres fonctions gênantes dans le client de messagerie