5 exemples d'e-mails optimisés pour les mobiles

Nous, les spécialistes du marketing, nous sommes habitués à l'idée qu'en optimisant nos e-mails pour les utilisateurs mobiles, nous pouvons donner à nos campagnes un avantage sur la concurrence. Hélas, les temps ont évolué et le fait est que nous devrions désormais créer des variantes d'e-mail optimisées pour les mobiles.

Il y a quelques années, nous avons atteint un point de basculement où les smartphones ont dépassé les ordinateurs de bureau en tant que type d'appareil le plus souvent utilisé pour lire les e-mails. Plus récemment, le rapport sur les préférences des appareils de Movable (2015) a révélé qu'un nombre phénoménal de 52 % des e-mails sont désormais ouverts sur des smartphones, les ordinateurs de bureau ne représentant que 32 %.

Il est trop facile de tomber dans le piège de créer des e-mails principalement pour les utilisateurs d'ordinateurs de bureau - selon toute vraisemblance, vous utilisez un ordinateur de bureau pour les assembler vous-même. Il est maintenant temps de se débarrasser de cet état d'esprit archaïque et de faire passer le mobile en premier, le bureau en second.

Dans cet article, nous discuterons de 5 exemples inspirants d'e-mails optimisés pour les mobiles, qui ont tous été soigneusement conçus pour augmenter les conversions. Nous avons inclus quelques conseils pratiques pour que vous puissiez reproduire les idées présentées dans vos propres campagnes.

HolidayPirates – premiers principes

Nous avons choisi de commencer avec cet e-mail pour une raison : il est indubitablement conçu pour les mobiles d'abord.

C'est le seul point que nous insistons absolument pour que vous reteniez et placiez au cœur de votre stratégie de marketing par e-mail. Pourquoi? Premièrement, parce que le mobile est le type d'appareil le plus utilisé pour les ouvertures de courrier électronique, avec une part majoritaire qui continue de croître d'année en année ; et deuxièmement, parce qu'il est beaucoup plus facile d'utiliser une conception optimisée pour les mobiles comme base, puis d'intégrer des éléments supplémentaires pour des appareils plus gros que de faire l'inverse.

[mailchimpsf_form access="web" title="Pour en savoir plus, inscrivez-vous à notre newsletter"]

Le rapport des éléments visuels à copier

Nous pouvons dire que cet e-mail a d'abord été conçu pour le mobile en regardant simplement le nombre de mots sur la page - c'est-à-dire pas beaucoup.

Inclure beaucoup de copie dans un e-mail aura généralement un effet négatif sur les conversions mobiles. Dans l'e-mail de HolidayPirates, la copie est limitée à trois lignes par élément de contenu dans la version mobile (la copie plus le bouton CTA sont à peu près égaux en termes d'utilisation de l'espace à l'image qui l'accompagne) ; tandis que dans la version de bureau, la même copie peut occuper un peu plus d'une ligne, agissant plus ou moins comme une légende pour l'image. Si cet e-mail avait d'abord été conçu pour le bureau, nous aurions peut-être vu une copie supplémentaire dans des variantes de plus grande taille d'écran et des versions abrégées (ou pire, trop de copie et de défilement horizontal) pour les appareils plus petits.

Beaucoup de boutons CTA accrocheurs

Si vous avez déjà lu sur le sujet de l'optimisation du taux de conversion, vous saurez tout ce que vous pouvez gagner en positionnant stratégiquement les boutons CTA sur vos pages Web.

Les CTA, ou boutons d'appel à l'action, sont des liens de type image, utilisant un design de bouton avec un texte impératif (par exemple, « Acheter maintenant », « Inscrivez-vous gratuitement », « Voir plus »). HolidayPirates a utilisé des boutons CTA ici pour accéder au contenu de leur site Web.

Dans la capture d'écran de la version mobile ci-dessus, vous ne pouvez voir qu'un seul des éléments de contenu présentés dans l'e-mail de HolidayPirates. Cela est dû uniquement à la quantité d'espace dont nous disposons ici dans cet article, et en fait, dix destinations sont incluses dans l'e-mail, chacune avec sa propre image, copie et bouton CTA « Afficher l'offre ».

L'utilisation de CTA dans vos e-mails est largement reconnue comme le meilleur moyen d'amener les utilisateurs mobiles à cliquer là où vous voulez qu'ils aillent. Voici quelques conseils pour rendre vos CTA super efficaces :

• Rendez-les grands et relativement lumineux – si vous avez déjà essayé de toucher une petite cible obscure avec votre pouce tout en naviguant sur votre téléphone (ou dans un autre contexte étrange), vous comprendrez pourquoi il est important de faire ressortir vos CTA. Cela rendra également vos CTA plus attrayants.
• Entourez-les d'espaces – pour les mêmes raisons.
• Faites en sorte que le texte du CTA soit clair et concis – dites-le en deux ou trois mots.
• Lien vers un contenu adapté aux mobiles - il ne sert à rien de canaliser les utilisateurs mobiles vers un site hostile aux mobiles.

Ce que nous avons appris jusqu'à présent

À partir de cet unique e-mail marketing, nous avons dégagé trois points clés - appelons-les premiers principes - sur l'e-mail marketing :

1. Concevoir d'abord pour le mobile
2. Allez-y doucement sur la copie
3. Utiliser les CTA pour les liens

Pour nous, ce sont les facteurs les plus importants que vous devez prendre en compte lors de la création de vos e-mails marketing. Nous allons maintenant examiner quatre autres e-mails qui s'adressent à l'utilisateur mobile de manière intéressante et stimulante :

PayasUgym – intégration dans l'activité mobile

Pourquoi s'abstenir de rendre votre e-mail compatible avec les smartphones, alors que vous pourriez l'utiliser comme un moyen d'intégrer votre marque dans l'activité mobile quotidienne du destinataire ?

Voici une section d'un e-mail d'un service de recherche de cours de gym et de fitness payant qui fait exactement cela, et avec un grand effet.

• « Trouvez votre prochain » - le sous-en-tête présente le problème du destinataire, ouvrant la voie à la marque pour présenter sa solution.
• Graphiques de style marqueur de carte - notez les graphiques en haut de la capture d'écran, indiquant le nombre de gymnases, de cours et de piscines. L'utilisation de graphiques de style marqueur de carte ici est astucieuse, car elle évoque les icônes utilisées dans des applications extrêmement populaires comme Google Maps et Uber, ce qui mène bien à…
• Bannière d'application - cette bannière CTA prend en charge son application Get the app! message avec des boutons Apple App Store et Google Play informatifs et améliorant la confiance. La bannière est grande, accrocheuse et entourée d'espaces blancs.

Cet e-mail est un exemple type de la manière de présenter votre marque en tant que fournisseur de solutions compatibles avec les mobiles pour le problème d'un consommateur. La structure de son message est irrésistible : « Nous comprenons ce dont vous avez besoin ; nous sommes vraiment bien placés pour vous le donner ; cliquez sur ce lien de téléchargement clair, simple et fiable et nous résoudrons le problème pour vous maintenant et chaque fois que vous en aurez besoin à l'avenir. La marque s'est très efficacement mise en avant pour remplir un certain rôle au sein de l'activité mobile de l'utilisateur.

Que votre marque remplisse son rôle en ligne via une application ou un site Web optimisé pour les mobiles, vous pourrez peut-être reproduire l'approche de PayasUgym dans vos e-mails marketing. Essayez d'inclure un CTA dans une structure similaire :

1. Utilisez un sous-titre pour présenter le problème, par exemple « Voulez-vous trouver un nouveau style ? », « Besoin d'un nouveau livre ? »
2. Établissez votre autorité/gamme/qualité/proposition de valeur. Incorporez subtilement des éléments graphiques qui imitent des éléments d'application ou de commerce électronique (comme les marqueurs de carte de PayasUgym).
3. Ajoutez une bannière CTA en utilisant les techniques décrites précédemment. Cela peut être lié à un téléchargement d'application ou à un autre aspect numérique de votre entreprise qui peut jouer un rôle utile pour le client.

American Apparel – se préparer à la vie dans le dossier Junk

Chaque spécialiste du marketing par e-mail aime sûrement imaginer ses missives naviguer dans les boîtes de réception des destinataires et directement en haut de la liste - mais le fait est que bon nombre des clients de messagerie de vos destinataires traiteront vos messages comme des courriers indésirables ou indésirables.

Les destinataires pourront toujours voir ces messages, mais dans certains cas, le contenu - en particulier les images et autres médias riches - ne sera pas affiché. Compte tenu du ratio élevé d'images à copier utilisé dans la plupart des e-mails marketing adaptés aux mobiles, cela pourrait signifier que le destinataire manque les principaux crochets de votre e-mail lorsqu'il parcourt son dossier de courrier indésirable.

Il n'y a pas de solution totalement satisfaisante à ce problème, mais vous pouvez affecter une certaine limitation des dommages en utilisant un attribut des images utilisées dans vos e-mails : leurs balises alt.

Jetez un œil aux deux captures d'écran ci-dessus. Les deux affichent le même e-mail, provenant des détaillants de mode American Apparel. La version de gauche a les images activées, tandis que l'image de droite montre à quoi ressemble le même e-mail avec les images désactivées. L'image de droite n'est peut-être pas aussi belle, mais elle parvient à transmettre l'objectif essentiel de l'e-mail : « Vous nous manquez. Bénéficiez de 20 % de réduction !" Ces mots ne proviennent pas d'une section de copie enveloppée dans des balises <p> ; ils proviennent des attributs de balise alt des images qui ont été masquées.

En répétant les crochets marketing de l'e-mail dans les attributs de balise alt de vos images, vous pouvez améliorer les chances que votre destinataire reçoive votre message principal sous forme de texte, même si les images sont désactivées.

En règle générale, nous vous recommandons de toujours prendre le temps d'écrire une balise alt efficace pour toute image que vous envisagez de publier en ligne. Non seulement les balises alt aident à faire passer vos messages marketing par e-mail à un plus grand nombre de destinataires, mais elles sont également fondamentales pour l'expérience d'Internet des personnes malvoyantes et peuvent aider vos images à bien se classer dans les résultats de recherche d'images.

The Trainline – fournir un itinéraire rapide vers les évaluations

Les commentaires des clients sont une ressource précieuse pour les spécialistes du marketing qui souhaitent identifier la meilleure voie à suivre pour leurs campagnes par e-mail. Il est particulièrement efficace lorsqu'il est utilisé dans un contexte de test fractionné, comme nous nous attendons à ce que ce soit le cas avec la section d'évaluation par étoiles ci-dessus, trouvée dans un e-mail de TheTrainline.com.

Il n'y a rien d'extraordinaire dans cette section de critiques - et c'est exactement pourquoi nous l'aimons. L'utilisateur appuie sur l'une des étoiles pour évaluer l'e-mail sur cinq. La simplicité de la conception rendra la publication d'un avis beaucoup plus facile à gérer pour les utilisateurs mobiles, qui pourraient être rebutés par des tâches plus fastidieuses comme la rédaction de commentaires.

Mais qu'en est-il du manque de retours détaillés ? Eh bien, nous suggérons que deux variantes ou plus de cet e-mail auront probablement été envoyées à différents publics, et les évaluations génériques fournies par les destinataires auront été utilisées par les créateurs de l'e-mail pour déterminer laquelle des variantes était la plus efficace.

Les tests multivariés peuvent être utilisés pour déterminer quel type de ligne d'objet fonctionne le mieux, quelles offres ou quels produits un e-mail doit promouvoir, comment différents types de contenu peuvent affecter l'expérience utilisateur, etc. Les informations recueillies peuvent être utilisées seules ou pour étayer les conclusions de l'analyse des données d'ouverture et d'engagement des e-mails.

NatWest

La clé de l'impact de cet e-mail - du point de vue de la conception - est le GIF de tirelire accrocheur en haut. Surtout, il est beau et net, qu'il soit affiché sur un mobile, une tablette ou un ordinateur de bureau.

Les développeurs de l'e-mail y sont parvenus en définissant un algorithme d'interpolation bicubique pour mettre l'image à l'échelle – ce qui a été obtenu en définissant une partie de l'attribut de style de l'image sur « -ms-interpolation-mode : bicubic ». Cela rend l'image "fluide".

Il existe différentes manières d'obtenir cet effet, dont la plupart sont moins techniques que les précédentes. Demandez à vos développeurs de vérifier si votre modèle d'e-mail inclut une interpolation bicubique ou un autre mécanisme de mise à l'échelle de l'image avant de commencer à envoyer des e-mails. Le simple fait de rendre vos images suffisamment grandes pour qu'elles soient nettes sur tous les appareils est problématique, car cela peut nécessiter un défilement horizontal pour les utilisateurs mobiles - exactement le genre de chose que nous voulons éviter.

obtenez votre adhésion gratuite maintenant - aucune carte de crédit requise

• La boîte à outils du marketing numérique
• Séances d'apprentissage vidéo exclusives en direct
• Bibliothèque complète de The Digital Marketing Podcast
• Les outils de benchmark des compétences numériques
• Cours de formation en ligne gratuits

ADHÉSION GRATUITE