25 juin 2018
8minutes

Emailing et newsletter responsive : 5 actions immédiates à entreprendre pour que vos lecteurs soient captivés !

 

En 2019, 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.

Il est temps de prendre le taureau par les cornes et de lancer des actions !

 

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 ?

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, 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. 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 !

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

 

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.

 

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 !

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)

Des exemples de campagnes responsive email ou newsletter responsive réussies

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.

Expression visuelle, les emails responsive ont trouvé leur place sur Pinterest, avec plusieurs tableaux recensant des centaines d’exemples très parlants.

 


 

Pour aller plus loin

Une video très technique (code HTML inside !)

 

Stratégie, Projet digital, 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 !