Modèle de newsletter : quatre exemples à télécharger gratuitement
Un bon modèle de newsletter est une seule colonne de 600 pixels de large au maximum, avec votre logo en haut, une hiérarchie claire de titres et de texte, un seul bouton principal, un texte alternatif pour chaque image, votre message en vrai texte, un lien de désinscription et l'adresse de l'expéditeur en bas. Qui fixe ces huit éléments dans un modèle réutilisable n'a plus qu'à remplacer le contenu à chaque édition.
Vous trouverez d'abord ci-dessous les quatre modèles de départ de 2Mail comme exemples de modèle de newsletter, chacun téléchargeable gratuitement en HTML et accompagné de la situation à laquelle sa mise en page répond. Ensuite ce que tout modèle doit contenir, où cela dérape en mode sombre, sur mobile et dans Outlook, et comment construire un tel template dans le builder drag & drop de 2Mail.
Quatre modèles de newsletter en HTML
Voici les quatre modèles de départ avec lesquels vous commencez dans le template builder de 2Mail. Vous en choisissez un, vous remplacez le texte, les couleurs et les images, et vous enregistrez le résultat comme votre propre modèle. Vous préférez partir de zéro ? Vous démarrez alors avec un canevas vierge.
Lettre d'information (« Newsletter »)
Un titre souligné d'une ligne de couleur, une courte introduction, deux articles côte à côte, un seul bouton et un pied de page avec lien de désinscription. La mise en page d'une newsletter à rythme fixe.
Télécharger en HTML
Annonce (« Announcement »)
Une grande image en haut, un titre, un court texte, trois points précédés d'une coche et un seul bouton clair. Pour un lancement, un nouveau service ou une offre.
Télécharger en HTML
Invitation (« Event Invitation »)
Un titre, un bloc date bien visible, le nom de l'événement, puis le lieu et le programme côte à côte. Le bouton mène à l'inscription.
Télécharger en HTML
Texte simple (« Simple Text »)
Pas d'images et pas de bouton : une formule d'appel, votre texte, une signature et un pied de page avec lien de désinscription. Se lit comme un e-mail personnel.
Télécharger en HTMLLes images sont des captures d'écran des modèles de départ eux-mêmes, et chaque téléchargement est le même fichier : le HTML que l'éditeur de 2Mail génère pour ce modèle. Le texte d'exemple est en anglais ; vous le remplacez par votre propre contenu. Vous êtes client ? Choisissez alors « Start from template » dans l'éditeur : la même mise en page, mais modifiable par blocs. Un fichier téléchargé s'importe via Templates → « Upload HTML » et se modifie ensuite dans l'éditeur de code.
Modèle, template, mise en page ou format ?
Ces quatre mots s'emploient indifféremment et désignent en pratique la même chose : la mise en forme fixe dans laquelle vous coulez chaque édition. « Modèle » et « template » renvoient au fichier réutilisable, « mise en page » et « format » plutôt à son agencement.
La mise en page d'une newsletter
La mise en page, c'est l'ordre et le rythme des blocs : ce qui figure en haut, combien de sujets suivent et où vient le bouton. Une seule colonne est le choix sûr ; deux colonnes conviennent pour une grille de produits, à condition qu'elles passent l'une sous l'autre sur mobile.
L'en-tête d'une newsletter
L'en-tête est la bande située au-dessus du premier titre : votre logo, avec un lien vers votre site, et éventuellement un lien pour afficher l'e-mail dans le navigateur. Gardez-le bas et sobre. Un menu de navigation à six liens a sa place sur un site web, pas dans un e-mail, et il repousse le contenu vers le bas.
Format et dimensions
Le format courant fait 600 pixels de large, avec des images fournies en double largeur pour qu'elles restent nettes sur un téléphone. La longueur est libre, mais gardez un HTML léger : Gmail tronque un message dès que le code dépasse environ 100 ko, et votre lien de désinscription disparaît alors lui aussi.
Mise en page d'une newsletter : les huit éléments d'un bon modèle
Pas des préférences de design, mais des éléments qui préviennent chacun un problème concret : illisibilité, filtres antispam, plaintes ou obligation légale oubliée.
Une colonne, 600 pixels de large
Une seule colonne se lit partout de la même façon, du grand écran au téléphone. 600 pixels est la largeur que presque toutes les messageries affichent sans barre de défilement horizontale.
Votre logo en haut
Le destinataire doit voir d'un coup d'œil qui écrit. Le logo renvoie vers votre site et se place au-dessus du premier titre, pas en grande bannière qui repousse le contenu vers le bas.
Une hiérarchie claire
Un titre principal, des intertitres par sujet et des paragraphes courts. Qui parcourt le message doit savoir en cinq secondes de quoi il parle. Utilisez des tailles de police qui restent lisibles sur un petit écran.
Un seul bouton principal
Chaque newsletter a une chose que vous voulez que le lecteur fasse : commander, s'inscrire, lire. Donnez à cette action un bouton composé en texte, pas en image, pour qu'il reste visible même sans images.
Un texte alternatif pour chaque image
Plusieurs messageries n'affichent les images qu'après un clic. Le texte alternatif est alors ce que le lecteur voit. Sans lui, une newsletter riche en images se réduit à des espaces vides.
Votre message en vrai texte
Placez ce que vous avez à dire dans des blocs de texte, pas dans une seule grande image. Les filtres antispam se méfient d'un e-mail composé uniquement d'images, et qui a bloqué les images ne voit alors rien. Le vrai texte reste toujours lisible.
Un lien de désinscription
Obligatoire, et dans votre intérêt : qui ne peut pas se désinscrire clique sur « spam », ce qui pèse plus lourd qu'une désinscription. Placez le lien visiblement en bas, en langage clair.
L'adresse de l'expéditeur
Votre raison sociale et votre adresse postale au bas de chaque newsletter. C'est une obligation légale et en même temps un signal de confiance : une vraie entreprise, à une vraie adresse.
Mode sombre, mobile et Outlook
Un modèle qui s'affiche bien dans votre navigateur n'est pas encore prêt. Trois environnements réservent la plupart des surprises.
Mode sombre
Les messageries en mode sombre inversent ou adaptent vos couleurs. Un logo foncé sur fond transparent disparaît ; un texte blanc dans un bouton coloré devient illisible. Utilisez des logos avec leur propre fond et testez en mode sombre avant d'envoyer.
Mobile
Une grande partie de vos destinataires lit sur un téléphone. Une colonne unique s'adapte d'elle-même, mais les boutons doivent être assez grands pour un pouce, et les polices de moins de 14 pixels sont zoomées ou ignorées sur mobile.
Outlook
La version de bureau d'Outlook utilise son propre moteur de rendu, qui ignore beaucoup de CSS moderne : images de fond, coins arrondis et certains espacements disparaissent. Construisez votre modèle sur des tableaux, gardez une mise en forme simple et envoyez un test à un compte Outlook.
Tester dans de vraies messageries n'est donc pas une formalité. Créez dans 2Mail un petit groupe de test avec vos propres adresses et envoyez-y d'abord la campagne, vers au moins trois vraies messageries : un webmail, un téléphone et Outlook sur PC. Ce qui s'affiche bien là s'affiche bien presque partout.
Le template builder de 2Mail
Vous n'avez pas besoin d'écrire du HTML. Le template builder drag & drop du tableau de bord transforme les huit éléments ci-dessus en blocs que vous glissez, remplissez et enregistrez.
Glisser des blocs
Texte, image, bouton, séparateur et colonnes : vous glissez les blocs dans l'ordre voulu et vous les remplissez. Le builder maintient la largeur et la structure et construit le HTML sur des tableaux, avec les adaptations nécessaires pour Outlook.
Modèles réutilisables
Enregistrez votre structure comme modèle et réutilisez-la à chaque édition. Logo, couleurs, pied de page et lien de désinscription sont fixes ; vous ne remplacez que le contenu. Chaque newsletter reste reconnaissable et aucun élément obligatoire n'est oublié.
Aperçu en direct sur ordinateur et mobile
Pendant que vous construisez, vous voyez le message dans un aperçu en direct et vous basculez en un clic entre l'affichage sur ordinateur et sur mobile. Pour le voir dans une vraie messagerie, envoyez d'abord la campagne à un petit groupe de test avec vos propres adresses et celles de vos collègues, et ensuite seulement à votre liste.
Construire un modèle en cinq étapes
Comptez une demi-journée pour la première version. Ensuite, une nouvelle édition ne vous coûte que le temps d'écrire le contenu.
Choisissez la structure
Partez d'une colonne de 600 pixels et fixez l'ordre : logo, titre principal, introduction, deux ou trois sujets, bouton, pied de page. Esquissez-le sur papier avant d'ouvrir le builder ; c'est plus rapide que de glisser et reglisser.
Placez les éléments fixes
Posez dans le builder les blocs qui reviennent à chaque édition : le logo, les couleurs, le pied de page avec votre raison sociale et votre adresse postale, et le lien de désinscription. C'est la partie que vous ne toucherez plus.
Remplissez le contenu et le bouton principal
Écrivez par sujet un titre et deux ou trois phrases, ajoutez une image avec texte alternatif et placez un seul bouton clair. Vérifiez dans l'aperçu en direct le rendu de l'ensemble sur ordinateur et sur mobile.
Testez dans de vraies messageries
Créez un petit groupe de test avec vos propres adresses et envoyez-y d'abord la campagne : vers un webmail, un téléphone et un compte Outlook. Regardez-la aussi en mode sombre. Corrigez ce qui se décale ou disparaît, puis testez à nouveau.
Enregistrez-le comme modèle
Sauvegardez la structure testée comme modèle réutilisable. L'édition suivante part de ce modèle et vous ne remplacez que le contenu, pour que le design et les éléments obligatoires restent intacts.
Check-list avant l'envoi
Parcourez ces six points à chaque édition. Ils prennent deux minutes et évitent les erreurs qu'on ne peut plus rattraper une fois la campagne partie.