Fermer

février 2, 2024

Polices sécurisées pour les e-mails et meilleures pratiques en matière de polices de courrier électronique HTML

Polices sécurisées pour les e-mails et meilleures pratiques en matière de polices de courrier électronique HTML


Vous avez tous entendu mes plaintes concernant le manque de progrès en matière de support par courrier électronique au fil des ans, je ne passerai donc pas (trop) de temps à m’en plaindre. Je souhaite seulement qu’un gros client de messagerie (application ou navigateur) sorte du pack et essaie de prendre pleinement en charge les dernières versions de HTML et CSS. Je n’ai aucun doute que des dizaines de millions de dollars sont dépensés par les entreprises pour peaufiner leurs emails.

C’est pourquoi c’est fantastique d’avoir des entreprises comme Uplers qui restent au courant de tous les aspects de la conception d’e-mails. Dans cette dernière infographie, l’équipe vous explique la typographie et comment différentes polices et leurs caractéristiques peuvent être déployées pour personnaliser vos e-mails.

Utiliser des polices personnalisées dans les e-mails

L’utilisation de polices externes peut être un peu plus difficile que dans la conception Web standard en raison de la prise en charge variable selon les clients de messagerie. Cependant, il est toujours possible d’incorporer des polices externes dans vos e-mails pour les clients qui les prennent en charge, tout en fournissant des polices de secours pour ceux qui ne les prennent pas en charge.

60 % des clients de messagerie prennent désormais en charge les polices personnalisées utilisées dans vos conceptions de courrier électronique, notamment AOL Mail, l’application Native Android Mail (pas Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com et la messagerie basée sur Safari.

Uplers

UN retomber La police est une police de sauvegarde que le client de messagerie peut afficher au cas où il ne pourrait pas restituer la police principale (externe). Cela garantit que votre e-mail reste lisible et conserve son apparence prévue aussi fidèlement que possible dans différents environnements de visualisation.

  1. Choisissez votre police externe: Sélectionnez une police externe que vous souhaitez utiliser. Cela peut provenir d’un service tel que Google Fonts ou d’une police hébergée sur votre serveur Web.
  2. Incluez la police dans votre e-mail HTML: Pour les clients de messagerie qui le prennent en charge, vous créerez un lien vers la police externe dans le <head> de votre email HTML. Cependant, de nombreux clients de messagerie ne permettent pas de créer des liens vers des ressources externes pour des raisons de sécurité. Au lieu de cela, vous pouvez inclure la police sous forme de lien dans l’espoir que les clients de messagerie Web autorisant les liens externes la restitueront.
  3. Spécifier les polices de secours: choisissez des polices de secours sécurisées pour le Web et dont l’apparence est similaire à celle de votre police externe. Il doit s’agir de familles de polices génériques préinstallées sur la plupart des appareils et systèmes d’exploitation.
  4. Utiliser le CSS en ligne pour les définitions de style: En raison de la prise en charge limitée du CSS dans de nombreux clients de messagerie, il est recommandé d’utiliser le CSS en ligne pour définir vos styles, y compris les familles de polices.

Exemple:

Supposons que vous souhaitiez utiliser la police externe Ouvrir Sans de Google Fonts, avec Arial et sans-serif comme solutions de secours. Voici comment vous pouvez l’essayer :

<!DOCTYPE html>
<html>
<head>
  <title>Email with External Font</title>
  <!-- Attempt to include external font - not supported by all email clients -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
    Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
  </div>
</body>
</html>

Considérations importantes :

  • Assistance client par courrier électronique: De nombreux clients de messagerie, notamment ceux de bureau comme Microsoft Outlook, ne prennent pas en charge les polices externes. Les clients Web comme Gmail bénéficient d’une meilleure prise en charge, mais des limites existent toujours.
  • Polices de secours: Ceux-ci sont cruciaux pour garantir que votre courrier électronique reste fonctionnel et esthétique pour tous les clients. La séquence dans le font-family le style va de la police la plus préférée à la moins, pour finir par une famille générique (sans-serif ou serif).
  • Essai: Testez toujours vos e-mails HTML sur différents clients de messagerie pour voir comment ils s’affichent. Des outils comme Litmus ou Email on Acid peuvent vous aider.

Pour les e-mails de vente et de marketing, l’attrait visuel peut avoir un impact significatif sur l’efficacité du message. Bien que l’utilisation d’une police externe unique puisse aider vos e-mails à se démarquer, il est essentiel de garantir que vos polices de secours conservent les qualités professionnelles et lisibles nécessaires à la réception efficace de votre message.

Il existe 4 types de polices utilisés dans les e-mails

  • Serif – Les polices Serif comportent des caractères avec des fioritures, des points et des formes aux extrémités de leurs traits. Ils ont un aspect formel, des caractères et des interlignes bien espacés, améliorant considérablement la lisibilité. Les polices les plus populaires de cette catégorie sont Times, Georgia et MS Serif.
  • Sans Serif – Les polices sans empattement sont comme les polices rebelles qui souhaitent créer leur propre impression et n’ont pas d’embellissements fantaisistes. Ils ont un look semi-formel, qui privilégie l’aspect pratique par rapport au look. Les polices les plus populaires de cette catégorie sont Arial, Tahoma, Trebuchet MS, Open Sans, Roboto et Verdana.
  • Monogramme – Inspirées de la police de la machine à écrire, ces polices comportent un bloc ou une « dalle » à la fin des caractères. Bien que rarement utilisées dans un e-mail HTML, la plupart des e-mails en texte brut de « secours » dans les e-mails MultiMIME utilisent ces polices. La lecture d’un e-mail en utilisant ces polices donne un sentiment administratif associé aux documents gouvernementaux. Courier est la police la plus couramment utilisée dans cette catégorie.
  • Calligraphie – Imitant les lettres manuscrites du passé, ce qui distingue ces polices est le mouvement fluide que suit chaque caractère. Ces polices sont assez amusantes à lire sur un support tangible, mais les lire sur un écran numérique peut être plutôt fastidieuse et fatiguante pour les yeux. Ainsi, ces polices sont principalement utilisées dans les titres ou les logos sous forme d’images statiques.

Les polices sécurisées pour les e-mails incluent Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet et Verdana. Les polices personnalisées incluent un certain nombre de familles, et pour les clients qui ne les prennent pas en charge, il est nécessaire de coder des polices de secours. De cette façon, si le client ne peut pas prendre en charge la police personnalisée, il utilisera une police qu’il peut prendre en charge.

Arial

font-family: Arial, sans-serif;

Géorgie

font-family: Georgia, serif;

Helvétique

font-family: Helvetica, sans-serif;

Lucide

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

Tahoma

font-family: Tahoma, Geneva, sans-serif;

Fois

font-family: 'Times New Roman', Times, serif;

Trébuchet

font-family: 'Trebuchet MS', sans-serif;

Verdane

font-family: Verdana, Geneva, sans-serif;

Pour un examen plus approfondi, assurez-vous de lire Omnisend article:

Polices sécurisées pour les e-mails et polices personnalisées : ce que vous devez savoir à leur sujet

Assurez-vous de cliquer si vous souhaitez interagir avec l’infographie.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link