UX & créa
25 juin 2018
25minutes

Comment faire en 2020 un emailing responsive qui cartonne ?

 

 

En 2020, si votre email marketing n’est pas responsive, un bon conseil : ne les envoyez pas ! Nous allons donc voir comment faire une newsletter responsive efficace.

 

 

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

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 au responsive email et responsive newsletter, et optimiser sa campagne email pour tous les écrans

Le Responsive, qu’est-ce que c’est ? Comment faire un emailing 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.

 

realiser newsletter

 

TĂ©lĂ©chargez en PDF haute rĂ©solution cette mĂ©thodologie  

 

 

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 — 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, et ses media queries. 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, 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 litmusou 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 garantir un certain affichage des images (par ex. mozify). 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 février 2017:

  1. Apple iPhone : 31% — client natif — Mobile — iOS
  2. Gmail : 21% — Web
  3. Apple iPad : 11% — client natif — Tablette — iOS
  4. Google Android : 8% — client natif — Mobile & Tablette
  5. Apple Mail : 7% — Desktop
  6. Outlook : 6% — Desktop
  7. Outlook.com : 5% — Web
  8. Yahoo! Mail: 2% — Web
  9. Windows Mail : 1% — Desktop
  10. Windows Live Mail: 1% — Web

Notons que les clients Web ont pu ĂȘtre ouverts sur smartphone ou tablette, Ă  travers un navigateur internet. On remarque une forte baisse du client desktop Outlook depuis 2013, qui passe de 14% Ă  9% en 2015, puis 6% en 2017, et une forte augmentation de Gmail, notamment due Ă  l’affichage automatique des images, mis en place en 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.

 

lab de test emailing eficiens

Le Lab Eficiens pour tester vos emails

 

Action #4 : s’inspirer des bonnes pratiques

Ne pas oublier les fondamentaux — les bonnes pratiques de l’emailing 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 iOS10 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 dark le soir et la nuit

 

LE BONUS : LE SIMULATEUR DE COÛTS DE ROUTAGE

 

BUDGET DE ROUTAGE AVEC MAILCHIMP

Simulation non contractuelle, basée sur la page Tarifs de Mailchimp : https://mailchimp.com/pricing/calculator/standard/?currency=EUR
Plus d'informations sur https://www.eficiens.com/privacy/
Envoyer

 

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

Chargement en cours...

 

Retrouvez également notre article complet sur combien coûte un emailing ?

 

NOS EXEMPLES ET RÉALISATIONS EN EMAILING 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 integration emailing responsive

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


 

 

exemple emailing harmonie mutuelle 3

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.

 

 

Nouveau call-to-action

Vous avez aimĂ© ? Notez-nous !