EXPERTISE + LIBERTÉ
= OPINIONS

E-mailing : pourquoi il faut passer au responsive

Publié le
15/5/2017
|
Gaylord Foureau
|
Responsive
Publié le
15/5/2017
Gaylord Foureau
|
Responsive

Pour optimiser ses campagnes e-mailing, rendre ses emails adaptatifs est une première étape. Une démarche de "responsive email" sera en revanche encore plus performante, quoique plus onéreuse à mettre en place.

Avec un ROI estimé à 122% 1 en moyenne, l’e-mail confirme encore et toujours sa rentabilité comme canal de vente. Malgré une relative saturation (82 e-mails reçus par jour en moyenne), les consommateurs y restent très attachés.

Avec la part croissante du mobile dans la vie des consommateurs, la lecture des e-mails sur mobile devient une norme. Qui n’a jamais été frustré sur mobile par un e-mail qui nécessitait un dézoom pour être consulté ou bien dont la mise en page était catastrophique (police trop petite, image mal placée…) ? 37% des consommateurs déclarent s'être désinscrit aux e-mails d'une marque car ils ne s'affichaient pas correctement sur leur mobile.

 Exemple d’un e-mail non adapté pour une consultation sur mobile
Exemple d’un e-mail non adapté pour une consultation sur mobile

E-mails adaptatifs : une première étape

Afin d’apporter une expérience client de qualité sur mobile et donc d’augmenter son taux de clic, le premier travail qui peut être réalisé avec un coût réduit est de rendre les e-mails adaptatifs. Un e-mail adaptatif s’affichera de la même manière sur un ordinateur, sur une tablette ou sur un mobile. Les textes et images auront les mêmes placements.

A défaut d’une grande visibilité du texte (s’il y en a beaucoup) et du Call to Action (CTA), la mise en forme restera identique d’un périphérique à l’autre.

Les recommandations pour les designers d'e-mails adaptatifs sont les suivantes :

  • Penser ses CTA non comme clickable mais "pushable" : il faut en effet s’assurer qu'ils soient lisibles et suffisamment larges pour être utilisés sous mobile,
  • Utiliser un template avec une seule colonne avec une largeur maximale de 600 px,
  • Utiliser des images légères et avec peu de textes : cela améliorera la rapidité de chargement de l'e-mail mais aussi sa lisibilité,
  • Ne pas hésiter à utiliser des tailles de police supérieures à 10.

 Exemple d’un e-mail designé pour un usage mobile mais qui s’affiche aussi convenablement sur desktop
Exemple d’un e-mail designé pour un usage mobile mais qui s’affiche aussi convenablement sur desktop

Toutefois, c’est manquer l’occasion de profiter de la résolution des desktops pour afficher plus d’informations en particulier au-dessus de la ligne de flottaison.

E-mails responsive : la panacée

Le responsive est naturellement l’étape suivante. Il permet d’afficher une mise en forme spécifique sur ordinateur et une autre davantage mobile-friendly sur tout périphérique à taille réduite.

 Exemple de mise en forme spécifique
Exemple de mise en forme spécifique

L'expérience globale des clients, en responsive, se verra renforcée. Des tests suggèrent un impact fort : jusqu'à 130% d’augmentation des taux de clic sur un A/B test avec et sans responsive 2.

Attention, cela implique toutefois des coûts de production de campagnes plus élevés :

  • 2 wireframes et maquettes par campagne : 1 version desktop et 1 version mobile,
  • Une plus grande complexité dans l’intégration des e-mails avec davantage d’utilisation des CSS et des media queries.

Les e-mails responsive sont-ils supportés par tous les clients e-mails et webmail ?

La réponse est malheureusement négative mais la situation évolue très rapidement. Fin 2016, Gmail annonçait le support des e-mails responsive sur son webmail et sur ses différentes applications mobile (enfin !). De son côté, Microsoft et son Outlook 2016 les supportent uniquement sous Mac et non sous PC.

Pour les webmails les plus utilisés en France :

Webmails les plus utilisés en France

Pour les clients e-mails natifs :

Clients e-mails natifs


Des outils d’aide à la conception d’e-mails responsive

La majeure partie des outils d’e-mailing, avec l’édition en drag-n-drop, savent générer directement des e-mails responsive. Cependant, le résultat n’est pas toujours celui attendu et demande des ajustements à l’aide de codes CSS spécifiques.

Voici quelques outils qui aideront les intégrateurs :

  • Litmus : la référence sur le marché qui génère en temps réel le résultat sur la plupart des clients natifs et webmails avec une bibliothèque fournie d’exemple et un blog réputé et très actif
  • EmailonAcid : un concurrent de très bonne qualité, similaire à Litmus. En revanche, la prévisualisation avec le lecteur webmail d’Orange n’est pas supportée
  • mjml.io : créé par Mailjet, il s’agit d’un outil très intéressant qui propose de formater l’e-mail sous un XML normé et qui génère un code HTML d’e-mail responsive compatible avec beaucoup de clients e-mails et webmail

Pour conclure, il est impératif de penser à offrir la meilleure expérience mobile même à travers les e-mails. Toutefois, il est important d’avoir en tête le parcours de l’utilisateur après son clic sur l’e-mail. Ce parcours est-il responsive ? Adapte-t-on le contenu et le parcours au mobile ?

Sources :

Auteur : Gaylord Foureau, Manager en charge du pôle e-CRM, Keley Consulting

Nous contacter

Contactez-nous
Partager cet article:

Inscrivez-vous à La newsletter keley

Recevez tous les mois nos paroles d'experts et l'actualité du digital dans notre newsletter.

Merci ! Votre message a bien été envoyé.
Désolé ! Votre message n'a pu être envoyé.