Conseils de conception d'e-mails et erreurs courantes à surveiller

C'est un fait bien connu que les gens ont tendance à prêter attention aux éléments visuels en premier, ce qui les fait souvent préférer la forme au contenu. Le marketing par e-mail ne fait pas exception. C'est la structure d'un e-mail, les illustrations, la mise en forme du texte, la palette de couleurs et l'optimisation mobile qui déterminent généralement si les utilisateurs finiront de lire votre e-mail et termineront l'action souhaitée.

La conception des e-mails influence non seulement la perception du lecteur, mais également la réputation de l'expéditeur. Les fournisseurs de boîtes aux lettres marquent souvent les e-mails contenant des erreurs de mise en page et de conception comme du spam, ce qui en fait une bonne raison pour laquelle vous devriez vous soucier de la conception de votre modèle d'e-mail.

Dans cet article, nous vous fournirons quelques conseils de conception d'e-mails sur la façon de rendre vos e-mails visuellement attrayants et globalement efficaces. Nous parlerons également des erreurs de conception les plus courantes et montrerons des exemples d'e-mails bien conçus de différentes marques.

Conseils de conception de modèles d'e-mails

Un modèle est la base de chaque e-mail. Il définit la mise en page et l'apparence visuelle de vos futurs emails, influençant les résultats globaux de vos campagnes.

Dans la conception de votre modèle d'e-mail, vous devez suivre les mêmes directives visuelles que celles que vous utiliseriez pour le site Web, les médias sociaux et d'autres plateformes d'une entreprise. Passons en revue quelques erreurs courantes de conception d'e-mails et des conseils de conception d'e-mails que vous feriez mieux de prendre en compte lors de la création de votre modèle.

Les erreurs à éviter

1. Ne modifiez pas trop souvent la conception du modèle d'e-mail. Si les utilisateurs reçoivent un e-mail différent à chaque fois, il leur sera plus difficile de se souvenir et de vous reconnaître.

2. N'utilisez pas d'images au lieu de texte, car

• les images peuvent ne pas s'afficher ;
• vous devrez modifier le modèle manuellement à chaque fois que vous souhaitez modifier le texte ;
• tout code promo placé sur l'image sera impossible à copier et coller si besoin ;
• Les fournisseurs de messagerie peuvent marquer les e-mails qui ne contiennent que des images comme spam.

3. N'utilisez pas la couleur de votre entreprise comme couleur principale de votre e-mail si elle est trop audacieuse et lumineuse.

4. N'utilisez pas d'arrière-plan clair ou complexe pour le texte.

5. N'hésitez pas à faire appel à un concepteur d'e-mails professionnel si vous en avez l'occasion. Un e-mail mal conçu peut ruiner la réputation d'une entreprise ou simplement être marqué comme spam par un fournisseur de messagerie. Pendant ce temps, un concepteur professionnel sera en mesure de créer un modèle de modèle d'e-mail durable qui maintiendra l'intérêt et l'engagement de vos abonnés.

Les bonnes pratiques à suivre

1. Concevez toujours des modèles d'e-mails en fonction des directives visuelles de votre entreprise. Adopter une approche holistique de votre apparence numérique augmentera la reconnaissance de la marque et augmentera la fidélité des clients.

2. Si vous décidez d'organiser des tests A/B, testez des éléments séparés au lieu d'un e-mail entier. De cette façon, vous saurez avec certitude quels détails sont plus ou moins efficaces, le style de votre entreprise restant reconnaissable pour le public.

3. Créez des modèles séparés pour différents types d'e-mails et concevez-les dans un style d'entreprise similaire. Cela aidera vos abonnés non seulement à distinguer vos e-mails de ceux de toute autre marque, mais également à les différencier les uns des autres en fonction de leur type.

4. Placez les informations les plus importantes et le CTA sur le premier défilement et assurez-vous que l'ensemble de l'e-mail semble équilibré. Si vos titres et descriptions sont bien conçus, que les boutons d'appel à l'action sont accrocheurs et que les images sont de haute qualité, les destinataires seront guidés en douceur tout au long de l'e-mail directement jusqu'à l'appel à l'action.

5. Essayez de faire une largeur de 600 pixels de vos e-mails afin qu'ils s'affichent correctement dans n'importe quel client de messagerie.

6. Alternez les blocs de texte et les images. C'est important non seulement pour la lisibilité mais aussi pour une meilleure délivrabilité de vos e-mails, surtout si vous avez commencé à envoyer des e-mails il n'y a pas si longtemps. En général, nous vous conseillons de suivre le ratio texte/image 80:20 ou 60:40.

7. N'oubliez pas que pour un arrière-plan clair, il est toujours préférable d'utiliser un espace réservé contrastant et terne.

8. À moins que vous ne puissiez compter sur l'aide d'un concepteur, vous pouvez concevoir vous-même des modèles d'e-mails à l'aide d'éditeurs d'e-mails par glisser-déposer.

Voyons maintenant quelques exemples démontrant ces meilleures pratiques en action.

Nous avons pris les deux premiers exemples de Behance. Les deux modèles, l'un pour les e-mails de bienvenue et l'autre pour les e-mails hebdomadaires « Nouvelle inspiration », suivent des principes de conception similaires, tout en étant un peu différents. L'e-mail de bienvenue a un titre large et clair, des images de haute qualité, une disposition en grille brisée et une police bien lisible. Les blocs de texte et d'image sont alternés, ce qui facilite la lecture de l'email.

Quant à un e-mail hebdomadaire, il est globalement plus court et met davantage l'accent sur les images, avec un bouton CTA en gras tout en haut.

Voici un autre exemple de bon modèle d'e-mail de Downshiftology. L'entreprise peut se vanter d'envoyer des e-mails minimalistes avec une grille bien structurée. Ils commencent généralement par un en-tête et une introduction suivis de quelques photos de nourriture de haute qualité et des hyperliens vers les recettes. Un alignement justifié et des couleurs claires rendent l'e-mail agréable à parcourir et facile à lire.

Conseils pour la conception d'e-mails réactifs

Lorsque vous réfléchissez à la mise en page et au modèle de votre e-mail, gardez toujours à l'esprit leur apparence sur différents appareils, y compris les mobiles. Voici quelques erreurs à éviter et des conseils à suivre pour la conception d'e-mails réactifs.

Les erreurs à éviter

1. Évitez d'utiliser plusieurs hyperliens ensemble car cela peut entraîner leur encombrement. Un destinataire peut appuyer accidentellement sur le mauvais lien situé trop près de celui sur lequel il voulait cliquer.

2. Ne faites pas vos boutons CTA trop petits. Zoomer pour cliquer sur un bouton peut vraiment frustrer les destinataires.

3. N'utilisez pas de polices inférieures à 14 pixels pour le corps de l'e-mail et à 20 pixels pour les titres des e-mails, car cela rendra votre e-mail difficile à lire sur les petits écrans.

Les bonnes pratiques à suivre

1. Suivez les règles des e-mails réactifs. Par exemple, si votre modèle d'e-mail se compose de plusieurs colonnes et que vous souhaitez qu'elles s'adaptent aux écrans mobiles, insérez un code spécial et créez votre e-mail dans un tableau.

2. Utilisez des modèles d'e-mails adaptatifs prêts à l'emploi de SendPulse ou créez les vôtres dans notre générateur de glisser-déposer si vous ne voulez pas déranger le code. Ils sont déjà ajustés pour les ordinateurs de bureau et mobiles ; en outre, vous pouvez toujours prévisualiser votre modèle d'e-mail pour les deux appareils.

Jetez un œil à l'e-mail suivant d'Uniqlo, qui s'affiche bien sur le bureau et sur le mobile. Voici ce que voit un utilisateur de bureau :

La mise en page de sa version mobile est un peu différente :

Conseils sur l'utilisation du texte dans la conception de votre modèle d'e-mail

Même la copie la plus attrayante n'attirera pas l'attention si elle semble peu attrayante ou est difficile à lire. En revanche, les utilisateurs ne négligeront guère un e-mail avec une mise en page soignée, des paragraphes courts, des titres accrocheurs et des points saillants appropriés des informations les plus importantes.

Les erreurs à éviter

1. Ne mélangez pas trop de polices, de styles, de couleurs et de tailles de police dans un seul e-mail, car cela peut le faire paraître bâclé.

2. Évitez d'utiliser des polices trop petites ou pâles ― dans les deux cas, votre email peut devenir difficilement lisible.

3. Ne créez pas d'e-mail textuel sans paragraphes, titres et points clés mis en évidence. Cela ennuiera très probablement vos lecteurs, même si votre texte est réellement intéressant.

Les bonnes pratiques à suivre

1. Choisissez une ou deux polices principales pour les titres et le texte principal, pas plus.

2. Utilisez des polices de base qui seront rendues correctement par la plupart des clients de messagerie tels que Gmail, Yahoo, Outlook et autres. Si un service ne peut pas reconnaître votre police de caractères, il la remplacera par une autre police, ce qui peut affecter gravement la conception globale du modèle d'e-mail. Les polices les plus sûres sont Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier et Impact.

3. N'hésitez pas à utiliser vos propres polices d'entreprise sur les bannières et les images. Cependant, assurez-vous que la police de la bannière et celle de l'e-mail vont bien ensemble.

4. Divisez votre texte en sections en utilisant des titres et de courts paragraphes. Un texte bien structuré est toujours plus facile à lire.

5. Faites en sorte que votre police ne soit pas inférieure à 14px.

L'un des exemples d'une bonne mise en page de texte est un e-mail de DesignLab. Il a un titre centré en gras et se compose de trois courts paragraphes suivis du CTA proéminent, surligné en orange.

Conseils sur l'utilisation de la couleur dans la conception de modèles d'e-mails

La couleur est un outil puissant qui peut créer l'ambiance d'un e-mail et renforcer votre message. Cependant, en choisissant les mauvaises couleurs, vous risquez de rendre votre e-mail trop ennuyeux, distrayant ou chaotique.

Les erreurs à éviter

1. Ne submergez pas vos lecteurs avec un tas de couleurs. Trop de rouge, de jaune comme arrière-plan pour le texte ou une combinaison de couleurs qui ne se correspondent pas peuvent ruiner l'impression que vous essayez de faire car ils détourneront très probablement les utilisateurs de l'idée principale.

2. S'abstenir de trop de dégradés. S'ils sont utilisés de manière non professionnelle, ils peuvent donner un aspect bâclé à votre e-mail ou réduire la visibilité du texte.

Les bonnes pratiques à suivre

1. Utilisez des couleurs vives et vives uniquement pour mettre en valeur des éléments ou des mots séparés, tout en choisissant des couleurs plus apaisantes pour votre arrière-plan.

2. Tenez compte des préférences de votre public lorsque vous choisissez un thème de couleur. Par exemple, Kissmetrics a signalé que les hommes préfèrent les couleurs contrastées, tandis que les femmes choisissent des palettes de couleurs plus douces. Pour savoir quelles couleurs vos utilisateurs préfèrent, organisez des tests A/B et essayez de changer la couleur d'un seul ou de quelques éléments à la fois pour mesurer les résultats avec précision.

3. Utilisez des outils tels qu'Adobe Color pour choisir une palette de couleurs parfaite qui sera visuellement équilibrée.

B&Q, par exemple, utilise sa couleur orange d'entreprise comme surligneur et s'en tient à des tons plus neutres pour le reste des éléments.

Conseils de conception d'en-tête d'e-mail

L'en-tête est le premier bloc d'un e-mail placé tout en haut. Il contient généralement un logo, des liens vers des sections du site Web, des coordonnées et d'autres informations générales. L'en-tête de l'e-mail, ainsi qu'un nom d'expéditeur, aident les utilisateurs à identifier un expéditeur.

Les erreurs à éviter

1. N'essayez pas de mettre trop d'informations dans l'en-tête. Oui, vous pouvez donner des liens vers votre site Web, par exemple, mais si vous placez également vos liens vers les réseaux sociaux, vos coordonnées détaillées et d'autres blocs dans votre en-tête, ce dernier deviendra trop volumineux et très probablement déroutant.

2. N'utilisez pas d'images de mauvaise qualité dans votre en-tête et n'importe où ailleurs dans votre courrier électronique, car cela donnerait l'impression d'un design amateur.

Les bonnes pratiques à suivre

1. Mettez l'accent sur les informations principales de votre en-tête et laissez les autres éléments être un peu plus petits ou moins lumineux.

2. Utilisez des en-têtes thématiques spéciaux pendant les vacances, les périodes de soldes et d'autres événements spéciaux pour créer l'ambiance. Vous pouvez également varier les en-têtes pour différents types d'e-mails tels que les résumés ou les e-mails transactionnels.

Jetez un œil à l'en-tête minimaliste dans l'e-mail de TheRealReal :

Conseils de conception de pied de page d'e-mail

Le tout dernier bloc d'un e-mail, mais non le moindre, est son pied de page. Il contient généralement une signature électronique, un lien de désabonnement, les coordonnées de l'entreprise et des liens vers les réseaux sociaux. Même si ce bloc semble être le plus simple à concevoir, il y a encore quelques erreurs que les entreprises commettent fréquemment.

Les erreurs à éviter

1. Ne surchargez pas votre pied de page avec trop d'informations générales, afin qu'il n'ait pas l'air désordonné et déroutant.

2. Ne jamais masquer le lien de désabonnement, le rendre trop petit ou à peine visible. Si un utilisateur a du mal à se désinscrire, il cliquera probablement sur « Spam », ce qui est toujours une mauvaise nouvelle pour votre réputation d'expéditeur.

Les bonnes pratiques à suivre

1. Incluez uniquement les liens vers votre pied de page qui seraient vraiment importants pour vos utilisateurs ; essayez de regrouper des blocs de contenu similaires pour améliorer la lisibilité.

2. Soyez honnête avec votre public et rendez votre lien de désabonnement bien visible.

3. Ajoutez une signature e-mail créative à votre pied de page pour terminer votre e-mail sur une note amicale et laissez le destinataire se réjouir d'avoir de vos nouvelles la prochaine fois.

Le pied de page de l'e-mail de LinkedIn, que vous pouvez voir ci-dessous, suit parfaitement les conseils mentionnés ci-dessus. Il contient une signature électronique, un bouton de désabonnement clair et les coordonnées de l'entreprise, sans qu'aucune information inutile ne soit fournie.

Conseils sur l'utilisation des images dans la conception d'e-mails

Les visuels jouent un rôle important dans la conception d'un e-mail : un choix intelligent d'images peut immédiatement mettre vos abonnés sur une meilleure base et garantir leur engagement avec l'e-mail jusqu'à la fin.

Les erreurs à éviter

1. Ne créez pas d'e-mails composés uniquement d'images, car 43 % des utilisateurs désactivent les images dans leurs clients de messagerie ; Cependant, n'oubliez pas que le contenu de votre e-mail doit rester clair même si les images ne sont pas visibles.

2. Ne faites pas des images plus grandes que recommandées. Par exemple, s'il est conseillé d'utiliser des images de 300px de large, n'utilisez pas celles qui font 1200px de large.

Les bonnes pratiques à suivre

1. Optimisez les images avant de les ajouter à votre e-mail. Un e-mail avec des images lourdes prendra plus de temps à charger, en particulier sur les téléphones portables. Très probablement, un utilisateur n'attendra pas le chargement des images et fermera simplement l'e-mail. Pour optimiser les images, utilisez des outils comme Squoosh ou TinyPNG.

2. Ajoutez du texte alternatif à vos images pour que les utilisateurs comprennent de quoi il s'agit au cas où elles ne se chargeraient pas automatiquement.

3. Augmentez la taille de vos icônes 2X pour qu'elles aient une belle apparence sur les appareils iPhone et Macbook avec écran Retina. Par exemple, si vous devez utiliser une icône 70×20, téléchargez une version 140×40 sur le serveur, puis redimensionnez l'icône dans votre e-mail à l'aide de l'attribut suivant : width="70" .

Noter! Lorsque vous utilisez cette méthode, vous modifiez uniquement la taille d'une image et non son poids. C'est pourquoi vous devez d'abord optimiser vos images, puis les télécharger sur le serveur.

4. Rendez les images cliquables. Si vous jetez un œil à une carte des clics de vos e-mails, vous verrez le plus souvent que les gens cliquent sur les images. Utilisez cet avantage pour diriger les gens vers votre site Web ou vos réseaux sociaux.

5. Utilisez des images de haute qualité prises par vous-même ou trouvées sur des sites Web de photos.

Passant aux exemples, vous verrez peut-être que TheSill n'oubliez pas d'ajouter du texte alternatif clarifiant les types de fleurs représentés sur les images.

Pendant ce temps, le New York Times Magazine utilise des images de haute qualité et des illustrations uniques pour égayer leurs e-mails remplis de texte.

Conseils de conception de CTA

Un appel à l'action dans un e-mail est un lien ou un bouton créé pour obtenir une sorte de réponse d'un utilisateur - inscription, achat ou contact avec un responsable. Un appel à l'action clair et son placement correct vous aideront à augmenter votre CTR, tandis que des erreurs dans un CTA peuvent compliquer la capacité de votre abonné à accomplir une action souhaitée, rendant votre e-mail tout simplement inutile.

Les erreurs à éviter

1. Ne cachez pas un seul bouton d'appel à l'action à la fin de votre e-mail ou même derrière le premier parchemin.

2. Ne laissez pas les utilisateurs deviner ce qu'ils doivent faire, donnez-leur plutôt un appel clair.

3. Ne masquez pas vos hyperliens si vous les utilisez à la place des boutons CTA. Ils ne doivent pas se perdre contre d'autres éléments de l'e-mail. Ils ne doivent pas non plus être trop petits ou désaturés.

Les bonnes pratiques à suivre

1. Placez votre CTA principal au premier parchemin. Si votre e-mail est long, vous pouvez répéter le CTA plusieurs fois.

2. Assurez-vous que votre ligne d'objet et votre CTA sont dédiés au même sujet.

3. Rendez votre bouton CTA lumineux et visible. Il doit contraster avec l'arrière-plan, le texte et d'autres éléments d'un e-mail.

Dans l'un de leurs e-mails, LinkedIn, par exemple, a non seulement répété son CTA deux fois, mais l'a également rendu audacieux et contrasté.

Sur un autre exemple de Neil Patel, vous pouvez voir que la ligne d'objet de l'e-mail est en corrélation avec le texte du CTA :

Une liste de contrôle des conseils de conception d'e-mails

Pour vous aider à vérifier facilement vos e-mails avant de les envoyer, nous avons rassemblé toutes les consignes à retenir et les avons regroupées par catégories.

Nous pensons qu'avec tous ces conseils à portée de main, vous serez en mesure de créer des e-mails réactifs et bien conçus, et non sans SendPulse. Le service vous aidera également à tester A/B différents éléments de votre e-mail et à choisir les meilleures options pour votre campagne.