Conceptions, modèles et exemples pour 2023

Avez-vous déjà ouvert un e-mail sur votre téléphone et l'image était de mauvaise qualité, le texte était trop petit et le bouton d'appel à l'action était cassé ? Ce sont tous les défauts de la conception des e-mails statiques. Les e-mails réactifs sont la réponse.

Étant donné que plus de la moitié des résidents américains consultent les messages marketing par e-mail sur leur téléphone, vous devez optimiser vos e-mails pour plusieurs écrans, y compris les mobiles et les tablettes.

Les e-mails réactifs utilisent des images et des tableaux fluides pour rester flexibles sur différentes tailles d'écran. En fin de compte, ils fournissent un contenu conçu pour l'expérience optimale de chaque utilisateur.

Bien que les e-mails réactifs puissent être conçus à l'aide de requêtes média CSS, vous n'avez besoin d'aucune expérience en matière de codage pour en créer un. La création d'un e-mail réactif n'est pas seulement un travail pour les codeurs.

Ici, nous avons aligné quelques bonnes pratiques et des modèles prêts à l'emploi, ainsi qu'un rapide tutoriel sur les principes fondamentaux des e-mails réactifs.

Les e-mails réactifs sont également plus accessibles, car ils permettent aux abonnés de lire sur leur appareil préféré.

Pour illustrer, voici à quoi ressemble un e-mail promotionnel que j'ai reçu sur le bureau.

Cet e-mail contient des images impressionnantes, des icônes pouvant être achetées et est bien formaté. Lorsque j'ouvre l'e-mail sur mobile, c'est ce que je suis accueilli.

J'ai toujours les mêmes informations et les mêmes photos et icônes achetables. La seule différence notable est le format de l'e-mail. C'est différent pour mieux s'adapter à l'expérience mobile.

Maintenant, imaginez si cette même disposition de bureau était appliquée au mobile. Je devrais zoomer sur mon téléphone pour voir l'une des images ou du texte. Au lieu de cela, je me désabonnerais.

Avec un e-mail réactif, l'expérience utilisateur peut être améliorée, ainsi que le retour sur investissement de la campagne.

Pensez-y : les abonnés satisfaits d'une conception d'e-mail mobile optimisée ouvriront davantage de messages marketing, car ils savent qu'ils seront accessibles et beaux.

Donc, avec toutes ces discussions sur les e-mails réactifs, vous devez être impatient de créer le vôtre. Ensuite, nous examinerons quelques exemples et modèles d'e-mails réactifs.

Conceptions d'e-mails réactifs

Il existe de nombreuses façons de concevoir des e-mails réactifs.

Si vous avez des connaissances en codage, vous pouvez coder différents modèles d'e-mails pour différentes tailles d'écran. Vous pouvez également utiliser un modèle prédéfini qui fonctionne avec toutes les tailles d'écran.

Quelle que soit votre approche, vous aurez besoin de votre logiciel de marketing par e-mail. Ici, vous pouvez concevoir un e-mail, puis prévisualiser cet e-mail sur plusieurs appareils. La plupart des logiciels de messagerie vous montreront à quoi ressemblera la conception sur plusieurs appareils.

La vidéo ci-dessous vous expliquera comment concevoir un e-mail avec un modèle. Dans la vidéo, l'utilisateur est sur Klaviyo, mais les concepts restent valables quel que soit le logiciel que vous utilisez.

Coder un email responsive

Si vous cherchez à rendre les éléments de votre e-mail réactifs, vous devrez travailler avec les requêtes multimédias.

Les requêtes média sont une technique CSS. Il vous permet de définir des règles de style qui n'apparaissent que si certaines conditions sont vraies. Par exemple, vous pouvez spécifier les tailles de police et les tailles d'image à utiliser lorsqu'un écran mesure 600 pixels de large ou moins.

Lorsque vous travaillez avec des e-mails, vous pouvez utiliser des requêtes multimédias pour spécifier à quoi votre conception doit ressembler sur les ordinateurs de bureau, les tablettes et les appareils mobiles. Pour ce faire, vous devrez spécifier les éléments suivants :

• Utilisez le sélecteur « @media » et spécifiez « écran ». Cela indique que le code affectera les appareils avec un écran.
• Définissez votre "largeur maximale" en pixels. Cela spécifie la taille de l'écran où le code prendra effet.
• Spécifiez les guides de style CSS que vous souhaitez que cet écran spécifique suive.

Jetons un coup d'œil au code ci-dessous.

Écran @media et (largeur maximale : 600 px)

corps

taille de police : 30 px ;

Lorsqu'il est appliqué au CSS d'un e-mail, le corps du texte apparaîtra à une taille de 30 pixels pour les écrans de 600 pixels de large ou moins.

Bien que cette approche puisse vous aider à créer certains éléments de votre réponse par e-mail, nous vous recommandons d'utiliser un modèle si possible.

À moins que vous n'ayez une expérience complète de la conception Web, le codage de plusieurs écrans multimédias peut prendre du temps et être frustrant.

Si vous n'êtes pas technique ou si vous souhaitez une méthode plus simple, essayez d'utiliser un outil de marketing par e-mail avec des modèles réactifs intégrés. Le logiciel de messagerie gratuit de HubSpot, par exemple, fournit des modèles de glisser-déposer réactifs par défaut.

Exemples de conception d'e-mails réactifs

Il est temps d'explorer des exemples. Commencez par cette vidéo, qui passe en revue certaines des meilleures campagnes de marketing par e-mail.

Ensuite, vous pouvez en savoir plus sur certaines de nos conceptions d'e-mails réactifs préférées.

1. Bulletin TOMS

Dans la newsletter de TOMS, la principale différence entre la version de bureau et la version mobile est l'empilement et la taille des annonces graphiques.

Avec un design réactif, la version mobile n'a pas de navigation encombrée et l'image s'adapte bien à l'écran. Les CTA ont également été déplacés pour une meilleure visibilité.

Source des images

2. Le Metropolitan Museum of Art

Comme on le voit dans la newsletter de TOMS, la conception d'e-mails réactifs permet d'empiler le contenu d'une manière visuellement attrayante et facile à digérer. Cet exemple du MET n'est pas différent.

Sur mobile, le positionnement du menu change. Les liens vers différents articles de la boutique de cadeaux se trouvent au bas de la page. Cela permet de garder les images des souvenirs disponibles au premier plan.

Source des images

3. Mûrier

Encore une fois, avec une conception d'e-mail réactive, le nom du jeu s'empile. Il s'agit de rendre le contenu facile à lire et visuellement attrayant, peu importe la taille de l'appareil sur lequel quelqu'un regarde le contenu.

L'alternance des photos et du texte est logique pour le bureau, tandis que l'empilement cohérent des photos sur le texte associé pour le mobile, ainsi que les lignes de séparation, garantit que le spectateur ne sera pas confus.

Source des images

Modèles d'e-mails réactifs

Un modèle réactif s'adaptera automatiquement à n'importe quelle taille d'écran. Ainsi, que l'e-mail soit ouvert sur un smartphone, une tablette ou un ordinateur, il aura fière allure et disposera de toutes les fonctionnalités.

Pour ceux qui ont moins d'expérience en codage ou ceux qui cherchent à passer moins de temps avec la conception, mon conseil est d'utiliser un modèle. Ils sont un moyen infaillible de vous assurer que votre e-mail aura un aspect professionnel et sera réactif.

Les modèles d'e-mail réactifs vous font gagner du temps dans la conception d'un e-mail qui aurait pu être sélectionné parmi une sélection. Par exemple, l'outil de marketing par e-mail de HubSpot comprend plus de 60 modèles uniquement pour les e-mails réactifs.

Jetons un coup d'œil à certaines options de modèle maintenant.

1. HubSpot

HubSpot propose quelques modèles d'e-mails réactifs gratuits . Si vous êtes un client HubSpot ou un utilisateur gratuit, vous pouvez les télécharger et les essayer vous-même.

Par exemple, voici l'un des modèles d'e-mails réactifs - notez la barre latérale, où vous pouvez prévisualiser le modèle sur plusieurs appareils.

Source des images

Cliquer sur les types d'appareils et s'assurer que votre e-mail est formaté en conséquence est l'une des dernières étapes du processus de conception et constitue la seule étape du processus d'e-mail réactif lorsque vous utilisez un logiciel comme HubSpot.

En cliquant sur le smartphone pour l'aperçu, par exemple, vous pouvez voir si votre contenu, y compris la taille de la police et la résolution de l'image, est formaté d'une manière agréable pour le mobile.

2. Moniteur de campagne

Les modèles proposés par CampaignMonitor sont similaires à beaucoup d'autres, dans lesquels les résultats des e-mails réactifs sont affichés dans l'outil de prévisualisation. Par exemple, voici un modèle CampaignMonitor :

Source des images

Vous pouvez voir les différents appareils côte à côte afin de pouvoir comparer facilement les éléments de conception. De minuscules modifications peuvent être apportées pour créer la meilleure expérience pour tous les abonnés.

Les modèles de CampaignMonitor sont souvent gratuits, c'est donc un bon choix si vous avez un budget minimal.

3. Stripo

Stripo propose plus de 300 modèles d'e-mails HTML gratuits. Vous pouvez choisir des modèles par secteur, saison, type et fonctionnalité. Par exemple, voici un modèle de leur section secteur d'activité.

Source des images

Un bon signe d'un modèle d'e-mail réactif solide est la possibilité de voir l'aperçu dans les variantes de bureau et de smartphone, comme indiqué dans le mode d'aperçu de Stripo.

Remarquez comment une disposition à colonne unique a été adoptée dans l'aperçu mobile pour s'adapter aux spécifications des téléphones.

Stripo est un site Web que vous pouvez visiter rapidement pour trouver un modèle qui correspond à vos objectifs. Vous pouvez envisager Stripo si vous cherchez à essayer des e-mails réactifs ou si vous souhaitez vous inspirer du design.

4. Contact constant

Constant Contact propose plus de 200 modèles d'e-mails professionnels accessibles après l'inscription. En regardant l'exemple ci-dessous, vous pouvez voir que la plateforme propose des modèles d'e-mails réactifs.

Source des images

Les modèles de Constant Contact ont une édition par glisser-déposer, la possibilité d'ajouter des sondages, des fonctions de commerce électronique et un outil de bibliothèque de photos. Ces fonctionnalités peuvent toutes aider à créer le courrier électronique que les abonnés souhaitent voir.

Il est utile d'utiliser un service comme Constant Contact car les outils spécifiques vous permettent de maintenir la cohérence, comme dans l'exemple ci-dessus. Vous pouvez dire que la nature réactive de l'e-mail ne compromet aucun des éléments de conception.

Maintenant que nous avons examiné certaines options de modèle, examinons une autre façon de faire fonctionner les e-mails réactifs, ainsi que les meilleures pratiques.

Meilleures pratiques pour les e-mails réactifs

La conception exacte de votre e-mail réactif variera en fonction des objectifs de votre campagne. Cependant, ces conseils peuvent vous aider à garantir la meilleure expérience pour vos lecteurs.

• Assurez-vous que votre e-mail réactif est évolutif et flexible. Prévisualisez l'e-mail sur différents appareils pour vous assurer que votre message est réactif.
• Si vous codez votre propre e-mail, n'oubliez pas que les requêtes média CSS modifient les champs qui sont fixes en champs fluides.
• Utilisez des polices plus grandes qui seront faciles à lire sur des écrans plus petits.
• Les mises en page à une seule colonne sont plus faciles à mettre à l'échelle. Si des mises en page simples conviennent à vos pages Web, envisagez-les définitivement pour des e-mails réactifs.

Assurez-vous de tester vos e-mails avant de cliquer sur "planifier". Ne finalisez les conceptions qu'une fois que vous avez vu à quoi elles ressemblent sur plusieurs résolutions d'écran. Tant de personnes accèdent aux e-mails par mobile juste pour la facilité.

Un moyen simple de vérifier l'efficacité de votre e-mail est de l'envoyer à vous-même ou à votre équipe à titre de test - se compare-t-il aux autres e-mails marketing réactifs de votre boîte de réception ? Si c'est le cas, vous êtes prêt à envoyer.

Premiers pas avec les e-mails réactifs

Les e-mails réactifs créent une expérience meilleure et plus accessible pour vos clients. Si vous venez de faire la transition, commencez par explorer les modèles d'e-mail réactifs prédéfinis. Ceux-ci vous feront gagner du temps tout en vous offrant une flexibilité de conception.

Ensuite, obtenez un deuxième avis. Demandez à un collègue d'ouvrir un e-mail sur son ordinateur et son téléphone. Vous pouvez obtenir leurs commentaires honnêtes sur les deux expériences.

Enfin, n'ayez pas peur d'expérimenter. Vous pouvez tester A/B différentes conceptions réactives jusqu'à ce que vous trouviez une mise en page qui résonne le plus.

Bientôt, vous enverrez des e-mails réactifs et augmenterez vos taux d'ouverture.