Flexmail logo
  • Comment ça fonctionne
  • Prix
  • Centre de connaissances
  • Support
  • Notre histoire
S'identifierEssayez-le gratuitement

Conception de messages pour clients de messagerie

Temps de lecture: 17 minutes
Stratégie, Conseils
Écrit par:
Anneleen Scheepers
 29-04-2019

Approche flexible des clients de messagerie

Imaginez : vous êtes en train de finaliser d’arrache-pied votre campagne par e-mail. Vous créez un message au design attrayant grâce aux fonctionnalités dont vous disposez dans Flexmail. Vous êtes particulièrement satisfait(e) du résultat, en dépit du fait que vous ne soyez pas parvenu(e) à intégrer certains éléments de votre design dans votre campagne par e-mail. Et vous savez pourquoi (Vous ne le savez pas ? Dans ce cas, lisez absolument la suite.). Vous cliquez sur Envoyer, vous planifiez l’envoi pour un moment ultérieur ou vous procédez encore en vitesse à un test A/B. Après l’envoi définitif, vous remarquez que votre campagne par e-mail n’est pas correctement délivrée ou lue. Que de temps et d’énergie perdus… Tel est du moins notre avis.

La situation que nous venons de décrire arrive fréquemment, même aux meilleurs spécialistes du marketing. Lors de la création d’une campagne par e-mail, il est donc essentiel de tenir compte des facteurs qui influencent le rendement et la délivrabilité de votre message. Un aspect important à cet égard est le support offert par les clients de messagerie. Comme vos contacts utilisent différents clients de messagerie sur différents appareils, il est indispensable de tenir compte des directives différentes de chaque client de messagerie.

Vous avez déjà été confronté(e) à une telle situation ? Ou vous tenez à éviter à tout prix de vous y retrouver confronté(e) à l’avenir ? Ce whitepaper est alors votre meilleur allié. Flexmail met tout en œuvre pour garantir un affichage optimal dans tous les clients de messagerie, et c’est la raison pour laquelle nous ne proposons pas certains éléments de design. Lisez ce whitepaper et apprenez à faire preuve de flexibilité à l’égard des clients de messagerie.

Le design de vos messages convient-il aux clients de messagerie de vos contacts ?

Stop ! Avant de commencer à ajouter ou supprimer de manière inconsidérée des éléments de design, faites en sorte de savoir exactement quels clients de messagerie vos contacts utilisent le plus. Concevoir des e-mails en tenant compte de tous les clients de messagerie qui existent serait en effet peine perdue. Épargnez-vous donc ces efforts inutiles et concentrez-vous exclusivement sur les clients de messagerie que vos contacts utilisent le plus. De cette manière, vous aurez la certitude que la majorité de vos contacts verront apparaître vos e-mails correctement.

Pour savoir quels clients de messagerie la plupart de vos contacts utilisent, le plus simple est de consulter dans l’application Flexmail les rapports de vos envois précédents. Cliquez sur « E-mail clients » et les informations requises au sujet des clients de messagerie apparaîtront, avec leurs taux d’utilisation respectifs.
Une fois que vous connaissez cette donnée, vous pouvez optimaliser vos e-mails en fonction de ces clients de messagerie couramment utilisés. À partir de là, vous pourrez offrir à vos contacts une meilleure expérience et augmenter leur engagement à travers les taux d’ouverture, de cliquage et de conversion.

Quelques faits…

  • L’iOS Mail d’Apple et Gmail restent les clients de messagerie les plus populaires, disposant de la plus grande part de marché.
  • iPhone (29 %), Gmail (27 %) et iPad (9%) constituent le top 3 des clients de messagerie les plus utilisés en 2018
  • Outlook a toujours le vent en poupe et a vu sa part de marché évoluer de 8 % en décembre 2018 à 9 % en janvier 2019.
  • Les appareils mobiles restent l’environnement le plus populaire pour la lecture des e-mails. En décembre 2018, environ 43 % des e-mails ont été ouverts sur des appareils mobiles.
  • Fin 2018, 39 % des e-mails étaient ouverts par le biais d’un client webmail et 18 % au moyen de clients de messagerie desktop.
  • Un constat frappant : les ouvertures par le biais d’un client webmail ont augmenté de 3 % en 2018. ail openingen zijn doorheen 2018 gestegen met 3 percentagepunten. Een opv
Graphique montrant les résultats du Rapport Litmus State of Email sur les clients de messagerie


Les clients de messagerie utilisés peuvent différer d’un secteur à l’autre et d’une marque à l’autre. À vous de recueillir des informations sur les clients de messagerie et appareils qui sont populaires auprès de votre public.


Tout ce que vous devez savoir sur les clients de messagerie les plus utilisés du moment

Ne pensez-vous pas que votre travail s’en trouverait considérablement simplifié si vous saviez quels clients de messagerie affichent correctement les éléments de design que vous utilisez ? Découvrez dans la suite de cet article les possibilités et les limitations des clients de messagerie les plus utilisés du moment.

Apple iOS Mail

Le client de messagerie le plus populaire, Apple iOS Mail, soutient un relativement grand nombre d’éléments de design, que ce soit sur un iPhone, un iPad ou un Mac. Il soutient notamment :

  • les émoticons dans la ligne de sujet,
  • les « preheaders »,
  • les vidéos HTML5,
  • les fichiers GIF animés,
  • les textes « alt » mis en forme,
  • les images de fond,
  • les polices de caractères web.
Il est important de garder à l’esprit que chaque client de messagerie dispose d’une police de caractères standard qui, pour l’une ou l’autre raison, pourra être utilisée à la place de la police de caractères web que vous avez choisie. Dans le cas d’Apple iOS Mail, il s’agit de la police Helvetica.

L’élément de design qu’Apple iOS Mail ne soutient pas est l’intégration de liens internes dans un e-mail. De plus, il est intéressant de savoir qu’aucun des clients de messagerie tournant sur un système d’exploitation iOS ne soutiendra les liens internes. Autrement dit, les liens internes ne s’afficheront pas correctement sur un iPhone, un iPad ou un Mac.

Gmail

Gmail est le deuxième client de messagerie en termes de popularité et supporte tout comme Apple iOS Mail les émoticons dans la ligne de sujet, les « preheaders », les fichiers GIF animés et les textes « alt » mis en forme. En prime, il soutient aussi les liens internes pour autant que le système d’exploitation utilisé le permette.

Il convient toutefois d’y réfléchir à deux fois avant d’insérer des émoticons dans la ligne de sujet. En effet, lorsque vous ouvrez un e-mail sur un iPhone, vous verrez s’afficher les émoticons Apple standard dans la ligne de sujet, mais les Goomojis ne s’afficheront que dans le message proprement dit (Si vous l’ignoriez, sachez que les « Goomojis » sont les émoticons propres de Gmail.). On obtient ainsi un mélange quelque peu dérangeant de plusieurs styles : les émoticons standard du système d’exploitation dans la ligne de sujet et les émoticons de Gmail dans le message lui-même.

Il existe encore quelques autres points à prendre en compte pour ce client de messagerie. Gmail ne soutient pas les vidéos HTML5, les images de fond ni les polices de caractères web. De plus, les e-mails excédant 102 kb sont coupés. Il est donc essentiel de se limiter au contenu indispensable dans les e-mails destinés au client de messagerie Gmail, et d’éviter les éléments de style inutiles. Ce sont en effet les longs textes et les options de mise en forme qui alourdissent un e-mail.

Outlook (2019)

S’il n’est peut-être pas le plus populaire des clients de messagerie, Outlook n’en est pas moins celui qui est installé par défaut dans pour ainsi dire tous les environnements de travail. Microsoft a déjà commercialisé plusieurs versions d’Outlook, dont la dernière est Outlook 2019. Tenez donc compte que les possibilités et limitations qui suivent peuvent différer en fonction de la version d’Outlook qui est utilisée.

Outlook 2019 permet d’intégrer des émoticons dans la ligne de sujet, d’utiliser des « preheaders », d’insérer des liens internes et d’ajouter des textes « alt » à toutes les images. Par contre, la nouvelle version d’Outlook ne supporte toujours pas un nombre assez important d’éléments de design, à savoir :

  • les vidéos HTML5,
  • les fichiers GIF animés,
  • les images de fond,
  • les textes « alt » mis en forme,
  • les polices de caractères web,
  • Border Radius.
Border Radius permet d’arrondir les angles d’un bouton, mais Outlook n’est malheureusement pas en mesure d’afficher des angles arrondis. Outlook affiche la hauteur des lignes différemment, de sorte que les angles arrondis redeviennent droits.

De plus, Outlook a tendance à supprimer les liens qui se trouvent dans des e-mails lorsqu’il les reconnaît comme incomplets. Il est possible d’éviter ce problème en veillant à ce que chaque lien contienne « http » et/ou « www ».

Dans les versions plus anciennes d’Outlook, Times New Roman était la police de caractères standard adoptée lorsque les polices de caractères web n’étaient pas acceptées, indépendamment de la police de caractères configurée comme solution de rechange. Autrement dit, lorsqu’une police de caractères (web) n’était pas acceptée, Outlook la modifiait lui-même en Times New Roman – au grand dam des designers expérimentés. Depuis 2019, Outlook reconnaît toutefois la police de caractères configurée comme solution de rechange. Pour beaucoup, cette mise à jour est la plus réussie lancée jusqu’ici.

Yahoo! Mail

Les possibilités de design supportées par Yahoo! Mail sont parfaitement comparables à celles de Gmail. Tout comme Gmail, Yahoo! Mail pose quelques défis au designer. Il ne soutient par exemple pas les vidéos HTML5, les images de fond ni les polices de caractères web. Par contre, les « preheaders », les fichiers GIF animés et les liens internes s’affichent correctement. Il est en outre possible également d’ajouter des textes « alt » aux images. Le fait qu’ils puissent ou non être mis en forme dépend du navigateur web.

Don’t worry, be flexible.

Certes, les clients de messagerie ont leurs limitations, mais il n’y a pas de raison de céder à la panique. Parfois, des astuces simples permettent de tout simplement faire preuve d’une flexibilité qui permettra à vos e-mails d’offrir malgré tout une excellente expérience à vos contacts dans tous les clients de messagerie, indépendamment de leurs limitations.

Paramétrer une largeur standard

Un e-mail ne peut pas être trop large. Pourquoi ? Parce que le contenu de l’e-mail doit pouvoir être cadré sur différents appareils. Une largeur standard entre 600px et 700px est recommandée. Dans l’application Flexmail, la largeur standard est paramétrée à 700px afin d’obtenir un design « responsive ». Il n’est donc pas nécessaire de l’élargir davantage. Cette largeur standard est suffisante pour doter votre e-mail de tout le contenu souhaité et convient à la plupart des clients de messagerie webmail, desktop et mobiles.

Un design « responsive » de maximum 700px de large évite à vos contacts de devoir faire défiler l’écran horizontalement et leur permet de parcourir votre contenu d’un seul mouvement. Tenez compte que le contenu qui n’est pas visible du premier coup d’œil ne sera pas lu.

Insérer un lien « View in browser » dans le « (pre)header »

Un lien « View in browser » permet à vos contacts d’afficher l’e-mail sous la forme d’une page web. Lorsque vos contacts ouvrent l’e-mail et rencontrent des problèmes d’affichage, ils peuvent ainsi aisément ouvrir l’e-mail dans leur navigateur. Et l’affichage dans le navigateur est totalement indépendant du client de messagerie utilisé…

Le lien « View in browser » doit donc être immédiatement visible. Si votre e-mail ne s’affiche pas correctement, vos contacts ne chercheront pas longtemps la solution. Votre « (pre)header » est dès lors l’endroit idéal pour insérer ce lien.

Le lien « View in browser » n’est pas obligatoire dans l’application Flexmail, mais son utilisation est néanmoins vivement recommandée. En tant qu’utilisateur de Flexmail, vous pouvez ajouter vous-même le tag #show_in_browser# ou paramétrer le « header » standard contenant le message « Affichez ce message dans votre navigateur ».

Ajouter un « preheader »

Le « preheader » ajoute du contexte à la ligne de sujet pour convaincre vos contacts d’ouvrir votre e-mail. Avec la ligne de sujet, le « preheader » est le premier contact entre le destinataire et l’e-mail qui arrive dans sa boîte de réception. Souvent, le « preheader » contient un bref résumé, un lien vers l’affichage de l’e-mail dans le navigateur, un « call to action » et/ou un complément à la ligne de sujet.

Veillez à ce que votre « preheader » soit bref et concis. Les clients de messagerie les plus fréquemment utilisés affichent le « preheader » sous la ligne de sujet dans la boîte de réception de vos contacts. La longueur de la partie visible du « preheader » dépend du client de messagerie et du format de l’écran de l’appareil utilisé. Lorsqu’un « preheader » est trop long, le client de messagerie coupe le reste. Lorsqu’un « preheader » est trop court, le client de messagerie prend automatiquement la suite du texte du corps HTML de l’e-mail.

Quels clients de messagerie affichent un texte de preheader et quel est le nombre moyen de caractères


Vous ajoutez un « preheader » et un lien « View in browser » à votre e-mail, mais vous voulez que seul le « preheader » s’affiche sous le sujet dans la boîte de réception ? Il vous suffit de placer le « preheader » avant le lien « View in browser » ou au-dessus du lien « View in browser » dans votre e-mail.


Ajouter des textes « alt » à toutes les images

Il est fréquent que les images d’un e-mail ne soient pas chargées ou ne puissent pas l’être. D’une part à cause des clients de messagerie qui bloquent automatiquement les images pour éviter les spams, et d’autre part en raison des paramètres choisis par les destinataires eux-mêmes. Pour éviter que votre e-mail n’atterrisse directement dans la corbeille, il est essentiel d’ajouter des textes « alt » à toutes vos images. L’utilisation de textes « alt » permet à vos contacts de comprendre le contenu de l’e-mail dans son ensemble et/ou de l’image concernée. De plus, les textes « alt » peuvent exciter la curiosité de vos contacts et les encourager à accepter les images et/ou à visualiser l’e-mail dans leur navigateur.

Optez pour des textes « alt » qui apportent une plus-value à votre e-mail pour le cas où vos images ne seraient pas chargées. Lorsqu’une image contient du texte, transcrivez-le en texte « alt » sous l’image en question. De cette manière, ce texte sera lisible même si l’image n’est pas chargée.

De plus, certains clients de messagerie permettent de doter les textes « alt » d’une mise en forme adéquate.

Quels clients de messagerie bloquent les images par défaut, affichent le texte alternatif et autorisent le styling


Les e-mails composés d’une seule image dans laquelle du texte et des « calls to action » ont été intégrés sont souvent bloqués par le filtre antispam et/ou jetés à la corbeille. En effet, si cette image est bloquée, aucun contenu ne s’affiche.


Utiliser des polices de caractères compatibles avec les e-mails

Votre identité visuelle est largement tributaire de la police de caractères utilisée. Si les images sont souvent initialement bloquées, les polices de caractères, elles, s’affichent directement. Il est donc essentiel de choisir une police adéquate. Les designers adeptes de la typographie opteront généralement pour une police de caractères web, mais il ne s’agit malheureusement pas du meilleur choix pour un affichage optimal de l’e-mail envoyé. La grande majorité des clients de messagerie ne soutiennent en effet pas l’utilisation de ces polices. Si vous voulez avoir la certitude que la police que vous aurez choisie s’affichera correctement, optez pour une police de caractères compatible avec les e-mails, comme :

Arial, Arial Black, Bookman, Calibri, Century Gothic, Comic Sans MS, Copperplate, Courier New, Garamond, Geneva, Georgia, Helvetica, Impact, Lucida Sans Unicode, Palatino, Tahoma, Times New Roman, Trebuchet MS et Verdana.

L’utilisation de polices de caractères web est donc fortement déconseillée. Si vous décidez d’y recourir malgré tout, n’oubliez surtout pas de configurer comme solution de rechange une police de caractères compatible avec les e-mails. Plusieurs clients de messagerie ont leur propre police sur laquelle ils retombent lorsque la police choisie initialement n’est pas supportée. Pour Apple iOS Mail, il s’agit d’Helvetica, pour Gmail d’Arial. Des mesures ont été prises en ce sens dans l’application Flexmail également. Les e-mails conçus dans le Smart Builder sont automatiquement configurés pour s’afficher en Helvetica ou Arial en guise de solution de rechange.

Générer une version texte de l’e-mail

La version texte de votre e-mail s’affichera toujours correctement, quel que soit le client de messagerie utilisé. Cette version ne contient ni mise en forme ni images, ce qui permet d’éviter les erreurs d’affichage. Certains destinataires préfèrent par-dessus tout un e-mail fonctionnel sans fioritures et choisiront donc d’office de lire la version texte de votre e-mail.

En générant la version texte, vous réduisez le risque que votre message soit bloqué par le filtre antispam. Une version texte vous permettra d’être plus rapidement reconnu comme un expéditeur fiable.

Et non, nous ne vous oublions pas !

Si vos e-mails sont le plus souvent lus sur des appareils mobiles, les astuces suivantes peuvent vous aider.

  • Concevez votre e-mail en une seule colonne.Vous éviterez ainsi à vos contacts de devoir capturer le texte et zoomer pour trouver le contenu qu’ils cherchent. De nos jours, les gens ne cherchent plus l’information : ils veulent que l’information soit directement visible, dès le premier coup d’œil.
  • Optez pour la simplicité !
  • Faites en sorte que les « calls to action » apparaissent en grand et que l’on puisse cliquer dessus. Apple recommande des boutons de minimum 44px, la taille du bout du doigt.
  • Utilisez des illustrations et images explicitesLorsque vos contacts parcourent votre e-mail en diagonale, ils doivent être en mesure de directement comprendre le contenu.
  • Choisissez 16px pour la taille du texte.
  • Testez votre e-mail. Les e-mails ne sont pas toujours aisément lisibles sur des appareils mobiles, et votre contact ne vous accordera qu’une seule chance pour l’impressionner. Votre e-mail n’est pas bien lisible ? Il sera alors ignoré, supprimé ou – pire – marqué comme spam.

La check-list ultime pour la conception d’e-mails

Couverture de la check-list ultime pour la conception d’e-mails

Téléchargez le pdf.


Articles liés

WHITEPAPER
Le calendrier d’e-mail marketing 2021
22-12-2020

Le calendrier ultime de contenu d’e-mail marketing 2021

Temps de lecture: 1 minutes
Stratégie, Inspiration
BLOG
Pourquoi est-il important de choisir le bon expéditeur pour vos courriels
16-11-2020

Pourquoi est-il important de choisir le bon expéditeur pour vos courriels

Temps de lecture: 10 minutes
Inspiration, Conseils
WHITEPAPER
La segmentation en email marketing
21-10-2020

La segmentation en email marketing: types, avantages et exemples

Temps de lecture: 26 minutes
Inspiration, Conseils
BLOG
Wat betekent de afschaffing van het Privacy Shield voor mijn e-mailmarketing?
11-09-2020

De quelle manière l'invalidation du Privacy Shield impacte mon marketing par courriel?

Temps de lecture: 7 minutes
Privacy, Conseils
BLOG
Écrire des newsletters ce n’est pas si compliqué ?
31-08-2020

Écrire des newsletters ce n’est pas si compliqué ? N’est-ce pas?

Temps de lecture: 9 minutes
Inspiration, Conseils
BLOG
Créez du contenu pour votre newsletter
05-06-2020

À quel sujet pourrais-je écrire un e-mail ?

Temps de lecture: 7 minutes
Stratégie, Conseils
BLOG
E-mail dans lequel l'image est bloquée
12-05-2020

Comment fonctionne le blocage d'images dans l'e-mail

Temps de lecture: 5 minutes
Stratégie, Privacy
BLOG
Différentes personnes avec des masques buccaux
12-05-2020

Adapter vos efforts marketing à Covid-19, maintenant et demain.

Temps de lecture: 9 minutes
Stratégie, Inspiration
BLOG
Envoyer un e-mail sur la crise corona
05-04-2020

Communiquer en temps de crise

Temps de lecture: 8 minutes
Stratégie, Conseils
BLOG
Deux collègues regardent un écran d'ordinateur portable
01-04-2020

À quoi ressemble l'e-mail parfait ?

Temps de lecture: 11 minutes
Stratégie, Conseils
BLOG
Présentation PowerPoint et conférencier à la conférence
11-08-2019

“It’s a salesting” – un quoi ?

Temps de lecture: 4 minutes
Stratégie, Événements
WHITEPAPER
Un astronaute atterrit sur Terre avec le RGPD
17-05-2018

Le RGPD (Règlement Général sur la Protection des Données)

Temps de lecture: 8 minutes
Privacy, Conseils
WHITEPAPER
Configurer le workflow pour envoyer un e-mail ciblé et atteindre l'objecti
15-05-2018

Atteignez vos contacts au bon moment avec workflows

Temps de lecture: 11 minutes
Automatisation, Stratégie
BLOG
Bannière annonçant la nouvelle législation RGPD, 25 mai 2018
19-04-2018

Application du RGPD au sein de l’e-mail marketing

Temps de lecture: 7 minutes
Privacy, Stratégie
BLOG
Confirmer les Conditions Générales
28-11-2017

Comment communiquer les changements dans vos conditions?

Temps de lecture: 3 minutes
cases, Stratégie
WHITEPAPER
Trois femmes reçoivent chacune un contenu personnalisé
13-10-2015

Rendez chaque destinataire unique grâce au contenu dynamique

Temps de lecture: 7 minutes
Personnalisation, Stratégie
WHITEPAPER
Globe avec signaux de Suivi Web
13-10-2015

Découvrez le comportement de clic de vos contacts avec Web Tracking

Temps de lecture: 6 minutes
Automatisation, Stratégie
WHITEPAPER
Bienvenue au moyen de des campagnes de lead nurturing
09-07-2014

4 recettes pour créer les campagnes de lead nurturing efficaces

Temps de lecture: 7 minutes
Stratégie, Inspiration
WHITEPAPER
Le nouveau prospect est sur la lune
09-07-2014

L’e-mail marketing dans le cadre de salons et événements

Temps de lecture: 10 minutes
Stratégie, Événements
Flexmail logo
Email marketing
made easy
Product
  • L'e-mail marketing
  • Automatisation
  • Manuel
  • Prix
  • Statut
  • Centre de connaissances
  • Pour les développeurs
Contact
  • À propos de nous
  • Postes vacants
  • Support
Legal
  • Politique de confidentialité
  • Politique anti-spam
  • Termes et conditions
  • Déclaration de cookie
  • Politique d'utilisation acceptable
Passer à Flexmail
  • Flexmail versus Mailchimp
    • Notre produitArrow
    • Contactez-nousnavigation-arrow
    FacebookLinkedInTwitterInstagramYouTubePinterest
    Copyright @2021 Flexmail sa
    Tous les prix mentionnés s’entendent HTVA.
    ISO-27001 logoIaBelgium logoFeweb logo
    HTVA BE0835 786 642
    Jaarbeurslaan 29 bus 31, 3600 Genk