Avec la multiplication des supports de connexion et l’usage croissant des terminaux mobiles, l’emailing est confronté à un réel défi :  l’optimisation de son affichage sur toutes les tailles d’écran disponibles.

De nos jours, en France, plus de 30% des emails personnels sont ouverts depuis un terminal mobile (smartphones, tablettes…). Aux US, les supports mobiles ont déjà dépassé l’ordinateur comme plateforme de consultation des emails. Sachant que plus de la moitié des internautes ont tendance a refermer, voire effacer, un mail non optimisé pour leur interface mobile, la performance des campagnes devient de plus en plus liée à la capacité à diffuser des messages efficaces en multi-écrans.

Exemple d’un mail dont l’affichage est optimisé pour un écran PC, mais qui devient inefficace si ouvert depuis un mobile (bénéfice et call to action invisibles) :

Quoi faire alors, pour répondre à cet enjeu ?

La réponse consiste à concevoir et réaliser des « emails responsive design ». Le « responsive design » est une notion assez récente qui correspond à un élément web adaptable à tous les terminaux (ordinateurs, mobiles, tablettes…). Si la réalisation de sites en responsive n’est parfois pas la meilleure option pour s’adresser aux cibles mobiles (qui ont des comportements et des attentes très différentes, auxquels une simple optimisation de l’affichage ne répond pas), pour l’email cette solution devrait être universalisée. En effet, l’interaction attendue avec un email/newsletter ne change pas, dans la grande majorité des cas, en fonction de son support de lecture.

L’email reponsive est ainsi un email qui peut être lu de façon optimisée sur n’importe quel type de terminal et qui peut s’adapter, entre autres, aux différentes tailles d’écran et résolutions, ainsi qu’aux types de messageries (Yahoo, Gmail, Hotmail…)

Comment ça marche ?

L’email responsive fonctionne notamment grâce à trois éléments : les media queries, les grilles flexibles et les tailles d’images adaptables.

  • Les media queries permettent d’identifier les types de médias utilisés par les internautes ; elles inspectent les caractéristiques des appareils et des navigateurs (taille d’écran, orientation, taille de la fenêtre…) et permettent ainsi d’adapter la mise en page à ces variables.

Sachant que de nombreuses tailles d’écran existent, il faut, lors de la conception, assurer un affichage optimal selon les points de rupture majeurs :

  • Les grilles flexibles permettent d’organiser le contenu d’un mail en fonction du media de lecture. Entre autres, elles permettent de fixer des règles pour gérer l’affichage PC/mobile : dans quel ordre afficher les éléments, quels éléments garder ou cacher, etc.

Exemple de l’organisation du contenu entre la version PC (à gauche) et la version mobile (à droite) d’un email responsive d’Amazon :

  • Les images à taille adaptable sont également un élément clé pour le fonctionnement de l’email responsive. En effet, en utilisant une seule image source, il est possible de la redimensionner selon la configuration de l’appareil de lecture.

Exemple d’une même image adaptée selon le support d’ouverture du mail :

Cette solution, bien qu’assurant des performances supérieures à l’email classique, est logiquement plus chronophage (en conception, intégration technique et tests d’affichage). De ce fait, elle peut entrainer des surcouts budgétaires. Pour une meilleure prise de décision, une solution s’impose : analyser sur une base existante le pourcentage d’abonnés qui consultent les emails envoyés depuis un mobile. Dès que ce pourcentage est supérieur à 10%, il est conseillé de faire évoluer la conception vers un modèle responsive, afin d’optimiser les résultats et d’éviter le désabonnement de ces clients ou prospects.