Concevoir l’e-mail de vos rêves : le guide complet

Le premier pas est toujours le plus difficile. Oui, même quand il s’agit de design d’e-mail.

Quand vous décidez de créer un e-mail de zéro, les questions s’accumulent. Quelles sont la taille, la largeur et la hauteur idéales d’un modèle d’e-mail ? Quel poids pour une newsletter ? Et côté polices et couleurs ?

Pour garder le cap tout au long de la conception, il vous faut de bons repères : c’est précisément pour cela que nous avons écrit ce guide. Pourquoi nous ? Nous avons créé plus de 390 modèles d’e-mails impeccables et encore davantage d’e-mails uniques pour nos clients. Suivez-nous pas à pas dans la conception d’un e-mail parfait, de ses dimensions jusqu’au pied de page, et découvrez comment le réaliser dans Blocks, notre éditeur d’e-mails no-code.

Partie 1. Commençons par le commencement

Avant toute chose, il faut définir les dimensions de votre modèle d’e-mail. Une hauteur et une largeur adaptées sont essentielles pour que le contenu s’affiche correctement et que votre message atteigne votre audience. Et comme les dimensions d’un modèle d’e-mail (et de son contenu) se mesurent généralement en pixels (px), nous nous en tiendrons à cette unité dans ce guide.

Quelle largeur pour mon e-mail ?

Pendant longtemps, la largeur moyenne d’un e-mail était de 600 px sur ordinateur, et de 320 px en portrait et 480 px en paysage sur mobile. Mais avec le temps, les résolutions d’écran ont augmenté. Aujourd’hui, d’après cet article de Selzy, la largeur idéale de la version ordinateur est de 640 px ; celle de la version mobile ne change pas.

Bien sûr, votre e-mail peut dépasser 640 px, mais essayez de ne pas franchir le seuil de 800 px. En effet, chaque client de messagerie a ses propres réglages et limites, et vous devez vous y conformer si vous voulez que tous vos destinataires reçoivent la meilleure version de votre message. Si votre e-mail dépasse ce seuil, testez-le dans chaque client de messagerie pour vous assurer qu’il ne s’affiche pas de travers ou ne se casse pas.

Autre point à garder en tête : si la version mobile de votre e-mail fait 480 px de large, les utilisateurs devront tourner leur téléphone pour le voir correctement. Comme pour la version ordinateur, vous pouvez dépasser 320 px, mais testez soigneusement le résultat.

Quelle longueur pour mon e-mail ?

En hauteur, la seule limite est votre imagination (et le poids du fichier). La longueur idéale est de 1 500 px, mais vous pouvez aller au-delà, jusqu’à 3 000 px ! Gardez toutefois à l’esprit que plus votre e-mail est long, plus les lecteurs risquent de se dire « trop long, pas lu » et de le fermer.

Et si vous avez beaucoup de contenu à partager, structurez-le : listes à puces, paragraphes courts, intertitres. Vous pouvez aussi placer certaines informations sur des images, utiliser des GIF ou même joindre une vidéo !

Quel poids pour ma newsletter ?

Votre e-mail ne doit pas dépasser 102 Ko. Gardez toujours ce chiffre en tête et évitez de surcharger votre e-mail de contenu (et nous ne parlons pas seulement des images ou des vidéos).

Le poids d’un e-mail correspond au poids de son code HTML. Plus il y a de lignes de code, plus le fichier est lourd. C’est pourquoi il faut surveiller le volume de contenu : chaque bloc compte, pour ainsi dire.

Et si vous dépassez la limite de 102 Ko ? La conséquence est simple : certains clients de messagerie (Gmail, par exemple) tronquent votre e-mail. Si c’est seulement le pied de page qui est coupé, cela peut parfois passer ; mais si l’e-mail est tronqué en plein milieu, c’est une tout autre histoire. Soyez vigilant.

Comment créer un e-mail de zéro dans Blocks ?

Blocks vous permet de créer un bel e-mail sans écrire une seule ligne de code ! Partez d’un modèle vierge, générez un e-mail avec l’IA ou choisissez-en un dans la galerie de modèles, puis faites glisser des blocs de contenu sur le canevas et ajustez les propriétés des éléments et les paramètres de l’e-mail dans le panneau de droite.

Partie 2. Comment faire briller votre e-mail

La structure de base de notre e-mail est prête : place maintenant à ses éléments. Parlons de la mise en page d’un e-mail et de la bonne façon de la concevoir.

1. Pré-en-tête et en-tête (hauteur, largeur, contenu)

Le pré-en-tête est une fine ligne placée au-dessus de l’e-mail. Il s’affiche généralement aussi après l’objet. Il peut prolonger l’objet (par exemple en annonçant la livraison gratuite ou des remises supplémentaires) ou remplir un rôle purement pratique (comme contenir le lien « Voir dans le navigateur »).

Pour la mise en forme du texte du pré-en-tête, gardez deux points en tête. La taille de police du pré-en-tête doit être plus petite que celle du corps de l’e-mail (mais pas trop, bien sûr). Par exemple, si le corps est en 14 px, visez 10 à 12 px pour le pré-en-tête. Quant à sa hauteur, 55 à 60 px suffisent : au-delà, il attirerait beaucoup trop l’attention.

Et bien sûr, surveillez la longueur du texte de votre pré-en-tête : elle doit rester comprise entre 50 et 100 caractères.

Passons à l’en-tête de l’e-mail. Il contient généralement le logo de votre entreprise, accompagné de boutons, d’un menu ou d’autres éléments. Voici quelques conseils sur sa taille.

Si l’en-tête contient un logo de taille standard, la hauteur idéale est de 70 px. Si vous y ajoutez un bouton ou du texte (ou si vous utilisez un logo plus grand), vous pouvez monter à 100 à 150 px. Pour un en-tête avec menu, envisagez d’aller jusqu’à 200 px. Mais n’oubliez jamais qu’un en-tête trop haut attire trop l’attention.

En plus des marges intérieures en haut et en bas, vous pouvez aussi ajouter des marges intérieures à gauche et à droite de vos blocs. Contrairement aux marges du haut et du bas, celles-ci doivent être identiques dans tout l’e-mail : si vous utilisez des marges latérales de 40 px dans le corps de l’e-mail, elles doivent aussi faire 40 px dans le pré-en-tête et l’en-tête.

Pour le design de l’en-tête, seules votre imagination et le style général de l’e-mail fixent les limites. Une seule règle : tous les éléments doivent rester cohérents sur ordinateur comme sur mobile.

2. Bannière (hauteur, largeur, à faire et à éviter)

La bannière d’e-mail est une image JPG, PNG ou SVG qui capte le plus l’attention et offre la toile idéale pour laisser parler votre créativité. Vous pouvez jouer sur sa taille, sur le style des polices (et leur taille) et sur les couleurs. Mais restez raisonnable : une bannière surchargée deviendra vite un fouillis plutôt qu’un élément qui attire l’œil.

Dimensions des images d’e-mail :

La largeur de la bannière dépend généralement de la largeur totale de l’e-mail. Par exemple, si votre e-mail fait 600 px de large sur ordinateur et 320 px sur mobile, la bannière peut garder ces mêmes largeurs. Vous pouvez aussi lui ajouter des marges latérales, en gardant à l’esprit qu’elles doivent rester identiques dans tout l’e-mail (si elles font 40 px dans tous les autres blocs, la bannière doit suivre).

Quant à la hauteur de la bannière, il n’y a pas vraiment de limite, si ce n’est le bon sens. Nous vous conseillons toutefois une hauteur de 700 à 1 400 px. Au-delà, la bannière risque de faire plus de mal que de bien à votre e-mail.

3. Texte (style de police, taille, couleurs, mise en forme)

Quand il s’agit du texte d’un e-mail, on s’y perd facilement. Quelle est la meilleure taille de police pour un e-mail ? Existe-t-il une police et une taille « professionnelles » à respecter ? Parmi des dizaines d’options, laquelle choisir ?

Pas d’inquiétude, ce n’est pas compliqué du tout. Nous allons vous aider à choisir le style de police, la taille, l’interligne, la couleur et la mise en forme idéaux pour votre e-mail.

Style de police :

Il existe deux grandes familles de polices : Serif et Sans Serif. La différence tient aux petits empattements au bout des lettres : les polices Serif en ont, les polices Sans Serif n’en ont pas.

Au départ, Blocks ne proposait qu’un nombre limité de polices. Mais après une série de mises à jour, nous prenons aussi en charge les polices Google ! Le jeu de polices de départ contient les polices sûres : celles qui s’affichent correctement sur tous les types d’appareils et dans tous les clients de messagerie. Les voici :

Les polices Google, en revanche, sont un peu plus délicates : certains clients de messagerie et appareils peuvent mal les afficher. Vous pouvez bien sûr les utiliser, mais dans ce cas, testez vos e-mails avant de les envoyer.

Nous vous conseillons de ne pas utiliser plus de deux polices dans un e-mail. Vous préserverez ainsi la cohérence et la lisibilité, et votre texte sera plus facile à distinguer (un point d’accessibilité essentiel pour tout e-mail).

Et puisqu’on parle de lisibilité, voyez comme elle change selon la seule police utilisée :

Bien sûr, la deuxième option a plus d’allure, mais elle est bien plus difficile à lire.

Taille de police et interligne :

Après avoir testé plusieurs combinaisons de tailles pour les titres, les sous-titres et le texte, nous sommes arrivés aux tailles de police suivantes :

• 22 à 24 px pour les titres ;
• 18 à 20 px pour les sous-titres ;
• 14 à 16 px pour le texte courant.

Quant à l’interligne idéal, visez 150 à 200 %. Votre texte sera ainsi bien lisible et agréable à l’œil.

Et n’oubliez pas : il n’existe pas de police ni de taille « professionnelle » pour les e-mails. Tout dépend du contexte et de vos choix artistiques. Veillez simplement à ce que l’e-mail reste lisible, avec un texte ni trop grand ni trop petit.

Couleur de police :

Notre conseil rejoint celui sur les polices : pas plus de deux couleurs de texte dans tout l’e-mail. Choisissez des couleurs contrastées pour rendre votre texte plus accessible.

Mise en forme du texte :

Il existe 3 façons principales de mettre en forme le texte et d’en faire ressortir certaines parties : le gras, l’italique et le soulignement. Voyons comment utiliser chacune d’elles :

• Le gras sert généralement à mettre en avant les mots sur lesquels le lecteur doit s’arrêter (une date, une condition de vente, etc.).
• L’italique sert à signaler les citations et les titres de livres, de films, etc.
• Enfin, on souligne les liens : c’est l’usage le plus courant de ce type de mise en forme.

Sans être obligatoires, ces pratiques sont devenues la norme : les lecteurs remarquent davantage le texte en gras et cliquent plus volontiers sur le texte souligné. Pensez-y aussi pour le texte de vos e-mails.

4. Boutons (largeur et hauteur, couleur, polices, marges intérieures)

Comme pour la taille de la bannière, il n’existe pas de limites précises pour les boutons. Il y a tout de même quelques règles générales et recommandations pour tirer le meilleur de cet élément.

• Les boutons doivent se détacher du fond et du reste du contenu de l’e-mail. Ils doivent accrocher le regard et sauter aux yeux des lecteurs.
• Dans la version mobile de l’e-mail, les boutons doivent être assez grands pour que les lecteurs puissent appuyer dessus sans difficulté.
• Choisissez des couleurs contrastées pour que les boutons se distinguent bien.
• Jouez sur l’espace blanc et ajoutez des marges intérieures autour du texte du bouton. Il sera plus facile à lire et à cliquer.

5. Blocs de contenu (nombre d’éléments dans la grille, dimensions et style)

Il existe de nombreux types de blocs de contenu : articles, grilles de produits, citations, etc. Au fond, ce sont tous des tableaux composés d’une ou de plusieurs colonnes. Un conseil : limitez-vous à 4 colonnes pour les grilles de produits et à 2 colonnes pour les autres types de blocs.

Gardez aussi à l’esprit qu’un bloc trop long peut décourager le destinataire de poursuivre sa lecture (et ce n’est évidemment pas le but). Restez raisonnable : un bloc de contenu doit faire 200 à 300 px de haut. L’ensemble des blocs de contenu de votre e-mail devrait représenter environ 1 000 à 1 200 px.

6. Pied de page (largeur, hauteur, contenu obligatoire et facultatif)

Dans un e-mail, le pied de page a une fonction plus pratique. Sa taille dépend de la quantité de contenu qu’il renferme. Un pied de page type contient :

1. L’adresse postale de l’entreprise.
2. Les liens vers les réseaux sociaux.
3. Les coordonnées de l’entreprise (numéro de téléphone et/ou adresse e-mail).
4. Le lien vers l’application mobile ou un QR code.
5. Un rappel de la raison pour laquelle le destinataire reçoit l’e-mail.
6. Le lien vers la politique de confidentialité.
7. Le lien « Se désabonner ».

À noter : le CAN-SPAM Act et le RGPD imposent tous deux un lien de désabonnement pour les destinataires situés respectivement aux États-Unis et dans l’UE. Même si vous ne travaillez pas directement avec ces pays, votre base d’utilisateurs compte peut-être des clients américains ou européens.

Mieux vaut donc toujours prévoir le lien « Se désabonner » dans le pied de page, par précaution. Rendez-le bien visible et permettez à vos abonnés de se désinscrire en un clic. Dernier point : aucun ESP ne vous laissera envoyer un e-mail sans lien de désabonnement. Même si vous oubliez de l’ajouter, il vous le rappellera ou l’ajoutera automatiquement (comme Selzy).

En plus des éléments déjà cités, vous pouvez ajouter d’autres éléments dans votre pied de page (un menu, des informations sur les promotions en cours, etc.).

Enfin, parlons des dimensions du pied de page. Sa largeur doit être exactement la même que celle de l’e-mail, et sa hauteur dépend de la quantité de contenu. Prévoyez tout de même au moins 200 px de hauteur.

Partie 3. Touches finales et tests

Notre e-mail est prêt ! Il ne reste que quelques dernières étapes.

Vérifiez que les espacements entre les éléments ont tous la même hauteur. Ils ne doivent être ni trop petits ni trop grands : la taille idéale est de 30 à 40 px. Assurez-vous aussi que la taille du texte est cohérente d’un bloc à l’autre, que chaque image a un texte alternatif et que tous les liens sont en place.

N’oubliez pas d’ajouter des balises UTM à vos liens (si besoin). Les balises UTM sont de courts fragments de code qui permettent de suivre les performances de vos campagnes. Si vous codez votre e-mail à la main, vous devrez les ajouter lien par lien ; dans Blocks, vous les ajoutez à tous vos liens en quelques clics !

Vérifiez ensuite l’apparence et le fonctionnement de votre e-mail sur mobile (beaucoup de gens lisent leurs e-mails sur leur téléphone). Enfin, envoyez un e-mail de test pour vérifier qu’il s’affiche correctement sur tous les appareils et dans tous les clients de messagerie.

Conclusion

Vous le voyez, concevoir un bel e-mail de zéro n’a rien de compliqué ! Certes, certaines recommandations (comme les dimensions du modèle d’e-mail) sont plus strictes que d’autres (comme le choix de la meilleure taille de police). Mais avec ce guide détaillé, nous sommes sûrs que vous garderez toujours le cap dans la conception de vos e-mails !