Résumé
Créer un email en HTML offre une liberté totale sur le design et la structure. Mais sans respecter certaines règles, votre email risque de mal s'afficher ou de finir en spam. Voici les bonnes pratiques essentielles pour coder un email HTML performant : structure, balises, responsive, fonts, images et personnalisation.
Vous maîtrisez le HTML/CSS et souhaitez coder vous-même votre email ou newsletter ? C'est une excellente façon d'obtenir un rendu parfaitement maîtrisé. Mais le HTML d'un email ne fonctionne pas comme celui d'une page web. Les clients de messagerie (Gmail, Outlook, Apple Mail…) ont leurs propres règles de rendu, souvent incompatibles entre eux. Voici les bonnes pratiques à connaître absolument.
Structurer correctement votre email HTML
La base d'un email HTML solide repose sur une structure claire et compatible avec tous les clients de messagerie.
Utilisez les balises essentielles
Un email HTML bien structuré doit comporter une balise <html>, une balise <head> avec les balises <meta> d'encodage et de viewport, et une balise <body>. Définissez toujours le charset en UTF-8 et incluez la balise meta viewport pour le responsive.
Privilégiez les tableaux pour la mise en page
Contrairement aux pages web, la mise en page par <div> et CSS Flexbox ou Grid n'est pas fiable dans les clients de messagerie. Utilisez des tableaux HTML (<table>) pour structurer vos colonnes et blocs de contenu. C'est la méthode la plus universellement compatible.
Définissez la largeur de votre email
Une largeur fixe de 600px est la norme pour les emails. Vous pouvez utiliser un conteneur principal en full width avec un tableau centré à 600px pour garantir un rendu cohérent sur tous les supports.
Gérer les fonts et la typographie
Optez pour des fonts sécurisées
Les fonts web (Google Fonts, etc.) ne sont pas supportées par tous les clients de messagerie. Pour un rendu garanti, utilisez des fonts sécurisées : Arial, Helvetica, Georgia, Times New Roman, Verdana. Si vous utilisez une police personnalisée, déclarez-la via @font-face en CSS inline avec un fallback obligatoire.
Hiérarchisez avec les balises de titre
Utilisez les balises <h1>, <h2>, <h3> pour structurer votre contenu. Veillez à appliquer les styles CSS en inline directement sur la balise, car les styles dans la balise <head> ne sont pas tous supportés.
Soigner les images
Attribuez toujours une balise ALT
De nombreux clients de messagerie bloquent l'affichage des images par défaut. Sans balise alt, vos destinataires verront des images vides sans comprendre le contenu. Une balise ALT descriptive garantit la lisibilité du message même sans images.
Hébergez vos images en externe
N'intégrez pas vos images en base64 directement dans le HTML. Hébergez-les sur un serveur externe et référencez-les par URL. Cela allège le poids de votre email et améliore sa délivrabilité.
Maîtrisez le ratio texte/images
Un email composé exclusivement d'images sera probablement filtré comme spam. Respectez un ratio équilibré — au minimum 60% de texte pour 40% d'images.
Rendre votre email responsive
Utilisez les media queries
Pour adapter l'affichage sur mobile, intégrez des media queries dans votre balise <style>. La majorité des clients mobiles modernes (iOS Mail, Gmail mobile) les respectent.
Pensez à l'affichage en colonne unique sur mobile
Sur mobile, les colonnes côte à côte doivent se superposer en une seule colonne. Prévoyez cette adaptation dans vos media queries pour éviter un affichage réduit sur petit écran.
Personnaliser et enrichir le contenu
Ajoutez des champs de personnalisation
Les champs dynamiques (prénom, nom, données personnalisées) sont intégrés via des balises spécifiques à votre outil d'envoi. Personnalisez l'objet et le contenu du message pour augmenter votre taux de réactivité.
Affichez des contenus media
Vidéos, photos, GIFs animés : les contenus riches renforcent l'engagement. La lecture automatique des vidéos n'est pas supportée dans la plupart des clients. Privilégiez une image cliquable qui renvoie vers la vidéo hébergée en ligne.
Gérez les pièces jointes avec prudence
Vous pouvez joindre des documents (catalogues, flyers, invitations) à vos emails. Veillez à ne pas surcharger : des pièces jointes trop lourdes peuvent déclencher les filtres anti-spam.
Sauvegarder et réutiliser vos gabarits
Une fois votre email HTML finalisé, sauvegardez-le comme gabarit réutilisable. Vous pourrez l'utiliser comme base pour vos prochaines campagnes en modifiant uniquement le contenu sans toucher à la structure et au code source.
Tester avant d'envoyer
Observez le rendu de votre email dans différents clients de messagerie avant l'envoi (Gmail, Outlook, Apple Mail, mobile). Utilisez un outil de test multi-clients pour repérer les problèmes d'affichage et d'éventuels déclencheurs anti-spam. C'est l'étape la plus souvent négligée — et pourtant la plus critique.
