DossierDes e-mails 100 % lisibles
Pour voir vos messages sur tous les écrans, passez au responsive design !

Sommaire
1 Multi-écran : du Web au smartphone
Près de 45 % de la population française de 11 ans et plus (*) possèdent un smartphone. Parallèlement, près de 20 % des foyers français sont équipés de tablettes.
Dès lors, on comprend aisément que la consultation sur smartphone comme sur tablette des e-mails soit courante. Selon l'étude "E-mail marketing attitude", le taux de consultation sur tablette en 2013 a doublé par rapport à 2012, atteignant 22 %. Sur smartphone, il a augmenté de 6 points, atteignant aujourd'hui 38 %. Et ce n'est qu'un début.
Dès lors, proposer au lecteur un e-mail au design adapté, avec une navigation verticale, des blocs lisibles sans zoom manuel, des liens accessibles du bout des doigts... devient obligatoire. D'autant qu'un autre chiffre révélé par l'étude du SNCD doit être pris en compte : 59 % des internautes cherchent désormais le lien de désabonnement (+ 17 points par rapport à 2012) pour interrompre la communication avec la marque au lieu de supprimer les messages sans les lire (- 17 points par rapport à 2012).
L'enjeu est désormais de rester lisible et en relation. Vous voilà prévenus !
(*) Source : Mobile Marketing Association France, en partenariat avec ComScore, GfK et Médiamétrie, juin 2013.
L'expert (@messagebusiness)
Vincent Fournout Directeur associé et cofondateur de Message Business
Vincent Fournout a fondé La Mine en 1996, agence de communication spécialisée dans les contenus digitaux. Il s'est ensuite attelé, en 2006, au développement de Message Business, une solution en mode SaaS dédiée au marketing direct en ligne.
Vos e-mails sont-ils lisibles sur tout type d'écrans ?
2 Les enjeux du responsive design
- Adaptez-vous
Les terminaux mobiles proposent une très grande diversité de taille et de définition d'écran.
Premier point essentiel : s'inscrire dans une logique où l'information affichée dépend de la taille de l'écran, qui est exprimée en pouces (NDLR : 1 pouce correspond à 2,54 cm). Ainsi, vous devez considérer qu'une application pour périphérique mobile doit être lisible sur toutes les tailles d'écran. Ce dernier peut faire de 3 à 10 pouces sur un mobile (de 7 à 10 pouces pour une tablette tactile). Un site web est ainsi visualisé sur des périphériques allant de 3 à 17 pouces, quand ce n'est pas plus ! Mais un site "classique" ne peut être affiché dans de bonnes conditions sur des écrans inférieurs à 7 pouces. Admettez donc dès le début que l'information doit être lisible dans le message lui-même !
- Analysez et mesurez
Dans toute stratégie marketing, mieux vaut éviter d'être manichéen. Avant de décider de passer l'ensemble de vos e-mails en responsive design, prenez le temps de vous interroger sur le mode de consultation des destinataires et de comprendre leurs attentes. Pour cela, il faut effectuer une analyse précise des remontées statistiques de vos précédents envois. Puis de tenter de connaître aussi précisément que possible la part de vos messages ouverts et lus sur des terminaux mobiles.
- Pensez stratégie !
Votre cible lit vos messages sur des terminaux mobiles, vous envisagez de les basculer en responsive design et vous avez raison. Mais que se passe-t-il après leur consultation ?
Commencez par analyser les logs des sites vers lesquels pointent vos e-mailings. Vos lecteurs consultent souvent leur courrier sur leur mobile pour les trier et les lire ensuite sur un ordinateur classique. Si ce n'est pas le cas, passez au responsive design de manière globale, y compris pour vos sites web !
Vous devez donc pousser votre réflexion jusqu'au bout du processus et vous demander alors si votre site est aisément consultable sur les périphériques nomades. Votre plateforme peut être déclinée dans une version mobile ou être repensée globalement en responsive design, ce qui représentera un surcoût non négligeable. Mais comment faire autrement ?
- Budget prévisionnel
Après une analyse des remontées statistiques de vos dernières campagnes, et en fonction des logs de vos sites et autres points de contact suscités par vos derniers envois, il est primordial de mesurer le ROI potentiel d'une migration vers le responsive design. Celle-ci implique nécessairement un effort financier qu'il ne faut pas négliger, surtout pour le premier envoi.
En effet, ce dernier exige non seulement que vous investissiez dans le code HTML, mais aussi dans la conception même de l'information. On peut ainsi considérer qu'optimiser un e-mailing en responsive design coûte en moyenne deux fois plus cher qu'en HTML classique.
- Pensez évolution
Vous n'êtes pas encore convaincu ? Vous pensez tout simplement qu'une migration massive pourrait mettre en danger votre équilibre budgétaire ? Pourquoi ne pas modifier la conception de vos e-mailings sans pour autant investir démesurément dans le responsive design ?
En modifiant la mise en forme de vos messages afin qu'ils soient plus lisibles sur des terminaux mobiles, vous pourrez mesurer l'efficacité de la démarche. Commencez par réfléchir à la teneur du message avant même de penser à sa mise en forme. Soyez plus impactant, plus précis.
- Petits budgets, ne vous abstenez pas
L'un des chantiers les plus simples à réaliser et les moins coûteux à mettre en oeuvre consiste à adapter vos e-mails à une consultation sur mobile. La première démarche nécessite de renoncer à la conception des e-mails dans un format multicolonne. Les smartphones sont principalement utilisés en mode portrait pour consulter les courriers électroniques. Aussi devez-vous privilégier une mise en forme en mode colonne unique. La lecture sera plus linéaire, c'est indéniable, mais le destinataire n'aura aucun effort à faire pour consulter l'intégralité du message.
- Simplifiez !
Pour compléter la démarche et agir plus en finesse sans vous ruiner, effectuez ces petits ajustements a priori anodins mais qui renforceront l'efficacité des messages consultés sur mobile.
Pensez à augmenter la taille des titres (avec une police supérieure à 20 pixels) et celle des liens cliquables. Ces derniers sont déterminants car ils constituent l'action-clé. Si le destinataire ne parvient pas à activer le lien, vous perdez le bénéfice de votre démarche. Par ailleurs, sur un mobile, le lecteur va à l'essentiel. Par conséquent, vous devez réduire le nombre d'images.
L'écran des smartphones affiche en général une largeur de 600 pixels au maximum. Sachez que plusieurs terminaux Android n'afficheront que 400 pixels, ce qui induit une navigation horizontale dans le message, tandis que les iPhone adapteront leur affichage avec un rendu immédiatement correct. Attention : les terminaux Android sont majoritaires sur le marché...
Avant de vous lancez dans le responsive design il est nécessaire de vous interroger sur le mode de consultation de vos destinataires
3 Un responsive design stratégique
- Utilisez les remontées pour décider
Après ce premier travail d'adaptation de vos contenus, prenez à nouveau le temps d'analyser l'efficacité de votre démarche. Analysez le taux d'ouverture et le taux de consultation du site Web suite à l'envoi de l'e-mailing.
Si les retombées sont fortes à la fois en termes d'audience et de transformation, vous pouvez envisager une vraie migration vers le responsive design.
- Segmentez pour toucher !
La segmentation des envois est une des règles de base de l'e-mailing. Elle est encore plus déterminante lorsque l'on s'inscrit dans une démarche responsive design. Compte tenu du surcoût impliqué par ce mode de conception des messages, il peut être judicieux de ne l'employer que pour certains contenus : les plus porteurs de profit a priori. Limitez l'emploi du responsive design aux envois destinés à générer du chiffre d'affaires supplémentaire (une information sur une promotion, par exemple). Pour le reste, soyez pragmatique !
- Ne vous brûlez pas les ailes !
Le responsive design doit apporter une meilleure rentabilité à chacun de vos envois. Mais le budget nécessaire peut parfois freiner la capacité à faire évoluer et à multiplier les contenus. Ne cherchez pas à aller trop vite, trop haut et trop loin. Plus votre message est simple, plus sa lisibilité est optimale. Mais simplicité n'est pas simplisme ! Pensez toujours à la valeur que vont générer vos envois.
- Testez et apprenez
Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement différent des webmails (tels Gmail, Yahoo Mail, Hotmail, Outlook...). Ces derniers imposent des règles strictes concernant le code HTML et les CSS contenus dans les e-mails car les messages sont eux-mêmes affichés dans une structure de page web qui possède ses propres styles.
Le jeu s'avère encore plus complexe avec les applications de messagerie électronique des terminaux mobiles. En effet, les applications d'acteurs majeurs comme Yahoo Mail, Gmail ou encore Outlook Exchange pour Android ne sont pas compatibles avec le responsive design.
Avant l'envoi, il faut tester le comportement des différentes applications par rapport à vos messages en responsive. Une fois encore, ce qui compte dans cette démarche est le test and learn. Vous apprendrez en marchant.
- Perdu, pas perdu
Quand le destinataire de votre message utilise une application que n'interprète pas le responsive design, le client est-il pour autant perdu ? Il ne bénéficie simplement pas du contenu optimisé pour un terminal mobile. Une raison de plus pour proposer des contenus associés adaptés (un site mobile ou un site responsive, par exemple.)
- Conservez vos vieux réflexes
Intégrez dans votre message un lien qui permette à l'utilisateur de le visualiser dans le navigateur, vous lui épargnerez les déboires d'un client mail qu'il n'a pas toujours choisi. Veillez aussi à inclure une version du message au format texte brut (en effet, un même envoi peut contenir de façon combinée la version HTML et l'alternative en texte simple), qui sera plus lisible et plus accessible selon le client mail et ses réglages. Bref, prévoyez toujours une solution de repli.
- Gare aux images
Fonder une newsletter sur des images vous évite les problèmes de compatibilité entre les différents clients de messagerie (lesquels interprètent tous les images). Cependant, celles-ci sont rarement affichées par défaut. L'utilisateur doit activer un lien qui les affiche.
Vous prenez donc le risque, en les multipliant, que le destinataire passe à côté. Par précaution, évitez de mettre trop d'images et peu de texte, sous peine que vos informations ne soient jamais lues. En effet, même si les opérateurs fanfaronnent avec leur 4G, n'oubliez pas qu'en situation de mobilité (dans le métro parisien, par exemple), les débits sont généralement minimes.
- Résistez à la tentation !
Méfiez-vous de la suroptimisation et évitez de miser sur des comportements trop spécifiques sur mobile, au risque de perdre en route ceux qui consultent vos messages sur PC ou Mac. Le responsive design n'est pas une recette miracle, l'optimisation de vos campagnes par la segmentation et le ciblage reste bien entendu fondamentale.r
Concentrez-vous sur les opérations susceptibles de vous offrir le meilleur ROI
4 L'e-mailing mobile par l'exemple
- Étape 1 : testez le responsive
Vous souhaitez vous mettre en condition et concevoir un prochain e-mailing spécifiquement pour vos clients mobiles ? Avant de débourser des sommes importantes, faites un test grandeur nature. Connectez-vous sur : campaignmonitor. Commencez par choisir le type de message à concevoir, quatre types de newsletters sont proposés.
- Étape 2 : composez votre message
Créez votre message comme vous avez l'habitude de le faire en définissant la charte graphique. Adaptez pour chaque zone, dans le volet de gauche, les codes couleurs. Personnalisez ensuite les textes et, bien évidemment, optez pour la version française en ce qui concerne les invitations à rejoindre une page Facebook, des liens de désinscription...
- Étape 3 : passez en version mobile
Vous cherchez à savoir à quoi ressemblera votre e-mail sur un téléphone mobile ? Pour ce faire, dans la partie centrale de votre écran, placez l'interrupteur sur l'icône symbolisant un smartphone. L'aperçu est immédiatement généré. C'est à vous maintenant d'enrichir le modèle en définissant texte et codes couleurs. Vous pouvez ici tester plusieurs compositions de votre choix et revenir si besoin en arrière.
- Étape 4 : lancez votre e-mailing
Cliquez sur "Finish & save Template" et remplissez le formulaire. Saisissez le nom de l'expéditeur, une adresse e-mail etc. Puis choisissez un mot de passe et validez la création du compte test. Vous pouvez maintenant effectuer les ajustements finaux et surtout importer une liste de destinataires à qui vous pourrez envoyer votre message en responsive design.
Et si nous vous proposions un moyen gratuit pour tester en "grandeur nature" un e-mailing en responsive design ? Pour cela, rien de plus simple, suivez notre guide !
5 Pour en savoir plus...
Les opportunités du Responsive Design
L'éditeur de logiciels d'e-mailing, NP6, considère que le responsive design offre une opportunité supplémentaire de délivrer le bon message, aux bonnes personnes au bon moment.
Pour une campagne d'e-mailing efficace : pensez responsive design
Ce n'est plus un secret : 2013 ouvre l'ère de la mobilité. L'institut Gartner a récemment confirmé la baisse, pour le troisième trimestre consécutif, des ventes de PC en Europe de l'Ouest.
De l'importance du responsive design dans le marketing mobile
Le marketing mobile en B to B est désormais inévitable. Mais quelle place accorder au "responsive marketing" ? Et qu'est-ce donc au juste ? L'infographie, réalisée par l'agence b2b, et proposée ci-dessous, apporte des réponses.
Pour plus d'information sur la lisibilité de vos e-mails, nous vous invitons à consulter ces liens complémentaires
Sur le même thème
Voir tous les articles Marques