#NoFailMail : les 5 échecs de conception d'e-mails les plus courants (et comment les éviter)

Le design peut être la chose la plus déroutante à propos des e-mails. L'une des principales raisons du lancement de notre initiative #NoFailMail est d'aider les concepteurs de messagerie, les développeurs et les spécialistes du marketing à conquérir tout ce qui peut casser les e-mails, qu'il s'agisse d'images, de formatage ou de clients de messagerie.

C'est évident, mais nous le dirons quand même : vous devez trouver et corriger les erreurs de conception avant d'envoyer votre prochain e-mail. Les échecs de conception peuvent empêcher vos lecteurs d'ouvrir et d'agir sur vos messages et affecter la réputation de votre marque.

Dans cet article, vous découvrirez cinq échecs courants de la conception d'e-mails et comment résoudre chacun d'entre eux.

Place aux échecs !

Email Fail # 1. Ne pas concevoir pour plusieurs tailles d'écran.

Le monde de la messagerie n'est plus divisé en ordinateurs de bureau et mobiles. Vos abonnés peuvent lire vos e-mails sur tout, d'un écran de télévision « intelligent » sur le mur à une montre connectée au poignet.

Ils pourraient même ne pas lire vos messages. Au lieu de cela, ils pourraient écouter pendant qu'un assistant domestique comme Alexa ou Google Home ou un lecteur d'écran lit vos e-mails à haute voix.

Une étude réalisée en 2016 par Litmus et Fluid a montré que 51 % de tous les abonnés se désabonnent des e-mails qui ne s'affichent pas ou ne fonctionnent pas correctement sur leurs smartphones, et 43 % signalent ces e-mails comme du spam. Ces statistiques prouvent que la conception pour plusieurs écrans n'est plus agréable à avoir.

Un rapide coup d'œil à la part de marché des clients de messagerie vous montre à quel point le mobile domine le paysage. Quatre des 10 principaux clients de messagerie sont uniquement mobiles, et ils revendiquent un total de plus de 40 % de tous les e-mails ouverts :

• Apple iPhone, 29%
• iPad d'Apple, 10 %
• Messagerie Samsung 4%
• Google Android, 3%

La conception réactive et hybride, qui utilise des tableaux et des images fluides pour faire circuler le contenu de différentes tailles, est la meilleure option pour créer des e-mails qui s'affichent correctement sur les clients et les plates-formes.

Notre ebook gratuit, Le guide ultime de l'optimisation et du dépannage des e-mails, vous aidera à comprendre quelle approche fonctionnera probablement le mieux si vous passez d'un format centré sur le bureau à un format optimisé pour les mobiles.

En attendant, ces cinq solutions de contournement rendront vos e-mails plus lisibles et plus faciles à utiliser, que vos abonnés les consultent sur des ordinateurs de bureau ou des appareils mobiles :

1. Utilisez une taille de police plus grande.
   Cela semble fou – une police plus grande sur un écran plus petit ? – mais cela fonctionne. L'objectif est la lisibilité sans forcer les gens à pincer, zoomer ou faire défiler vos messages d'un côté à l'autre pour voir votre contenu. Nous recommandons une taille de police minimale de 14 pixels pour le corps du texte et de 22 pixels pour les titres.
2. Concevez un CTA tactile.
   Le doigt n'est pas aussi précis que votre souris d'ordinateur. Remplacez les liens cliquables par des boutons. Ensuite, dimensionnez ces boutons à un minimum de 44px X 44px, ce qui correspond à peu près à la taille d'un doigt moyen.
3. Réduisez à une colonne.
   Les mises en page d'e-mails à deux ou trois colonnes ne se lisent pas bien sur des écrans plus petits. N'oubliez pas que votre objectif est de rendre le contenu de votre e-mail facile à lire sans pincement, zoom ou défilement latéral. Si vous n'êtes pas prêt à passer au responsive design, opter pour une mise en page à une seule colonne rendra vos e-mails plus lisibles sur plus de tailles d'écran.
4. Rationalisez votre contenu.
   Avez-vous vraiment besoin de tout ce contenu dans votre e-mail pour obtenir des clics ou des conversions ? Utilisez le suivi des liens et d'autres outils pour déterminer ce sur quoi vos lecteurs cliquent et ce qu'ils ignorent. Déplacez-vous vers un bloc de copie principal, ou deux au maximum. Attirez l'attention avec une image de héros forte au lieu d'un groupe de photos de produits plus petites.
   Aussi, visez des phrases plus courtes et copiez des blocs. Cinq lignes de copie dans un format de bureau standard peuvent facilement passer à 10 ou 15 sur mobile.
5. Gonflez l'espace blanc.
   L'espace blanc est la zone vide autour des images et des blocs de copie. Utilisez-le généreusement pour attirer l'attention sur les zones de contenu, pour donner plus de latitude au bouton CTA et pour diviser les paragraphes dans un bloc de copie.

Email Fail #2: Laisser les liens bleus casser votre conception

La liaison automatique est un trait utile mais parfois ennuyeux dans iOS et Gmail. Vous le voyez lorsque les dates, les numéros de téléphone et les adresses deviennent automatiquement des liens bleus cliquables/touchables.

Celles-ci peuvent être utiles dans les e-mails en texte brut ou personnels, car elles sont pratiques : une simple pression permet de lancer une carte ou d'appeler un clic, ou d'enregistrer un événement dans un calendrier. Mais ils peuvent aussi être difficiles à lire sur un fond qui n'est pas blanc. Ils interfèrent également avec votre image de marque pour cet e-mail.

Heureusement, il existe des moyens de désactiver ces liens bleus. Dans iOS Mail, vous pouvez écraser les liens bleus en stylisant le sélecteur de détecteur de données d'Apple Mail (Découvrez comment). Les liens bleus dans Gmail peuvent être corrigés en utilisant la méthode (qui enveloppe les adresses ou les numéros de téléphone dans une balise et définit le style pour cette période, ou vous pouvez écraser tous les styles par défaut en ajoutant une déclaration de style spécifique à Gmail à votre CSS (Voici comment ).

VOS E-MAILS ONT DES LIENS BLEUS ? Prévisualisez vos e-mails dans plus de 90 clients et appareils de messagerie populaires et repérez les erreurs, y compris les liens bleus, avant de les envoyer. En savoir plus →

Échec de l'e-mail n°3 : les images ont mal tourné

Ah, des images. Ils peuvent mal tourner à bien des égards, mais lorsque vous les utilisez correctement, ils donnent vie à vos e-mails. Donc, cela vaut la peine de vérifier les échecs d'image que nous voyons tous les jours et comment vous pouvez les empêcher de casser votre conception :

1. Utiliser le mauvais format d'image
   La solution ici n'est pas d'utiliser le « bon » format d'image, que ce soit un JPEG, un GIF, un PNG ou un SVG, car il n'y a pas un seul bon format. Chaque format diffère des autres par la taille du fichier, la compression, la qualité et le meilleur cas d'utilisation. Pour une comparaison détaillée des avantages et des inconvénients des formats d'image les plus courants, consultez « PNG, GIF ou JPEG ? Quel est le meilleur format d'image pour les e-mails ? » sur le blog de Litmus.
2. Pas d'optimisation pour l'affichage Retina
   « écran Retina » est un terme inventé par Apple pour désigner les écrans à haute résolution sur les appareils mobiles. Les images qui ne sont pas optimisées pour l'affichage Retina apparaissent souvent floues ou floues, ce qui conduit à une expérience visuelle médiocre.
   

   

   Pour que vos visuels soient prêts pour la rétine, créez votre image à environ deux fois la taille que vous prévoyez de l'afficher, puis définissez la taille de l'image comme la taille souhaitée dans le code HTML. Si vous souhaitez afficher une image de 300 × 200 pixels, créez-la en 600 × 400 et définissez-la en 300 × 200 à l'aide d'attributs HTML ou de propriétés CSS.

   Assurez-vous cependant de garder un œil sur la taille du fichier. Bien que l'utilisation d'images de rétine améliore l'apparence de vos visuels, cela augmente également la taille de leurs fichiers, ce qui signifie que vos images peuvent prendre plus de temps à charger dans la boîte de réception. Si vous utilisez plusieurs images optimisées pour Retina, vous pouvez déclencher la coupure de message dans Gmail.

Testez la taille de votre fichier image + temps de chargement Avec Litmus Checklist, vous pouvez tester vos images pour la taille du fichier, le temps de chargement et les liens rompus. De plus, voyez instantanément à quoi ressemblent vos campagnes dans les clients de messagerie populaires. Commencer une liste de contrôle →

Échec de l'e-mail n° 4 : Ne pas concevoir pour les images désactivées

L'autre problème avec les images vient du fait qu'elles ne s'affichent pas. Certains clients de messagerie bloquent automatiquement le chargement des images jusqu'à ce que l'utilisateur le permette. Ou, les utilisateurs eux-mêmes préfèrent bloquer les images par défaut et choisir celles qu'ils veulent voir.

Dans tous les cas, le blocage d'image réduit la capacité de votre e-mail à communiquer dès que le message s'ouvre. Bien que vous ne puissiez pas forcer les utilisateurs à débloquer des images, vous pouvez prendre des mesures pour qu'un message d'absence d'images ait une bonne apparence. Le texte ALT et les boutons pare-balles sont faciles à mettre en œuvre et peuvent vous aider à récupérer des conversions que vous avez peut-être perdues sans images pour les piloter :

1. Utilisez du texte ALT basique ou stylisé. Le texte ALT est la combinaison de mots que vous choisissez pour décrire l'image et qui apparaît lorsque l'image est bloquée. Cela devrait être une pratique courante - la plupart des éditeurs de courrier électronique vous donnent un espace pour écrire la description de votre image - mais un rapide examen de la boîte de réception révèle que presque tous les autres courriers électroniques contenaient des images mais pas de texte ALT. Voici à quoi ressemble un e-mail contenant beaucoup d'images sans texte ALT, lorsque les images sont désactivées :
   Voici ce même e-mail avec les images activées. Vous voyez ce que votre client aurait manqué ?
   Une bonne pratique de texte ALT consiste à écrire une description efficace, pas seulement une étiquette d'image. Pour aller plus loin, essayez le texte ALT stylisé. Ici, vous ajoutez un peu de CSS en ligne pour modifier la police, la couleur, la taille, le style et le poids du texte ALT.
2. Utilisez des boutons pare-balles
   Si vous placez votre appel à l'action dans une image, il sera invisible lorsque les images seront désactivées. Un bouton pare-balles utilise HTML et CSS au lieu de formats d'image tels que JPG et GIF. Ils ne comptent pas sur le rendu d'image pour apparaître dans l'e-mail. Et voici le même e-mail avec les images activées :

Jason Rodriguez, évangéliste de la communauté Litmus et des produits, décrit quatre approches de base de la conception de boutons dans son guide, "Le guide ultime des boutons à l'épreuve des balles pour la conception d'e-mails". Consultez-le pour voir le codage, des exemples, ainsi que les avantages et les inconvénients de chaque approche.

Échec de l'e-mail #5. Pas d'optimisation pour les e-mails en texte brut

Non, nous n'allons pas relancer le grand débat texte-versus-HTML du début des années 2000. Mais les e-mails en texte brut jouent toujours un rôle important dans votre stratégie de messagerie, en particulier avec la croissance des montres intelligentes, des lecteurs d'écran et des assistants à domicile, dont aucun ne rend HTML.

Ces conseils vous aideront à créer un e-mail en texte brut convaincant, qu'il s'agisse d'un message autonome ou de la version texte d'un message MIME en plusieurs parties :

• Écrivez des titres courts mais clairs. Utilisez au moins une ligne d'espace blanc pour différencier chaque titre du bloc de copie en dessous. Mettez-le en valeur avec des dispositifs typographiques comme des tirets ou des signes égal.
• Brisez les longs blocs de copie. Utilisez des blocs de copie plus nombreux mais plus courts pour éviter la rivière grise redoutée et illisible de la copie.
• Créez une hiérarchie d'informations avec des listes. Tout le type d'un e-mail en texte brut a la même police et la même taille en points. Vous devez donc travailler plus fort pour guider votre lecteur vers vos points clés. Utilisez des listes pour mettre en évidence les informations d'une série. Définissez chaque élément avec une désignation conviviale, telle qu'un tiret (–) ou un astérisque (*). (Les puces ne fonctionnent pas en texte brut.)
• Utilisez généreusement les espaces blancs. Un espace blanc organise les informations associées pour une numérisation facile. Utilisez des marges larges et des sauts de ligne supplémentaires entre les blocs de copie, les appels à l'action et les en-têtes ou pieds de page administratifs.
• Définir les CTA. Que faisaient les gens avant d'avoir des boutons CTA ? Ils ont utilisé des capteurs d'attention comme des espaces blancs pour les séparer des autres copies et avec des dispositifs typographiques comme des flèches (>> et <<) pour les mettre en valeur. Évitez les longues listes de CTA et entourez-les d'un espace blanc pour les rendre faciles à cliquer ou à utiliser avec les doigts.

Cet e-mail illustre toutes ces bonnes pratiques pour les e-mails en texte brut :

Nous avons couvert plus de façons d'envoyer #NoFailMail dans ces précédents articles de blog : Plus de conseils et de ressources pour #NoFailMail

• #NoFailMail : pourquoi éviter les erreurs est la clé du succès des e-mails
• Comment les tests vous aident à éviter les 5 plus gros échecs de messagerie
• 5 échecs de rédaction à éviter

Vous voulez plus de ressources comme celles-ci ? Inscrivez-vous à notre newsletter pour recevoir les dernières e-mails.