Passer au contenu principal

Guide rapide de création d'e‑mails en HTML

Considéré comme un aspect intimidant du marketing par e‑mail, le HTML n'est pas forcément complexe. Découvrez comment peaufiner vos compétences en HTML afin d'améliorer vos e‑mails marketing.

Le langage HTML ou de balisage hypertexte est le code utilisé pour créer la structure de base d'un site Web. Le HTML vous permet de personnaliser entièrement l'apparence d'un site Web, et les e-mails HTML vous aident à mieux contrôler la structure de vos e-mails. Vous pouvez modifier la police, personnaliser la mise en page de vos e-mails et même incorporer des graphiques et des boutons avec le bon format d'e-mail HTML.

Le seul problème, c'est que l'écriture d'e-mails HTML n'est pas aussi simple que cela. Les modèles d'e-mail HTML peuvent vous aider, mais vous devez toujours vous assurer que vos e-mails soient réactifs aux différentes résolutions et fonctionnent avec différents clients de messagerie. De plus, il est essentiel de ne pas décourager les lecteurs avec des temps de chargement démesurés. Si vous souhaitez remanier vos e-mails en langage HTML, voici un guide rapide sur le HTML dédié aux e-mails.

Vous vous demandez peut-être comment créer un e-mail en HTML ? Lire quelques guides sur le HTML de base peut vous aider, mais écrire des e-mails en HTML est un peu différent de l'utilisation du HTML destiné à la création d'un site Web. La première chose que vous devez faire lorsque vous écrivez un e-mail en HTML est de définir le DOCTYPE, qui détermine les règles HTML et CSS qui sont suivies lors de la lecture du HTML. Cependant, certains clients de messagerie écraseront le DOCTYPE et utiliseront leur propre ensemble de règles pour le HTML.

Vient ensuite la section <head>, où apparaîtront votre titre et d'autres informations importantes concernant votre e-mail. Votre balise de tête doit au minimum comprendre une balise <title> qui doit être fermée avec une balise </title>. Vous pouvez également utiliser une balise meta pour définir les métadonnées au sein de la section <head>. Une fois que cette section aura été terminée, elle devra être fermée par </head>.

N'oubliez pas que certaines balises et que certains éléments peuvent ne pas fonctionner avec certains fournisseurs de messagerie. Plusieurs fournisseurs de messagerie ne vous permettront pas d'utiliser la balise <style> en tête d'un e-mail, tandis que Gmail n'autorisera pas la balise <style> dans le corps d'un e-mail. Il est également important de suivre un guide de marketing par e-mail pour connaître les bonnes pratiques car changer la mise en page d'un e-mail ne signifie pas que son contenu est correct.

Vous avez peut-être entendu parler des e-mails en texte brut et des e-mails en HTML, mais en quoi diffèrent-ils vraiment ?

Les e-mails en texte brut sont les e-mails les plus simples que vous pouvez envoyer, car ils n'incluent que du texte brut. Ils ne contiennent pas d'images, de vidéos ou de boutons. De fait, tout le texte d'un e-mail en texte brut s'affiche généralement de la même façon, de sorte qu'il n'y a pas de véritable personnalisation. Un texte brut s'apparente aux textes sur lesquels vous travaillez dans le Bloc-notes, tandis que le HTML est plus proche des textes que vous rédigez dans Microsoft Word ou un autre éditeur de texte enrichi. Cependant, les e-mails en texte brut ont toujours leur place dans le monde moderne.

Les e-mails en HTML sont écrits à l'aide d'un code de langage de balisage hypertexte, qui vous permet d'implémenter des graphiques, d'ajouter des boutons et d'intégrer des vidéos directement dans vos e-mails. Vous pouvez également utiliser des balises HTML pour personnaliser l'apparence de la police, que vous souhaitiez utiliser une police différente ou modifier la couleur ou la taille de la police que vous utilisez. Les balises d'en-tête, d'indice et d'exposant offrent encore plus de possibilités pour personnaliser l'affichage du texte dans un e-mail en HTML.

De nombreuses personnes ne connaissent pas les e-mails en HTML, mais les éditeurs WYSIWYG (« What you see is what you get », ou « Ce que vous voyez est ce que vous obtenez ») proposés par beaucoup de clients de messagerie disposent de fonctionnalités similaires. Tout comme Gmail vous permet de mettre du texte en gras, en italique ou de le souligner, vous pouvez utiliser du code HTML pour personnaliser l'apparence de vos e-mails. Le seul inconvénient réel de ces éditeurs WYSIWYG, c'est que vos e-mails ne s'afficheront peut-être pas de la même façon sur des appareils ou des clients de messagerie différents. Cela dit, la plupart des éditeurs WYSIWYG populaires font du bon travail si vous souhaitez créer une campagne sans apprendre à coder.

Si vous souhaitez rédiger des e-mails HTML de grande qualité, lisibles sur plusieurs appareils et clients de messagerie, vous devez respecter un certain nombre de bonnes pratiques. Voici quelques bonnes pratiques en matière de format d'e-mail HTML pour vous aider à trouver le format idéal pour votre campagne par e-mail.

Taille de l'écran

Il fut un temps marqué par plus de simplicité où la majorité des écrans d'ordinateur affichaient une résolution de 800x600. Cette époque est révolue. Aujourd'hui, nous avons des téléphones, des ordinateurs, des ordinateurs portables et des tablettes capables d'exécuter des résolutions beaucoup plus élevées, et chaque appareil affiche un rapport de forme différent.

La conception réactive signifie que vos e-mails sont conçus pour s’afficher correctement, quelle que soit la résolution d’écran sur laquelle ils sont consultés. Vous ne pouvez pas vous permettre d'avoir une partie de votre e-mail tronquée parce qu’elle ne correspond pas à l’écran d’un utilisateur, mais vous ne voulez pas non plus des les graphismes et du texte d'une taille trop réduite, impossible à lire. Pour éviter cela, vous devez définir des tableaux et des images à différentes largeurs en fonction de la taille de l’écran sur lequel ils seront affichés. Il est utile de tester minutieusement la mise en page de votre e-mail HTML avant de l’envoyer à votre liste de diffusion.

Temps de chargement

Si le chargement d'un e-mail prend trop de temps, beaucoup de lecteurs abandonneront et passeront à l'e-mail suivant. Vous pensez peut-être que tout le monde dispose d'un appareil et d'une connexion Internet suffisamment rapides pour charger facilement n'importe quel e-mail, mais ce n'est pas toujours le cas. Pour les personnes qui utilisent un appareil plus ancien ou une connexion cellulaire, il peut être difficile de charger un e-mail qui contient des images, des vidéos et d'autres contenus multimédias.

Cela ne veut pas dire que vous ne devez pas inclure de médias dans vos messages, mais il est nécessaire de tenir compte des temps de chargement et de leur impact sur le taux de rebond de vos e-mails. Limiter au maximum le temps de chargement de vos e-mails en HTML est aussi important que veiller à leur esthétique.

Différences entre fournisseurs de messagerie

L'un des plus gros problèmes auxquels sont confrontés les développeurs web est que les navigateurs peuvent afficher différemment un même code HTML ou CSS. Il en va de même pour le marketing par e-mail en HTML et les différents clients de messagerie. Même si votre e-mail semble parfait lorsque vous le créez, il est possible que certains clients de messagerie n'affichent pas correctement les images ou vidéos ou ne prennent pas en charge la police que vous utilisez.

Tenez compte des différents fournisseurs de messagerie lorsque vous créez un e-mail en HTML. Il s'agit non seulement d'une recommandation pour vos formats en HTML, mais aussi d'une des principales bonnes pratiques en matière d'e-mails à suivre dans le domaine du marketing par e-mail.

Cela permet aux abonnés de donner facilement leur avis sur les e-mails qu'ils ont reçus. Si vous recevez beaucoup de commentaires sur des images qui ne chargent pas ou des e-mails qui ne s'affichent pas correctement, pensez à ajuster votre mise en page HTML pour trouver une meilleure solution.

Conception pour mobile

À l'époque où la plupart des utilisateurs de messagerie accédaient à leurs e-mails sur ordinateur, il n'était pas nécessaire de concevoir ceux-ci pour différents appareils. Maintenant que la navigation mobile a supplanté l'utilisation des ordinateurs de bureau et portables, il est plus important que jamais de créer vos e-mails pour les appareils mobiles. Vous devez vous assurer que vos e-mails s'affichent aussi bien sur tablette, smartphone ou ordinateur portable.

Si vous ne concevez pas votre format d'e-mail en HTML pour qu'il fonctionne sur appareils mobiles, votre marketing par e-mail passe à côté d'une grande partie de son audience.

Testez !

Lorsque vous pensez que votre format d’e-mail en HTML est fin prêt, il est temps de le tester pour en juger par vous-même. Vous pouvez envoyer vos e-mails à plusieurs comptes connectés à différents clients de messagerie, ou utiliser des outils de test d'e-mail pour vous faciliter la tâche. L'important est de tester scrupuleusement vos e-mails avant de les envoyer à votre liste de diffusion.

En plus des tests, vous pouvez demander aux destinataires de donner leur avis sur le format de vos e-mails. Si vous recevez plusieurs critiques sur une image qui ne s'affiche pas correctement ou un e-mail qui prend trop de temps à charger, c'est le signe que vous devez mieux concevoir vos e-mails en HTML pour ce client en particulier.

Le HTML est plus facile à apprendre que vous ne le pensez

La plupart des gens se sont habitués à utiliser les éditeurs WYSIWYG, mais un bon format d'e-mail en HTML a toujours une place dans le monde moderne du marketing par e-mail. Bien que la conception des e-mails en HTML puisse sembler un peu compliquée au début, elle sera beaucoup plus facile une fois que vous en aurez appris les bases. L'utilisation d'outils de test et la conception pour mobile peuvent même vous aider à éviter de créer des e-mails qui ne fonctionnent pas avec certains appareils ou fournisseurs de messagerie.

Si vous souhaitez simplifier la création d'e-mails en HTML qui fonctionnent pour votre liste de diffusion, Mailchimp peut vous aider. Avec des modèles en HTML pour les e-mails et une pléthore d'outils performants pour faciliter le marketing et l'automatisation des e-mails, Mailchimp est votre solution tout-en-un pour le marketing par e-mail. Si votre campagne de marketing par e-mail nécessite un coup de fouet, essayez Mailchimp dès aujourd'hui.

Laptop screen showcasing 'Unlocking Advanced Email Marketing' Checklist

Recevez le guide Mailchimp des stratégies avancées de marketing par e-mail

Développez votre activité en disposant de connaissances et de stratégies utiles pour améliorer vos e-mails, capter l'attention des audiences et transformer les prospects en clients fidèles.

Remplir le formulaire ci‑dessous pour recevoir la brochure

Partagez cet article