Emailing & mobile : le couple “hot” du moment

User Experience

19 nov, 2013

Une étude sortie récemment par Litmus le prouve : avec près de 50% des emailings envoyés lus sur mobile / tablette (48% en septembre), il est maintenant indispensable de penser “mobile” à chaque envoi de newsletter. Ajoutés au récent sondage BlueHornet qui a montré que 80% des utilisateurs supprimaient instantanément les emails dont le rendu n’était pas OK sur mobile, ces chiffres ne sont que plus puissants.

 Emailing & mobile : le couple “hot” du moment

Il est intéressant de constater, en dehors du mobile qui a gagné 10% depuis septembre 2012, que les webmails (yahoo, gmail etc.) ont perdu autant de points dans le même intervalle ; tandis que l’ouverture de newsletters sur les clients type Outlook, Mail etc. est restée plus ou moins équivalente depuis un an.

Les emailings avant…

Revenons en arrière qun bref instant. Il y a quelques années, alors que les smartphones n’en étaient qu’à leurs balbutiements, de nombreux emailings affichaient en haut de page un lien “voir la version mobile”, lien qui renvoyait vers une version simplifiée de l’emailing : pas d’image, pas de couleur, en général du texte et des liens simples (voir exemple ci-dessous).

 Emailing & mobile : le couple “hot” du moment

Exemple issu de Litmus
 

Les problèmes sont assez évidents lorsque l’on regarde une telle page sur mobile : le texte est petit, parfois illisible, les liens sont difficiles à taper, et surtout l’expérience utilisateur est proche de 0, ce qui ne pousse pas les utilisateurs à cliquer.

 

Responsive Design et emailings : une approche sensée…

La technologie est donc arrivée avec une réponse : le responsive design. Oui oui, le même dont on parle tant pour les sites. A problème équivalent, réponse équivalente.

Sans entrer dans le détail, le responsive design consiste en l’utilisation de media queries (sets de styles CSS), de grilles et d’images fluides. Les media queries permettent de détecter la taille du mobile et d’activer les styles CSS adaptés à la taille correspondante. Cela permet :

  • de modifier la navigation (à quel endroit se trouvent les blocs)
  • d’agrandir les polices
  • de changer les couleurs
  • d’ajouter des espaces dans les blocs (padding)
  • de masquer du contenu
  • etc.

Pour un peu plus de travail et de tests (sur tous les devices et clients différents, de manière à vérifier que tout s’affiche correctement), vous vous assurez que l’ensemble de vos utilisateurs auront une version optimisée de votre emailing. Et vous obtenez un meilleur taux de clics !

 

… Mais ne fonctionnant pas à tous les coups

Attention cependant : les media queries ne sont pas encore pris en compte sur tous les clients mails. Les responsive emails ne sont donc pas la solution infaillible à ce problème.

Voici les applications et clients ne supportant pas encore les responsive emails :

 Emailing & mobile : le couple “hot” du moment

Liste issue de Litmus
 

Sans les media queries, impossible de détecter la taille du device et donc de redimensionner correctement l’emailing (image, textes etc.). Cela pourra mener à un résultat comme celui-là :

 Emailing & mobile : le couple “hot” du moment

Exemple d’un emailing sur un client ne prenant pas en compte les media queries (issu de FogCreek)

 

Une approche différente : un seul design fonctionnant sur tous les écrans

Pour contrer le problème des media queries non pris en compte sur certains clients mails, certains se font l’avocat d’une approche différente : c’est le cas par exemple de l’excellent FogCreek (créateur notamment de Trello).

Ils ont imaginé une solution que nous trouvons pertinente chez Disko : la création d’un seul design qui soit compatible sur tous les devices. En lieu et place de créer un emailing à 2 ou 3 colonnes, qui soit réadapté sur mobile en 1 colonne (via les media queries), l’idée est de partir directement sur 1 seule colonne. On voit clairement sur le schéma ci-dessous pourquoi il s’agit d’une bonne idée.

 Emailing & mobile : le couple “hot” du moment

Exemple issu de FogCreek

 

En travaillant sur une seule colonne, le contenu n’aura qu’à s’adapter à la largeur du device de manière quasi-naturelle. Cela évite de modifier la disposition du mailing pour le faire rentrer sur un écran plus petit, comme c’est le cas sur le 2nd schéma ci-dessus. Et cela évite donc l’utilisation des media-queries, vous assurant un affichage correct sur tous les devices ! Le détail du code à utiliser peut être retrouvé sur le site de FogCreek.

Des outils à foison

Il existe quelques outils sur le marché qui peuvent permettre d’appréhender les emailings responsives de manière efficace, peut importe que l’on soit directeur marketing sans connaissance technique ou bien intégrateur HTML. En voici quelques uns :

Mailchimp

 Emailing & mobile : le couple “hot” du moment

Mailchimp propose ainsi un éditeur drag’n’drop extrêmement efficace, puissant et très bien pensé, qui permet en quelques clics de créer un emailing responsive qui s’affichera aussi bien sur ordinateur de bureau que sur mobile.

Brian Graves

Brian Graves propose sur son github une série d’éléments responsive : des templates 1 colonne, 2 colonnes, des footers, des barres de navigations, des images fluides, etc. Si vous êtes intégrateur HTML, tous ces éléments vont vous permettre de créer rapidement un emailing responsive.

Ink (Zurb)

 Emailing & mobile : le couple “hot” du moment

Ink est un framework CSS responsive (basé sur une grille 12 colonnes) vous permettant de créer aisément des emails HTML pouvant être lus sur n’importe quel device.

 

Des images valent mieux qu’un long discours

Pour finir, voici quelques exemples de responsive emails particulièrement travaillés, glannés notamment sur le site Econsultancy. Emailing & mobile : le couple “hot” du momentDominos

 

 Emailing & mobile : le couple “hot” du moment

Asos

 

 Emailing & mobile : le couple “hot” du moment

Playstation (particulièrement complexe et pourtant très bien travaillé)

 

Bref, vous l’aurez compris : il est temps (indispensable même !) de passer à l’emailing responsive. Vos utilisateurs vous remercieront !

 

 

Laisser un commentaire.