Comment faire un emailing responsive ?
La meilleure solution est de passer au formatage mono-colonne, c’est Ă dire que textes et images seront exactement l’un en dessous de l’autre. Ensuite, il suffit d’appliquer les bonnes CSS pour gĂ©rer correctement le rendu d’affichage entre les diffĂ©rents clients mails (webmail et clients natifs)
Lâemail est lâactivitĂ© la plus populaire sur smartphone, et avec 54% dâouverture sur mobile , il est devenu primordial dâintĂ©grer les campagnes dâemailing responsive dans vos rĂ©flexions « mobile first » dĂ©jĂ entamĂ©es sur la conception des sites Web. Il faut donc penser le format de vos emails pour les clients mails, smartphones, tablettes et desktop. Ceci est dâautant plus important que 80% des utilisateurs suppriment directement un message  si le rendu nâest pas optimisĂ© pour mobile.
En 2020, il est temps de prendre le taureau par les cornes et de lancer des actions immédiates !
SOMMAIRE
Action 1/ Passer au responsive
Action 2 / La méthodologie à suivre
Action 3 /  Comment créer un emailing responsive en 4 étapes
Action 4 / Les bonnes pratiques
Se passer du responsive, le design mobile-only
Le bonus 1 : le simulateur des coûts de routage sur MailChimp
Le bonus 2 : le configurateur de prix Eficiens – Quel budget pour la crĂ©ation d’un emailing ?
Notre FAQ
Action #1 : penser Ă l’email responsive et Ă la newsletter responsive, et optimiser sa campagne email pour tous les Ă©crans
Le Responsive, quâest-ce que câest ? Comment faire un emailing responsive ou une newsletter responsive ?
DĂ©veloppĂ© pour sâadapter Ă la consommation croissante de contenu en multi-Ă©crans, le Responsive web design est une technique de montage de site web, qui permet dâadapter automatiquement la lisibilitĂ© des Ă©lĂ©ments en fonction de lâespace disponible et de la taille des Ă©crans. Le mĂȘme site (la mĂȘme URL) sâaffichera donc de maniĂšre diffĂ©rente, et toujours optimisĂ©e, suivant la taille de la fenĂȘtre, la taille de lâĂ©cran. Quâon soit sur un PC de bureau, un portable, une tablette ou un smartphone. Il en va de mĂȘme pour la taille emailing ou newsletter. Les anglais parlent alors de responsive newsletter .
Â
Le Responsive Design, qui sâappliquait Ă lâorigine aux sites web, se dĂ©cline Ă©galement sur les emails, du fait de lâouverture croissante de ceux-ci sur tablettes et smartphones. Il existe des variantes: Adaptative, Responsive, ou Fluide-Hybride . Dans tous les cas lâidĂ©e est la mĂȘme : garantir un affichage optimisĂ© sur tous les supports , et tous les clients emails , comme dĂ©crit dans les prochains paragraphes.
BĂ©nĂ©fices de l’Emailing Responsive en email marketing
DâaprĂšs un test effectuĂ© par Litmus , un email correctement affichĂ© sur smartphone peut voir son taux de clic augmenter de 130%  par rapport Ă une version non optimisĂ©e. De plus, les chiffres citĂ©s plus haut montrent que lâemail sera rapidement supprimĂ© sâil ne sâaffiche pas correctement sur lâĂ©cran du destinataire. Dans une consommation de plus en plus mobile, il est important dâoptimiser lâaffichage des emails envoyĂ©s.
Lâavantage du responsive design, câest de crĂ©er la page une seule fois. Elle sâadaptera ensuite automatiquement au support sur lequel elle est visualisĂ©e.
Action #2 : s’appuyer sur une mĂ©thodologie solide en emailing et newsletter. Nous vous l’offrons
Au fil des annĂ©es en tant qu’agence emailing , nous avons peaufinĂ© une mĂ©thodologie en crĂ©ation d’emailing et de newsletter que nous vous mettons Ă votre disposition.
Voici les 7 grandes Ă©tapes Ă suivre dans la conception et l’envoi d’un email
ETAPE 1 : dĂ©finir sa stratĂ©gie d’email marketing. CrĂ©ation de la charte Ă©ditoriale, du planning, des objectifs et KPI. Audit prĂ©alable si nĂ©cessaire
ETAPE 2 : phase de templating ou gabarit : crĂ©ation du template ou modĂšle de l’emailing ou de la newsletter. Cette phase est proche de l’UX. On va dĂ©finir des wireframe sous Sketch ou Adobe XD par exemple
ETAPE 3 : rédaction de qualité : accroches percutantes, ton éditorial
ETAPE 4 : direction artistique et création graphique  (en version PC et mobile pour le responsive)
ETAPE 5 : intégration HTML et tests de délivrabilité.
ETAPE 6 : préparation du routage, tests puis routage réel
ETAPE 7 : mesure des performances, analytics et suivi statistique.
Action #3 : créer un email responsive HTML impose de respecter 4 étapes clés
1/ Commencer par repenser son format d’emailing
Un email que ce soit un email informatif ou des emails transactionnels se traitent comme un site web, avec du code emailing HTML.
Comme dans un site web, lâimage joue un rĂŽle prĂ©pondĂ©rant dans lâemail HTML. Mais attention : certains clients emails bloquent les images par dĂ©faut, et dâautres offrent la possibilitĂ© aux utilisateurs de le faire. Parmi les clients emails bloquant les images, citons notamment Apple Mail, Thunderbird et La Poste sur desktop, Gmail, Yahoo ou Outlook.com sur web et mobile. La liste exhaustive des clients emails et de leurs contraintes peut ĂȘtre trouvĂ©e sur le site de litmus . L’utilisation des media queries, la prise en compte du device width sont clĂ©s.
De ce fait, il est important de travailler Ă©galement le texte alternatif  aux images (« alt text ») afin de garantir la fluiditĂ© de lâinformation, quel que soit le support.
2/ Monter un emailâ responsiveââle casse-tĂȘte des tableaux HTML
On « monte » donc un email responsive design comme on « monte » une page en code HTML. Et pour intĂ©grer lâensemble des Ă©lĂ©ments, textes et images, on a beaucoup recours aux tables HTML. Il faut aussi travailler son CSS, ses media queries et ses breakpoints . Cette mĂ©thode prĂ©sente certains risques puisque tous les Ă©lĂ©ments sont intĂ©grĂ©s dans des cases, et quâune erreur sur une case peut impacter lâensemble de lâemail. De plus certains clients emails  peuvent modifier la façon dâinterprĂ©ter les balises HTML, et lâemail ne sâaffichera pas comme souhaitĂ©.
Une fois qu’on a trouvĂ© une bonne combinaison, le mieux est de passer par une phase de template responsive email (appelĂ© aussi framework responsive email). Il sera alors beaucoup plus facile d’envoyer l’email suivant !
Il faut aussi depuis septembre 2019 penser au dark mode email
Cette notion de template newsletter responsive est fondamentale car pour industrialiser votre marketing email et tenir votre planning éditorial, il va falloir aller vite. Et ne pas à chaque fois traquer les bugs de rendu HTML !
3/ Prévoir une version texte
Câest presque paradoxal, mais aprĂšs avoir passĂ© du temps à « mettre en page » la version HTML, il faudra prĂ©voir une version « texte brut », pour garantir la lisibilitĂ© de lâemail sur tous les clients email et dans toutes les configurations. Cette version texte est extrĂȘmement importante pour plusieurs raisons :
accessibilitĂ© (facilitĂ© de lecture, transcripteurs de mail, âŠ) ;
analyse par les filtres spam ;
lecture sur les clients mails ne supportant pas la version HTML (clients mails orientés accessibilité, mais aussi nouveaux supports comme les smartwatches) ;
prĂ©fĂ©rence de certains utilisateurs pour la version simplifiĂ©e (beaucoup de clients mail proposent de dĂ©sactiver lâaffichage HTML).
4/ Tester son email ou sa newsletter responsive, une étape cruciale
Pour vĂ©rifier si lâemail fonctionne sur toutes les plateformes, et pour toutes les tailles dâĂ©cran il faut tester. Heureusement les outils existent, comme litmus ou email on acid . Au-delĂ de la compatibilitĂ© multi-Ă©crans et multi-navigateurs (prendre en compte le fameux device width), des outils supplĂ©mentaires permettront Ă©galement de valider le code, tester les filtres anti-spam, valider les liens. Et ainsi garantir un certain affichage des images. Vous devez Ă©galement tester la dĂ©livrabilitĂ© de votre email, c’est Ă dire sa capacitĂ© de passer Ă travers les filtres antispam des services mail.
Â
Pour bien tester, voici le Top 10 des clients emails, toutes catégories, tel que rapporté par litmus , à fin juillet 2020:
Gmail : 32%âââWeb
Apple iPhone : 30%âââclient natifâââMobileâââiOS
Apple Mail : 11%âââDesktop
Outlook : 10%âââDesktop
Yahoo! Mail : 5%âââWeb
Apple iPad : 2%âââclient natifâââTabletteâââiOS
Samsung Mail : 2%âââMobileâAndroid
Google Android : 1%âââclient natifâââMobile & Tablette
Outlook.com  : 5%âââWeb
Windows Live Mail : 0%âââWeb
Notons que les clients Web ont pu ĂȘtre ouverts sur smartphone ou tablette, Ă travers un navigateur internet. On remarque une forte augmentation de Gmail depuis des annĂ©es, notamment due Ă lâaffichage automatique des images, mis en place dĂšs dĂ©cembre 2013.
Pour garantir le succĂšs de votre campagne responsive emailing, il faudra tester les clients et les formats dâĂ©crans afin de garantir une compatibilitĂ© maximale.
Le Lab Eficiens pour tester vos emails
Action #4 : sâinspirer des bonnes pratiques
Ne pas oublier les fondamentauxâââles bonnes pratiques de lâemail responsive ou de la newsletter responsive
Les sites recensant les « trucs » et bonnes pratiques en matiĂšre dâemailing ne manquent pas. Le site litmus  et le dĂ©veloppeur Lee Munroe  fournissent quelques Ă©lĂ©ments importants :
utiliser un nom dâexpĂ©diteur reconnaissable ;
encourager la réponse directe (éviter les adresses « no-reply ») ;
avoir un sujet percutant , qui amĂ©liorera le taux dâouverture ;
utiliser Ă bon escient lâespace du prĂ©-header , qui sâaffiche dans la plupart des clients mail mobiles et les smartwatches ;
optimiser la lecture en cas de blocage dâimages (texte alternatif )Â ;
utiliser des images en @2x pour les écrans haute résolution (retina) ;
utiliser des tailles de polices de 13px minimumâââ16px recommandĂ©s pour le texte, et 22px pour les titres ;
penser Ă personnaliser lâemail , Ă fournir du contenu utile ;
et ne pas oublier que vos pages dâatterrissage doivent Ă©galement ĂȘtre pensĂ©es en responsive  !
segmenter sa base d’envoi. Plus le ciblage est fin et granulaire, meilleures seront les performances
Enfin, il faut Ă©galement ĂȘtre vigilant sur le poids de lâemail : Gmail a par exemple une limite de 102Ko, au-delĂ de quoi il coupe le message. Et la plupart des filtres anti-spam bloque les emails dâun poids supĂ©rieur Ă 100Ko. Le poids recommandĂ© pour votre fichier complet ne doit pas dĂ©passer 50 Ă 70Ko.
Pour aller plus loin: quelques innovations dans les emails
Les possibilités sont nombreuses. Citons en vrac :
les images dynamiques, mises Ă jour Ă distance par le serveur ; c’est le principe de l’email dynamique
le fond vidĂ©o âââmĂȘme si lâaudience est limitĂ©e (seuls Apple Mail, le client Mail iOS et Outlook 2011 Mac supportent la fonctionnalitĂ©), lâeffet est assurĂ©âââet il existe toujours une solution de repli avec un fonds statique pour les autres clients email ;
alternative Ă la vidĂ©o, le GIF animĂ©  permet dâanimer une petite zone de lâemail tout en assurant une compatibilitĂ© maximale avec les clients mail ;
la lecture sur montres connectĂ©es âââet dans ce cas le « texte brut » est primordial ;
la connexion avec les réseaux sociaux.
ne pas oublier les nouveaux formats comme l’AMP email popularisĂ© par Google (on parle aussi d’email dynamique GMail )
IntĂ©grer les spĂ©cificitĂ©s du Dark Mode Email. C’est Ă dire la possibilitĂ© de continuer Ă consulter correctement l’email mĂȘme quand le smartphone passe en mode sombre, le soir et la nuit
En 2020, faire un emailing ou une newsletter responsive est-il encore une bonne idée ?
Dans un nombre croissant de cas, nous recommandons à nos clients de ne plus faire de responsive ! Non pas pour négliger les plateformes mobiles, au contraire mais pour faire un design mobile only , mono-colonne .
Les avantages sont nombreux : facilitĂ© d’intĂ©gration, focalisation sur l’usage mobile, lisibilitĂ© amĂ©liorĂ©e surtout sur desktop. Le seul inconvĂ©nient est d’avoir des typos « gĂ©antes » sur PC. Dans ce cas, on triche un peu en injectant une pincĂ©e de responsive (Ă un niveau typo) au design mobile-only.
Des exemples de design mono-colonne, mobile-onlyÂ
LE BONUS : LE SIMULATEUR DE COĂTS DE ROUTAGE
[CP_CALCULATED_FIELDS id= »11″ ]
En ce qui concerne le routage plusieurs fondamentaux sont Ă respecter :
La qualitĂ© de la base et sa conformitĂ© absolue au RGPD (notamment via l’obtention d’un consentement opt-in)
La mesure de la performance via des KPI prĂ©-dĂ©finis (les grands classiques sont l’open-rate – ou taux d’ouverture- , le CTR ou taux de clic, l’engagement et le taux de dĂ©sabonnement)
Le paramĂ©trage fin du routage par bassin d’audience ou d’intĂ©rĂȘt. On peut aller plus loin en faisant de l’AB testing, des changements d’heure d’envoi, des changement sur l’objet de l’email, de la personnalisation avancĂ©e
DEUXIĂME BONUS, le calculateur de prix
Essayez c’est trĂšs facile. Avec notre simulateur de budget de campagne emailing , vous pourrez dĂ©finir votre besoin (volume, ce que vous faites et ce qu’on fera, type de rĂ©alisations…) et en 15 secondes , vous obtiendrez un tarif personnalisĂ© pour des newsletters responsive . Et Ă la diffĂ©rence de bien des simulateurs, on ne vous demandera pas un email avant de vous donner le prix et tarif. Vous l’aurez directement.
Calculez votre budget personnalisé en 6 clics
Et pour les Pros du digital qui ont déjà une bonne idée de leurs besoins
Retrouvez Ă©galement notre article complet sur le budget d’une campagne emailing
NOS EXEMPLES ET RĂALISATIONS EN EMAILING ET NEWSLETTER RESPONSIVE
Eficiens accompagne depuis longtemps ses clients vers lâemailing responsive et optimisĂ© pour tous les supports, comme en tĂ©moignent les exemples ci-dessous sur deux campagnes MACSF de 2016. Un article de notre blog vous donne d’ailleurs tous les dĂ©tails sur les enjeux MACSF en emailing .
Exemple newsletter MACSF – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test
Screencast de diffĂ©rents emails / newsletters intĂ©grĂ©s – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test de dĂ©livrabilitĂ© – Outil de routage Campaing Monitor / Hubspot / SalesForce
Emailing Harmonie Mutuelle – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test – Outil de routage NP6
Newsletter MSA – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test – Outil de routage SendInblue
Emailing La Poste – Prestation : conception gĂ©nĂ©rale et intĂ©gration Ă une stratĂ©gie de marketing automation / conception graphique et templating / intĂ©gration HTML responsive / test – Outil de routage et de marketing automation / inbound marketing Zoho
Newsletter Harmonie Mutuelle – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test – Outil de routage NP6
Exemples MACSF – Prestation : conception gĂ©nĂ©rale / conception graphique et templating / intĂ©gration HTML responsive / test – Outil de routage IBM Unica
LA VIDEO DE FRANCIS MAHUT, PATRON DE LâAGENCE DIGITALE EFICIENS
Avoir une stratĂ©gie CRM qui fonctionne sur le digital n’est pas simple. Mais avec des centaines d’emailing et de newsletters rĂ©alisĂ©es depuis 2008, le dirigeant dâEficiens vous explique dans cet article et en video les spĂ©cificitĂ©s de la communication par email. Et surtout comment mieux optimiser ses investissements.
VidĂ©o verticale sous-titrĂ©e – Clic sur les flĂšches ou le carrĂ© pour plein Ă©cran – Video de 1’22â
StratĂ©gie, Projet digital, refonte de site , minisite, dĂ©veloppement â Nous maĂźtrisons l’emailing responsive mais pas que !
Un besoin ? Un conseil ?  Contactez-nous. Nous nous ferons un plaisir dâĂ©changer sur vos enjeux.
DĂ©couvrez aussi tous les autres articles de notre Blog  – Cela parle dâUX, de publicitĂ© digitale et dâassurance notamment. En texte, infographie ou video . Nous sommes une agence web passionnĂ©e par son mĂ©tier.