Proposer des emails ergonomiques, quel que soit le support de lecture, est aujourd’hui un enjeu majeur. Face à cette nécessité, deux solutions sont possibles : créer des versions séparées ou opter pour le Responsive Design. Phénomène de mode ou réelle solution miracle nous vous dévoilons les clés du Responsive Design en email marketing. http://www.np6.fr/ressources/livres-blancs/

2. 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. 12
p. 13
p. 18
p. 20
p. 21
p. 22
p. 27
p. 37
p. 46
p. 48
p. 51
p. 60
p. 68
2

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

4. 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

5. 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’ajuster
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

6. 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

7. Pour lire la suite :
http://www.np6.fr/ressources/livres-blancs/
Ce livre blanc est disponible
gratuitement sur notre site !
7