Les emailings responsive en 2016

EDIT octobre 2016 : Avec l’application mobile GMail qui exploite désormais le responsive et Outlook Mobile qui fait moins n’importe quoi. J’ai une approche moins tranchée sur le sujet bien que je reste toujours partisan de l’utilisation d’une seule colonne par mon approche e-commerce : deliverability first.

2016, cela fait un petit moment maintenant que Facebook Messenger tend à remplacer l’email classique dans la vie des utilisateurs lambda, du côté des marques, c’est une autre histoire et l’emailing (dans lequel nous pouvons inclure les emails transactionnels) reste un moyen efficace pour les entreprises de prendre contact avec ses clients. Les collaborateurs, peu importe le service, rêvent toujours de beaux emails, avec de superbes images, des textes réussis, du CSS dans tous les sens pour une mise en page léchée. Tout cela passe par une intégration en HTML dont l’interprétation par les clients lourds (Outlook, Lotus, Apple Mail…), par les messageries web (Gmail, Outlook.com, Yahoo…) et par les applications mobiles (Gmail, Outlook & Calendar, Apple Mail) est particulièrement disparate.

Passer au responsive

Depuis plusieurs années maintenant, les articles sur le responsive dans les emails garnissent la toile. De plus en plus de collaborateurs et services tout entier se posent la question du passage au responsive pour l’email marketing. Faut-il se lancer ? Pourquoi pas, mais pas sans réfléchir ! Le responsive dans les emailings est un sujet sérieux et non un simple effet de mode dans lequel il serait opportuniste de s’engouffrer.

C’est un projet gourmand en ressources pour l’entreprise (migration de tous ses modèles d’email, élaboration de nouveaux tests de validation etc.) pour lequel il est pertinent d’évaluer le ROI potentiel (augmentation de la délivrabilité ou des conversions). Si vous pensez que c’est faisable, alors il y a deux pistes possibles :

  • Utiliser la fonction responsive intégrée à votre outil emailing : Mailchimp, Sarbacane, Mailjet, Sendinblue etc.
  • Gérer soi-même l’intégration

WYSIWYG ou code

La fonctionnalité dédiée proposée par les outils emailing part d’un bon sentiment, elle est systématiquement associée à une interface WYSIWYG facilitant l’intégration. Il y a néanmoins deux défauts rédhibitoires pour moi, à vous de voir ce qu’il en est pour vous. D’une part, cette interface est souvent incomplète, la gestion du design n’est pas très fine et vous oblige à suivre les modèles établis par l’outil. D’autre part, ces outils ne valident leurs tests que sur Mail d’Apple (vous allez vite comprendre pourquoi).

Si vous gérez vous-même l’intégration (donc le code source), vous pouvez établir vos propres tests de messagerie tout en étant plus autonome au niveau du design. L’investissement est alors plus lourd et en même temps les résultats sont plus probants.

Cela dit, peu importe votre choix, ceux qui fixent les règles sont les messageries (clients lourds, web et applications mobiles). Voici quelques exemples :

  • Gmail.com n’accepte aucune balise <style> placée dans <head> ou dans <body> mais l’application mobile, oui, du moins, depuis Android 4
  • L’application mobile d’Outlook (2013) refuse catégoriquement (css, span, tableau, impossible) de ne pas souligner un lien (raison de sécurité) tandis que la version web s’en fiche complètement
  • De simples padding et margin ne sont pas interprétés par toutes les messageries, parfois l’un ou l’autre, parfois les deux
  • L’alignement vertical des textes sans faire appel à un tableau est une galère
  • L’usage de <meta> viewport ou de CSS tel que max-width ne sont là aussi pas compatibles avec toute la bande
  • Une image même bien intégrée dans un tableau pour du responsive, agrandit le tableau dans Outlook, bye bye le responsive
  • Rien qu’un simili bouton (d’inscription par exemple) est un calvaire pour une mise en page réussie dans tous les contextes
  • Vous pouvez retrouver tout ce qui marche et ne marche pas sur campaignmonitor.com mais ils ne sont pas complètement à jour, ils n’abordent pas l’ennemi public N°1, Outlook Mobile, alors qu’il y a des différences avec le client lourd ou la version web classique
Voici un emailing Petit Bateau que vous ne verrez jamais en responsive
Voici un emailing Petit Bateau que vous ne verrez jamais en responsive.

Cas de la gestion d’une grande image

Outlook mobile est la messagerie la plus contraignante. Une image plus grande que le viewport du smartphone vous enverra dans les clous. Le code ci-dessous, celui exploité par les outils emailings pour gérer les bases du responsive ne passent pas.

<table bgcolor="#FAFAFA" border="0" cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;width:560;font-size:16px;font-family:Helvetica, Roboto, Arial, sans-serif;">
		<tbody>
<tr>
				<td border="0" cellpadding="0" cellspacing="0" colspan="3" height="20" style="padding:0px;margin:0px;font-size:20px;height:20px;">
					&nbsp;</td>
			</tr>
			<tr border="0" cellpadding="0" cellspacing="0">
				<td border="0" cellpadding="0" cellspacing="0" style="font-size:16px;padding:0px;margin:0px;">
					&nbsp;</td>
				<td border="0" cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" width="560">
<img src="monimage.jpg" alt="Mon image" width="100%" style="width:100%;" />
					<p style="padding:20px;line-height:24px;color:#3F3F3F">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit cursus velit, ac placerat turpis bibendum ut. Mauris pulvinar aliquam odio, sed viverra quam interdum ac. Nulla vulputate luctus elit eu tempor. Nullam malesuada elit quis nunc tempor elementum. Nam non risus id lacus consequat fermentum sed sit amet mauris. Donec tincidunt, lorem sit amet pulvinar eleifend, tellus urna sollicitudin lectus, sit amet pharetra enim odio a dui. Sed dapibus odio et sem tincidunt, at pulvinar felis venenatis.</p>
				</td>
				<td border="0" cellpadding="0" cellspacing="0" style="font-size:16px;padding:0px;margin:0px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td border="0" cellpadding="0" cellspacing="0" colspan="3" height="20" style="padding:0px;margin:0px;font-size:20px;height:20px;">
					&nbsp;</td>
			</tr>
		</tbody>
	</table>

Une image, indiquée à 100% en largeur, ou à 560 (taille de la cellule dans mon exemple), en passant directement par le paramètre width ou par style, il n’y a rien à faire, Outlook mobile (2013) s’obstine à agrandir la largeur sur smartphone de l’ensemble de l’email. Cela oblige l’utilisateur à dézoomer, Outlook ne prenant même pas la peine de caler la largeur du mail à celle de l’écran par défaut.

La seule solution au problème pour conserver le responsive est de sortir l’image du tableau. Outlook fait alors bien le travail mais dans ce cas, le jeu de display block fait qu’un espace est parfois créé entre l’image et le bloc suivant (tel qu’un tableau). Concrètement, si vous attribuez un fond gris ou encore une bordure aux deux éléments, une ligne blanche viendra se placer entre les deux, cassant légèrement le design. Il existe une astuce parfaitement expliquée sur alsacreations.com pour éviter cela. Toutefois, les outils emailings, même en intégration HTML pure, ont parfois un système d’amélioration du code, notamment de la lisibilité de ce code (en ajoutant espaces/tabulations et sauts de ligne) qui empêche d’utiliser cette solution.

La réponse la plus simple à cette contrainte est de travailler sur des pictogrammes ou des images suffisamment petites pour ne pas entrer en conflit avec la largeur de l’écran.

Cas d’une mise en page en plusieurs colonnes

La marque de fabrique du responsive est la gestion de plusieurs colonnes dont le nombre varie selon les situations (largeur de l’écran ou de la fenêtre en général), inutile de vous dire que sur Outlook, c’est là encore l’enfer. De plus, il faut avoir deux informations en tête :

  • L’application GMail ne s’occupe pas du responsive, il fait systématiquement en sorte qu’un email prenne la largeur, réduisant si nécessaire tous les éléments : images, taille de la police (il applique ses valeurs par défaut) etc.
    L’application Mail d’Apple est capable de faire la même chose mais s’il fait face à un emailing formaté en responsive, il est à peu près le seul à pouvoir correctement l’interpréter
  • Les clients mail lourds (à l’exception d’Apple Mail) et les messageries web n’ont cure du responsive et ne l’interprète pas, même si la largeur de la fenêtre du navigateur ou du logiciel les y encouragerait

En résumé, Apple, bien que très présent sur le marché mobile, est aussi (quasiment) le seul à gérer les formes complexes de responsive aujourd’hui. Les emails de Pinterest exploitent une mise en page en deux colonnes, j’ai pris le temps de les reconstituer dans six situations différentes.

De gauche à droite, Mail d'Apple sur iPhone en format portrait puis paysage. Suivi de l'application mobile GMail en portrait puis paysage. Enfin, l'application Outlook sur Windows Phone en portrait et paysage.
De gauche à droite, Mail d’Apple sur iPhone en format portrait puis paysage. Suivi de l’application mobile GMail en portrait puis paysage. Enfin, l’application Outlook sur Windows Phone en portrait et paysage.

Vous pouvez cliquer sur l’image pour la voir en taille originale. Sur Mail d’Apple, nous voyons que la deuxième partie du mail a une mise en page différente selon la rotation de l’écran (et donc sa largeur). Graphiquement, c’est propre, il n’y a rien à signaler. Sur l’application GMail, je l’ai expliqué précédemment, le comportement est tout autre puisque le mail est automatiquement calé dans la largeur de l’écran sans se soucier du responsive. Exit la gestion des colonnes, alors que j’étais sur un écran relativement petit (Motorola G2), j’obtiens une mise en page sur deux colonnes quand le responsive aurait géré le contenu sur une seule. Enfin, pour Outlook, le responsive est ici générateur de bugs, nous le voyons au niveau du header du mail, le pictogramme « P » se place n’importe comment, le titre se cale seulement sur la partie gauche tandis que la deuxième partie du mail se met sur une seule colonne alors qu’il en aurait fallu deux. En conclusion, pour Outlook, un email non responsive aurait été plus efficace d’un point de vue expérience utilisateur.

Quel responsive pour les emailings

Au travers de deux problématiques (les images et les colonnes), nous avons vu que le responsive n’est pas encore complètement au point pour les emails. En même temps, replaçons les choses dans leur contexte, déjà pour un site Internet, le responsive est un sujet délicat. L’interprétation par les navigateurs est plus homogène sans gommer toutes les différences, il faut bien souvent blinder son code de préfixes type -webkit-, -moz-…

Il ne faut pas pour autant ranger le sujet au fond d’un tiroir car les technologies évoluent rapidement. De plus, en choisissant la bonne philosophie, il est possible d’en profiter sans avoir des cassures graves sur certaines messageries. En effet, vous pourriez décider de ressembler à un email tout ce qu’il y a de plus classique, sur une colonne, ce qui ne va pas à l’encontre des habitudes de lecture (en Z, en diagonale ou de haut en bas). Il est assez simple de limiter la largeur et de faire vivre son contenu sur une colonne si les images ne sont pas trop grandes, au pire, il est possible de laisser la largeur libre (100%), cela permet à l’utilisateur de choisir la largeur de sa fenêtre sur un navigateur ou un client tandis que sur mobile, cela passe à tous les coups. Cette approche assez simpliste, il faut bien l’avouer, a toutefois un autre avantage, il faut beaucoup moins de code HTML pur, ce qui fait toujours plaisir aux anti-spams lors d’un passage par leurs filtres.

Cela dit, avant de se lancer, il convient d’analyser les statistiques de ses emails en évaluant la part des utilisateurs qui potentiellement (tous les outils emailings ne permettent pas de stats aussi fines), ouvrent leur email dans une messagerie gérant le responsive et la comparer avec la part des utilisateurs qui passent par une messagerie récalcitrante. En parallèle, il faut déterminer le coût pour migrer tout son modèle d’emails. Ce coût peut varier selon la complexité de base de vos modèles (beaucoup d’images, des colonnes etc.) et selon vos attentes en terme de résultat (faire l’impasse sur Outlook mobile notamment). À partir de là, vous pourrez décidé d’investir ou non dans le responsive.

Les emails responsive chez les voisins

Il est toujours intéressant de voir comment nous nous situons par rapport à la concurrence. Je vous laisse faire ce travail pour votre secteur, néanmoins, voici un rapide état des lieux pour le e-commerce et les réseaux sociaux.

Les sites e-commerce les plus célèbres (Amazon, Rueducommerce, LDLC, carrefour.fr, Priceminister, Ebay…) n’utilisent pas le responsive dans leurs emails ni du côté transport (UPS, Chronopost, La Poste / Colissimo). Dans ce même bateau, nous pouvons ajouter les opérateurs téléphoniques et la plupart des services à abonnement. Pour ces marques, la raison est simple, partir sur un email non responsive mais dont le code est maîtrisé depuis plusieurs années permet d’avoir la certitude que le mail sera lisible dans toutes les situations, la seule action facultative du destinataire sera de zoomer/dézoomer sur un smartphone. À l’inverse, nous l’avons vu avec Pinterest, l’email responsive peut être complètement cassé, empêchant potentiellement la lisibilité d’informations cruciales.

Si nous allons voir les réseaux sociaux, c’est un peu plus hétérogène, Pinterest que j’ai pris en exemple, utilise le responsive avec les conséquences que cela implique (sur Outlook, ce n’est pas toujours joyeux). Google s’en fout complètement (logique étant donné le fonctionnement de Gmail). Facebook travaille le plus souvent (je n’ose pas dire systématiquement) sur un template à une seule colonne, de petites images viennent ponctuer leurs contenus, limitant le risque. LinkedIn est aussi sur une colonne mais des largeurs fixes trop importantes, par exemple le cercle bleu et plein du nombre d’utilisateurs qui ont visité votre profil, peuvent casser la lecture.

Pour les marques plus classiques (fringues, matériel) c’est aussi relativement rare, certainement à cause du coût et les contraintes techniques trop fortes qui obligent bien souvent à revoir à la baisse les attentes en termes d’esthétisme et de contenu : gestion de menus, boutons, grandes images, multicolonnes, composition d’images etc.

Et vous ? Vous en êtes où sur ce sujet ?

Des pictos accompagnés de textes courts, une recette gagnante pour un email responsive.
Des pictos accompagnés de textes courts, une recette gagnante pour un email responsive.

Commentaires