Comment trouver le meilleur mockup pour votre newsletter ?

Dossier rédigé par Mathieu Jaulin

Vous souhaitez créer votre newsletter et vous avez besoin d’aide pour trouver le bon mockup qui vous correspond ? Vous avez raison, utiliser un mock-up vous permet de gagner du temps précieux dans la conception de votre newsletter. Grâce au mockup, le design de votre newsletter est déjà en place, et vous n’avez plus qu’à personnaliser le contenu de votre email avec votre texte et vos illustrations. Au blog du digital, notre but est de vous aider en vous donnant des conseils concrets. C’est pour cela que nous allons commencer ce guide dédié au mock-up de newsletter en vous présentant plusieurs exemples. Ensuite, nous allons vous expliquer en quoi un mockup est très intéressant pour concevoir vos différentes newsletters. La troisième partie de ce dossier vous permet de savoir si le mockup que vous avez choisi répond à vos besoins. Enfin, nous allons vous montrer comment évaluer le mockup que vous utilisez pour votre campagne email.

Voici le sommaire de notre dossier dédié au mockup pour newsletter :

1. Quelques exemples
2. Les avantages
3. L’évaluation des performances
4. Intégrer un mockup dans votre logiciel email

Voici notre sélection de mockups pour vos newsletters

Mockup de newsletter classique

Le premier mockup pour newsletter que nous avons choisi de vous montrer est un mockup résolument classique. Dans la première partie on trouve simplement le logo puis le nom de la newsletter, suivis de deux lignes de texte permettant de présenter son intérêt. La principale force de ce mockup est de pouvoir vite identifier qui a envoyé ce message ainsi que le sujet qui est traité. Concernant la partie centrale, elle est très classique puisque chaque information est composée de trois éléments : 

• Un visuel, 
• Le titre de l’information,
• Une phrase résumant cette information.

Pour finir chacune de ces informations, l’internaute est invité à cliquer sur un bouton afin de lire le reste de l’actualité. Enfin, ce mockup se termine par un pied de page, également appelé footer, qui est très épuré car composé uniquement du logo de l’expéditeur ainsi que de son adresse postale.

Mockup de newsletter liée à l’environnement

Le second mockup que nous avons sélectionné est destiné aux newsletters traitant de sujets en lien direct avec l’environnement. Son en-tête est très intéressant car avec les couleurs choisies ainsi que son design, il rappelle dès le début du message son côté environnemental. La partie centrale du mockup intègre une nouvelle couleur en plus du vert afin de mettre en avant certains éléments : le orange. Contrairement au précédent, on voit que le design de ce mockup est bien plus original. Effectivement, sa structure varie en fonction des contenus : 

1. Tout d’abord elle est composée d’une seule colonne,
2. Puis elle change pour se diviser en cinq colonnes,
3. Ensuite elle passe de cinq colonnes à deux colonnes,
4. Enfin, elle se termine sur une zone de contenu avec trois colonnes.

C’est ici que l’on voit toute la force de ce mockup : sa variation de structure est particulièrement intéressante car très originale.

Mockup de newsletter pour la fête des mères

Le troisième mockup que nous avons retenu concerne une newsletter qui est dédiée à la fête des mères. Ici, on voit facilement que les illustrations ont été la priorité. De plus, le header a été conçu comme un bandeau supérieur de site internet avec notamment le nom dans le coin supérieur gauche puis à droite un menu composé de trois différents liens. Ensuite, la partie centrale est composée d’un visuel qui occupe une bonne partie de la page, sous lequel est disposée une information supplémentaire avec un code promo et pour finir un bouton d’action. Le pied de page de ce mock-up est intéressant puisqu’il est composé du logo de l’expéditeur ainsi que de plusieurs boutons renvoyant vers ses profils sur différents réseaux sociaux tels que Facebook, X, Instagram et YouTube.

Mockup de newsletter pour lancer un nouveau produit ou service

Le quatrième mockup qui nous a semblé pertinent pour créer une newsletter concerne cette fois les nouvelles technologies. Ce mockup ressemble au tout premier, spécialement son en-tête qui est identique. Cependant, la partie centrale est différente car chaque actualité est représentée par une illustration, un titre et enfin une phrase d’introduction. Contrairement à d’autres mockups, celui-ci est intéressant puisqu’il intègre directement ses liens sur le texte sans insérer de bouton d’action. Il s’agit clairement d’un choix fort de la part du créateur.

Mockup de newsletter pour un restaurant

Le cinquième et dernier mockup de newsletter est destiné aux restaurateurs. Pour celui-ci, chaque information est présentée par un visuel, puis un titre. Ici aussi, le créateur du mockup a choisi de ne pas intégrer de boutons mais invite plutôt les internautes à cliquer sur l’image ou bien sur le texte afin de lire le reste de l’actualité. La principale force de ce mockup réside dans la sélection de couleurs vives et chaudes qui sont intégrées dans les images ainsi que dans le texte.

Quels sont les avantages d’un mockup de newsletter ?

Au blog du digital, nous vous conseillons d’utiliser des mockups pour vos newsletters car ils présentent deux grands avantages :

1. Vous faire gagner du temps,
2. Vous aider à trouver de nouvelles idées d’inspiration pour concevoir vos newsletters.

Gagner du temps

Le principal avantage d’un mock-up est bien évidemment qu’il va vous aider à gagner du temps lors de l’étape de conception de votre newsletter. Effectivement, le mockup vous permet de bénéficier d’une structure avec un design construit et réfléchi, en quelques clics seulement. Ainsi, il ne vous reste plus qu’à rédiger vos textes, trouver des illustrations et paramétrer vos boutons afin de terminer le design de votre newsletter. Vous l’aurez compris, cette préparation vous prendra tout de même un certain temps, néanmoins le mockup vous fait gagner un temps précieux.

Trouver de nouvelles idées de design

En plus de gagner du temps, utiliser un mockup pour vos campagnes email vous permet de trouver de nouvelles idées de design facilement. Pour cela, nous vous conseillons de parcourir la galerie de templates et de modèles directement intégrés dans votre logiciel email. Cela vous donnera à coup sûr de nouvelles idées pour faire évoluer vos créations.

Conclusion sur les intérêts d’un mockup pour newsletter

Pour conclure sur les forces d’un mockup, vous devez retenir qu’il va vous permettre à la fois de gagner du temps et de trouver de nouvelles idées pour vos conceptions.

Comment évaluer les performances d’un mockup de newsletter ?

Après avoir envoyé votre newsletter, il est important pour vous de savoir si le mockup que vous avez choisi vous correspond réellement. Pour cela, vous devez mesurer les performances de votre newsletter afin de savoir si elle répond à votre besoin ainsi qu’à celui de vos internautes. Concrètement, nous avons sélectionné pour vous trois statistiques qui vous permettent d’évaluer le design de votre email :

1. Le taux de clic,
2. Le taux de conversion,
3. La heatmap.

Le taux de clic

Le taux de clic est important pour une campagne newsletter puisqu’il mesure le niveau d’interactivité que vous avez réussi à générer avec votre design. Pour calculer le taux de clic, vous devez diviser le nombre de clics réalisés par vos lecteurs, par le nombre d’e-mails envoyés. Pensez bien à multiplier le résultat obtenu par 100 afin d’obtenir un pourcentage.

Le taux de conversion

Le second indicateur que nous avons choisi est le taux de conversion. Mais avant de le calculer, vous devez préalablement avoir défini ce qu’est une conversion pour vous. Une conversion est une action réalisée par un internaute qui représente pour vous une valeur ajoutée. Concrètement, voici quelques exemples qui varient selon votre contexte. Effectivement, une conversion peut-être

• Un abonnement à votre newsletter,
• L’achat d’un produit ou d’un service que vous vendez sur votre site Internet,
• Le remplissage d’un formulaire de contact pour demander davantage d’informations,
• etc.

La heatmap

La troisième et dernière statistique que nous avons retenue est la heatmap. La Heatmap est intéressante puisqu’elle permet d’un simple coup d’œil de détecter quels sont les liens qui ont le plus intéressé vos destinataires. En effet, la Heatmap consiste en une capture d’écran de votre newsletter sur laquelle viennent s’ajouter des zones plus ou moins grandes et plus ou moins colorées en fonction du nombre de clics réalisés par vos internautes. Cela est très intéressant puisque vous pouvez ainsi détecter les liens ainsi que les zones de votre email qui génèrent le plus d’intérêt pour vos contacts, et inversement.

Si vous souhaitez en savoir plus sur l’évaluation d’une campagne newsletter, allez lire notre guide Email : Quelles statistiques analyser ?

Comment intégrer un mockup de newsletter dans votre logiciel ?

Une fois que vous avez trouvé votre mockup, vous allez devoir l’intégrer dans votre logiciel email pour pouvoir concevoir votre newsletter. Ici, vous devez savoir qu’il existe deux cas de figure différents :

1. Soit votre mockup vous est directement proposé par votre logiciel email,
2. Soit vous avez trouvé votre mockup sur un autre site.

Le mockup vous est proposé directement par votre logiciel email

Il s’agit du contexte le plus simple pour vous, puisque le mock-up que vous avez choisi est directement proposé par votre logiciel email. Ainsi, vous n’avez plus qu’à le sélectionner puis à venir personnaliser le contenu de votre newsletter avec votre texte, vos illustrations ainsi que des boutons et éventuellement des vidéos. Une fois le design de votre newsletter terminé, vous pouvez envoyer votre message à tous vos destinataires.

Le mockup provient d’un autre site

Ici, la situation est différente de la situation précédente puisque vous avez trouvé votre mockup sur un site ou sur un logiciel différent du logiciel email que vous utilisez. Néanmoins, sachez que vous pouvez tout à fait utiliser ce mock-up. Pour cela, vous devez réaliser un copier-coller du code HTML. Ce code est en général fourni avec le mockup. Une fois que vous avez trouvé ce fameux code HTML, vous devez le copier. Ensuite, rendez-vous dans votre logiciel email puis sélectionnez l’option pour intégrer du code HTML. Dans la zone qui s’ouvre, il ne vous reste plus qu’à venir coller le code HTML précédemment copié. Maintenant, vous devez finaliser le design de votre newsletter pour pouvoir l’envoyer à votre liste de destinataires.

Newsletter mockup : la synthèse

Pour résumer ce guide consacré à la newsletter et au mockup, voici les informations principales que vous devez retenir : 

1. Nous avons sélectionné pour vous cinq exemples de mockups, que vous pouvez réutiliser facilement et intégrer dans votre logiciel de newsletter,
2. Utiliser un mockup vous permet non seulement de gagner du temps précieux dans la conception de votre newsletter mais également de trouver de nouvelles idées d’inspiration pour faire évoluer vos designs,
3. Pour savoir si le mockup que vous avez choisi répond réellement à votre besoin et à celui de vos internautes, vous devez mesurer les performances de votre campagne newsletter. Concrètement, voici trois indicateurs que vous devez analyser afin d’évaluer votre newsletter : le taux de clic, le taux de conversion et pour finir la heatmap, également appelé clicmap,
4. Enfin, intégrer un mockup de newsletter dans votre logiciel email est relativement simple, surtout si le mockup que vous avez choisi est directement proposé par ce logiciel. Mais si ce n’est pas le cas, sachez qu’un simple copier-coller du code HTML vous permet d’intégrer le mockup dans votre logiciel email.

Mockup newsletter : la conclusion

Pour finir ce guide, il me semble important de commencer par remercier tous les visiteurs de notre blog. Chaque jour, vous êtes de plus en plus nombreux et c’est grâce à vous que notre aventure continue de croître année après année. C’est pour cela que nous vous adressons un immense merci. Vous devez savoir que les membres de l’équipe de notre blog mettent l’ensemble de leurs compétences à votre service pour vous proposer des conseils et des guides toujours plus complets et toujours plus pertinents. Ainsi, vous trouverez ici de l’aide pour animer vos réseaux sociaux, créer des newsletters et des emails, construire des sites internet ou encore optimiser le référencement de votre site web.

Lorsque nous nous sommes lancés dans la rédaction de cet article dédié au mockup de newsletter, notre objectif final était de vous aider à gagner du temps pour trouver et intégrer le mockup dans votre logiciel email. Après nous avoir lu, quel est votre avis ? Avez-vous réussi à facilement intégrer votre mockup dans votre logiciel ? Dans tous les cas, vous pouvez nous envoyer un message en remplissant notre formulaire de contact. Si vous préférez, vous avez également la possibilité de nous laisser un bref commentaire. Pour cela, rendez-vous juste après cette conclusion.

Au blog du digital, nous sommes fiers de répondre en personne à tous les messages et toutes les sollicitations que nous recevons au quotidien. Cependant, sachez que la totalité de nos réponses sont rédigées à la main par une vraie personne. C’est pour cela qu’il peut se passer quelques jours entre le moment où vous nous écrivez et le moment où nous vous répondons. Actuellement,notre délai de réponse est d’environ six jours ouvrés. C’est pour cela que nous vous demandons de faire preuve de patience car c’est promis, nous répondons à tout le monde.

Pour terminer, nous vous conseillons de lire un article qui a rencontré un grand succès sur les réseaux sociaux depuis qu’il a été mis à jour l’hiver dernier. Appelé Quand envoyer un email ?, ce guide vous permet de déterminer avec précision le meilleur jour de la semaine ainsi que leur meilleur moment de la journée pour envoyer votre message à tous vos destinataires.

À bientôt sur le blog du digital