L’autre jour, j’ai reçu l’e-mail suivant d’Adobe et je l’ai ouvert sur mon bureau au travail:
Cet e-mail d’Adobe m’a donné une expérience de messagerie de premier ordre sur le bureau. Cependant, je n’ai pas eu le temps pour le moment « d’en savoir plus », j’ai donc marqué l’e-mail comme non lu et l’ai enregistré pour mon trajet domicile-travail.
Une heure plus tard, sur le T, j’ai rouvert l’e-mail sur mobile. Maintenant, imaginez que si j’ouvrais cet e-mail sur mon téléphone et que l’image était de mauvaise qualité, le texte était trop petit pour être lu et le bouton d’appel à l’action était cassé – comme quelqu’un qui préfère lire les messages d’e-mail marketing sur son téléphone, cela me frustrerait et, finalement, me conduirait à me désinscrire de la liste de diffusion.
Je ne suis pas le seul à préférer lire les e-mails marketing sur son téléphone. En fait, plus de la moitié des résidents américains préfèrent regarder les messages de marketing par e-mail sur leur téléphone. L’optimisation des e-mails pour mobile est si importante car c’est le nombre de lecteurs qui accèdent aux messages marketing.
La preuve est donc là, bien sûr, mais comment les responsables marketing cessent-ils d’envoyer des e-mails qui ne sont pas optimisés pour plusieurs écrans? Le courrier électronique réactif est la réponse.
Les e-mails réactifs sont des e-mails qui 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 une expérience optimale de l’utilisateur.
Bien que les e-mails réactifs puissent être conçus à l’aide de requêtes multimédia CSS, vous n’avez besoin d’aucune expérience 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 présenté quelques bonnes pratiques, des modèles prêts à l’emploi, ainsi qu’un rapide didacticiel sur les principes fondamentaux des e-mails réactifs.
Mais d’abord, clarifions – qu’est-ce qu’un e-mail réactif, de toute façon?
Qu’est-ce que le courrier électronique réactif?
Un e-mail réactif est un e-mail optimisé pour tout appareil, y compris un téléphone, un ordinateur de bureau ou une tablette. Ils s’adaptent à plusieurs résolutions d’écran, ce qui est particulièrement utile car la demande de contenu adapté aux mobiles continue d’augmenter. Les e-mails réactifs sont également plus accessibles, car ils permettent aux abonnés de lire sur leur appareil préféré ou en déplacement.
Pour illustrer, voici à quoi ressemblait un e-mail promotionnel que j’ai reçu hier 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, voici ce que je reçois:
J’ai toujours les mêmes informations, les mêmes photos et les mêmes icônes de magasinage – la seule différence notable est le format du courrier électronique. C’est différent pour mieux s’adapter à l’expérience mobile.
Maintenant, imaginez si cette même disposition de bureau a été appliquée au mobile. Je devrais zoomer sur mon téléphone pour voir les images ou le texte. Au lieu de cela, je me désinscrire.
Les e-mails de faible qualité peuvent potentiellement indiquer à l’abonné que la qualité de cette interaction n’a pas été prise en compte. En fin de compte, les e-mails non réactifs peuvent entraîner une perte d’abonnés.
Avec le courrier électronique 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 se retrouveront à ouvrir plus de messages marketing car ils savent que cela aura l’air bien.
Donc, avec toutes ces discussions sur les e-mails réactifs, vous devez avoir hâte de créer les vôtres. Ensuite, nous allons examiner des moyens simples de créer des e-mails réactifs, ainsi que de fournir les meilleures pratiques.
Modèles d’e-mails réactifs
Un modèle réactif s’adaptera automatiquement à n’importe quelle taille d’écran, donc que le courrier électronique soit ouvert sur un smartphone, une tablette ou un ordinateur, il aura fière allure et aura des fonctionnalités complètes.
Pour ceux qui ont moins d’expérience en codage ou qui cherchent à passer moins de temps avec la conception, mon conseil est d’utiliser un modèle. C’est un moyen infaillible de vous assurer que votre e-mail sera professionnel et soyez réactif.
Les modèles d’e-mails réactifs vous font gagner du temps sur la conception d’un e-mail qui aurait pu être sélectionné dans une sélection. Par exemple, L’outil de marketing par e-mail de HubSpot comprend plus 60 modèles juste pour les e-mails réactifs.
Jetons un coup d’œil à certaines options de modèles 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 par 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.
Le fait de cliquer sur les types d’appareils et de vous assurer que votre e-mail est formaté en conséquence est l’une des dernières étapes du processus de conception. seulement Étape dans le processus de courrier électronique 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é de manière agréable pour mobile.
2. CampaignMonitor
le modèles offerts par CampaignMonitor sont similaires à de nombreux 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:
Une chose que j’aime vraiment dans cette configuration est la façon dont 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 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 industrie, saison, type et fonctionnalité. Par exemple, voici un modèle de leur section métier:
Un bon signe d’un modèle d’e-mail réactif solide est l’option 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 à une seule colonne a été adoptée dans l’aperçu mobile pour s’adapter aux spécifications des téléphones.
J’aime Stripo parce que c’est un site Web que vous pouvez visiter rapidement pour trouver un modèle qui correspond à vos objectifs. Vous pourriez envisager Stripo si vous cherchez à essayer des e-mails réactifs ou si vous voulez une inspiration de conception.
4. Contact constant
Constant Contact propose plus de 200 professionnels des modèles d’e-mails accessibles après votre inscription. En regardant l’exemple ci-dessous, vous pouvez voir que la plateforme propose des modèles d’e-mails réactifs:
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 les e-mails 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 et les meilleures pratiques.
Comment rendre un e-mail réactif
Si vous avez une expérience de codage, vous pouvez rendre un e-mail réactif en utilisant du code.
Certaines bonnes pratiques lors du codage des e-mails réactifs incluent la garantie que votre e-mail réactif est évolutif et flexible. En outre, n’oubliez pas que les e-mails réactifs nécessitent des requêtes de médias CSS pour modifier les champs qui sont fixes en champs fluides.
Une autre meilleure pratique de conception de messagerie réactive consiste à utiliser des polices plus grandes qui seront faciles à lire sur des écrans plus petits. Les mises en page à colonne unique sont également plus faciles à mettre à l’échelle.Par conséquent, si les mises en page simples conviennent à vos pages Web, pensez-y certainement pour un e-mail réactif.
La prochaine fois que vous créerez une campagne d’email, c’est une bonne idée de ne finaliser aucune des conceptions avant de voir à quoi elles ressemblent sur plusieurs résolutions d’écran. Tant de gens accèdent aux e-mails par mobile uniquement pour la facilité. Un moyen simple de vérifier l’efficacité de votre e-mail consiste à vous l’envoyer à vous-même ou à votre équipe en tant que test.
