Design de newsletter : les règles à connaître

Vous ouvrez l’éditeur de votre plateforme d’emailing pour la première fois. Quarante modèles s’affichent, des palettes de couleurs, des blocs à glisser, des polices par dizaines. Et une question vous arrête net : à quoi doit ressembler une newsletter professionnelle quand on n’a jamais fait de graphisme ?

Bonne nouvelle, le design d’une newsletter B2B tient en une poignée de règles. Pas de logiciel de création, pas de maquette à faire valider par une agence. Cet article se concentre sur l’apparence de votre message ; pour le parcours complet, du choix de l’outil au premier envoi, suivez notre guide pour créer sa première newsletter.

Le design d’une newsletter sert d’abord à la lecture

Vos destinataires ne lisent pas votre newsletter. Ils la parcourent. Un DRH qui reçoit l’envoi mensuel d’un cabinet de recrutement lui accorde quelques secondes, souvent entre deux réunions, pour décider si le contenu mérite plus d’attention. Le design est là pour lui faciliter cette décision, pas pour l’impressionner.

Ce lecteur, où se trouve-t-il ? Selon le baromètre permanent de Litmus, spécialiste des tests d’emails, environ six ouvertures sur dix se font sur une messagerie Apple (iPhone, iPad ou Mac) et un peu plus d’une sur quatre sur Gmail, d’après les données de juillet 2026. Le chiffre d’Apple est gonflé depuis 2021 par sa protection de la vie privée, qui ouvre automatiquement certains messages. La tendance reste nette : une grande partie de vos lecteurs vous découvre sur un petit écran.

En B2B, il faut ajouter un invité moins visible dans ces statistiques. Outlook, installé sur les postes de beaucoup d’entreprises. Litmus ne lui attribue qu’environ 6 % des ouvertures tous publics confondus, mais dans beaucoup d’entreprises équipées de la suite Microsoft, il reste la messagerie du bureau. Celle de vos acheteurs, de vos DRH, de vos directeurs financiers. Et c’est aussi la plus capricieuse pour afficher une mise en page élaborée.

Une colonne, 600 pixels et un ordre qui ne change pas

La largeur de référence d’une newsletter est de 600 pixels, le pixel étant l’unité qui mesure les éléments affichés à l’écran. Cette convention date d’une époque où les écrans étaient plus petits, mais elle tient toujours : les tests d’Email on Acid montrent qu’au-delà d’environ 650 pixels, certaines messageries coupent une partie du contenu. Sur un téléphone, un modèle dit « responsive », c’est-à-dire qui s’adapte automatiquement à la taille de l’écran, resserre ensuite cette colonne pour qu’elle tienne dans la largeur.

Une seule colonne, donc. Les mises en page sur deux ou trois colonnes font joli dans l’éditeur, puis s’empilent dans le désordre sur mobile et se décalent dans Outlook.

L’en-tête : votre nom, rien de plus

Votre logo, éventuellement le nom de la newsletter et la date. Le lecteur doit savoir en une seconde qui lui écrit. Un bandeau de 400 pixels de haut repousse le contenu sous la ligne de flottaison de l’écran, et c’est le contenu qu’on est venu chercher.

Le corps : un sujet principal, deux ou trois blocs secondaires

Mettez en tête l’information qui justifie l’envoi. Une ESN qui présente une nouvelle référence client, par exemple, lui réserve le premier bloc avec un titre, trois lignes de texte et un lien. Viennent ensuite deux ou trois blocs plus courts. Gardez le même ordre d’un numéro à l’autre : vos lecteurs apprendront où chercher ce qui les intéresse.

Le pied de page : ce que la loi et la confiance exigent

Le nom de votre société, son adresse, un moyen de vous contacter et le lien de désinscription, obligatoire pour tout envoi commercial. Un lien de désinscription caché en gris clair sur fond blanc ne vous rend pas service. Un lecteur qui ne le trouve pas clique sur « Signaler comme spam », ce qui abîme votre délivrabilité, votre capacité à arriver en boîte de réception plutôt qu’en courrier indésirable.

Des polices lisibles plutôt que des polices jolies

Pour le texte courant, visez 16 pixels, et ne descendez jamais sous 14. Les titres se situent entre 22 et 28 pixels. Ces valeurs font consensus chez les plateformes d’emailing, et elles évitent au lecteur de zoomer sur son téléphone.

Côté police, restez sur celles que tous les ordinateurs connaissent : Arial, Helvetica, Verdana, Georgia. La police élégante de votre site risque d’être remplacée sans prévenir par une police par défaut chez une partie de vos destinataires. Autant choisir vous-même.

Reste le contraste entre le texte et son fond. Le W3C, l’organisme qui fixe les standards du web, recommande un rapport d’au moins 4,5 pour 1 pour le texte courant. Traduction pratique : du noir ou du gris très foncé sur fond blanc ou crème. Le gris clair à la mode se lit mal dans un train, en plein soleil, sur un écran de téléphone à moitié chargé.

Les images : utiles, légères et jamais seules

Voici le piège le plus fréquent chez les débutants. Outlook bloque par défaut le téléchargement automatique des images, Microsoft le précise dans sa documentation. Votre prospect ouvre donc votre message au bureau et voit des cadres vides tant qu’il n’a pas cliqué sur « Télécharger les images ». Beaucoup ne cliquent jamais.

D’où trois réflexes. Chaque image reçoit un texte alternatif, la courte description qui s’affiche à sa place quand elle ne se charge pas ; votre plateforme propose un champ prévu pour ça. Les informations importantes, date d’un webinaire, prix, nom de l’intervenant, restent en texte. Et les images sont compressées : une photo de 3 Mo tout droit sortie d’un appareil photo ralentit l’affichage sur mobile.

Un mot sur le poids global. Gmail coupe les messages dont le code dépasse environ 102 Ko et affiche « Message tronqué » avec un lien pour voir la suite. Ce seuil, relevé par Litmus et confirmé par les principales plateformes, concerne le code du message, pas les images. Une newsletter courte, construite dans l’éditeur d’une plateforme, reste loin de cette limite. Un modèle copié-collé depuis Word, beaucoup moins.

Couleurs, boutons et mode sombre

Deux couleurs de marque suffisent, en plus du texte foncé et d’un fond clair. Réservez la plus vive au bouton principal, ce que les marketeurs appellent le CTA, pour « call to action » ou appel à l’action : « Voir l’étude de cas », « S’inscrire au webinaire ». Un seul bouton de ce type par newsletter. Quand tout est mis en avant, plus rien ne l’est.

Ce bouton doit se toucher facilement du pouce. Apple recommande une zone d’au moins 44 points de côté dans ses règles de conception, Google 48. Retenez l’idée : un bouton large, bien espacé des liens voisins, avec un texte d’au moins 16 pixels.

Dernier réglage, le mode sombre, cette option qui affiche les messages en texte clair sur fond noir. Selon plusieurs estimations du secteur, environ un lecteur sur trois l’utilise. Certaines messageries inversent alors vos couleurs à leur façon. Deux précautions limitent la casse : un logo sur fond transparent qui reste visible sur du noir, avec un léger contour si besoin, et aucun texte important écrit en foncé sur une image foncée.

Testez sur trois écrans avant chaque envoi

Envoyez-vous la newsletter depuis votre plateforme. Ouvrez-la sur votre téléphone, puis dans Gmail sur un navigateur, puis dans Outlook sur un poste de bureau, le vôtre ou celui d’un collègue. Regardez-la une fois sans les images, une fois en mode sombre si votre téléphone le permet. Cliquez sur chaque lien. Un consultant qui envoie sa lettre mensuelle à 300 directeurs financiers n’a pas besoin de plus pour repérer l’essentiel des défauts d’affichage. Le bouton qui déborde, le logo invisible sur fond noir, le titre coupé en deux sur mobile : c’est là qu’on les voit.

Le design fait lire, le texte fait agir. Une fois la forme posée, travaillez le fond avec notre article sur comment rédiger une newsletter qui se lit. Et pour ne rien oublier le jour J, notre checklist de création d’une newsletter reprend toutes les étapes.

Questions fréquentes