Le Responsive Design dans l'emailing : adapter ses emails à la lecture mobile

Depuis le début de l'année, nous mesurons, avec notre diagnostic mobile, une augmentation régulière de l'ouverture des emails sur mobile, avec des taux d'ouverture "mobile" qui atteignent souvent les 30 % au total, pour une base BtoC. Il est alors temps de s'intéresser à la façon de designer des emails adaptés à la lecture mobile.

Le responsive design, ou design adaptatif, est un procédé qui permet de garantir (dans une certaine mesure), un affichage de l'email correct sur une large gamme d'écrans (du 27' de l'écran extra large, au 3' du smartphone). Cette problématique est connue des sites mobiles qui sont souvent adaptatifs et vous pourrez voir un exemple remarquable ici.

Pour l'email, l'adaptation à la taille de l'écran devient une question importante, car le taux d'ouverture des emails en situation de mobilité dépasse souvent les 20 % lors d'une seule campagne (smartphones et tabletttes).
Dans ce contexte, il est intéressant de cerner si l'optimisation du design d'un email peut amener plus d'ouvertures, de clics et de transformations (ce dernier point étant largement lié à l'adaptation des landing pages à la mobilité). Dans tous les tests que nous avons effectués avec des emails adaptatifs, nous avons surtout constaté que les emails sont ouverts plus rapidement et parfois (pas toujours) plus.

Les possibilités de gestion des emails sur des appareils mobiles (tablettes et smartphones) sont finalement assez variées. J'ai compté trois types de solutions pour consulter un email sur mobile :

1. Utiliser le logiciel pré-installé sur l'appareil,
2. Télécharger l'application mobile si celle-ci existe (Hotmail et Yahoo proposant une application pour les deux environnements IOS et Android),
3. Visiter le site web du webmail.

Sans avoir de données précises, il me paraît évident que c'est la première solution qui est la plus souvent employée. Facile à mettre en place, que ce soit sur IOS ou Android, l'application de base de gestion des emails de ces deux OS est un standard. Toutefois, des différences sensibles existent entre les deux environnements :

• sur IOS, les visuels sont systématiquement affichés (au type de forfait mobile près) et l'email est redimensionné à la taille de l'écran,
• sur Android, les visuels sont quasi systématiquement bloqués et l'email n'est pas redimensionné,
• etc

Exemple d'un email sous IOS :

Exemple du même email sous Androïd (Galaxy S2- image activée)

Le développement d'email adaptatif va principalement utiliser deux technologies :

• La feuille de style @media, qui va permettre de définir des styles en fonction d'une taille de l'écran d'affichage des emails. Par exemple : @media only screen and (max-device-width: 480px)... permettra de définir une feuille de style qui ne sera prise en compte que pour les tableaux, taille de caractères sur un écran de largeur inférieure à 480 pixels,
• Une balise qui va permettre sur IOS de déverouiller le moteur de rendu qui redimensionne les caractères à au moins 13 pixels : -webkit-text-size-adjust:none

On le voit, les feuilles de style sont largement utilisées et interprétées en mobilité, alors qu'elles sont déconseillées (dans une certaine mesure) sur les Webmails et les logiciels fixes.
D'autre part, autant IOS interprète bien les feuilles de styles CSS2, autant Android peut, selon les appareils utilisés, ne pas les interpréter. La solution n'est donc pas universelle.

Les recommandations ergonomiques de la conception des emails pour mobiles, en 2012, sont les suivantes :

• Prévoir un email sur une colonne de large (400 - 500 pixels),
• Densifier le haut du message pour permettre un appel au clic rapide, une compréhension de l'offre dans les 200/300 premiers pixels,
• La taille du doigt étant de 44*44 pixels au minimum, il faut prévoir des appels au clic en adéquation avec cette dimension,
• Masquer les éléments inutiles en mobilité (partage de réseaux sociaux, page miroir...),
• Utiliser le téléphone en mobilité à la place du formulaire sur un environnement fixe,
• ...

La conception régulière d'emails adaptatifs n'est pas simple, son codage complexe, ses tests nombreux et son industrialisation est laborieuse.
Concevoir un email adaptatif nécessite parfois de revoir la conception complète de sa création pour faire plus simple.
J'ai constaté que l'utilisation régulière d'emails adaptatifs est assez rare dans la pige sur 300 newsletters, voire quasi absente. 

Seule exception dans ce domaine, le CIC, qui a généralisé l'email adaptatif à toutes ses communications. Contexte de généralisation favorable car les emails sont simples (1 voire 2 colonnes maximum) pour des prestations de service.

D'autre part, j'ai pu découvrir sur le salon e-Commerce, Emarsys, acteur autrichien du routage email, présent en France depuis environ 3 ans, qui a intégré dans son CMS natif, la possibilité de gérer un code spécifique mobile. Ce code s'affichera uniquement sur des écrans d'une certaine taille. Initiative intéressante, mais je pense que d'autres outils devraient venir d'ici la fin de l'année pour faciliter le codage.

En attendant, je publie quelques exemples d'emails adaptatifs, dont un, conçu par Emarsys, que vous pourrez visualiser gratuitement sur votre mobile par un envoi direct.

Comme souvent, le travail sur l'email mobile a consisté à casser la présentation sur deux colonnes, réagencer les différents blocs de contenu en format vertical et offrir un appel au clic plus gros et présent dans les 200/300 premiers pixels.

Pour en savoir plus, je vous recommande un guide en ligne très complet de Campaignmonitor qui détaille les techniques que j'ai précédemment présentées.

Enfin, nous aborderons ce thème de l'email mobile dans la prochaine formation de l'Email Academy avec Camille Afchain qui présentera de nombreux exemples d'email mobile.

Vous souhaitez en savoir plus sur le sujet, découvrez comment sur notre site avec la prestation de conseil diagnostic mobile : adapter vos emailing au mobile.

Comments

[Rédigé par : Amandine]

Autre exemple de campagne d'e-mailing webresponsive lancé cet été par bmobile pour la redoute. Il y a plus d'infos sur le site de l'agence. Nous allons d'ailleurs bosser avec cette agence pour de la formation.

[Rédigé par : Aurélien]

ça ne fonctionne pas sur le Samsung Galaxy S3 avec l'outil de mail par défaut, ni avec gmail.
dommage.

[Rédigé par : Paul]

Bonjour,

Une idée pour qu’un élément n’apparaisse que sur mobile avec des media queries ?
J’ai pensé par exemple à un
@media only screen and (min-device-width: 350px) {
.element {display: none !important;
}
}

Mais comme de nombreux clients mails ne supportent pas le display:none…

Merci de votre aide !

[Rédigé par : Pignonsurmail]

Oui je confirme, cela ne marche pas non plus avec le Galaxy S2. LE fonctionnement de la feuille de style media semble assez aléatoire avec android ....

[Rédigé par : Pignonsurmail]

Oui c'est bien le problème avec certaines versions d'Android ... Android est bien plus complexe et quelque part instable que IOS sur le support de @media

[Rédigé par : Brunofridl]

J'oubliais, sur mon iPhone, j'utilise Sparrow qui interprete super bien l'email et l'affiche au bon format.
Dommage que Sparrow ne soit plus mis à jour, c'etait une vrai pépite.
Bruno

[Rédigé par : Jeremie]

Bonjour,
J'ai adapté le code d'un exemple de newsletter responsive mais je n'arrive pas à l'adapter à yahoomail sur mobile.
Avez-vous des pistes ?