Découvrez comment créer une newsletter responsive : optimisée pour une lecture sur ordinateur, tablette et smartphone.
Dossier rédigé par Mathieu Jaulin

Aujourd’hui, plus de la moitié des mails sont consultés sur un smartphone. C’est pour cela que vous devez absolument paramétrer votre message afin qu’il soit responsive. Mais qu’est-ce qu’un email responsive ? Il s’agit d’une newsletter dont le design s’adapte en fonction de la taille de l’écran sur lequel elle est consultée. Ainsi, peu importe que vos destinataires consultent votre message sur smartphone, tablette, ordinateur portable ou sur grand écran, votre mailing responsive ajuste automatiquement son design.
Voici le sommaire de ce guide :
- Définition
- Les points forts
- L’importance d’un bouton
- Le bon logiciel
- Une police adaptée
- Un objet accrocheur
- Modèle ou template
- Une structure pour votre contenu
- Des images optimisées
- Evitez de faire un email tout en image
- La prévisualisation
- Les tests
Bonne lecture.
Voici le contenu de ce guide résumé en une infographie.

C’est quoi une newsletter responsive ?
Pour commencer ce guide, il nous faut expliquer ce qu’est une newsletter responsive. Pour cela voici une définition précise et claire : Un email responsive est un message dont le contenu s’adapte en fonction de la taille de l’écran. Que votre emailing soit consulté sur smartphone, ordinateur ou bien tablette, l’affichage se personnalise en fonction de la largeur disponible. Ainsi, le contenu est identique, néanmoins la structure et la conception varient pour permettre une lecture optimale, peu importe le support.
L’aspect responsive de vos emails n’est pas un simple gadget, il est primordial pour vos performances. En effet, La vaste majorité des emails sont maintenant consultés sur smartphone et ce depuis un bon nombre d’années comme le montre une étude dont les résultats ont été publiés par le blog du modérateur.
Quels sont les avantages ?
Une excellente flexibilité
Le principal avantage d’un email responsive est sa flexibilité. Elle lui permet d’être parfaitement lisible sur tout type de support, peu importe sa taille : ordinateur portable, ordinateur de bureau, téléphone et tablette.
Pas besoin de concevoir plusieurs messages
En outre, vous n’avez pas besoin de concevoir plusieurs designs. Cela vous fait bien évidemment gagner un temps précieux, puisque vous n’avez pas à créer deux voire trois messages : un pour smartphone, un pour ordinateur et un troisième pour tablette. De plus, Les logiciels modernes d’e-mail permettent automatiquement la création de votre message au format responsive. Ainsi, vous n’avez absolument aucune manipulation supplémentaire à faire.
Insérer un bouton call to action
Pour réussir votre email responsive, nous vous conseillons vivement d’insérer un bouton, également appelé call to action. Ce CTA est important car son rôle est d’inciter vos lecteurs à cliquer à cet endroit précis. Pour réussir le design de votre bouton, nous vous recommandons de le distinguer par rapport au reste de votre email. Concrètement, choisissez une couleur de fond percutante. Cette couleur doit permettre à vos internautes de rapidement voir l’appel à l’action. Choisissez également quelques mots qui résument la valeur ajoutée que vont trouver vos abonnés et vos lecteurs en cliquant sur ce bouton. Surtout, éviter d’insérer dans votre bouton une phrase générique telle que » En savoir plus » ou bien » Lire la suite « . Vous risqueriez de faire fortement baisser votre taux de clic.
Choisir le bon logiciel
Le choix du logiciel est également primordial pour réussir votre campagne de marketing digital. Concrètement, si vous comptez envoyer votre newsletter régulièrement, nous vous conseillons d’utiliser le logiciel Brevo. Non seulement cet outil est entièrement français, mais en plus son tarif est très abordable :
- Sa version gratuite vous permet d’envoyer jusqu’à 3 000 emails par jour, ce qui est idéal si vous démarrez,
- Pour passer à la version supérieure, comptez 7€ par mois. Elle vous permet notamment de supprimer le logo Brevo, automatiquement inséré avec la version gratuite.
- La version Business vaut 14€ par mois. Avec elle, vous pouvez utiliser des fonctionnalités avancées telles que l’A-B testing et le marketing automation.
Au-delà des aspects financiers, sachez que Brevo possède un Builder, un éditeur en anglais, qui est à la fois performant et simple d’utilisation. Avec lui, vous pouvez facilement intégrer tout type de contenu dans vos newsletter : textes, images, vidéos, boutons, etc.
Sélectionner la bonne police
Choisir la bonne police de caractères peut parfois relever du parcours du combattant. Pour vous aider, nous vous conseillons tout simplement d’utiliser la même police que celle de votre site Internet par exemple. Bien évidemment, si vous avez déjà une charte graphique, il est important de la respecter et de reprendre la police prédéfinie. Pour trouver de nouvelles polices, vous pouvez faire vos recherches sur Internet. Le site le plus connu est Google Fonts : il regorge d’un grand nombre de polices que vous pouvez par la suite réutiliser dans vos newsletters ou autre.
Rédiger un objet court
Pour réussir votre email responsive, pensez bien qu’il sera consulté à la fois sur ordinateur et sur téléphone. Or, sur un plus petit écran, l’objet est encore plus limité en termes d’affichage. C’est pourquoi nous vous conseillons de rédiger un objet court et percutant. Pour réussir votre objet, demandez-vous quels sont les besoins de vos lecteurs, et formulez ce besoin en quelques mots. Concrètement, Gmail permet par exemple d’afficher au maximum 77 caractères. Cependant, pour permettre une parfaite lecture de votre objet, nous pensons qu’il vaut mieux ne pas dépasser les 50 caractères.
Utiliser un modèle ou template
Utiliser un modèle d’email, également appelé template, vous permet de gagner énormément de temps lors de la création de votre newsletter responsive. En effet, le template vous permet de rapidement concevoir le design de votre emailing. En parcourant les galeries de templates, vous sélectionnez celui qui vous convient. Ensuite, vous n’avez plus qu’à personnaliser votre message en y intégrant vos contenus : textes, images, boutons, etc. Concrètement, le modèle d’e-mail est un formidable moyen pour gagner du temps. Par contre, si vous avez à votre disposition les ressources nécessaires, nous vous conseillons plutôt de créer votre propre modèle que vous pourrez utiliser pour toutes vos futures campagnes e-mail.
Structurer votre contenu
Structurer le contenu de votre newsletter est important si vous réalisez un email responsive. Effectivement vous devez permettre à vos lecteurs de comprendre où ils en sont, que ce soit sur ordinateur ou bien sur téléphone. Pour que votre message soit lisible, votre contenu doit également suivre les modifications apportées par le changement de structure. C’est pourquoi nous vous conseillons de diviser le design de votre newsletter en trois parties :
- L’introduction,
- La partie centrale avec votre contenu le plus important,
- La conclusion contenant votre signature email.
Alléger vos images pour un chargement plus rapide
Optimisez le poids
Pour que votre campagne email soit une réussite, vous devez absolument optimiser son temps de chargement. Pour cela, nous vous conseillons d’alléger au maximum vos images, qui alourdissent principalement vos newsletters. Afin de réduire leur taille, il existe de nombreux logiciels de réduction que vous pourrez gratuitement utiliser et trouver sur Internet. Cette optimisation est primordiale car sur smartphone, certains utilisateurs n’ont pas accès au wi-fi lorsqu’il reçoivent votre email. Si ce dernier met trop de temps à s’ouvrir, vous pouvez être certain que l’internaute ne prendra pas le temps de le lire.
Attention au format
Nous vous conseillons également d’être très vigilant quant au format d’image que vous utilisez. Effectivement, certaines extensions entraînent une surcharge de l’image, ce qui impacte grandement votre taux de clic. Concrètement, évitez le format PNG ainsi que les gifs animés. Préférez plutôt des images optimisées au format JPEG.
Ne pas envoyer une image
Nous venons de le voir, il est très important d’optimiser les images que vous intégrez dans le design de votre newsletter responsive. Pour autant, certains communicants pourraient avoir l’idée de créer un email qui serait entièrement conçu sous la forme d’une image. Il s’agit d’une grossière erreur, pour plusieurs raisons :
- La conception est très limitée, notamment en ce qui concerne les boutons puisque vous ne pouvez intégrer qu’un seul lien sur l’ensemble de l’image, donc de l’email,
- La plupart des filtres antispam ne laissent pas passer ce genre de message et les envoient directement dans le dossier des spams,
- Nous avons mentionné précédemment l’importance du temps de chargement de votre newsletter pour obtenir de bons résultats. Or sachez qu’un message au format image est lourd, il met donc beaucoup de temps à s’afficher. Vous vous en doutez, cela nuit fortement à votre taux de clic.
- Le principe d’un email responsive est de pouvoir s’adapter selon la taille de l’écran : ordinateur, tablette ou smartphone pour permettre au lecteur à l’affichage optimal. Si votre email est figé au format image, son design ne peut pas s’adapter. Cela pose problème à la fois en termes de lisibilité pour vos internautes, et par conséquent également en termes de performance.
Prévisualiser votre newsletter
Lorsque vous avez terminé la conception de votre email marketing, nous vous conseillons fortement de prévisualiser votre message. Également appelée preview, la prévisualisation vous permet de vérifier le design global de votre newsletter. Bien évidemment, ici vous devez effectuer votre preview à la fois pour la version ordinateur de votre message ainsi que la version pour mobile. Si vous utilisez un logiciel email moderne comme Brevo, la preview est rapide et simple : elle a lieu à chaque fois que vous quittez l’éditeur d’email. En plus, vous pouvez passer facilement de l’aperçu sur ordinateur à celui pour smartphone, en un seul clic.
Tester le responsive
Après la prévisualisation, nous vous recommandons de faire des tests en grandeur nature de votre newsletter. Rien de compliqué : envoyez tout simplement votre newsletter sur plusieurs adresses de messagerie auxquelles vous avez accès avec différents systèmes de messagerie :
- Orange Mail,
- Gmail de Google,
- Outlook,
- Thunderbird,
- Yahoo,
- Etc.
Pour chaque boîte de réception, lisez votre newsletter à la fois sur ordinateur et sur votre smartphone. C’est un excellent moyen de tester l’aspect responsive de votre mailing. Si vous découvrez des incohérences en termes d’affichage, modifiez votre design jusqu’à ce que le rendu soit satisfaisant.