Les conférences Litmus sont à chaque fois un rendez-vous incontournable où sont réunis les plus grands experts de l’emailing du monde entier. Pour cette nouvelle édition du 28 et 29 Septembre 2015, Litmus nous a encore une fois réservé un beau programme : des workshops, des conférences et des sessions « one to one » avec des experts de renom (Fabio Carneiro, Mark Robbins, Elliot Ross, Kevin Mandeville, Alex Ilhan pour ne citer qu’eux.).

Bmobile vous a préparé un condensé de ce qu’il fallait retenir.

Une expérience optimale… même sur Gmail

Gmail progresse et absorbe aujourd’hui plus de 15% de parts de marché en France comme à l’international. Malheureusement, les media-queries (et donc les emails responsive) ne sont pas compatibles avec l’application aussi bien sur Android que sur iOS. Conséquence directe : l’utilisateur n’a pas accès à votre bel email responsive mais à une version desktop (dans laquelle il faut scroller), dans le meilleur des cas sans problème d’affichage.

La préoccupation des annonceurs pour cette problématique est croissante. Ce qui a mis le feu aux poudres ? Gmail devient l’application par défaut sur Android 5.+, ce qui dégrade largement l’impact des emails marketing auprès d’un très grand nombre d’utilisateurs (plus de 20% des utilisateurs Android à ce jour utilisent une version 5 ou supérieure).

Solution : utiliser des largeurs d’éléments en pourcentage et des « max-widths » pour s’appuyer sur le comportement « responsive » natif de l’application Gmail. Voici un rapide exemple de code « adaptatif » sans media-queries compatible avec l’ensemble des clients mails : voir le code sur codePen.

 

2015-11-19 15h14_22Un email n’est pas obligatoirement identique sur toutes les plateformes

L’objectif primordial est d’offrir la meilleure navigation possible à l’utilisateur selon les possibilités de son client mail : un utilisateur d’Outlook est habitué à avoir un email pauvre graphiquement, alors qu’un utilisateur MAC OS attendra une expérience utilisateur plus riche.

Solution : recourir à un code générique compatible avec Gmail, puis l’agrémenter de media-queries pour cibler les terminaux compatibles avec les feuilles de styles dans l’en-tête de l’email… Votre email est alors « progressivement amélioré ».

Optimiser et accélérer la création des emails

L’email responsive est chronophage, surtout si vous mettez en place l’ensemble des bonnes pratiques ainsi que les divers hacks permettant de maximiser les compatibilités. Par ailleurs, avec plus de 24 000 devices différents dans le monde rien que sur Android, proposer un email 100% compatible et optimisé serait un objectif quasiment irréalisable. Vous l’aurez compris, la compatibilité entre les clients mails n’est plus le seul enjeu. La maîtrise des temps de production est une notion tout aussi importante.

Solution : pour éviter de prolonger vos temps de production ou négliger votre contrôle qualité faute de temps, il est indispensable de mettre en place un workflow d’intégration efficace. La gabarisation de vos emails est une clef majeure de réussite sur ce point (cela tombe bien, il s’agit du point suivant).

« #DRY » (Don’t Repeat Yourself)

La gabarisation de vos emails est l’une des clefs qui vous permettra de mutualiser au maximum la mise en place des bonnes pratiques dans une optique de maîtrise des plannings. La mise en place de zones modulables et personnalisables à souhait présente par ailleurs à peu près les mêmes bénéfices au niveau du workflow de prototypage et de design graphique. Comment mettre en place un tel process ?

Solution : votre objectif est de mutualiser au maximum l’ensemble de vos travaux pour ne jamais avoir à ressaisir deux fois la même ligne de code ? Pour cela, plusieurs procédés sont envisageables :

  • Une librairie de snippets : mettez en place un ensemble de portions de code HTML testées et validées par votre équipe, afin de piocher allègrement dans celui-ci pour vos prochaines campagnes (ex. : librairie de snippets chez Litmus).
  • Des outils adaptés : utilisez un environnement de travail efficace pour éditer le code HTML de vos emails. Sublime Text ou Bracket sont de très bons choix, surtout s’ils sont agrémentés de plugins accélérant la saisie du code HTML (comme Emmet par exemple).
  • Des outils collaboratifs : les équipes d’intégrateurs ne sont pas toujours familières avec les solutions de versionning comme GitHub par exemple. Pourtant, elles facilitent l’amélioration du code en permanence par tous les membres de votre équipe et pourquoi pas, de la communauté Open Source.
  • Des outils pour contrôler rapidement le rendu : Litmus ou Email On Acid proposent tous deux des solutions rapides d’email rendering. Ces outils permettent d’accélérer les tests lors des phases d’intégration et vous permettent de contrôler votre email sur des terminaux auxquels vous n’auriez pas accès en temps normal. Attention cependant, l’email rendering ne dispense pas de tester les emails en condition avant leur routage (sur de vrais terminaux).

En suivant ces quelques points, vos équipes montent en compétences, et accélèrent leur travail tout en garantissant un résultat toujours meilleur.

Pre-processing CSS

N’avez-vous jamais eu l’impression de toujours écrire les mêmes lignes de code dans tous vos emails ? N’avez-vous pas l’impression de vous répéter, de perdre du temps et votre motivation dans la rédaction de HTML pauvre et lourd à manipuler ? Pour le web, on y est depuis bien longtemps, mais il semble que le monde de l’email soit resté à l’écart de l’avancée méthodologique que représente le SCSS… La fin de votre calvaire est proche !

Solution : le SCSS. A quoi ça sert ? Simplement à saisir moins de code pour produire mieux et plus rapidement, illustration par un exemple simple présenté sur le blog de Litmus.

Notez tout de même que le SCSS n’est pas une fin en soi, mais principalement un moyen de vous permettre d’accélérer la rédaction de votre CSS, augmenter sa maintenabilité et améliorer vos process de création. Il nécessite d’embrasser une logique de développeur pour écrire votre code CSS : l’intégrateur d’email devient un développeur à part entière !

Il existe également des workflows Grunt créés spécifiquement autour du SCSS pour accélérer l’export de vos emails (en voici un exemple surLee Munroe). L’automatisation pour l’email comme pour le web est indispensable pour travailler efficacement et ne pas perdre de temps dans la création de contenus redondants.

Des emails pensés pour TOUS les utilisateurs

13% des Français sont sujets à un défaut de la vision dès la naissance. Ce peut être un frein majeur à la compréhension de vos emails encore souvent trop peu optimisés.

Solution : les optimisations de conception et de code ne sont pas toujours des gouffres de temps (ce que l’on imagine souvent). Le WAI propose un ensemble de règles qu’il est fortement conseillé de suivre pour offrir une meilleure expérience utilisateur et pour délivrer un message plus performant aussi dans l’email.

Pour vous faire une idée de ce que peut être la navigation en situation de handicap, nous vous invitons à tester différents outils de synthèse vocale (comme Orca pour Ubuntu ou NVDA pour Windows), ou à regardercette vidéo de l’association Scenariqui vous permet de prendre beaucoup de recul par rapport à vos créations numériques.

Innovez !

Plusieurs prouesses techniques nous ont été présentées lors de cette édition… L’intervention de Mark Robbins est celle qui nous a certainement le plus marqué. Ainsi après plus de 40 minutes de « pitch », il clôt sa présentation en nous montrant que l’ensemble des slides (que nous pensions être un traditionnel « keynote » – le PowerPoint Apple pour ceux qui ne le connaissent pas) est en fait un email intégrant des effets de transition 3D, des apparitions et une navigation entre les slides.

Notez que le CSS3 offre de nombreuses possibilités d’animation et d’interaction avec l’utilisateur qu’il est nécessaire d’exploiter pour faire entrer vos emails dans une nouvelle aire… Nous vous invitons donc à regarder le contenu et le contenant de la présentation de Mark pour comprendre les possibilités de l’email de demain : http://codepen.io/M_J_Robbins/full/JYExpm

Attention : cet email ne fonctionnera que dans votre navigateur web ou Apple Mail pour l’instant.

L’innovation n’est pas nécessairement globale, elle peut être apportée par de petits changements qui améliorent petit à petit l’expérience utilisateur : interaction avec la souris, animations, carrousels de visuels… Ce qui compte c’est de prendre le virage le plus tôt possible et de penser au solutions de  fallback pour les clients email les plus anciens !

Solution : vous surpasser !

Ce qu’il faut retenir…

La création d’email n’est plus simplement un travail de découpage et d’hébergement d’images comme il pouvait l’être encore il y a quelques années. Aujourd’hui c’est un véritable jeu d’adresse technique qui doit suivre des règles et des process spécifiques.

Tout n’est pas à écrire heureusement, de nombreuses bonnes pratiques existent d’ores et déjà pour le web. Il est par ailleurs indispensable de s’en inspirer et de les adapter à votre façon de travailler et à votre sensibilité (l’utilisation d’un terminal de commandes peut en rebuter certains).

Osez franchir le pas, investissez un peu de temps de recherche pour des emails plus performants, plus originaux et plus percutants pour vos utilisateurs…

Solution : vous rendre à la prochaine #TEDC15 à Boston ou à Londres.

2015-11-19 15h10_06

Ressources :
https://twitter.com/hashtag/tedc15
https://twitter.com/hashtag/tedc15?f=images&vertical=default
http://www.rajeshtaylor.com/litmus-london-2015
http://codepen.io/M_J_Robbins/full/JYExpm