E-mailing : pourquoi il faut passer au responsive

Catégorie :

Digital Performance

Savoir-faire :

Data & Digital Performance

Publié le :

15

May

2017

Temps de lecture :

5 minutes

#
Article
#
Responsive
#
DigitalPerformance
E-mailing : pourquoi il faut passer au responsive
Article mis à jour le

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 :

Keley est un partenaire de co-création parmi les meilleurs acteurs du marché, notamment via son expertise des parcours clients.

Yann Ruello

Content Innovation Director, chez Orange

Keley
Keley

Conseil en transformation digitale

"Au delà de la réflexion produit, accompagner nos clients dans leur transformation culturelle." Accélérateurs de projet, nous accompagnons nos clients sur des programmes de transformation en apportant sens et performance. Autour de méthodologies issues du design et orientées résultat, nous co-créons avec nos clients en les accompagnant sur toutes les étapes de leurs projets, jusqu'à l'autonomie.

Envie de partager cet article ?
Button Text
UN PROJET DE TRANSFORMATION DIGITALE ?

Il est temps de se rencontrer ! Il vous suffit de remplir ce formulaire pour nous contacter.

La collecte des informations demandées est nécessaire au traitement de votre demande par Keley, unique entité habilitée au traitement. Elle vous permettra en premier lieu de recevoir une réponse à ce message. En cas de contact ultérieur de la part de Keley, votre consentement sera au préalable recueilli. Vous disposez d’un droit d’accès, de rectification, d’opposition et de suppression des données vous concernant. Pour l'exercer, merci de nous en faire la demande par email à l’adresse communication@keley.com.

Pictogramme blanc et jaune d'une enveloppe

Comment pouvons-nous vous aider ?

Merci pour votre message !
Oops ! On dirait qu'il y a eu un problème...

La collecte des informations demandées est nécessaire au traitement de votre demande par Keley, unique entité habilitée au traitement. Elle vous permettra en premier lieu de recevoir une réponse à ce message. En cas de contact ultérieur de la part de Keley, votre consentement sera au préalable recueilli. Vous disposez d’un droit d’accès, de rectification, d’opposition et de suppression des données vous concernant. Pour l'exercer, merci de nous en faire la demande par email à l’adresse communication@keley-consulting.com.