Points clés à retenir

• Concevoir un email, c’est un peu comme concevoir pour une imprimante très exigeante. Ce qui rend bien dans un navigateur ou un outil de design ne s’affichera pas toujours de la même façon dans la boîte de réception.
• Un email « prêt pour la boîte de réception » s’affiche correctement dans tous les clients de messagerie, se lit facilement sur mobile, charge ses images et passe les filtres antispam.
• Beaucoup d’erreurs de design courantes se corrigent facilement : utilisez des images JPEG ou PNG, un texte bien contrasté et des polices web-safe, et testez toujours vos emails avant de les envoyer.
• Vous n’avez pas besoin d’un développeur. Des outils comme Stripo et Benchmark Email permettent aux petites équipes de créer et d’envoyer des emails HTML professionnels sans écrire de code.

Si vous avez déjà créé un email impeccable sur votre écran, avant de le voir s’afficher de travers dans Outlook ou rétrécir au point de devenir illisible sur un téléphone, vous n’êtes pas seul. Cela arrive aussi bien aux débutants qu’aux marketers expérimentés.

C’est pourquoi nous nous sommes associés à Stripo. Ensemble, nous vous expliquons pourquoi le design d’emails HTML est important, comment créer correctement un template dans Stripo et comment l’importer dans le nouvel Éditeur HTML de Benchmark Email pour l’envoyer.

Pourquoi le design d’emails HTML est important (même si vous n’écrivez jamais de code)

Soyons honnêtes : je n’ai aucune intention d’écrire une seule ligne de code. Mais j’envoie beaucoup d’emails, alors comprendre comment fonctionne un email HTML reste essentiel.

Voici l’idée principale : le HTML des emails obéit à des règles différentes de celles du reste du Web. Beaucoup de marketers pensent que si un élément s’affiche bien dans un outil de design ou dans un navigateur, il s’affichera aussi bien dans la boîte de réception. Ce n’est pas toujours le cas, et mieux vaut ne pas l’apprendre à vos dépens. Outlook, en particulier, est réputé pour supprimer les styles et afficher les éléments de manière inattendue.

Concevoir un email revient un peu à concevoir pour une imprimante très stricte. Certains éléments ne passeront tout simplement pas, et c’est voulu. Gmail, Outlook et Apple Mail peuvent chacun afficher le même email différemment. C’est pourquoi l’email repose encore sur des mises en page à base de tableaux, des styles intégrés (inline) et des polices web-safe. Abordez le projet avec un état d’esprit « concevoir sous contraintes » et vous vous épargnerez bien des maux de tête.

Ce que signifie vraiment un email « prêt pour la boîte de réception »

Un email prêt pour la boîte de réception ne se contente pas de bien s’afficher sur votre écran. Il doit :

• S’afficher correctement partout : Gmail, Outlook et Apple Mail, sur ordinateur comme sur mobile.
• Être facile à lire sur smartphone : Plus de la moitié des internautes lisent leurs emails sur leur smartphone. Si vos abonnés doivent zoomer avec les doigts, ils seront moins enclins à interagir.
• Charger ses images : Et rester compréhensible si elles ne se chargent pas. Évitez de construire un email autour d’une seule image.
• Rester intact : Aucun texte invisible, aucune mise en page cassée, aucun style supprimé.
• Passer les filtres antispam : Pour qu’il arrive bien en boîte de réception dès le départ.

5 erreurs courantes de design d’email (et que faire à la place)

Elles peuvent arriver à tout le monde. J’en ai moi-même commis quelques-unes.

1. Utiliser des images SVG ou WebP. De nombreux clients de messagerie ne les prennent pas en charge. Utilisez plutôt le format JPEG ou PNG.
2. Un texte clair sur un fond clair. Utilisez une couleur de texte et une couleur de fond bien contrastées pour garantir la lisibilité.
3. Compter sur les polices web. Elles sont souvent remplacées par des polices par défaut. Utilisez des polices standard compatibles avec le web, comme Arial ou Georgia.
4. Oublier de tester. Prévisualisez et envoyez des emails de test avant chaque campagne pour vérifier comment votre email s’affiche selon les clients de messagerie.
5. Copier le code généré par votre outil de design directement dans votre ESP. Créez votre email dans un outil dédié ou nettoyez le code avant de le coller.

Pourquoi créer vous-même vos emails HTML ?

Tout le monde n’a pas un développeur sous la main, surtout si vous travaillez seul ou au sein d’une petite équipe marketing. Créer vos propres emails HTML avec les bons outils vous offre :

• Des campagnes plus rapides, sans attendre que quelqu’un d’autre se libère
• Une maîtrise totale du design, sans allers-retours pour valider le rendu
• Une meilleure cohérence de marque sur tous les canaux, y compris l’email
• Des coûts de production réduits pour les équipes qui ne disposent pas d’un gros budget

Création d’emails dans Stripo

Stripo se concentre sur une seule chose : le processus de production des emails. C’est là que vous créez votre email avant de l’exporter vers votre plateforme d’envoi :

• Un éditeur visuel par glisser-déposer, avec un éditeur HTML/CSS intégré pour tous ceux qui veulent mettre les mains dans le code
• Plus de 1 600 modèles couvrant de nombreux secteurs, saisons et types d’emails, pour ne jamais partir d’une page blanche
• Raccourcis de contenu, comme l’importation du contenu d’un lien dans un bloc d’article de blog, ou l’ajout d’un lien vidéo qui génère automatiquement une miniature et un bouton de lecture
• Collaboration en temps réel et liens de validation partageables pour les équipes qui doivent obtenir une approbation avant l’envoi
• Export vers plus de 90 ESP, dont Benchmark Email

Stripo est conçu de telle sorte que le plus difficile, c’est de créer un mauvais email.

Importez-le ensuite dans Benchmark Email.

Une fois votre modèle prêt, vous devez l’importer dans Benchmark Email via le nouvel Éditeur HTML. Collez votre code ou importez le fichier, puis prévisualisez le rendu sur ordinateur et sur mobile. Le sélecteur Personalize vous permet d’ajouter des champs de fusion, comme le prénom, sans toucher au code, et Benchmark ajoute automatiquement votre lien de désinscription et votre adresse postale pour que la conformité soit assurée.

Essayez par vous-même : une checklist rapide.

Avant d’envoyer votre prochain email HTML :

• Un objectif, un message principal, un CTA
• Message clé et CTA en texte réel, et non en images
• Images JPEG ou PNG avec un texte alternatif descriptif
• Couleurs à fort contraste et polices compatibles avec le web
• Aperçu mobile vérifié
• Email de test ouvert dans Gmail, Apple Mail et Outlook

Vous n’avez pas encore de compte Benchmark ? Inscrivez-vous gratuitement et essayez l’Éditeur HTML avec votre premier design.

Questions fréquentes

Pourquoi mon email ne s’affiche-t-il pas de la même façon dans Outlook et dans Gmail ?

Chaque client de messagerie utilise son propre moteur de rendu, et Outlook est connu pour supprimer des styles et ignorer de nombreuses propriétés CSS modernes. C’est pourquoi le HTML des emails repose sur des tableaux, des styles en ligne et des tests sur différents clients de messagerie.

Faut-il savoir coder pour envoyer un email HTML ?

Non. Les éditeurs visuels comme Stripo génèrent pour vous un code HTML adapté aux emails, et l’Éditeur HTML de Benchmark Email vous permet de l’importer, de le prévisualiser et de le personnaliser sans modifier le code.

Quels formats d’image fonctionnent le mieux dans un email ?

Les formats JPEG et PNG sont les choix les plus sûrs. De nombreux clients de messagerie ne prennent pas en charge les formats SVG et WebP.

Comment importer votre email Stripo dans Benchmark Email ?

Stripo permet d’exporter directement vers Benchmark Email. Vous pouvez aussi exporter votre code HTML, puis le coller ou l’importer dans l’Éditeur HTML de Benchmark.