Sommaire Introduction 1. Usages du mobile : Ce qu’il faut savoir A. Les bonnes questions du mobile B. Les spécificités du mobile C. Un projet global 2. Technique : Let’s go Responsive ! A. Le Design évolue... B. … le code aussi C. Bonnes pratiques

3. Applications : Je fais du Responsive ! A. Cas client : Amoleen Watches, création Responsive Design B. Cas client : Casino, adapter la newsletter aux plateformes mobiles C. Bonnes... et moins bonnes idées Conclusion

p. 03

p. 12p. 13p. 18p. 20

p. 21p. 22p. 27p. 37

p. 46p. 48p. 51p. 60

p. 68

2

Introduction La révolution de l’e-mailing ?

3

En août 2013, le spécialiste de la data web Comscore a communiqué les résultats de son étude sur le trafic web mobile 1. Les chiffres sont édifiants : avec 18 % du trafic web global, le trafic mobile prend une place grandissante.

Quel est l’impact de cette évolution sur l’e-mailing ? Entre nouvelles opportunités et complexité technique, quelles solutions peuvent être adoptées pour accompagner les nouveaux comportements des destinataires ?

Une effervescence des professionnels du secteur autour du « Responsive Design » fait de cette expression la nouvelle clé du succès des campagnes… Mais avant d’envisager l’application du Responsive Design dans l’e-mailing, il est important d’en comprendre son environnement, ses implications et ses conséquences.

Qu’est-ce que le Responsive Design ? Comment décrypter les nouveaux comportements des Mobinautes et développer une stratégie adaptée ? Quelles connaissances techniques doivent être maîtrisées ? Comment appliquer les bonnes pratiques liées à cette évolution de l’e-mailing, et maximiser son ROI ?

C'est sans détour que nous offrons dans ce livre blanc les clés utiles à la compréhension, et à l'intégration de Responsive Design dans les projets Web-Marketing.Un objectif : contribuer au développement de stratégies contrôlées, et proposer aux destinataires de ces campagnes l'expérience la plus aboutie, qu'ils soient en situation de mobilité - ou pas !

1 http://www.blogdumoderateur.com/internet-mobile-augmentation-duree/

4

Responsive Design : une évolution naturelle

Lorsque l’on crée un contenu destiné à être lu par un utilisateur depuis un support électronique lui-même variable… se préoccuper d’a juster ce contenu pour qu’il soit lisible quel que soit le matériel destinataire n’est pas nouveau ! C’est même essentiel. Les premières générations d’ordinateurs offraient déjà une interface sous forme de fenêtres redimensionnables, avec un contenu optimisé en fonction du matériel utilisé, et s’adaptant automatiquement à la forme de la zone d’affichage choisie par l’utilisateur.

L’optimisation des sites Web au contexte de l’Internaute, à son matériel, au logiciel de navigation qu’il utilise – à la version même du navigateur ! - fait appel à des techniques toujours améliorées au fil des évolutions des langages informatiques. Quel webmaster n’a pas eu à écrire deux fonctions JavaScript d’un même contrôle de saisie, pour assurer la compatibilité de sa page Internet avec les deux navigateurs les plus répandus sur le marché ?

L’e-mail ne déroge pas à la règle ! Voilà bien des années que l’on s’assure que le rendu des campagnes envoyées est correct quelle que soit la solution de messagerie utilisée par les destinataires : logiciel, Webmail, navigateur pour accéder au Webmail, résolution de l’écran… toutes les configurations sont régulièrement testées et coder un e-mail est devenu une spécialisation à part entière.

Au-delà de la qualité d’affichage d’un e-mailing selon le contexte de lecture de ses destinataires, c’est l’évolution du comportement même de l’Internaute, devenu Mobinaute, devenu nouveau consommateur, qui explique l’intérêt des annonceurs et des professionnels pour ces nouvelles plateformes. Nouvelles possibilités techniques, pour répondre à de nouveaux comportements, que se cache-t-il donc vraiment derrière le « Responsive Design ?«

5

Le Responsive Design s’inscrit ainsi dans une certaine évolution de l’e-mailing : au fil des nouveaux supports, ou des nouvelles versions des supports existants, les techniques d’adaptation des contenus deviennent plus précises et ouvrent de nouveaux horizons marketing.

Mais avant d’envisager la révolution dans l’e-mail marketing, les fondamentaux et les codes de l’e-mail classique doivent être maîtrisés, et notamment :

Respecter les contraintes : limiter le poids de l’e-mail, éviter commentaires HTML et JavaScript...

Suivre les conseils techniques liés à l’intégration : insérer des couleurs de fond...

S’assurer que le message soit lisible : par exemple en renseignant les attributs "alt" des balises images, certaines plateformes pouvant bloquer le téléchargement des images.

Esthétique, technique… et efficace

Qu’est-ce que le « Responsive Design » ?

Littéralement, l’expression signifie « design qui répond bien ». C’est donc la conjonction d’une esthétique et d’une technique. Appliquée à l’e-mailing, son objectif est de déclencher une expérience client réussie, quelle que soit la plateforme sur laquelle il consulte un e-mail.

(n.m.) esthétique industrielle qui cherche à harmoniser les formes et les fonctions des objets

Design

Responsive

(adj.) qui répond, qui est sensible à qqch

6

Si ces techniques permettent d’adapter un même contenu en tenant compte de la variabilité des configurations pouvant exister chez les destinataires des e-mails, d’autres techniques peuvent ensuite être mises en œuvre pour optimiser ce rendu en fonction de la taille de leurs écrans.

Un même e-mail, plusieurs résultats différents en fonction du contexte de lecture du destinataire, c’est déjà envisager un e-mailing "Responsive".

Problématiques de compatibilité ?

Des lignes blanches sur un e-mailing consulté sur Outlook, des images qui ne se téléchargent pas sur Hotmail (ci-contre)…

Les problématiques liées à l’optimisation de la lecture sont connues, et leurs solutions aussi.

Maîtriser les solutions techniques pour améliorer la qualité d’affichage des e-mails dans ce contexte est déjà un pas dans le Responsive Design.

Savoir optimiser un e-mail dans les conditions du blocage des images.

Savoir adapter le code HTML pour contourner des problèmes connus d'affichage (ici sur Outlook)

7

L’e-mail optimisé : conçu pour l’ordinateur et le mobile

L’e-mail optimisé est conçu pour un rendu identique sur ordinateur et sur mobile. Quelques points majeurs sont à respecter : Un design en une colonne, la moins large

possible, afin d’être lisible en totalité sur smartphone, Les images ainsi que la police doivent

être de grande taille, Les liens, comme les boutons, doivent être

assez gros pour être lisibles sur smartphone.

Les + : il convient à tout type de mobile. Le développement est accessible même sans compétence approfondie en HTML.

Les - : principalement optimisé pour le mobile (texte large, boutons très visibles...) il ne permet pas une grande liberté de design et se prive de tout l'espace disponible sur un écran plus large.

Votre e-mail, vous le voulez optimisé, fluide ou adaptatif ?

Trois méthodes pour adapter un contenu à la variété des écrans sur le marché peuvent être comparées. Chacune a ses avantages et ses inconvénients, lorsqu’il est question de passer d’un affichage sur PC à un affichage sur mobile.

La typologie d’e-mailing à laquelle il convient le mieux est le dialogue spécifique. Il contient peu d’informations, une accroche importante et un Call to Action indispensable, aussi bien sur ordinateur que sur mobile. Quelques exemples : les e-mails publicitaires, les e-mails transactionnels.

8

L’e-mail fluide : redimensionné de façon automatique

L’e-mail fluide se redimensionne de façon automatique, pour s’adapter à la taille de l’écran sur lequel il est consulté. La taille de chaque cellule et image est exprimée en % et non en pixels.

Les + : l’e-mail fluide s’adapte à une grande majorité de mobiles. Il se redimensionne en fonction de la taille de l’écran.

Les - : il n’offre pas toujours une qualité convenable pour les images.

L’e-mail fluide s’adapte bien à tout type d’e-mailing ne contenant pas beaucoup d’images, ou des images de faible résolution.

9

Comme son nom l’indique, l’e-mail adaptatif s’adapte à tout type d’e-mailing : newsletter, offre promotionnelle ou bien dialogue spécifique.

L’e-mail adaptatif : un rendu optimal pour l’ordinateur et le mobile

L’e-mail adaptatif permet d’avoir une version différente sur ordinateur et sur mobile.

Cette technique est possible grâce à un code HTMLbien spécifique.

Les + : la possibilité d'obtenir des rendus totalement différents d'un support à l'autre, pour un même e-mail.

Les - : une technique de développement complexe nécessitant davantage de temps et de compétences.

10

L’usage du mobile explose, modifiant l’approche de l’e-mailing mobile.

En 2012, 13,5 millions de smartphones et 3,6 millions de tablettes ont été vendus2, Au premier trimestre 2013, on comptait plus de 24 millions

de Mobinautes en France, Plus de la moitié d’entre eux utilisent l’internet mobile

au quotidien.

La technique permet de s’adapter aux contraintes des plateformes mobiles et de favoriser la fluidité et le confort de lecture. Au-delà, elle permet même d’apporter une expérience propre à l’utilisateur sur mobile.

Il n’est donc plus question d’optimiser un affichage unique sur un écran d’ordinateur. Avec le Responsive Design, il s’agit de proposer la meilleure expérience client possible, quelle que soit la plateforme sur laquelle il reçoit l’e-mail, et même si cela suppose des rendus différents sur les différentes plateformes. Si le succès d’un e-mailing est porté par le commandement « envoyer le bon message, à la bonne personne, au bon moment », le Responsive Design devient un nouveau canal d’expression offrant des possibilités variées.

Le Responsive Design doit être conçu dans une stratégie globale... avec sa logique et ses limites.

En concevant l’expérience de navigation du client, depuis l’e-mail jusqu’au site internet.

En donnant du sens à cette évolution, sans en faire une révolution coûteuse.

Un projet, des idées… un budget !

Comment comprendre et maîtriser ces nouveaux formats ? Sur quels comportements spécifiques s'appuyer ? Comment répondre à cette évolution sans perdre de vue les habitudes et le confort de chacun de ses contacts ?

Pensée autour de ces questions et réalisée en suivant des jalons prédéfinis, l’adaptation au Responsive Design pourra respecter un budget cohérent. Il s’agit ainsi d’améliorer l’expérience du destinataire, tout en optimisant le retour sur investissement.

Responsive Design : comment poser les bons jalons ?

Définir la stratégie de l’e-mailing Mieux connaître les comportements de ses contacts Connaître les possibilités et limites techniques du Responsive

Design.

2 Mediamétrie Mars 2013 / Baromètre du Marketing Mobile en France : 1er trimestre 2013

L'e-mail adaptatif ouvre de nouvelles perspectives.

11

Usages du mobileCe qu’il faut savoir1.

12

L’e-mailing Responsive se tourne vers les nouvelles habitudes des consommateurs, en utilisant les supports mobiles comme canal de communication.Plusieurs études cernent plus précisément les habitudes du consommateur. Elles constituent un point de départ à une vraie gestion de projet autour d’un e-mailing. Pour qu’une campagne soit opérationnelle et efficace, bien connaître l'équipement de ses destinataires est incontournable.Intégrer son e-mailing en Responsive Design, c’est avant tout différencier la réception sur ordinateur et la réception sur mobile.

Dans quelle mesure faut-il prendre en compte cette différence entre le comportement de l’utilisateur sur ordinateur, et son comportement sur mobile ? Jusqu’à quel point peut-on et doit-on adapter un e-mailing à ces nouvelles habitudes ?

A. Les bonnes questions du mobile

Comment les destinataires sont-ils équipés ? Disposent-ils de plusieurs appareils et comment les utilisent-ils ? Leurs comportements diffèrent-ils selon le moment de la journée ou la plateforme d’ouverture ? Quand ont-ils le comportement le plus favorable aux objectifs fixés ?

Répondre à ces questions est essentiel pour apporter une valeur a joutée auprès des destinataires d’une campagne et mesurer, par exemple, l’intérêt d’une intégration en Responsive.

Cette bonne connaissance des destinataires permet d’appliquer la meilleure stratégie : envoyer le bon message aux bonnes personnes au bon moment.

Des études livrent des éléments de réponses et complètent efficacement l’analyse de sa base de données pour aborder le plus finement les destinataires.

Le mobile est dans la place

Les Mobinautes sont de plus en plus nombreux à consulter leurs e-mails depuis un mobile. Litmus, référence américaine du tracking et du testing de l’e-mail marketing, annonce3 même une augmentation de 330 % de l’ouverture des e-mails sur mobile depuis 2011.

Cette évolution montre à quel point les mobiles sont au coeur de notre quotidien et au coeur de l’e-mailing.

Depuis le 2eme trimestre 2012, le nombre d’e-mails ouverts sur mobile dépasse même celui des e-mails ouverts sur desktop ou sur Webmail. Cette augmentation ne devrait d’ailleurs pas s’arrêter là.

3 https://litmus.com/blog/e-mails-opened-on-mobile-start-designing-for-fingers-and-thumbs

13

Où je veux, quand je veux

Le mobile, par définition transportable, bouscule les habitudes de consultation des e-mails.

Comscore et le Consumerlab d’EriCSSon apportent des éléments de réponse.

Le mobile plébiscité le matin, la tablette le soir.

L’étude « France Digital future in focus 20134 » de Comscore s’est penchée sur l’utilisation des devices au cours d’une journée type, en suivant le schéma « métro – boulot – dodo ».

Le PC est la plateforme de prédilection de la journée de travail.

La tablette est privilégiée pour un usage le soir.

Le mobile, chouchou des Français dans les transports.

Le Consumerlab d’EriCSSon5 donne encore plus de précisions. Les Français ont une préférence pour l’utilisation du smartphone dans les transports. Le tra jet du matin, notamment, est le moment le plus propice pour l’utiliser. Le smartphone est également utilisé dans le lit, le matin dès le réveil ou avant le coucher.

4 http://www.comscore.com/fre/Insights/Presentations_and_Whitepapers/2013/2013_France_Digital_Future_in_Focus25 http://www.blog-eriCSSonfrance.com/2012/09/infographie-selon-le-consumerlab-d%E2%80%99eriCSSon-les-francais- sont-les-plus-connectes-a-leur-smartphone-dans-les-transports/14

6 http://www.google.com/think/research-studies/the-new-multi-screen-world-study.HTML

Les destinataires consultent donc leurs e-mails « où ils veulent, quand ils veulent ».

Autre tendance forte de l’usage des mobiles : l’utilisation simultanée de plusieurs écrans. Le destinataire consulte son mobile et au même moment, a une toute autre activité, sur un tout autre écran. L’impact de cet usage dans la qualité de réception du message envoyé est indéniable.

Dans son étude « The New Multi-Screen World Study6 », Google explique que 57% du temps passé sur un mobile n’est pas réservé uniquement à l'utilisation de ce dernier. En effet au même moment l’écran d’ordinateur et celui de la télévision sont également consultés, à hauteur de 28% du temps pour l'ordinateur, et de 29% pour la télévision.

Le smartphone est le device qui accompagne le plus l’utilisateur devant la télévision, l’ordinateur ou la tablette.

15

Pour être efficace, sur un Mobinaute, un e-mail doit :

Être concis : le destinataire n’a pas ou peu de temps à accorder au contenu,

Être accrocheur : le destinataire s’adonne probablement à une seconde activité au moment où il ouvre l'e-mail.

Cela implique un effet spécifique tant sur la création graphique que sur le ciblage et le choix du moment de l'envoi.

Objectif : impact !

Autre point soulevé par Google : l’activité pendant laquelle on utilise le plus un autre écran est la consultation des e-mails (60%). Dans ces conditions, les destinataires des messages ne sont pas concentrés à 100% sur le contenu transmis.

Dans le métro, en regardant sa série préférée ou pendant le repas, l’environnement n’est pas optimal pour lire, cliquer, s’inscrire ou acheter.

Le temps d’attention pour chaque e-mail est réduit, il faut donc être impactant et aller à l’essentiel pour atteindre ses objectifs.

16

7 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Le mobile : avec une ou deux mains ?

De la même façon que chaque device a ses spécificités, chaque utilisateur a ses habitudes. C’est ce que démontre une étude américaine7 réalisée par Steven Hoober, président du groupe 4ourth Mobile.

36% des utilisateurs tiennent leur mobile dans une main et utilisent l’autre pour naviguer.

49% des utilisateurs tiennent leur smartphone d’une seule main.

67% d’entre eux utilisent la main droite.

Enfin, 15% naviguent avec leurs deux mains.

17

B. Les spécificités du mobile

Des spécificités en matière de hardware d’abord, avec un choix pléthorique de modèles.

Taille des écrans, navigation tactile, stylet, résolutions d’affichage : cette multiplication des modèles de smartphones et des tablettes complexifie l’optimisation des e-mails.

Les spécificités software sont également importantes : les applications e-mails sont nombreuses sur le marché et elles interprètent chacune le code HTML à leur façon.

La question est donc : s’adapter oui, mais jusqu’où et comment ?

Parmi toutes ces possibilités d’écran, comment faire le tri ?

Optimiser son e-mail pour toutes les plateformes : s’adapter sans se perdre !

Ne pas développer une version pour chaque taille d’écran, le développement de l’e-mail serait trop fastidieux. Il n’est pas possible d’obtenir un rendu identique au pixel près sur tous les terminaux mobiles.

Privilégier deux versions : une version pour ordinateur (600px de large) et une version pour mobile (320px). Pour les tablettes, une version PC adaptée, ou légèrement modifiée sans être totalement différente s’affichera très bien. Le site http://screensiz.es/phone recense les différentes tailles d’écran, ce qui peut aider à sélectionner les tailles pour lesquelles l’e-mail va être adapté.

En analysant plus finement la base de données et les devices dont elle est équipée, il sera plus facile de définir les résolutions prioritaires. Et donc, de choisir la technique la plus adaptée pour la mise en place de l’e-mail Responsive.

18

Proposer à l’Internaute une navigation optimale

Lire un e-mail sur son mobile peut être fastidieux. Polices trop petites, images trop grandes, liens sur lesquels on ne peut pas cliquer sans souris… il est souvent difficile de se repérer et d’interagir avec le contenu.

Pourtant, la première impression doit être la bonne : un e-mail peu lisible et peu attractif, risque d'être supprimé immédiatement par le Mobinaute.

Deux études montrent l’importance de bien penser la version mobile des e-mails et de respecter quelques règles de base pour proposer aux destinataires une navigation optimale.

41% des Européens ont tendance à refermer voire effacer un e-mail non optimisé pour leur interface mobile, selon une étude Return Path réalisée au premier trimestre 20128.

69,7% des destinataires suppriment le message s’il n’est pas optimisé à la lecture sur mobile, selon l’étude « Consumer Views of E-mail Marketing9 » de BlueHornet Study aux Etats-Unis.

Seuls 3% des destinataires ouvrent le message sur plusieurs supports, selon la même étude. S’il ne s’affiche pas correctement, très peu auront le réflexe de revenir sur l'e-mail plus tard à partir de leur ordinateur de bureau par exemple.

8 http://www.returnpath.fr/files/Mobile_Infographic_FR.jpg9 http://www.bluehornet.com/assets/Report_Consumer-Views-of-E-mail-Marketing.pdf

Comment faire bonne impression et bien penser mobile ?

L’écran des mobiles est étroit Optimiser l’espace disponible !

Il existe une multitude de modèles de mobiles différents Concentrer ses efforts sur les résolutions les plus répandues !

Les destinataires ne sont pas aussi impliqués que sur un ordinateur Aller à l’essentiel ! Un écran = une idée

19

C. Un projet global

Plusieurs plateformes, mais un seul HTML ! L’e-mailing Responsive est conçu autour d’une seule version HTML. Enrichi avec les styles CSS, il s’adapte aux plateformes mobiles - mais il ne faut pas oublier qu’il peut toujours être consulté sur un écran d’ordinateur.

C'est donc une nouvelle version de l'e-mailing habituel qui doit etre développée pour les deux plateformes ordinateurs et mobile, simultanément.L’apparence générale de l’e-mailing en est du coup directement impactée. Jusqu’à quel point peut-on bouleverser les habitudes de ses destinataires habituels ? Faut-il créer un nouvel e-mailing, ou peut-on modifier une newsletter existante ? Est-il nécessaire de développer un site web Responsive ou une landing page dédiée ?

Avant les premières étapes du développement et de l’intégration HTML, l’e-mailing est pensé dans le cadre d’une stratégie globale. C’est là que peut intervenir l’agence Web qui accompagne cette évolution, pour offrir une valeur a joutée à la vision d’ensemble.

Mesurer les risques Un changement de charte graphique, par exemple, doit être mûrement réfléchi et testé auprès d'échantillons de la base de données. Il peut entraîner un manque d’identification des lecteurs fidèles, et un rapport à la marque différent.

Privilégier certains axes Un e-mailing Responsive et un Call to Action efficace ne pourront pas être rentabilisés si l’Internaute n’est pas accueilli par un site web Responsive. Accepter les compromis Dans certains cas, il n’est pas nécessaire de proposer une création graphique totalement nouvelle : l’e-mailing actuel peut être adapté au Responsive Design. Quoi qu'il en soit, des choix devront être faits, sur les informations à mettre en avant, ou à retirer.

La technique : à aborder sans complexe !

De quels outils faut-il disposer pour aborder le Responsive Design ? La question peut se poser pour les intégrateurs spécialisés dans le développement HTML. La technique est accessible, et doit s'envisager sans complexe ! Elle repose exclusivement sur la maîtrise des tableaux et la bonne gestion des styles CSS, qui permettent à l’e-mailing de s’adapter aux nouvelles plateformes de lecture.

20

2. TechniqueLet’s go Responsive !

21

Quelles sont les étapes techniques à suivre, et quels aspects demandent une attention particulière ? Quelles sont les bonnes pratiques à respecter, avant et pendant l’adaptation d’un e-mailing en Responsive Design ?

A. Le design évolue…

Dans sa version ordinateur comme dans sa version mobile, le Responsive Design entraîne des effets directs sur l’aspect général de l’e-mailing. La composition du message doit être pensée en tenant compte de ces modifications.

La place donnée aux bandeaux et aux colonnes peut évoluer. Un basculement des blocs les uns au-dessous des autres est possible. Des images spécifiques à chaque plateforme peuvent être intégrées

dans l’e-mailing. Certaines peuvent être visibles ou non selon la plateforme d’ouverture. Par exemple, un lien de téléchargement vers une application spécifique au système d’exploitation. Les textes et les liens peuvent être modifiés. Un lien cliquable sur

une version ordinateur est transformable en bouton sur une version mobile.

Ces nouvelles possibilités entraînent une réflexion nécessaire sur l’ensemble du projet, notamment pour connaître et maîtriser les risques inhérents à l’évolution de la newsletter.

Quels sont ces risques ? Comment éviter les pièges ?

- Respecter le cadre du projet défini,- Limiter les changements visuels de la newsletter,- S’assurer que les destinataires reconnaissent la newsletter à laquelle ils sont habitués,- Tester les modifications envisagées sur un échantillon de la base de données,- Solliciter un retour de cet échantillon, par exemple par le biais d’un questionnaire de satisfaction.

Entre une version sur ordinateur et une version sur mobile, plusieurs éléments peuvent évoluer grâce au Responsive Design. Il est indispensable de tenir compte de ces évolutions dans le message.

22

L’utilisation des styles CSS dans une version Responsive Design rend possible le basculement de blocs les uns en dessous des autres.

23

Certains éléments peuvent être cachés pour alléger le résultat sur une plateforme mobile. C’est le cas de l’exemple ci-dessous, avec la disparition de l'image de fond.

24

Le passage en Responsive Design ouvre également la possibilité de redimensionner les images selon la plateforme d'ouverture à des dimensions adaptées à la taille de l'écran.

25

Des éléments (comme ici les liens « mot de passe oublié », « aide », « contactez-nous ») peuvent être remplacés par un large bouton cliquable dans une version mobile.

26

B. … le code aussi

Cette dernière phase n’est pas seulement technique mais aussi stratégique.

Trois étapes la rythment : Création graphique des versions PC et mobile de façon simultanée, Intégration HTML de la version PC, Intégration des styles CSS pour la version Responsive Design.

Quels sont les aspects qui vont évoluer d’une version à l’autre ? Quelle est la somme de modifications estimée ?Une fois cette étape franchie, les deux suivantes, tournées vers l’intégration, se dérouleront naturellement.

Etape 1 : créationLe design Responsive : simplicité et efficacité

La première étape peut faire l’objet d’une réflexion sur une simple feuille de papier, en réalisant un zoning. Objectif : ne pas laisser de côté la version PC en se concentrant sur la version mobile. Les deux versions sont imaginées simultanément, afin de bien placer les éléments et anticiper leurs déplacements. 1. Avant de commencer la création graphique, imaginer la mise en page en Responsive Design pour s’assurer de la compatibilité. La réalisation d’un zoning va prévoir les contraintes de mise en place d’un e-mail en Responsive.

2. Afin de mieux organiser ce contenu, certains outils comme les grilles peuvent être utilisés. Le site http://gridcalculator.dk, par exemple, permet de visualiser la taille des marges, la largeur, et le nombre de colonnes maximum. On obtient alors une grille de référence pour la création de l’e-mail. Le contenu ainsi organisé est plus lisible.

27

Etape 2 : l’intégration HTML

1. Construction du HTML : penser Responsive Design

Le principe n’est plus d’utiliser uniquement les balises <tr> et <td> pour créer des lignes ou des colonnes, mais d’utiliser des tableaux qui se succèdent ! Englober le code HTML dans un tableau de taille "100%" pour les messageries qui ne tiennent pas compte de la balise <body>. Ce tableau principal contient une seule balise <tr> et une seule balise <td>. La balise <td> aura l’attribut align="center" afin de centrer l’ensemble des tableaux qu’elle contiendra elle-même.

Dans la première balise <td> insérer le contenu dans des tableaux successifs.

Ici, la première <table> est en violet. Elle contient deux tableaux l’un à côté de l’autre et la deuxième <table> est en vert.

Attention : Il existe une particularité pour les tableaux contenant deux colonnes ou plus.

- Au lieu de créer des colonnes avec la balise <td>, utiliser successivement des balises <table>.- Les colonnes seront alignées grâce à la propriété align= "left" qu’il faut insérer dans chaque <table> concernée.

28

Astuce : bien visualiser les e-mails sur Outlook

À partir de trois blocs côte à côte, il est important que la somme des largeurs des tableaux soit déduite au minimum de 20px par rapport au tableau principal qui les contient.

Dans l’exemple ci-contre, le tableau contenant les trois blocs fait 600px. Au lieu de créer des tableaux de 200px de large chacun, la largeur est de 193px, ce qui fait un total de 579 px. 21 px ont donc été déduits.

Cette astuce est essentielle pour un bon rendu de l’e-mail sur Outlook. Si cette règle n’est pas respectée, le troisième bloc passe en dessous des deux premiers, sur la version ordinateur.

Par exemple, le code s’écrira de la manière suivante pour l'affichage des trois blocs de couleurs ci-dessous :

Le visuel de ce code sur ordinateur est le suivant : les blocs sont côte à côte.

Sur mobile, les blocs se présenteront les uns sous les autres.

29

Astuce : quelques codes à ne pas oublier

width=device-width : redimensionne le HTML sur la largeur de l’écran du mobile initial-scale=1.0 : correspond à la profondeur initiale du zoom maximum-scale=5.0 : donne la possibilité de zoomer jusqu’à cinq fois la valeur

initiale du zoom user-scale=yes : donne la possibilité de zoomer et dézoomer sur la page

2. La balise Meta "viewport" : définir les dimensions de la page web

Ajouter une balise Meta "viewport" dans la balise <head> du fichier HTML.

Cette balise facultative définit les dimensions d’une page web : la largeur de la page, la hauteur et même le zoom sur cette page. Elle contrôle ainsi le formatage du mobile.

30

10 http://www.e-mailology.org/#111 http://meyerweb.com/eric/tools/CSS/reset/

Ce code est l’équivalent du CSS reset d’Eric Meyer11 utilisé pour les sites internet et adapté pour l’e-mailing.

a. Commencer par intégrer un code CSS par défaut qui permet de corriger les bugs fixes10.

Etape 3 : Les styles CSSMaîtriser les Mediaqueries

Le CSS utilise des sélecteurs appelés "id" et "class".

Rappel : Le sélecteur "id" est utilisé pour

spécifier un style pour un seul et unique élément. Le sélecteur "class" est utilisé

pour spécifier un style pour un ou plusieurs éléments en même temps.

Le code CSS doit être intégré dans la balise <head>, et non dans une feuille de style externe.

31

12 www.glossaire.infowebmaster.fr/media-queries

b. Intégrer ensuite un code CSS spécifique pour la version mobile : les Mediaqueries.Que sont les Mediaqueries ? Il s'agit « des spécifications de CSS3 qui permettent d’attribuer des propriétés CSS en fonction de conditions particulières (exemple : largeur de l’écran). Ces spécifications sont particulièrement connues pour leur utilité dans la conception d’un Responsive design. 12 »

Utiliser de préférence les Mediaqueries pour les versions mobiles appliquées au smartphone. En effet, la résolution d’une tablette en format portrait n’est pas inférieure à 650 px de largeur qui est la taille maximum préconisée pour un e-mailing. Préférer donc la version pc par défaut pour les tablettes.

En revanche, il est également possible d’utiliser les Mediaqueries pour les tablettes si on souhaite que le contenu de cette version soit différent de la version pc (par exemple : un article en moins ou un bouton différent).

c. Intégrer un code CSS spécifique pour iOS (Apple).Le moteur de rendu iOS (Apple) redimensionne les caractères automatiquement. Pour éviter cela et respecter la taille attribuée aux polices, a jouter dans la balise <body> le style en ligne suivant : style="-webkit-text-size-adjust:none;".

d. Intégrer le code CSS qui permet le redimenssionnement des cellules.Par exemple, pour redimensionner une cellule à 320px, le préciser dans l'attribut "class" à la fois dans la balise <table> et dans la balise <td>. Le code CSS sera le suivant : table[class= header], td[class= header] {width:320px !important; height:auto !important;}La mention “!important” force la prise en compte du style.La cellule sera alors redimensionnée à une largeur de 320px et la hauteur s’adaptera automatiquement au contenu.

Pour la version mobile (taille d'écran inférieure à 480 pixels), utiliser les Mediaqueries suivantes :@media only screen and (max-device-width: 480px){ }Ou@media only screen and (max-width: 480px){ }

Pour un affichage spécifique sur tablette, utiliser ces Mediaqueries :@media only screen and (min-device-width: 490px) and (max-device-width: 768px){ }

Entre les deux accolades, intégrer le code CSS qui permettra d’adapter l’e-mailing aux mobiles.

Les contraintes de certains webmails obligent a écrire le CSS d’une manière inhabituelle.Habituellement le code CSS s’écrit de la manière suivante :Class="header" => .header { }id="contain" => #contain { }

Pour éviter que Yahoo n’affiche la version en Responsive Design par défaut, écrire le CSS de la façon suivante :Class="header" => table[class=header], td[class= header], img[class= header]{ }id="contain" => table[id=contain], td[id=contain], img[id=contain]{ }

32

e. Intégrer un code CSS spécifique pour modifier la taille des polices en fonction de l'écran.

Une taille de police habituellement recommandée de 12px pour une version pc ne sera pas suffisamment lisible pour une version mobile. C'est dans la Mediaquerie que le changement de taille en fonction de l'écran doit être effectué.

Avant tout, indiquer la taille de la police dans un style CSS inline dans la balise <table> contenant le texte. Cela donnera le code HTML suivant : <table style="font-size:12px;">Pour la version mobile, placer dans la Mediaquerie la future taille de police dans un attribut "class" (appelé « montexte » dans l’exemple ci-dessous) qui se trouvera dans la balise <td> contenant le texte. Cela donnera le code CSS suivant :td[class=montexte]{font-size :14px !important ;}

f. Intégrer un code CSS spécifique pour gérer l'affichage des images.

RedimensionnementL’image est redimensionnée, soit automatiquement avec une taille à 100% dans le style CSS, soit dans les Mediaqueries en lui attribuant une largeur fixe et une taille automatique en hauteur.

33

RemplacementIl suffit simplement de cacher l’image dans le style CSS et d’attribuer une image en "background" à la cellule.

Pour la version mobile, faire disparaître la table balise image qui contient l’image de la version PC, en a joutant une Mediaquerie qui contient un display:none.Donner une hauteur et une largeur à notre « class=image_mobile » de la taille de l’image que l’on mettra en image de fond. Il est important de ra jouter la mention « no-repeat » afin que l’image ne se répète pas si la taille de la cellule est plus grande que l’image.

Dans le cas où une image est cliquable, préciser la class dans la balise <a> pour être sûr que le lien sera bien pris en compte.

Astuce : Comment choisir la méthode à appliquer ? La méthode de redimensionnement est à utiliser uniquement si la qualité de l’image ne s’altère pas.Dans le cas contraire, et notamment lorsque l'image contient du texte, préférer un remplacement. Le remplacement permet également de substituer une image à une autre totalement différente.

34

1

2

3

4

1 - La balise Meta "viewport"

2 - CSS qui permet de corriger les bugs fixes

3 - Les Mediaqueries

4 - CSS spécifique à iOS (Apple)

Version ordinateur

Version mobile

Code HTML : exemple d'application pas à pas.

35

5

6

7

8

9

5 - Redimensionnement de cellule à 320 px

6 - Redimensionner une image

7 - Modification de la taille de police

8 - Remplacement d'image au sein d'une même <table>

9 - Remplacement d'image avec deux tableaux différents

36

Ce qu’il faut faire :

Connaître ses cibles, et mesurer les attentes des destinataires. L’investissement « Responsive Design » doit être justifié : cela passe par une étude de sa base de données, des analyses fines, des mesures à chaque étape du projet.

Identifier les risques. Le résultat ne pourra pas être parfait sur toutes les plateformes, qui sont elles-mêmes en évolution permanente. Il faut donc prévoir la densité du projet, et se fixer des objectifs précis.

Avoir de bonnes raisons de passer au « Responsive Design ». Le Responsive Design n’est ni une révolution ni une solution magique : c’est une évolution qui va permettre d’ouvrir sa stratégie, d'envisager de nouvelles possibilités de ciblage, et qui va s'adapter au changement d’habitudes des destinataires.

Ce qu’il ne faut pas faire :

C. Bonnes pratiques

En conclusion, un rappel des bonnes questions à se poser et des règles techniques à respecter.

Vouloir adapter à tout prix un e-mailing existant. La technique à mettre en oeuvre peut être complexe et le temps de développement n'est pas négligeable. Se fixer des objectifs est le meilleur moyen de limiter les coûts financiers et d'optimiser le ROI de la démarche.

Chercher à produire des versions Responsive pour toutes les plateformes existantes. Il existe plusieurs dizaines de formats d’écrans : un arbitrage peut s’avérer nécessaire, afin de se limiter à deux versions. Elles sont suffisantes dans la majorité des cas.

Penser que le Responsive Design est une solution magique. Optimiser la présentation d'un e-mailing ne déclenche pas une sur-réaction des Mobinautes. Cela permet de maximiser la qualité de rendu et la présentation des informations, mais ne remplace en aucun cas l'appétence de l'offre.

37

Chaque problématique rencontrée lors des tests d’intégration a une solution. Certaines astuces permettent d’ailleurs d’éviter les désagréments liés à une erreur d’intégration.

Gérer les sauts de ligne avec Outlook Le moteur d’interprétation HTML d’Outlook est Word. Certains codes peuvent donc être mal interprétés par Outlook. C’est notamment le cas du saut de ligne. Tous les 1790px, un saut de ligne est a jouté au code HTML. Si un tableau se trouve à ce niveau, il sera donc cassé. Solution : éviter les e-mailings trop longs.

S’assurer que le code couleur est reconnu Le code des couleurs choisies avec l’outil de Dreamweaver est parfois raccourci. Par exemple pour le noir : #000 au lieu de #000000. Certains webmails ne le reconnaissent pas. Solution : écrire le code en entier.

Bien visualiser le texte sur le mobile Lorsqu’on choisit une version Responsive Design en 320px de large, il est important que le texte reste lisible sur mobile. Si la cellule contenant le texte est également en 320px de large, il sera collé aux bords de l’écran, rendant la lecture moins confortable. Solution : prévoir une taille de 300px de large pour la cellule de texte.

Assurer une meilleure lisibilité du contenu Un texte pas assez lisible pénalise immédiatement les résultats de l'e-mailing. Il est donc nécessaire de prévoir une taille de police adaptée à l'écran, cette condition devant rester prioritaire dans l'applicationd des styles. Solution : Ajouter " !important " dans le code CSS à la suite de la taille de police.

Quelques astuces pour aller plus loin

38

Mobile et Responsive, c’est possible !

Quelle est la meilleure réponse technique pour optimiser son e-mail mobile ? Quelle mise en page est optimale et comment assurer le Call to Action ?

La position de chaque élément est essentielle.

LE CALL TO ACTION

Le Call to Action doit être accessible rapidement et simplement. Opter pour un CTA centré et large.

Respecter les règles de base comme pour un e-mail classique destiné à un ordinateur :

- Liens visibles, en évidence, proéminents, contrastés,

- Texte sur les liens précis et attrayant,

- Respecter la cohérence entre l’e-mail et la landing page. Lorsque l’Internaute clique, il doit arriver sur un environnement adapté, cohérent avec l'expérience proposée par l'e-mail.

Prendre en compte les particularités des mobiles :

- Sur un mobile, pas de souris : les liens doivent être suffisamment grands (44*44px au minimum) pour être activés au doigt,

- Laisser de l’espace vide autour des liens (15px environ) pour éviter le clic sur un autre lien trop proche,

- Sans souris, il n’y a pas de survol des liens et d'affichage de texte explicatif contextuel, ou de changement de forme du curseur. Jouer sur la présentation, pour que les destinataires puissent identifier les types de liens immédiatement : souligner, a jouter des effets, des icônes… - Intégrer des Clicks to Call (lien sur le numéro de téléphone qui permet un appel immédiat) ou des liens vers une adresse (pour une localisation en direct), pour une meilleure intégration avec les autres fonctionnalités des mobiles.

39

Pour privilégier le Call to Action, prévoir des boutons plus larges et laisser de l’espace (15px) entre les liens, afin de ne pas gêner la navigation.

Les liens doivent être suffisamment grands pour que l’Internaute accède aisément au contenu. La taille idéale d’un bouton est de 44px.

Le lien est identifiablesa présentation est aérée.

Il est difficile de différenciertexte simple et lien.

40

LA MISE EN PAGE

Sur une seule colonne, avec un contenu simple : l’e-mail doit rester lisible.

- Privilégier une seule colonne,- Prévoir une largeur de 320px (largeur la plus répandue),- Mettre les informations principales dans les 600 premiers pixels et limiter le scroll en hauteur,- Simplifier le header : pas de barre de menu imposante ou qui ne s’afficherait pas correctement,- Simplifier le contenu : définir le message prioritaire et aller à l’essentiel pour créer un e-mail clair. Les blocs présentés dans la version ordinateur et non indispensables dans la version mobile peuvent être cachés.- Rester lisible : pas de pavés de texte trop imposants. Trois lignes sur ordinateur deviennent neuf lignes sur mobile.

Un e-mail en une seule colonne, avec un contenu simple : toute la mise en page doit être adaptée pour rester lisible et accessible. Sur la version mobile le message peut être simplifié afin de mettre en valeur l'information et aller à l'essentiel.

41

Attention aux colonnes trop petites : se limiter à un ou deux mots par ligne rend la lecture plus difficile,

Un écran = une idée.

42

Exploiter au maximum les opportunités et les limites de l'en-tête de l'e-mailing en y concentrant le message le plus efficace.

L’EN-TÊTE

L'en-tête de l'e-mail, ce sont ces quelques mots visible même avant son ouverture, et qui doivent absolument attirer l'attention.

- L'objet : L'information importante doit être concentrée sur les 30 premiers caractères.- Le pre-header : Profiter de l’affichage du début du mail dans la liste des messages sur certains mobiles pour y écrire une phrase-clé de quelques mots. C’est un atout pour attirer l’attention, avant même que le Mobinaute n’ouvre l’e-mail.

43

L’e-mail sera lu plus facilement par le Mobinaute avec une police plus grande et des zones cl iquables clairement identifiées.

LES IMAGES

Attention aux pièges des images : parfois trop lourdes ou peu lisibles, elles peuvent aussi être bloquées par l’OS

Axer les versions mobiles sur le contenu texte, plutôt que sur les images.

- Attention aux images trop lourdes. Privilégier un poids de 20Ko environ pour un téléchargement optimal (la performance de la connexion est parfois limitée sur les plateformes mobiles). - Attention aux contrastes et aux couleurs : les petits écrans et la luminosité au plus bas (notamment pour économiser la batterie) peuvent donner un rendu peu avantageux. Utiliser des couleurs dont le contraste sera suffisamment important pour lire l'e-mail en pleine journée comme en pleine nuit. - Privilégier les images de petite taille pour une meilleure visibilité. - Renseigner les attributs "alt" pour assurer l'affichage d'un texte alternatif en cas de non affichage.- Enfin, dans certains cas, les images peuvent être bloquées (selon l’Operating System, ou si l’utilisateur a activé une option). L’e-mail doit rester compréhensible sans ses images.

LA POLICE

La police de l’e-mail doit être plus grande dans la version mobile que celle d’un e-mail ouvert sur ordinateur.

- 14px minimum pour le corps du texte,- 22 px pour les titres,- A noter : iOS redimensionne parfois la police par défaut.

44

Synthèse des contraintes techniques et des solutions à mettre en oeuvre :

DO’S DON’TS

Taille des écrans- Développer deux versions, une pour ordinateur (600px de large), l’autre pour mobile (320px).

- Développer une version pour chaque taille d’écran. Le développement serait trop fastidieux et coûteux.

Mise en page

- Privilégier la lisibilité, avec une seule colonne, un header et un contenu simple.

- Positionner les informations principales dans les 600 premiers pixels et limiter le scroll.

- Concevoir des colonnes trop petites : un ou deux mots par ligne compliquent la lecture.

- Rédiger des pavés de texte trop imposants.

Images

- Privilégier du texte et des images de taille adaptée à l'écran, pour une meilleure visibilité.

- Renseigner les attributs "alt", afin de dispenser une information au destinataire dans le cas où les images ne sont pas téléchargées.

- Avoir des images trop lourdes ! Ne pas dépasser 20Ko.

- Construire un e-mailing uniquement à base d’images. Il est important d'alterner texte et visuels.

Call to Action

- Un Call to Action large et centré est optimal.

- S'assurer que la page d'atterissage soit cohérente avec l'expérience proposée par la newsletter.

- Ils doivent être visibles, contrastés et évidents.

- Pour une version mobile la taille minimale à respecter est de 44px*44px.

- Coller deux liens cliquables. Ils doivent être séparés par un minimum d'espace (15px).

- Créer des Call to Action trop petits.

45

3. Applications Je fais du Responsive !

46

Les deux cas clients suivants illustrent les process abordés plus haut pour développer un e-mailing en Responsive Design. Le premier est une création complète, le second l’adaptation d’une newsletter existante.

Créer un e-mailing Responsive Design. Il s'agit ici d'une création pure, d'un projet nouveau dont la première exigence est qu'il soit Responsive Design avec peu d’éléments graphiques, pour atteindre une cible qui n’a pas l’habitude de ce canal de communication avec la marque , mais qui est plus équipée que la moyenne en smartphones.

Adapter une newsletter existante en Responsive Design. Ici, il s’agit de faire évoluer en Reponsive Design une newsletter qui ne l'est pas. Après analyse de l’existant, il faut imaginer un projet à la fois compatible avec les habitudes de réception des destinataires, et les nouvelles plateformes de lecture ciblées.

Au-delà de la réflexion amenée par chacun de ces projets, la qualité d'un e-mailing en Reponsive Design peut être évaluée par quelques indicateurs clés. Dans une dernière partie, plusieurs créations sont ainsi décryptées, ce qui permet de retrouver sur des exemples concrets les principales recommandations apportées par cette étude.

47

A. Cas client : Amoleen Watches, création Reponsive Design

Amoleen Watches est spécialisée dans le rachat et la revente de montres de luxes (Rolex, Omega). L’entreprise souhaite communiquer occasionnellement autour d’un panel restreint de clients, et les informer de l’acquisition de nouvelles montres.

L’entreprise n’envoie pas encore de newsletter, et dispose de peu de ressources graphiques.

Analyse des destinataires- Les clients sont de fervents collectionneurs, souvent en déplacement,- Ils ne sont pas habitués à être sollicités par e-mail par Amoleen Watches.

Solution proposée- Un e-mail impactant, sobre, « classe », sérieux et succinct,- Un e-mail Responsive Design, pour répondre aux besoins de cette population destinataire très équipée "mobile".

Contrainte technique- Les seuls éléments graphiques disponibles au démarrage du projet sont le logo de la marque et le site internet de l’entreprise.

48

a. Choisir un graphisme valorisant pour le produit, quel que soit le support de lecture

Première étape : rechercher un design web qui puisse correspondre à la demande initiale, c’est-à-dire sobre, classe et impactant.Il s’agit ici de mettre en avant le produit. La newsletter doit donc être simple et allégée.

Le site offre peu d’éléments créatifs. Les codes couleurs utilisés sur le site (principalement des tons gris) sont repris, afin d’assurer une uniformité entre le site et l'e-mail.

Le design de la newsletter respectera cette grande sobriété et mettra en avant le produit, quel que soit le support de lecture.

b. Elaborer la mise en forme de la newsletter

Le client est étroitement associé à cette réflexion sur la mise en forme de la newsletter. Un premier croquis, c'est-à-dire un zoning, est réalisé à la main, avant même de commencer à dessiner la newsletter sur Photoshop.

Croquis de newsletter (ci-contre)- Chaque partie barrée correspond à une zone d’image.- Les autres sont des zones de textes.

Zoning de newsletter (ci-contre)- Le zoning présenté montre le design tel qu'il sera affiché sur ordinateur. Sur version mobile les blocs passent les uns sous les autres, de gauche à droite et de haut en bas

49

La version sur ordinateur s’adapte à une lecture sur un grand écran

La version sur mobile répond aux contraintes d’un écran plus petit(une seule colonne).

50

c. De la création à l’intégration

Après la validation du zoning un ensemble d’étapes constituent l’agenda du projet.

- Création du visuel sur Photoshop,- Présentation au client et demandes de modifications,- Mise à jour de la création graphique,- Validation par le client,- Découpe et développement de la version HTML,- Tests de la newsletter sur les différentes plateformes web et mobile,- Envoi des résultats tests au client pour validation.

La création de l’e-mailing peut ouvrir sur de nouveaux projets : c’est le cas qui se présente avec la commande d’une deuxième mouture plus tournée vers un style "newsletter". Cette opportunité souligne l’importance d’inclure ce type de projet dans une stratégie globale de communication.

d. Évaluer le rendu graphique sur plateforme pc et mobiles

Ces chiffres montrent un bon taux d’ouverture pour les deux envois : 25,17% et 23,93%. Environ un tiers des ouvreurs a ouvert les newsletters une seconde fois.

Données extraites de MailPerformance

51

B. Cas client : Casino, adapter la newsletter aux plateformes mobiles

Le Groupe Casino envoie une newsletter hebdomadaire à ses clients des Hypermarchés Géant Casino au niveau national.L’entreprise souhaite adapter cette newsletter en Responsive Design.

Pour effectuer cette mutation, la mise en page sera refondue et le graphisme repensé.Au préalable, plusieurs études vont être menées pour mieux connaître les cibles destinataires, leurs habitudes et les plateformes de réception des e-mails utilisées.

Un ensemble de démarches rythment le projet : Etude préliminaire réalisée sur deux newsletters habituelles envoyées à une semaine d’intervalle, Réflexion sur un nouveau gabarit suite aux conclusions de l’étude, Intégration HTMLde l’e-mail Responsive Design, Des résultats suite à l’envoi de la nouvelle version de l’e-mail.

a. Étude préliminaire

Cette phase initiale permet de dresser un constat sur l’existant et d’identifier les opportunités comme les risques de ce projet.

Point sur l'équipement de la population ciblée.

L’étude repose sur l’analyse des résultats de deux newsletters successives envoyées le 25 février et le 4 mars 2013. Aucune modification n’a été apportée au process d’envoi habituel de Groupe Casino, ni en terme de ciblage, ni en terme de contenu - graphique comme rédactionnel.

Envoi du 25/02 Envoi du 04/03

% Ouvreurs 25,17% 23,93%

% Réouvertures 36,25% 28,95%

% Cliqueurs 6,18% 4,41%

% Clics 9,30% 5,90%

L’ordinateur reste la plateforme la plus utilisée : 79% des ouvreurs ont consulté l’e-mail depuis

un ordinateur, 13% ont ouvert le mail depuis un mobile, 8% depuis une tablette.

Le taux de réactivité est également plus marqué sur un ordinateur.Les cibles sont plus réactives sur ordinateur que sur smartphone et tablette.

52

Une analyse de la newsletter habituelle est indispensable dès les premiers moments du projet, pour mesurer sa compatibilité avec une version Responsive Design.

Ici, cette analyse a montré :

Les plus :- Contient beaucoup d’offres pour le client,- Aspect graphique convivial,- Un code HTML respectant les standards de l'e-mailing.

Les moins :- Agencement des rubriques qui ne permet pas une adaptation en Responsive Design,- Trop de zones de clics qu'il faudra hiérarchiser,- Certains titres sont présentés à la vertical,- Les Call to Action sont trop petits et pixélisés.

La proposition graphique pour une version compatible Responsive Design devra tenir compte de toutes ces conclusions.

Point sur la création graphique de la newsletter

53

Données extraites de MailPerformance

54

Etude de l'efficacité des zones de clics.

Ce premier niveau d’analyse fait ressortir de bons résultats globaux et met en valeur une proportion non négligeable d’ouvreurs sur mobiles, ce qui justifie le développement d’une version optimisée sur ces plateformes.

Ces résultats valident donc le projet du client et permettent de définir un plan d’action adapté au contexte.

Actions: Refonte ergonomique et réorganisation des rubriques, en conservant certains

marqueurs qui garantissent une continuité graphique avec la précédente version Adaptation technique pour assurer la compatibilité Responsive Design Echantillonnage et diffusion progressive sur l’ensemble des abonnés

Objectifs : Moderniser la création graphique / soigner l’image de marque Equilibrer les zones de clics Conserver la qualité globale des résultats Augmenter la réactivité sur plateformes mobiles

La zone située en haut de l’e-mail obtient la majorité des clics de la newsletter. La répartition des autres clics se fait essentiellement sur les images et les Calls to Action des offres.

Une réflexion doit être menée sur l’organisation des rubriques :

L'offre principale doit etre placée en haut de l'e-mail, où se concentrent les clics Le bloc "bon plan" générant moins de clics peut être déplacé en bas de la newsletter Des CTA doivent être a joutés à ce bloc

b. Création graphique : vers une nouvelle ergonomie, adaptée au Responsive Design

Une nouvelle présentation de la newsletter est proposée au client sous forme d’un zoning. Elle tient compte des conclusions de l'étude préliminaire.

Principales actions menées :

Offre essentielle mise en avant dans la partie supérieure de l’e-mailing, Call to Action de la même largeur que l’offre pour maximiser son

efficacité, Organisation des blocs de contenu de sorte à ce qu’ils puissent se

positionner les uns sous les autres de manière harmonieuse dans la version mobile, Titres des rubriques isolés des blocs de contenu afin de mieux les

distinguer.

Version ordinateur Version mobile

55

Données extraites de Litmus accessible par MailPerformance

56

c. Intrégration HTML

Aprés validation de la créa-tion graphique proposée, la newsletter est intégrée en HTML, selon les principes présentés plus en haut.

La qualité du rendu a été testée sur une cinquantaine de plate-formes et de configurations dif-férentes afin de s’assurer de la bonne interprétation du code HTML quel que soit le contexte de lecture.

Version ordinateur Version mobile en Responsive Design

outlook gmail iphoneandroid

d. Échantillonnage et étude comparative

Avant de généraliser l’envoi de ce nouveau gabarit Responsive Design, un test a été réalisé sur un échantillon de la base de données (5%), tandis qu’au même moment, le reste de la base de données recevait la newsletter sous son ancien format.Un test identique a été renouvelé sur les mêmes populations la semaine suivante.

Objectif : limiter les risques qui seraient liés à un changement trop radical de la présentation (rejet, désabonnement, perte de repères …)

Des résultats positifs

On constate des taux de clics comparables, voire meilleurs sur la version Responsive Design, signe du bon accueil de cette nouvelle version par les destinataires.

Envoi standard du 30/04 Envoi RD du 30/04 Envoi standard du 06/05 Envoi RD du 06/05

% Ouvreurs 27,97% 30,64% 26,61% 27,20%

% Réouverture 39,64% 30,36% 29,99% 36,05%

% Cliqueurs 5,84% 7,74% 4,71% 4,97%

% Clics 8,25% 10,46% 6,18% 4,97%

Données extraites de MailPerformance

57

Constats :

La plateforme la plus utilisée reste l’ordinateur, Légère augmentation du nombre d’ouvreurs sur la version Responsive Design par rapport à la version standard, Le taux de clics est également plus important sur la version Responsive que sur la version standard, Plus de 70% des ouvreurs ont ouvert l'e-mail depuis un ordinateur, Plus de 15% ont ouvert le mail depuis un smartphone, Le taux d’ouvreurs est plus élevé sur smartphone, avec 17% sur la version Responsive Design par rapport à la version standard (15%), Les tablettes sont à 8% d’ouverture, aussi bien sur la version standard que sur la version Responsive Design.

58

Trois points à retenir en conclusion :

C'est sur ordinateur que les contacts sont les plus réactifs, quelle que soit la version de l'e-mail. La version Responsive Design améliore la réactivité des ouvreurs

sur plateformes mobiles. Dans l'ensemble, sur la nouvelle version de la newsletter, les résultats

sont comparables voire un peu meilleurs que l'ancienne.

Les taux d’ouverture étaient déjà bons sur l’ancienne newsletter. Ils le sont restés dans les mêmes proportions. L’évolution vers une version Responsive a donc été bien accueillie par les destinataires habituels de la newsletter.

Sans entraîner de révolution dans les chiffres, cette adaptation suit parfaitement la logique du Responsive, en modernisant la présentation graphique et en accompagnant les nouvelles habitudes de lecture des clients du Groupe Casino. Elle ouvre aussi de nouvelles perspectives de ciblage.

59

C. Bonnes... et moins bonnes idées

Plusieurs exemples d’e-mailings Responsive Design sont abordés dans les pages suivantes. La comparaison des versions « ordinateur » et « mobile » met en avant les choix opérés par l’annonceur, et leur efficacité.

VIADEOE-mailing adaptatif.

Stratégie adoptée :

Points forts Mise en page aboutie : certains éléments adéquats sur la version

« ordinateur » sont supprimés à juste titre sur la version « mobile ». Une offre principale simple et claire, lisible en intégralité du

premier coup d’œil, rend le message efficace sur toutes les plateformes. Le CTA est mis en valeur et visible dès l’ouverture de l’e-mail ; il

est facilement cliquable sur toutes les plateformes. La taille de la police est plus importante sur la version mobile. Le site VIADEO est également adapté, en cohérence avec cet

e-mail.

Axes d’amélioration L’a jout d’une phrase impactante en pré-header serait un atout

pour maximiser les chances d’ouvertures de l’e-mail. Elle pourrait reprendre le message principal de l’offre.

60

Évaluation Optimisé mobile : + + + Qualité de l’optimisation : + + + Personnalisation de l’offre (selon device) : + + CTA : + + + Parcours post-clic : + + +

PROMODE-mailing adaptatif.

Stratégie adoptée :

Points forts Le pré-header est bien exploité. L’offre principale est très lisible, sur les deux versions. Les liens sur le texte de la version « ordinateur » sont bien

modifiés en larges boutons sur la version « mobile ». Le menu renvoyant vers le site, sur la version « ordinateur », est

supprimé sur la version « mobile », pour simplifier l’accès à l’offre principale et limiter le nombre de CTA différents.

Axes d’amélioration Un travail supplémentaire sur le graphisme de l’e-mail le rendrait

plus attrayant. Le CTA pourrait être détaché de l’image principale pour une

meilleure visibilité. Le site d’atterrissage n’est pas optimisé pour une navigation sur

mobile. Conserver sur mobile la zone personnalisée qui est un point fort

de la version « ordinateur ».

Évaluation Optimisé mobile : + + + Qualité de l’optimisation : + Personnalisation de l’offre (selon device) : + + CTA : + + Parcours post-clic : -

61

LA FOURCHETTEE-mailing adaptatif.

Stratégie adoptée :

Points forts La mise en page est optimale : certaines images disparaissent

sur la version « mobile », les blocs de texte et d’images alternent intelligemment, le tout rendent l’e-mail très lisible sur les deux plateformes. Le pré-header est informatif et attrayant. Le CTA est visible, clairement identifiable du reste du contenu. La taille de la police est confortable sur les deux versions. Le message est clair et met bien en valeur une information

principale.

Axes d’amélioration Le haut de l’e-mail sur la version mobile reste un peu trop

important et oblige, sur certains écrans, à scroller pour atteindre le CTA. La zone de recherche pourrait être déplacée. Les pages d’atterrissage ne sont pas optimisées pour une

navigation sur mobile.

Évaluation Optimisé mobile : + + + Qualité de l’optimisation : + + + Personnalisation de l’offre (selon device) : + + CTA : + + + Parcours post-clic : -

62

ISFORME-mailing adaptatif.

Stratégie adoptée :

Points forts Le contenu présente davantage de texte que d’images, ce qui est

effectivement recommandé pour un e-mailing Responsive Design. La taille du texte est suffisante pour une lecture confortable sur

mobile. Le CTA est bien mis en avant sur la version « mobile ».

Axes d’amélioration Les images sont redimensionnées sur la version « mobile », or

cela dégrade la qualité de certaines d’entre-elles, qui auraient avantageusement été remplacées. Sur la version « mobile », les images présentées entre chaque

partie gagneraient à être centrées. Pour éviter un scroll important sur la version « mobile » et faciliter

la lecture, certaines parties à l’intérieur de chaque rubrique pourraient être supprimées.

Évaluation Optimisé mobile : + + Qualité de l’optimisation : + Personnalisation de l’offre (selon device) : + + CTA : + Parcours post-clic : -

63

OUEST-France IMMOE-mailing adaptatif.

Stratégie adoptée :

Points forts Le pré-header est parfaitement exploité, le lien vers la page

miroir a même été supprimé sur la version « mobile » pour concentrer l’attention du lecteur sur le message principal. Les CTA sont imposants et bien visibles. Le message est concis et efficace. Le positionnement des éléments sur les deux versions est

harmonieux, les images sont remplacées entre les deux versions et optimisées pour chaque plateforme. Chaque version est parfaitement adaptée à l’écran de lecture.

Axes d’amélioration La construction de cet e-mail s’appuie exclusivement sur des

images, ce qui en fragilise l’efficacité dans le cas où elles ne seraient pas téléchargées côté client. Plusieurs espaces pourraient être remplacés par du texte (CTA notamment). Le second CTA apparaît trop bas sur la version « mobile », et n’est

pas visible sans scroll sur certaines plateformes. La page d'atterrissage n'est pas optimisée.

Évaluation Optimisé mobile : + + + Qualité de l’optimisation : + + + Personnalisation de l’offre (selon device) : + + CTA : + + Parcours post-clic : -

64

CARGOE-mailing fluide.

Stratégie adoptée :

Points forts Les images sont de bonne qualité, et supportent très bien le

redimensionnement. Le CTA est contrasté, et bien identifiable sur les deux versions. La taille de la police de certaines zones, dont les liens du menu

du haut, a été augmentée à juste titre sur la version mobile.

Axes d’amélioration Le menu prend trop de place en largeur : sur la version « mobile »

les liens « Press » et « Insider » se retrouvent superposés, et donc trop proches l’un de l’autre pour un clic « au doigt ». Une phrase de pré-header pourrait être a joutée, elle convient

aux deux versions. La CTA principal devrait prendre plus de place en largeur, son

positionnement ici n’est pas idéal pour toutes les utilisations du mobile (à une main, à deux mains, …). La page d'atterrissage n'est pas optimisée.

Évaluation Optimisé mobile : + + + Qualité de l’optimisation : + + Personnalisation de l’offre (selon device) : + CTA : + Parcours post-clic : -

65

TRANSAVIA.COME-mailing fluide.

Stratégie adoptée :

Points forts La taille de la police des textes est adaptée sur les deux versions. Le message est concis, et le CTA bien visible occupe la largeur

des écrans. L’alternance texte/images apporte un équilibre certain à la mise

en page.

Axes d’amélioration Il serait intéressant d’a jouter une phrase impactante dans le pré-

header, au-dessus de la phrase renvoyant vers la page miroir. L’image principale pourrait être optimisée pour être plus lisible

après redimensionnement ; en l’état, sur la version « mobile » le texte du CTA n’est pas suffisamment lisible. Le site de destination n’est pas optimisé pour une navigation sur

plateforme mobile.

Évaluation Optimisé mobile : + + Qualité de l’optimisation : + Personnalisation de l’offre (selon device) : + + CTA : - Parcours post-clic : -

66

RECIPE FOR MENE-mailing fluide.

Stratégie adoptée :

Points forts La mise en page est agréable, grâce à un bon équilibre texte/

image. Le CTA est contrasté et aéré. L’information principale est bien concentrée dans la première

partie de l’e-mail, sur les deux versions. La taille de la police des textes est adaptée, sur les deux versions.

Axes d’amélioration Le CTA est présenté trop bas dans l’e-mail, il n’est pas accessible

sans scroll. Il pourrait être placé plus haut avantageusement, sur les deux versions. Les liens en bas de l’e-mail sont très proches les uns des autres,

rendant la navigation difficile sur mobile. Mis à part sur la taille de l’image principale, les deux versions

sont identiques. Le Responsive Design pourrait être davantage exploité. La page d'atterrissage n'est pas optimisée.

Évaluation Optimisé mobile : + + Qualité de l’optimisation : + + Personnalisation de l’offre (selon device) : + + CTA : + + Parcours post-clic : -

67

Conclusion

68

Le Responsive Design peut être appréhendé de deux manières :

La première est directement liée à l’effet de mode. Pour suivre le mouvement, il peut être tentant d’intégrer un e-mailing Responsive pour une nouvelle campagne. Mais sans le cadre d’un projet global et sans analyse préalable, les risques sont grands : une communication appauvrie ou au contraire complexifiée auprès de ses clients et un retour sur investissement négatif sanctionnent souvent l’effet de mode.

Le Responsive Design peut également être abordé comme une opportunité supplémentaire de délivrer le bon message, aux bonnes personnes au bon moment, et quelle que soit la plateforme de lecture, mais attention alors à leur offrir une expérience cohérente au delà du contenu même de l'e-mail.

C’est cette approche qui doit être privilégiée, dans une évolution continue et maîtrisée de la stratégie de communication globale de l'entreprise.

À condition d’avoir de bonnes raisons de le développer, de connaître ses contacts et d’avoir identifié les risques de ce type de projet, le Responsive Design apparaît comme une technique génératrice d'opportunités nouvelles.Mais pas uniquement. Le potentiel de l’e-mailing Responsive réside aussi dans plusieurs atouts majeurs :

C'est un nouvel outil, qui va évoluer avec la stratégie dans laquelle il est intégré. Ce n’est ni un aboutissement ni un objectif final : il doit être conçu au service de la campagne d’e-mailing, et non le contraire.

Il pose des questions incontournables sur un marché en pleine révolution technologique.

Il apporte une réponse esthétique aux nouvelles plateformes de lecture des Internautes, en proposant un e-mailing qui soit beau et adapté, quel que soit le support de lecture.

C'est enfin une ouverture vers de nouvelles perspectives de ciblage, avec des liens de redirection adaptés aux plateformes, une segmentation plus fine de la base de données et une analyse post-routage enrichie.

69

Bibliographie / Webographie

• « Livre Blanc - Design en e-mail Marketing » - Par NP6• « Optimisation des e-mailings » - Session du MailPerformance Users Club• EmailSpotter, logiciel SaaS de veille e-mailing : www.emailspotter.com• http://www.blogdumoderateur.com/internet-mobile-augmentation-duree/• Mediamétrie Mars 2013 / Baromètre du Marketing Mobile en France : 1er trimestre 2013• https://litmus.com/blog/e-mails-opened-on-mobile-start-designing-for-fingers-and-thumbs• http://www.comscore.com/fre/Insights/Presentations_and_Whitepapers/2013/2013_France_Digital_Future_in_Focus2• http://www.blog-eriCSSonfrance.com/2012/09/infographie-selon-le-consumerlab-d%E2%80%99eriCSSon-les-francais-sont-les-plus-

connectes-a-leur-smartphone-dans-les-transports/• http://www.google.com/think/research-studies/the-new-multi-screen-world-study.HTML• http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php• http://www.returnpath.fr/files/Mobile_Infographic_FR.jpg• http://www.bluehornet.com/assets/Report_Consumer-Views-of-E-mail-Marketing.pdf• http://www.e-mailology.org/#1• http://meyerweb.com/eric/tools/CSS/reset/• www.glossaire.infowebmaster.fr/media-queries

Ressources

70