Style des e-mails
Cet article présente les bonnes pratiques de style des e-mails, notamment les lignes d’objet, le texte d’accroche, la taille des e-mails et les recommandations relatives aux images.
Mise en forme des adresses
La ligne d’objet est l’une des premières choses que les destinataires voient lorsqu’ils reçoivent votre message. La maintenir entre 6 et 10 mots permet d’obtenir les meilleurs taux d’ouverture.
Il existe également différentes approches pour créer une bonne ligne d’objet, allant de poser une question pour piquer la curiosité du lecteur à être plus direct, en passant par la personnalisation pour impliquer votre clientèle. Ne vous cantonnez pas à une seule ligne d’objet, tirez parti des tests A/B pour en essayer de nouvelles et évaluer leur efficacité. Les lignes d’objet ne doivent pas dépasser 35 caractères pour s’afficher correctement sur mobile.
Le champ « De » doit clairement indiquer qui est l’expéditeur. Évitez d’utiliser le nom d’une personne ou une abréviation peu courante. Utilisez plutôt un nom reconnaissable comme celui de votre marque. Si l’utilisation du nom d’une personne correspond aux méthodes de personnalisation des e-mails de votre marque, restez cohérent afin de développer une relation avec le destinataire. Le nom dans le champ « De » ne doit pas dépasser 25 caractères pour s’afficher correctement sur mobile.
Adresses sans réponse
Les adresses e-mail sans réponse (no-reply) sont généralement déconseillées pour plusieurs raisons, car elles découragent l’engagement de vos lecteurs. De nombreux destinataires répondent à l’e-mail pour se désabonner, et s’ils n’ont pas la possibilité de le faire, l’action suivante consiste le plus souvent à signaler l’e-mail comme courrier indésirable.
Recevoir des réponses automatiques d’absence peut en réalité fournir des informations précieuses, en augmentant les taux d’ouverture et en réduisant les signalements de courrier indésirable (en retirant ceux qui ne souhaitent pas recevoir d’e-mails). Sur un plan personnel, une adresse sans réponse peut paraître impersonnelle aux yeux des destinataires et les dissuader de recevoir d’autres e-mails de votre entreprise.
Texte d’accroche
Le texte d’accroche d’un e-mail communique efficacement le message principal pour capter l’intérêt du lecteur et encourager l’ouverture. Le texte d’accroche est également souvent utilisé par les marketeurs pour fournir des informations supplémentaires sur le contenu d’un e-mail. L’accroche est le texte d’aperçu affiché immédiatement après la ligne d’objet d’un e-mail. Dans l’exemple suivant, l’accroche est - Brand. New. Lounge Shorts.
La quantité de texte d’accroche visible dépend du client de messagerie de l’utilisateur et de la longueur de la ligne d’objet de l’e-mail. En règle générale, nous recommandons que les accroches d’e-mail contiennent entre 50 et 100 caractères.
L’accroche peut faire référence à du Liquid dans le corps de l’e-mail, et le corps de l’e-mail peut faire référence à du Liquid dans l’accroche. Cela s’explique par le fait que le texte d’accroche fait partie du corps de l’e-mail lorsque vous envoyez des messages aux destinataires.
Voici quelques bonnes pratiques à garder à l’esprit lors de la rédaction de vos accroches :
- Les appels à l’action entrent en jeu une fois que les lecteurs ont ouvert votre e-mail.
- Orientez vos lecteurs dans la bonne direction, que vous souhaitiez qu’ils s’abonnent, achètent un produit ou visitent votre site web.
- Utilisez des mots percutants pour que le lecteur sache exactement ce que vous attendez de lui, mais assurez-vous que cela reflète la voix de votre marque et que chaque appel à l’action apporte une certaine valeur au consommateur.
- L’accroche ne doit pas dépasser 85 caractères et doit contenir un appel à l’action descriptif qui renforce la ligne d’objet.
- Les e-mails et les pages de destination vers lesquels vous dirigez vos utilisateurs doivent être optimisés pour mobile :
- Pas de fenêtres interstitielles
- Grands champs de formulaire
- Navigation facile
- Texte de grande taille
- Espaces blancs généreux
- Corps de texte court et concis
- Appels à l’action clairs
Texte d’aperçu Apple Mail
Apple Mail peut afficher un résumé Apple Intelligence dans la boîte de réception au lieu de votre accroche. Aperçu et test ainsi que le HTML du message envoyé peuvent toujours afficher l’accroche que vous avez configurée, car le résumé est généré sur l’appareil du destinataire. Sur un iPhone ou iPad de test, accédez à Réglages > Apps > Mail. Désactivez Résumer les aperçus de messages pour afficher le texte d’aperçu envoyé.
Si l’aperçu de la boîte de réception inclut du contenu supplémentaire du corps au lieu de votre accroche ou d’un résumé, consultez Prévisualiser et tester votre message.
Limites de caractères de l’accroche
| Client de messagerie mobile | Limite |
|---|---|
| iOS Outlook | 74 |
| Android Native | 43 |
| Android Gmail | 24 |
| iOS Native | 82 |
| iOS Gmail | 30 |
| Client de messagerie de bureau | Limite |
|---|---|
| Apple Mail | 33 |
| Outlook ‘13 | 38 |
| Outlook for Mac ‘15 | 53 |
| Outlook ‘16 | 50 |
| Client de messagerie web | Limite |
|---|---|
| AOL Mail | 81 |
| Gmail | 119 |
| Outlook.com | 49 |
| Office 365 | 40 |
| Mail.ru | 64 |
Taille de l’e-mail
La taille de l’e-mail correspond à la taille du HTML de votre message dans Braze (le corps que vous créez et ce que Braze ajoute lors de l’envoi du message).
- Veillez à limiter la taille de vos e-mails. Les corps d’e-mails de plus de 102 Ko sont non seulement très gourmands en ressources pour les serveurs Braze, mais ils sont également tronqués par Gmail et d’autres clients de messagerie.
- Les images hébergées que vous référencez par URL ne sont pas intégrées dans le HTML de la même manière que le collage de ressources inline volumineuses. Nous recommandons d’utiliser la bibliothèque multimédia et de lier par
href, ce qui permet de réduire la taille du message.
| Texte uniquement | Texte avec images | Largeur de l’e-mail |
|---|---|---|
| 25 Ko maximum | 60 Ko maximum | 600 pixels maximum |
Pour réduire le risque de troncature :
- Raccourcissez le texte et les liens.
- Insérez le CSS critique en inline si nécessaire. Supprimez les espaces superflus dans le HTML.
- Compressez les images et les ressources HTML.
Pour enregistrer votre Campaign ou votre modèle d’e-mail, assurez-vous que le corps de l’e-mail ne dépasse pas 400 Ko.
Qu’est-ce qui peut augmenter la taille finale de l’e-mail ?
Ces fonctionnalités augmentent légèrement la taille du message rendu :
- Pixel de suivi d’ouverture : ajoute une balise image de 1 x 1 px au corps du message
- Accroche : ajoute un
<div>masqué en haut du corps - Aliasage de lien : ajoute un paramètre de requête de 16 caractères (
lid=) à chaque URL suivie - Modèles de lien : ajoute tous les paramètres de requête configurés dans le tableau de bord aux URL correspondantes
- Insertion CSS (optionnelle) : applique les règles de feuille de style intégrée en inline sur les éléments HTML, ce qui peut ajouter du CSS redondant selon la complexité de la feuille de style
L’accroche et le pixel de suivi ajoutent environ 600 caractères (moins de 1 Ko). Braze ajoute généralement entre 0 Ko et 5 Ko selon le nombre de liens, la complexité des modèles de lien et l’activation ou non de l’insertion CSS. Si la taille de votre e-mail est proche de la limite, nous vous recommandons de tester vos e-mails avant l’envoi, car la taille finale rendue dépend de ces paramètres.
Longueur du texte
Reportez-vous au tableau suivant pour connaître les longueurs de texte recommandées.
| Spécifications du texte | Propriétés recommandées |
|---|---|
| Longueur de la ligne d’objet | 35 caractères maximum (pour un affichage mobile optimal) (6 à 10 mots) |
| Longueur du nom de l’expéditeur | 25 caractères maximum (pour un affichage mobile optimal) |
| Longueur de l’accroche | 85 caractères maximum |
Taille des images
Consultez le tableau suivant pour connaître les tailles d’image recommandées. Les images de haute qualité et de petite taille se chargent plus rapidement : utilisez donc la ressource la plus légère possible pour obtenir le résultat souhaité.
| Taille | Largeur de l’image d’en-tête | Largeur de l’image du corps | Types de fichiers |
|---|---|---|---|
| 5 Mo maximum | 600 pixels maximum | 480 pixels maximum | PNG, JPEG, GIF |
Gmail web et l’application mobile Gmail ne prennent souvent pas en charge le format SVG (et la prise en charge du WEBP est incohérente). Utilisez le format PNG ou JPEG pour les images qui doivent s’afficher de manière fiable dans Gmail.
Deep links
Avec les notifications push et les messages in-app, un deep link dirige les utilisateurs directement vers une destination spécifique au sein d’une application. Cependant, les deep links nécessitent que l’application soit installée, et les e-mails ne permettent pas de savoir si les destinataires disposent de l’application. Cela signifie que les deep links dans les e-mails peuvent entraîner des erreurs pour les destinataires qui n’ont pas l’application installée.
Utilisez plutôt les liens universels et App Links, qui fonctionnent comme des URL standard. Vous pouvez les configurer pour ouvrir l’application ou diriger les utilisateurs vers une page spécifique. Ils peuvent également rediriger vers la boutique d’applications ou basculer vers une page web lorsque l’application n’est pas installée.
Content Blocks avec images transparentes
Lorsqu’un Content Block contient une image avec un arrière-plan transparent (par exemple, un logo) et est inséré par une étiquette Liquid, vous pouvez voir une couleur d’arrière-plan apparaître derrière l’image. Cette couleur provient des paramètres de style global de l’e-mail de l’éditeur par glisser-déposer, plus précisément de la couleur d’arrière-plan de l’e-mail. Si vos paramètres de style global utilisent une couleur autre que le blanc, cette couleur apparaît à la place.
Pour afficher le Content Block comme prévu :
- Définissez la couleur d’arrière-plan de la colonne du Content Block pour qu’elle corresponde à l’arrière-plan de l’e-mail ou du modèle.
- Vous pouvez également convertir le Content Block par glisser-déposer en un Content Block HTML et définir son arrière-plan comme transparent.
Si vous devez utiliser le même Content Block dans des zones avec des arrière-plans différents (par exemple, le corps et le pied de page), créez deux versions du bloc, chacune avec la couleur d’arrière-plan de colonne appropriée.
Si vous préférez glisser le Content Block dans l’e-mail en tant que ligne, vous pouvez définir l’arrière-plan de la colonne de ligne comme transparent pour remplacer l’arrière-plan global.
Glisser un Content Block en tant que ligne insère un aperçu pré-rendu, qui ne se met pas automatiquement à jour si le Content Block source est modifié.
Mode sombre
Le mode sombre est une préférence côté destinataire. Les fournisseurs de boîtes de réception et les applications (comme Gmail et Outlook) peuvent inverser ou recolorer votre HTML. Vous devez donc vous attendre à un rendu différent selon les clients, plutôt qu’à une apparence fixe issue de Braze seul.
Éditeur HTML
Si vous utilisez l’éditeur HTML, vous pouvez réduire les inversions d’arrière-plan indésirables dans les applications mobiles Gmail en appliquant un linear-gradient CSS monochrome sur les cellules de tableau au lieu d’un simple background-color. Pour des exemples, des limites (notamment l’utilisation de <td> ou <th> plutôt que <table> seul) et la syntaxe, consultez Application mobile Gmail et mode sombre.
Pour créer des styles distincts pour les modes clair et sombre lorsque les clients les prennent en charge, utilisez la requête média prefers-color-scheme. La prise en charge varie selon la boîte de réception — prévisualisez et testez toujours dans les clients auxquels vous envoyez.
Éditeur par glisser-déposer
Dans l’éditeur par glisser-déposer, le mode sombre reste contrôlé par chaque fournisseur de boîte de réception. Activez l’aperçu du mode sombre dans Prévisualiser et tester pour vérifier votre mise en page. Pour savoir où trouver l’option et comment tester, consultez Puis-je prévisualiser l’apparence de mon e-mail en mode sombre ?. Pour les couleurs d’arrière-plan et la lisibilité selon les thèmes, consultez Comment concevoir mes e-mails pour le mode sombre et le mode clair ?.
Bonnes pratiques générales
- Évitez le blanc pur (
#FFFFFF) et le noir pur (#000000) ; utilisez des blancs cassés et des noirs atténués pour que les inversions complètes paraissent moins brutales. - Adoucissez les couleurs d’accentuation très vives (par exemple, les boutons aux couleurs saturées) afin qu’elles restent lisibles si un client inverse les couleurs.
- Utilisez des PNG transparents lorsqu’ils s’intègrent à votre mise en page.
- Sur les images contenant du texte, ajoutez un contour clair autour du texte foncé, et un contour foncé autour du texte clair sur les visuels sombres, afin que le texte reste lisible si les couleurs changent.