Vue d’ensemble
L’éditeur HTML vous permet d’envoyer des e-mails entièrement personnalisés et de marque en utilisant votre propre HTML. Vous devriez utiliser l’éditeur HTML lorsque vous :- Avez besoin d’un contrôle complet sur la mise en page, l’espacement et le style
- Avez déjà des modèles d’e-mails HTML prêts pour la production
- Êtes à l’aise de travailler dans les limites des clients e-mail
Les e-mails HTML ne sont pas identiques aux pages web. De nombreuses fonctionnalités HTML et CSS ne sont pas prises en charge ou sont rendues de manière incohérente entre les clients e-mail.
Prérequis
Avant d’utiliser l’éditeur HTML, assurez-vous de :- Avoir de l’expérience dans la création d’e-mails HTML responsifs
- Héberger toutes les images sur des URL accessibles publiquement (votre site, CDN, S3, etc.)
Résultat attendu
Après la configuration, votre e-mail :- S’affiche de manière cohérente sur les principaux clients (Gmail, Outlook, Apple Mail)
- Suit correctement les clics sur les liens
- Inclut un mécanisme de désabonnement fonctionnel
- Passe les vérifications de spam et de délivrabilité
Importez vos propres modèles
Si vous avez déjà des modèles d’e-mails HTML, vous pouvez les ajouter à OneSignal de l’une des manières suivantes :- Utilisez le Transfert de modèles d’e-mails
- Créez des modèles par programmation en utilisant l’API Create Template
- Copiez-collez votre HTML dans l’éditeur HTML
Nous recommandons de commencer avec un modèle éprouvé plutôt que d’écrire du HTML à partir de zéro.
Utiliser l’éditeur HTML
Lors de la création d’un message e-mail, sélectionnez Éditeur HTML comme type d’éditeur.- Collez ou écrivez votre HTML dans l’éditeur.
- Utilisez Envoyer un e-mail de test pour prévisualiser le rendu sur les clients et appareils.
- Corrigez les problèmes de mise en page avant de programmer ou d’envoyer.
Liens et suivi
Le suivi des liens est activé par défaut pour les e-mails HTML.- Le suivi multi-liens est pris en charge
- Les clics apparaissent dans les rapports de messages
Liens de désabonnement
Tous les e-mails marketing doivent inclure un lien de désabonnement. Les e-mails sans option de désabonnement valide sont plus susceptibles de :- Être marqués comme spam
- Nuire à la réputation de l’expéditeur
- Être bloqués par les fournisseurs de boîtes de réception
- Lien de désabonnement par défaut de OneSignal
- Utiliser une page de désabonnement personnalisée (optionnel)
Incluez l’espace réservé suivant n’importe où dans votre HTML (généralement dans le pied de page) :Lorsque cliqué, ce lien désabonnera l’abonnement e-mail de l’utilisateur dans OneSignal.
HTML
Meilleures pratiques pour les e-mails HTML
Utilisez toujours le CSS inline
La plupart des clients e-mail suppriment les blocs<style> et les feuilles de style externes.
Essayez cet outil : Responsive Email CSS Inliner
Style en mode sombre
De nombreux clients de messagerie appliquent une inversion automatique des couleurs lorsqu’un utilisateur a activé le mode sombre. Ce comportement peut provoquer des résultats imprévisibles, comme des boutons apparaissant avec un fond noir et du texte noir. Pour garantir un rendu cohérent, nous recommandons de définir explicitement comment votre e-mail doit apparaître en mode clair et sombre. Meilleures pratiques :- Définissez les styles de base en ligne. Définissez toujours les couleurs d’arrière-plan et de texte directement sur les éléments au lieu de vous fier aux valeurs par défaut ou à la transparence.
- Utilisez des requêtes média pour le mode sombre. Les clients comme Apple Mail et Outlook sur iOS prennent en charge
@media (prefers-color-scheme: dark)où vous pouvez remplacer les styles pour le mode sombre. - Appliquez
!importantavec parcimonie. L’ajout de!importantaux remplacements en mode sombre aide à empêcher les boîtes de réception d’empiler des règles d’inversion au-dessus de vos styles personnalisés. - Signalez le support de thème. Incluez les balises méta suivantes dans votre en-tête HTML pour réduire l’auto-inversion :
Testez sur tous les clients. Gmail (iOS, Android, web), Outlook et Apple Mail se comportent tous différemment. Les tests aident à détecter les problèmes tôt.
Tailles d’images recommandées pour les e-mails
Ratios d’aspect :- Images d’en-tête/bannière :
3:1ou4:1(ex :600×200ou600×150) - Images héros :
16:9ou2:1(ex :600×338ou600×300) - Images carrées :
1:1(ex :300×300) — bon pour les grilles de produits - Miniatures :
1:1ou4:3 - Largeur max :
600–700pxest standard (la plupart des clients e-mail) - Concevez en
2xpour les écrans retina (ex :1200pxde large, affiché à600px)
- Gardez les images individuelles en dessous de
100–200KB - Taille totale de l’e-mail (y compris images) en dessous de
1MB - Plus petit = temps de chargement plus rapides et meilleure délivrabilité
- JPG : Meilleur pour les photos
- PNG : Meilleur pour les graphiques, logos, transparence
- GIF : Pour les animations simples (gardez la taille de fichier petite)
- WebP : Pas encore largement pris en charge dans les e-mails — évitez
- Incluez toujours du texte alt pour l’accessibilité et quand les images ne se chargent pas
- Utilisez du CSS inline pour le style (beaucoup de clients suppriment les balises
<style>) - Évitez les images d’arrière-plan (support incohérent)
- Testez sur les clients (Gmail, Outlook, Apple Mail rendent tous différemment)
- Outlook ignore souvent les dimensions d’image, donc définissez les attributs width et height dans le HTML
Ajoutez des balises alt aux images
Le texte alt améliore l’accessibilité et garantit que les informations sont transmises même si les images sont bloquées ou ne parviennent pas à se charger.| Client d’e-mail | Bloque les images ? | Affiche le texte alt | Style le texte alt |
|---|---|---|---|
| AOL | Oui | Oui | Oui |
| Gmail | Oui | Oui | Oui |
| Yahoo | Oui | Oui | Oui |
| Outlook | Parfois | Oui | Oui |
Nommez et formatez votre HTML
Utilisez du HTML sémantique et un nommage de balises significatif pour l’accessibilité. Cela aide les lecteurs d’écran à interpréter votre contenu plus précisément. De plus, utilisez des formats de couleur standard et une indentation appropriée pour la maintenabilité.Vérifiez les liens brisés
Les liens brisés réduisent la délivrabilité et peuvent signaler vos e-mails comme spam. Testez tous les liens minutieusement avant l’envoi.Utilisez uniquement du HTML pris en charge
Les clients e-mail ne prennent pas en charge :- JavaScript
<iframe>- Formulaires HTML
- Audio ou vidéo intégrés
- Flash
- Astuces de positionnement ou de superposition CSS
Validez avant d’envoyer
Avant d’envoyer, validez votre e-mail en :- Testant tous les liens
- Vérifiant le comportement de désabonnement
- Envoyant des e-mails de test à Gmail, Outlook et Apple Mail
- Vérifiant le rendu en mode sombre
Si votre e-mail s’affiche correctement dans les principaux clients et que le désabonnement fonctionne, il est prêt à être envoyé.