Dans cet article, on vous explique qu’est-ce qu’un e-mail responsive, et pourquoi c’est si important de faire un courrier électronique mobile friendly. Et pour vous permettre de passer à l’action rapidement, on vous révèle quelles sont les 7 bonnes pratiques à respecter pour faire une newsletter responsive.

Qu’est-ce qu’une newsletter reponsive ?

Une newsletter responsive est une newsletter dont l’affichage s’adapte parfaitement à n’importe quel type de support de lecture numérique (ordinateur de bureau, ordinateur portable, smartphone ou tablette). Sur appareil mobile, l’apparence d’une newsletter responsive sera alors optimisée. C’est pourquoi on utilise parfois le terme de "newsletter mobile friendly ".

Notez que dans le cas d’une newsletter, on parle de responsive design et non d’adaptative design comme pour les pages d’un site web. En effet, une newsletter responsive design s’adapte automatiquement au support sur lequel elle est visualisée : il n’y a pas besoin de créer une autre version spécifique aux mobiles. Les blocs de contenus et les divers éléments (titres, paragraphes et images) se redimensionnent et se restructurent de façon automatique, en fonction de l’espace disponible sur l’écran.

Par exemple, s’il y a deux ou trois colonnes de texte en version desktop, ces blocs vont se réorganiser et s’afficher les uns après les autres sur mobile. Ainsi, l’abonné pourra lire facilement et rapidement l’e-mail, sans avoir à zoomer et/ou à dézoomer plusieurs fois pour bien voir certains éléments.

L’affichage d’une newsletter responsive s’adapte au support de lecture,
que ce soit un ordinateur ou un appareil mobile type smartphone

Pourquoi faire un e-mail responsive ?

Concevoir un e-mail responsive est une question d’accessibilité et d’expérience utilisateur (UX), mais aussi de performance.

En effet, d’après les chiffres fournis par Litmus, près de 42 % des utilisateurs consultent leurs e-mails sur mobile. Si le courrier électronique n’est pas responsive, le contenu risque d’être illisible ou difficile à visualiser pour une grande partie des abonnés. En quelques secondes, certains destinataires peuvent alors décider de supprimer le mail, faute de pouvoir le lire correctement sur leur téléphone portable ou sur leur tablette. L’agacement peut même encourager certains abonnés à se désinscrire de la liste de diffusion ou à signaler le mail comme du courrier indésirable.

Par ailleurs, les e-mails responsive sont nécessairement plus performants que les e-mails qui peinent à s’afficher convenablement sur mobile. Les destinataires lisent plus facilement le contenu, et repèrent plus rapidement les appels à l’action (boutons ou liens cliquables). Selon une étude réalisée par Mailchimp, le taux de clics d’un e-mail sur mobile peut augmenter de 15 % grâce à une conception responsive.

En définitive, faire une newsletter responsive permet :

• d’optimiser l’expérience utilisateur ;
• de renforcer l’intérêt et l’attachement à vos contenus ;
• de prévenir les désabonnements et les plaintes pour spam ;
• d’améliorer le taux de clics et le taux de conversion de l’e-mail.

7 bonnes pratiques pour faire une newsletter responsive design

Adapter l’apparence d’un contenu pour différents supports digitaux n’est pas une mince affaire… L’affichage varie d’un support à l’autre, selon le type d’appareil et la taille de l’écran. Toutefois, il existe quelques règles de base pour vous assurer d’envoyer un e-mail mobile friendly, quel que soit l’appareil utilisé par votre destinataire. Voici 7 bonnes pratiques à respecter pour faire une newsletter responsive design. 

1. Choisir la bonne police pour le texte et les titres

En premier lieu, choisissez une taille de police adaptée afin que l’on puisse lire votre texte et vos titres sans qu’ils soient trop petits ou trop grands. On recommande généralement une taille de texte comprise entre 16 et 18 px pour une lecture optimale sur mobile. En ce qui concerne les titres, vous pouvez aller jusqu’à 22 px.

De même, optez pour une police standard, c’est-à-dire disponible sur n’importe quel support digital ou service de messagerie. Les plus connues sont Arial, Georgia, Times New Roman, Helvetica, Tahoma et Verdana.

➡️ Pour rappel, vos polices d’écriture doivent être choisies en fonction de votre identité visuelle. Vous devez donc définir votre typographie (polices de caractère et taille des différents éléments textuels) lors de l’élaboration de votre charte graphique de newsletter.

2. Rédiger un objet d’e-mail de moins de 55 caractères

Gare aux objets d’e-mails trop longs : s’ils s’affichent entièrement sur un écran d’ordinateur, ce ne sera pas forcément le cas sur le petit écran d’un smartphone ! Pour éviter que le titre du message électronique soit coupé, il est donc conseillé de ne pas dépasser les 55 caractères.

3. Utiliser les modèles de newsletters responsive disponibles dans votre outil d’e-mailing

Au lieu de partir de zéro, vous avez la possibilité d’utiliser des modèles de newsletters responsive mis à disposition par votre plateforme d’e-mailing. Autrement dit, des templates tout prêts qui s’adaptent automatiquement sur n’importe quelle taille d’écran. Pas besoin de toucher au code HTML du mail !

Même si votre bibliothèque de templates regorge de modèles en tous genres et que vous avez envie de tout essayer, privilégiez tout de même un design minimaliste et épuré pour être le plus possible mobile friendly.

➡️ Le combo parfait pour rédiger des newsletters facilement et rapidement : designer votre mail grâce aux modèles proposés par votre autorépondeur, et écrire le texte à partir des 51 templates de newsletters de notre Pack e-mailing Ultime. En moins de 2 heures par mois, vous pourrez mettre en place une newsletter hebdomadaire qui génère plus de ventes et donc plus de chiffre d’affaires.

4. Hiérarchiser, organiser et aérer le contenu au maximum

Sur ordinateur ou sur mobile, la règle reste la même : votre contenu doit être agréable et facile à lire. Cependant, il est beaucoup plus difficile de créer du contenu attractif dès lors que la taille de l’écran modifie l’apparence du message… Tout a l’air beaucoup plus "tassé", en particulier si vous écrivez de longues phrases et que vous mettez de gros pavés en guise de paragraphes.

Pour faire une newsletter mobile friendly, nous vous recommandons ainsi :

• De faire des phrases courtes.
• D’aérer le texte au maximum.
• De mettre les informations les plus importantes en début de newsletter (dans le contenu principal ou dans un encadré en en-tête du mail).
• D’insérer des marges de chaque côté du texte.
• De personnaliser les boutons de newsletter pour qu’ils soient bien visibles (taille et couleurs).
• D’organiser le contenu en différentes parties bien distinctes, avec des encadrés ou des lignes de séparation.

➡️ Vous ne savez pas trop quoi mettre dans votre newsletter, ni comment l’organiser ? Une petite piqûre de rappel s’impose : découvrez ce que doit contenir une newsletter pour capter l’attention et engager vos abonnés.

5. Optimiser les images

Si vous voulez créer une newsletter responsive design, vous devez également respecter trois règles pour vos visuels (illustrations, photos, gifs ou infographies) :

1. Veillez à ce que la largeur de l’image soit comprise entre 400 et 650 pixels.
2. Faites attention à ce que le poids de l’image n’excède pas 300 ko.
3. Renseignez le texte alternatif en décrivant rapidement ce qu’il y a sur l’image (cette description remplacera le visuel si jamais il ne se charge pas).

6. Vérifier le poids total de l’e-mail

Certains services de messagerie électronique peuvent bloquer les courriels qui ont un poids excessif (les considérant comme des spams), ou raccourcir le message pour un affichage sur mobile. Par exemple, Gmail coupe systématique l’e-mail si son poids de code est supérieur à 102 ko. Le destinataire doit cliquer sur un lien afin d’afficher le contenu dans sa totalité, ce qui demande un effort supplémentaire !

Qui plus est, le poids d’une newsletter a une incidence sur le temps de chargement : plus elle est lourde, plus elle mettra du temps à s’afficher, ce qui peut dissuader les utilisateurs les plus pressés.

Pour faire une newsletter responsive, il est donc conseillé de vérifier que le poids total de l’e-mail soit compris entre 50 et 70 Ko.

7. Prévisualiser l’e-mail avant de l’envoyer

Enfin, sachez que dans la plupart des logiciels d’e-mailing proposent une fonctionnalité de prévisualisation ("Preview" ou "Aperçu" en français) pour vérifier que votre e-mail soit parfaitement lisible sur appareil mobile. Vous pourrez alors consulter la version ordinateur et la version mobile.

Et voilà, vous savez désormais comment faire une newsletter responsive design et mobile friendly ! Avec de bons outils et une méthodologie rigoureuse, vous pourrez créer des e-mails responsive, parfaitement optimisés pour l’expérience utilisateur et beaucoup plus performants. Dans le doute, n’hésitez pas à faire des tests sur différents types d’appareils et en ouvrant vos mails depuis divers services de messagerie (Gmail, Microsoft Outlook, Yahoo Mail ou encore Apple Mail).

➕ Besoin d’aide pour vos newsletters ? Faites-nous part de vos besoins en réservant un appel découverte avec Alexandrina, la fondatrice de notre agence e-mailing. Nous proposons différentes prestations pour vous aider à scaler votre business grâce à l’e-mail marketing : rédaction, automatisation, audit ou encore élaboration d’une stratégie sur mesure.