Comment créer des e-mails HTML

Publié: 2022-01-28

Créer des e-mails HTML n'est pas aussi difficile qu'il y paraît. Vous n'avez pas besoin d'être développeur et vous n'avez pas vraiment besoin de savoir coder.

Si vous avez déjà utilisé un éditeur d'e-mail WYSIWYG (What You See Is What You Get), vous avez déjà créé un e-mail HTML. Chacun des modules que vous faites glisser et déposez se compose de HTML et de CSS en ligne, définissant l'apparence et le comportement des différents éléments de courrier électronique.

Donc, si la plupart des éditeurs d'e-mails vous permettent de concevoir avec des outils de glisser-déposer, pourquoi avez-vous besoin de connaître le code HTML pour créer des e-mails ?

Bonne question.

Bien que la plupart des éditeurs d'e-mails vous donnent un bon contrôle dans les modules, vous ne pourrez pas modifier chaque aspect de votre e-mail. Vous aurez probablement besoin de HTML pour modifier des éléments tels que :

  • Taille de police
  • Texte alternatif
  • Les frontières
  • Marges
  • Rembourrage
  • Taille de l'image
  • Couleurs

Avez-vous utilisé l'éditeur de messagerie de Twilio SendGrid ? Il vous permet de créer des e-mails avec une combinaison de modules de glisser-déposer et d'édition HTML. Une centrale combinée comme celle-ci vous donne un contrôle total sur l'apparence de vos e-mails, garantissant une expérience de marque cohérente et de premier ordre dans chaque message.

Heureusement, coder un e-mail HTML n'est pas trop compliqué. Ci-dessous, nous vous donnerons les conseils et le savoir-faire dont vous avez besoin pour créer de meilleurs e-mails.

5 conseils pour coder un email HTML

Le codage d'un e-mail HTML est relativement simple, mais les clients de messagerie et les boîtes de réception peuvent être capricieux. Suivez ces bonnes pratiques pour vous assurer que vos messages s'affichent correctement, quel que soit le client, le navigateur ou l'appareil de vos destinataires.

1. Rendez vos e-mails réactifs

Les destinataires ouvrent les e-mails sur différents systèmes d'exploitation, appareils, tailles d'écran, navigateurs et applications de messagerie. Chacun de ces facteurs rendra votre e-mail différemment, c'est donc votre travail de vous assurer que votre e-mail est réactif et fonctionne comme prévu dans la plupart des boîtes de réception.

Vous pouvez trouver de nombreux modèles d'e-mails réactifs, mais la tâche est un peu plus compliquée lorsque vous codez un e-mail HTML à partir de zéro. Voici quelques éléments qui vous aideront à rendre vos e-mails plus réactifs :

  • Inclure les requêtes multimédias : les requêtes multimédias vous permettent d'adapter vos modèles d'e-mails à différents appareils.
  • Utilisez une seule colonne : il peut être facile de lire des e-mails à 2 colonnes sur un ordinateur de bureau, mais cela peut devenir un peu dense sur les appareils mobiles.
  • Augmentez la taille de la police : n'allez pas plus petit qu'une police de 13 ou 14 points.
  • Espacez vos liens : vous ne voulez pas que les lecteurs cliquent accidentellement sur le mauvais lien parce que vos liens étaient trop proches les uns des autres.
  • Ajouter des balises alt : les balises alt décrivent vos images au cas où les images ne se chargeraient pas.

2. Ajoutez des images avec parcimonie

Les images sont d'excellents ajouts à vos campagnes par e-mail, mais veillez à ne pas en abuser. Trop d'images peuvent allonger les temps de chargement et compliquer le rendu des e-mails.

Utilisez des images plus petites qui se chargeront plus rapidement et n'occuperont pas tout l'écran. Ajoutez également des éléments de dimensionnement réactifs tels que "width" et "max-width" pour vous assurer que vos images se chargent correctement sur chaque appareil et client de messagerie.

3. Restez simple

Rappelez-vous le but de votre e-mail. De nombreux concepteurs d'e-mails se perdent dans l'art et la créativité, oubliant l'objectif global de l'e-mail, qui n'est pas de gagner des oohs et des aahs.

Tout d'abord, vous voulez que les gens ouvrent vos e-mails. Ensuite, vous voulez qu'ils cliquent et agissent. Cela peut être pour visiter votre site Web, lire un article de blog, effectuer un achat ou vous inscrire à un événement.

Gardez les choses simples. Offrez de la valeur à vos destinataires, attirez-les avec du contenu, puis orientez-les vers votre appel à l'action. C'est ça. La plupart du temps, tout le reste est duveteux.

Lorsque vous ajoutez différents éléments HTML à votre e-mail, posez-vous la question : "Est-ce que cela aide l'e-mail à remplir son objectif ?" Si ce n'est pas le cas, supprimez-le de la conception de votre e-mail.

4. Utilisez des modèles d'e-mail prédéfinis

Vous pouvez trouver des modèles d' e-mails HTML prédéfinis avec tout ce dont vous avez besoin pour envoyer une campagne exceptionnelle. Les modèles ont déjà fait le travail acharné pour créer une conception d'e-mail attrayante et réactive.

Si vous aimez un modèle d'e-mail mais que vous n'en êtes pas satisfait à 100 %, vous pouvez souvent télécharger le code HTML et apporter les modifications souhaitées. Cela peut être une excellente méthode d'édition d'e-mails pour ceux qui découvrent le HTML.

5. Testez vos e-mails

N'envoyez jamais un e-mail sans l'avoir testé au préalable. La méthode traditionnelle consiste à envoyer un e-mail de test à différentes adresses e-mail (sur plusieurs clients de messagerie) et à essayer de l'ouvrir sur différents appareils. Si cela ressemble à beaucoup de temps perdu et de maux de tête, vous avez raison.

Heureusement, il existe un meilleur moyen de nos jours.

L' outil de test de messagerie de Twilio SendGrid est intégré à votre éditeur de conception, vous aidant à résoudre les problèmes à partir d'une seule application. Cela vous aidera à voir comment votre e-mail s'affiche sur les clients, les navigateurs et les appareils. Par exemple, vous pouvez voir à quoi ressemblera votre e-mail sur un appareil mobile à l'aide de Gmail et sur un ordinateur de bureau à l'aide d'Outlook.

Les outils de test des e-mails peuvent également vous aider à trouver des liens et des boutons cassés, du contenu ressemblant à du spam et des problèmes de formatage.

Structure des e-mails HTML

Les e-mails HTML ont une structure simple :

  • DOCTYPE
  • Entête
  • Corps

DOCTYPE

Utilisez <!DOCTYPE> pour indiquer au navigateur à quoi s'attendre. Dans ce cas, il s'agirait d'un e-mail HTML.

Entête

Utilisez la section d'en-tête pour inclure des éléments tels que le style, la taille et le méta-texte.

Corps

Utilisez le corps pour les éléments visuels de votre e-mail, tels que le texte, les images, les tableaux, les liens, etc.

Modèle d'e-mail avec code HTML

Voici un exemple de modèle d'e-mail avec du code HTML. Vous pouvez voir comment ce modèle d'e-mail de newsletter de voyage s'affiche sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

Aimez ce que vous voyez? Cliquez sur "Télécharger le modèle" et nous vous enverrons une copie du code HTML dans votre boîte de réception. Vous pouvez ensuite copier/coller le code dans votre éditeur de conception d'e-mails pour importer le modèle et l'adapter à votre marque et à votre campagne.

Découvrez d'autres modèles d'e-mails de Twilio SendGrid

Vous voulez plus de modèles d'e-mail ? Heureusement pour vous, nous en avons une galerie pleine . Que vous ayez besoin d'un modèle de newsletter, de réinitialisation de mot de passe ou de rappel de rendez-vous, notre galerie de modèles gratuits a tout.

De plus, ces conceptions sont réactives, ce qui garantit que votre e-mail s'affiche parfaitement sur les clients, les navigateurs et les appareils. Oh, et avons-nous mentionné que les modèles sont gratuits ?

Commencez dès aujourd'hui à créer de meilleurs e-mails HTML avec un modèle prédéfini.