Ce guide décrit les normes de codage et de conception pour les e-mails HTML personnalisés dans Omnisend. Utilisez ces meilleures pratiques pour garantir que vos e-mails s'affichent correctement sur Gmail, Outlook, Apple Mail et les appareils mobiles.
💡 Ressources importantes:
Pour ajouter du HTML personnalisé à vos e-mails : Voir Ajouter et configurer un élément HTML personnalisé
Pour importer un modèle HTML complet : Voir Importer des modèles d'Email HTML personnalisés
Si vous êtes nouveau dans HTML, consultez Les bases HTML de W3Schools d'abord.
Normes de codage HTML des Email
Les clients Email (en particulier Outlook 2007–2010) utilisent des moteurs de rendu limités. Suivez ces règles pour garantir la compatibilité.
Mise en page & Tables
Utilisez
<table>pour toutes les mises en page.Imbriquez des tables pour créer des structures complexes.Définissez les dimensions avec des attributs d'élément (
cellpadding,align,width) au lieu de CSS. Cela impose une structure de modèle de boîte.Évitez
<div>,<span>, et le positionnement CSS (float,position,clear). Les clients Email suppriment ou ignorent ceux-ci.
CSS & Style
Utilisez uniquement du CSS en ligne. Les modèles d'Omnisend incluent automatiquement du CSS en ligne.
Gardez le CSS simple :
Évitez les abréviations (
#000→ utilisez#000000)Évitez les déclarations composées (
font:#000 12px Arial→ séparez en propriétés distinctes)Évitez les sélecteurs complexes (descendant, enfant, pseudo-éléments)
Images, Boutons & Liens
Ajoutez du texte alternatif à toutes les images. La plupart des clients Email bloquent les images par défaut. Le texte alternatif aide à communiquer votre message même lorsque les images ne se chargent pas.
Utilisez des boutons à l'épreuve des balles (codés avec HTML/CSS) au lieu de boutons d'image. Les clients Email peuvent bloquer les images, rendant les boutons basés sur des images invisibles.
Hébergez des images sur un serveur fiable avec des URL absolues (
https://yourserver.com/image.jpg). Évitez les chemins relatifs.
Mobile & Interactivité
Rendez les e-mails adaptés aux mobiles. Utilisez des media queries pour augmenter la taille du texte sur les petits écrans et assurez-vous que les cibles de tapotement mesurent au moins 46x46px.
Évitez Flash et JavaScript. Utilisez des GIF animés si vous avez besoin de mouvement.
Test
Testez toujours avant d'envoyer :
Utilisez la fonction d'aperçu d'Omnisend pour vérifier les vues sur bureau et mobile.
Envoyez des e-mails de test à vous-même via Gmail, Outlook et Apple Mail.
Envisagez des services de test d'email comme Litmus pour la validation entre clients.
Remarque : L'HTML des Email diffère de l'HTML web ; de nombreuses propriétés CSS modernes ne sont pas prises en charge par les clients de messagerie comme Outlook.
Meilleures pratiques de conception d'Email
Suivez ces directives de conception pour améliorer la délivrabilité et l'expérience utilisateur.
Mise en page & Largeur
Largeur maximale : 600–800px (600px recommandé). Cela garantit que les e-mails s'affichent correctement dans les volets d'aperçu.
Utilisez des mises en page simples basées sur une grille. Évitez les éléments complexes qui nécessitent des flottants ou un positionnement absolu.
Images & Texte
Supposez que les images seront bloquées. Concevez des e-mails qui communiquent votre message même si les images ne se chargent pas.
Évitez les emails uniquement composés d'images. Un faible ratio texte/image déclenche des filtres anti-spam. Les images découpées s'affichent également de manière incohérente sur les clients de messagerie.
Polices
Utilisez des polices sécurisées pour les emails (Arial, Helvetica, Georgia, Times New Roman) ou des polices personnalisées largement adoptées. Voir leguide des polices sécurisées pour les emails
Conception mobile
Vérifiez la lisibilité sur les petits écrans. Les utilisateurs peuvent-ils lire votre email à portée de bras sur un téléphone ?
Optimisez les tailles d'image pour éviter des temps de chargement lents.
Rendez les liens adaptés aux pouces. Assurez-vous que les boutons et les liens sont faciles à toucher.
🔑 Astuce : Plus de 50 % des e-mails sont ouverts sur mobile. Avant d'envoyer, prévisualisez votre Email sur mobile et envoyez une campagne de test à vous-même sur votre téléphone. Vérifiez la taille du texte, la taille de la cible de tapotement (boutons/liens) et les temps de chargement des images.
FAQ
Pourquoi mon email semble-t-il cassé dans Outlook mais correct dans Gmail ?
Outlook utilise le moteur de rendu Microsoft Word, qui a un support HTML/CSS très limité par rapport au moteur basé sur le navigateur de Gmail. Pour garantir la compatibilité :
Gardez la largeur de l'email à 600px (max 650px).
Utilisez des mises en page simples basées sur des tables (colonne unique).
Évitez les images d'arrière-plan, le border-radius, le box-shadow et le flexbox.
Utilisez uniquement du CSS en ligne (pas de blocs
<style>).Testez toujours dans de vraies boîtes de réception Outlook avant d'envoyer.
Puis-je contrôler l'apparence de mon email en mode sombre ?
Non. Le mode sombre est contrôlé par le client email et les paramètres de l'appareil de vos abonnés (Gmail, Apple Mail, Outlook, etc.), pas par l'expéditeur. Les clients Email décident comment appliquer l'inversion des couleurs. Découvrez comment prévisualiser et optimiser les e-mails pour le mode sombre.
🔑 Meilleures pratiques :
Utilisez l'aperçu du mode sombre d'Omnisend avant d'envoyer (Aperçu → basculez "Aperçu en mode sombre").
Concevez pour les thèmes clairs et sombres – testez en modes d'inversion complète et partielle.
Optimisez les logos et les images : Ajoutez des arrière-plans colorés ou des contours clairs pour éviter que des éléments ne disparaissent.
Gardez le texte simple : Le texte noir sur des arrière-plans blancs s'inverse proprement.
Pour recevoir une assistance supplémentaire, veuillez contacter notre équipe de support primée via le chat dans l'application ou en envoyant un e-mail à [email protected].