Petit quiz rapide : Quel est le nom du langage que les développeurs web utilisent pour créer les structures des sites que vous visitez tous les jours ? Le langage de balisage hypertexte (Hypertext  Markup Language ou HTML) est une norme éternelle, présente dès la naissance du web. Cependant, cela ne s’applique pas uniquement aux pages web. Votre boîte de réception est un terrain fertile pour la conception d’e-mails en HTML.

C’est logique si l’on considère le nombre d’images, de GIF, de vidéos et de contenus de marque que vous voyez presque toutes les heures dans vos e-mails. Alors que vous pourriez proposer un e-mail en texte brut, une version HTML offrira plus d’avantages et vous donnera plus d’occasions de vous faire connaître et de commercialiser votre entreprise.

Dans cet article, nous allons voir comment créer et envoyer des e-mails en HTML, et pourquoi vous devriez le faire. À certains moments, nous nous pencherons sur la manière de coder un e-mail, mais vous n’aurez pas besoin de ces connaissances pour créer le vôtre.


Qu’est-ce qu’un e-mail HTML ?

Les e-mails qui arrivent dans votre boîte de réception peuvent être de deux types :

  • Texte brut : C’est presque un télégramme pour l’ère moderne. Il n’y a pas de style ou un formatage minimal, et le destinataire verra les mots à l’exclusion de tout le reste.
  • HTML : Comparé au texte brut, c’est un feu d’artifice qui fait la part belle au design. Il utilise le code HTML pour présenter un e-mail, bien que, comme nous le verrons, il n’utilise pas toujours les normes web modernes.

Par exemple, vous saurez si vous recevez un email en texte brut, car il ressemble exactement à un document en texte brut. En revanche, un e-mail HTML ressemble presque à une page web moderne (à quelques détails près) :

Un e-mail HTML dans le navigateur.
Un e-mail HTML dans le navigateur.

Dans la plupart des cas, un e-mail HTML ne cherchera pas à offrir le summum de l’interactivité ou de l’engagement dynamique. Encore une fois, c’est un sujet que nous aborderons plus tard, mais l’e-mail HTML est à la traîne par rapport au web, du point de vue des normes. En tant que tel, le HTML est davantage un outil axé sur la conception qu’un outil permettant d’offrir une expérience. Cela soulève toutefois une question : Pourquoi vouloir utiliser l’e-mail HTML si la seule raison est visuelle ? Nous tenterons d’y répondre dans un prochain article.

Q : Quel est le langage utilisé par les développeurs web pour créer les sites que vous visitez tous les jours ? 🤔 R : HTML... et vous pouvez en apprendre davantage dans ce guide ✅Click to Tweet

Pourquoi utiliser l’e-mail HTML plutôt que le formatage en texte brut

Il est rare que vous voyiez un email en texte brut provenant d’une entreprise, et ce pour plusieurs raisons. Cependant, le texte brut n’est pas mauvais en soi, mais plutôt qu’il n’offre aucun des avantages du formatage des e-mails HTML. Par exemple :

  • Vous pouvez utiliser les éléments visuels inhérents pour aider à concentrer l’attention sur les différentes parties du contenu de votre e-mail.
  • Par extension, un e-mail HTML est un format riche pour présenter votre contenu. Cela signifie que vous pouvez tirer parti des éléments que les utilisateurs attendent pour s’engager avec eux, tels que les images, les vidéos, etc.
  • Combinés, ces deux aspects peuvent vous offrir une superbe opportunité de marquer votre contenu, tout comme vous le feriez pour votre site web principal.

Cependant, décider d’utiliser un e-mail HTML n’est pas la tempête parfaite que l’on pourrait croire. Il y a aussi quelques inconvénients à considérer. Tout d’abord, vous devez tenir compte de l’expérience de l’utilisateur, tout comme vous le feriez lors de la conception d’un site web. Cela ne concerne pas uniquement le navigateur – de nombreux utilisateurs préfèrent également lire les e-mails dans un client dédié.

De plus, vous devez également tenir compte de certaines des questions de confidentialité et de sécurité qui dominent le développement web. Cela est particulièrement vrai si vous voulez inclure JavaScript, si vous faites appel à des polices de caractères tierces, et d’autres aspects.

De ce fait, vous devez mener des batailles d’accessibilité et de normes presque sur d’autres fronts que le web. Il est difficile de créer un e-mail HTML qui fonctionne sur plusieurs navigateurs et clients. Bien sûr, il est possible de le faire, et nous couvrirons l’aspect technique dans une prochaine section. Pour l’instant, il s’agit de décider des différents éléments de votre e-mail, puis de chercher à les mettre en œuvre.

Les éléments essentiels (et les pratiques typiques) d’un e-mail HTML

Cet article fera référence à la conception web à plusieurs endroits, en raison des similitudes inhérentes. Un aspect qui offre un flux de travail similaire est la façon de décider des facettes et des sections de votre e-mail HTML.

Tout comme sur le web, certains éléments sont pratiquement non négociables pour vos e-mails. Bien sûr, vous avez besoin de contenu. Il y a quelques éléments typiques à considérer ici :

  • Votre en-tête est important car il s’agit de la première impression que votre e-mail offrira aux lecteurs.
  • À l’instar de la conception de sites web, réfléchir aux éléments à afficher au-dessus du pli sera également bénéfique.
  • Le contenu du corps du message est vital car, après tout, c’est la raison pour laquelle le lecteur s’abonnera à vos e-mails.
  • Le pied de page de votre e-mail HTML offre également beaucoup de valeur pour vous et vos abonnés, et il peut être un élément sous-évalué de vos e-mails.

Il y a ici quelques points que nous pouvons aborder plus en détail. Tout d’abord, considérez à quel point les emojis imprègnent notre utilisation quotidienne du web. Bien qu’ils ne soient pas un élément HTML strict, une application de bon goût des emojis peut faire des merveilles pour votre contenu, en particulier votre en-tête :

Une sélection d'emojis utilisés dans l'en-tête du titre.
Une sélection d’emojis utilisés dans l’en-tête du titre.

Le pied de page est également le meilleur endroit pour quelques informations juridiques essentielles. Deux des plus grands problèmes liés aux e-mails sont le spam et le fait de savoir si un e-mail atteint les bonnes boîtes de réception (le cas échéant). Nous nous pencherons sur ce sujet dans une section ultérieure, car il s’agit d’une partie essentielle de la création et de l’envoi d’e-mails HTML.

Considérer quelques pratiques typiques pour vos e-mails HTML

Il existe de nombreux points communs entre le marketing par e-mail et certaines des pratiques les plus optimales que vous utiliserez dans vos conceptions et mises en page. Il y en a une que vous voudrez inclure presque comme un élément non négociable : Une double adhésion.

L’une des plus grandes astuces de marketing par e-mail est que vous voulez amener vos e-mails au lecteur. En d’autres termes, proposez un formulaire d’adhésion sur un site web, car cela a un fort taux de conversion. Toutefois, cela ne doit pas être le seul moment où vous demandez une confirmation. C’est une excellente pratique d’envoyer également une seconde adhésion sous forme d’e-mail :

Un email de double adhésion.
Un email de double adhésion.

Il y a plusieurs raisons à cela :

  • Premièrement, cela établit une relation de confiance avec votre lecteur, car vous obtenez la permission explicite de lui envoyer des e-mails.
  • Par extension, vous avez également un consentement explicite dans le cas d’un renvoi de spam (nous y reviendrons plus tard).
  • Vous contribuez à mettre fin à l’abus d’e-mails et de spam pour les autres, car ils doivent spécifiquement opter pour un abonnement à vos e-mails.

En effet, comme une double adhésion implique que vous envoyiez un e-mail à l’adresse en question, c’est le meilleur moyen de valider l’adresse e-mail.

Il existe également quelques autres bonnes pratiques à prendre en compte. Cependant, celles qui suivent sont plus facultatives, en ce sens que vous obtiendrez des résultats fantastiques, mais qu’il y aura des moments où vous ne voudrez pas suivre ces directives :

  • Votre ligne d’objet doit être parfaite, et le contenu de vos e-mails doit aller droit au but. Étant donné l’avènement et maintenant la domination de la navigation mobile, ceci est particulièrement important.
  • En parlant de cela, vous devez vous assurer que votre e-mail HTML se lit sans problème sur les écrans plus petits – ce qui signifie pas de bannières trop grandes ou de logos surdimensionnés.
  • Si vous incluez un appel à l’action (Call To Action ou CTA) fort dans chaque e-mail, vous avez de bonnes chances d’obtenir un meilleur engagement des utilisateurs.
  • Le suivi est une question controversée, mais vous aidera à comprendre ce que font vos utilisateurs lorsque vous leur envoyez un e-mail. Certains fournisseurs incluent un solide ensemble d’analyses en standard.

La conception et la mise en page sont tout aussi importantes que la façon dont vous présentez et configurez votre e-mail. Dans les prochaines sections, nous verrons comment construire un e-mail HTML, puis nous terminerons par quelques conseils pour les envoyer.

L’approche technique que vous devez adopter pour créer un e-mail HTML

Si vous avez une certaine expérience du développement web, vous utiliserez sans doute le HTML5 comme langage de balisage. Il s’agit d’un monde à part par rapport aux instances précédentes du HTML et du XHTML, qui comprend une plus grande division entre le style (dont il n’existe pratiquement aucun élément valide) et la structure.

Pour illustrer cette dernière, HTML5 propose un certain nombre de balises différentes pour définir les zones de contenu de votre site.

Un certain nombre de balises HTML structurelles.
Un certain nombre de balises HTML structurelles.

Cependant, le HTML des e-mails est une bête différente, dans la mesure où il est quelque peu en retard sur son temps. En tant que tel, vous voudrez utiliser tous ces vieux tableaux HTML4 et le style en ligne pour créer votre mise en page. Pour savoir pourquoi, il faut s’adresser aux développeurs des clients de messagerie, car ils modifient souvent l’e-mail HTML lorsqu’il arrive dans votre boîte de réception. L’un des actes les plus courants consiste à supprimer les CSS et JavaScript des e-mails pour des raisons de sécurité (entre autres).

Cela signifie que vous devrez fournir un autre moyen d’ajouter du style à vos e-mails HTML – l’insertion en ligne est la seule option pour la compatibilité. En parlant de compatibilité, il s’agit d’une considération importante. Vous devez trouver un équilibre entre un style unique et les capacités du client de messagerie de l’utilisateur final. En tant que tel, il y a quelques autres considérations techniques que vous voudrez noter :

  • L’utilisation de polices système plutôt que de polices tierces vous permettra d’économiser une requête HTTP, de charger rapidement l’e-mail pour l’utilisateur et de fournir un e-mail d’apparence cohérente.
  • Vous pouvez même aller plus loin et fournir une version en texte brut de votre e-mail pour ceux qui ne peuvent pas afficher l’e-mail HTML dans leur client. De nombreux sites proposent une version HTML à laquelle vous pouvez accéder en ligne, à la fois pour cette raison et comme sauvegarde.
  • Le texte alternatif est tout aussi important pour les e-mails HTML que pour le web. En tant que tel, utilisez le texte alt partout où vous ajoutez une image à votre contenu pour des raisons d’accessibilité.

Il y a un aspect technique d’un e-mail HTML auquel vous devriez réfléchir davantage, car il peut chevaucher la ligne entre le style en ligne, le CSS et d’autres facteurs. Parlons brièvement des « conditionnels ».

Utilisation des conditionnels

Les conditionnels sont un vestige des e-mails HTML qui faisaient partie de la boîte à outils des anciens développeurs web HTML. C’est là que vous spécifiez quel navigateur utilisera un extrait de code particulier.

En toute honnêteté, il s’agit presque toujours d’un problème lié à Microsoft. Pour les développeurs web, Internet Explorer (IE) a été le démon des navigateurs. En revanche, pour les e-mails HTML, c’est Outlook. Entre les différentes versions, vous pouvez constater que votre style est rendu d’une manière à laquelle vous ne vous attendiez pas.

Pour cette raison, vous pouvez ajouter des blocs de condition à votre code, et définir ces éléments. Par exemple, vous pouvez cibler les versions d’Outlook basées sur Word et sur IE.

D’abord, Word :

<!--[if mso]>

Ceci est pour les versions d’Outlook basées sur Word :

<![endif]-->

Pour Internet Explorer, vous utilisez une balise différente :

<!--[if (IE)]>

Ceci est pour les versions d’Outlook basées sur IE :

<![endif]-->

Si le navigateur que vous ciblez est basé sur WebKit (comme Apple Safari, le navigateur PlayStation, le Kindle d’Amazon, etc.), vous pouvez utiliser une requête média pour fournir un style spécifique :

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

Vous disposez ainsi d’un moyen légèrement plus efficace d’adapter votre e-mail HTML à l’affichage de l’utilisateur final. Dans l’ensemble, le style HTML pour les e-mails n’est pas parfait, mais il y a suffisamment de puissance sous le capot de chaque client de messagerie pour vous aider à créer des mises en page étonnantes.

Vos options pour créer des e-mails HTML

Malgré ce que nous avons déjà évoqué, vous disposez d’un certain nombre d’options flexibles pour vous aider à créer des e-mails HTML. Par exemple, vous pouvez partir de zéro en utilisant un bon éditeur de texte et du HTML.

Cependant, il existe d’autres options que nous pouvons envisager :

  • Vous pouvez utiliser un service dédié, tel qu’une application de marketing par e-mail, pour créer vos e-mails. De nombreuses applications fournissent un constructeur visuel, mais vous donnent également la possibilité d’écrire votre propre code et de créer votre propre modèle.
  • En parlant de cela, vous pouvez télécharger un modèle pour vos e-mails HTML. Cela ressemble beaucoup à un thème WordPress, dans la mesure où il fournit une base pour le reste de votre conception. À partir de là, vous pouvez le personnaliser à votre guise. C’est un bon moyen terme entre les options de codage et de construction.

Plus tard, nous construirons notre e-mail à l’aide de HTML. Mais avant cela, examinons certains des fournisseurs de services d’e-mail que vous pouvez envisager, quelle que soit la méthode que vous avez choisie pour créer vos e-mails.

3 fournisseurs de services d’e-mail parfaits pour créer des e-mails HTML

Cet article étant consacré à la création d’e-mails en HTML, il n’est pas nécessaire d’aller trop loin en ce qui concerne les fournisseurs de services de messagerie. Néanmoins, il y en a quelques-uns que vous allez probablement considérer.

Nous ne pouvons pas tous les couvrir, nous allons donc mentionner trois des plus populaires. Faisons le tour de la question.

1. Mailchimp

Le logo de Mailchimp.
Le logo de Mailchimp.

Ce fournisseur de services d’e-mail est une solution de premier choix – presque une décision instinctive pour beaucoup. Mailchimp est l’étalon-or des applications d’e-mail marketing aux yeux de beaucoup, et il y a beaucoup de bonnes raisons à cela :

  • Il comprend de nombreuses fonctionnalités typiques que vous trouverez dans de nombreuses autres applications similaires.
  • Il y a beaucoup d’aide lorsqu’il s’agit de promouvoir une entreprise, comme l’automatisation du marketing, les outils de gestion de l’audience, et plus encore.
  • Vous disposez d’une suite d’outils créatifs de premier ordre pour vous aider à créer des e-mails HTML.

Bien entendu, nous voulons ici nous pencher sur ces dernières. L’assistant créatif est un moyen pour Mailchimp d’apprendre à connaître votre marque et de vous aider à construire et à personnaliser vos e-mails. Vous pouvez également connecter des applications tierces telles qu’Adobe Photoshop pour vous aider à construire l’e-mail parfait.

Il est également simple de travailler avec du HTML existant, surtout si vous utilisez le Classic Builder de Mailchimp. Quoi qu’il en soit, vous disposez de moyens d’importer des modèles HTML si vous en avez besoin.

Mailchimp utilise un hybride compliqué de niveaux d’abonnement mensuel et du nombre de contacts pour arriver à un prix final. Nous pensons que les petites entreprises ont besoin d’un plan d’environ 35 $ par mois, jusqu’à 2 500 contacts. Cependant, vous devrez rechercher le meilleur plan pour vous, en fonction des fonctionnalités dont vous avez besoin et du nombre de contacts que vous pensez amener à bord.

2. AWeber

Pour certains, AWeber représente l’apogée du marketing par e-mail. Il s’agit d’une plateforme fantastique et puissante qui comprend un ensemble de fonctionnalités sans doute plus ciblées que Mailchimp.

Le logo AWeber.
Le logo AWeber.

Il comprend un certain nombre de fonctionnalités essentielles dont vous aurez besoin pour envoyer des e-mails :

  • Vous avez la possibilité d’automatiser et de planifier des messages, des campagnes, et plus encore.
  • Vous disposez d’excellents outils d’organisation, tels que le marquage et la segmentation des abonnés.
  • AWeber vous permet également d’automatiser le contenu que vous créez pour vos e-mails. Par exemple, vous pouvez transformer des articles de blog en publipostages avec un minimum de travail.

Lorsqu’il s’agit de créer vos e-mails, AWeber a quelques tours dans son sac. Il utilise un constructeur visuel de type glisser-déposer et comprend une bibliothèque de modèles personnalisés pour vous permettre de démarrer. De plus, vous pouvez connecter AWeber à votre compte Canva et utiliser ce dernier pour vous aider à concevoir vos e-mails.

Il y a également un éditeur HTML dédié, ce qui n’est pas le cas avec Mailchimp. Vous en bénéficiez même dans la version gratuite d’AWeber. En parlant de cela, la tarification est plus simple ici. Vous paierez environ 25 $ par mois pour un maximum de 2 500 contacts.

3. Constant Contact

Constant Contact est un cas à part parmi les fournisseurs de services de messagerie, mais il s’agit plutôt d’une arme secrète. Il offre une gamme fantastique de caractéristiques et de fonctionnalités, et vous permet également de travailler avec du HTML lorsque vous en avez besoin.

Le logo de Constant Contact.
Le logo de Constant Contact.

Tout comme AWeber, Constant Contact se concentre sur le marketing par e-mail plutôt que sur d’autres domaines centrés sur les entreprises. En tant que tel, il dispose d’un ensemble de fonctionnalités que vous apprécierez :

  • Vous disposez d’outils de gestion des listes de clients et d’une fonctionnalité d’automatisation du marketing.
  • Il existe des options de rapports étendues.
  • Vous êtes en mesure d’intégrer des programmes publicitaires de Facebook, Instagram et Google.
  • Il existe de nombreuses façons d’engager et d’attirer de nouveaux abonnés sur vos listes.

La fonctionnalité de conception de Constant Contact est également bonne. Vous pouvez choisir un modèle et travailler avec un éditeur visuel pour construire l’ensemble du design. Cependant, vous pouvez également travailler avec le HTML – parfois de manière avancée par rapport à d’autres outils.

Le prix est également raisonnable. Vous paierez environ 35 $ par mois pour le plan Core et 2 500 contacts, ou 70 $ pour le plan Plus.

Ce dont vous avez besoin pour créer un e-mail HTML

Avant de commencer à construire vos e-mails HTML, vous aurez besoin de quelques outils et compétences à portée de main. Voici ce dont vous devez disposer avant de vous lancer :

  • Vous voudrez utiliser un éditeur de code que vous trouvez confortable, car il devra vous soutenir pendant le processus. Si vous ne savez pas lequel choisir, de nombreux utilisateurs optent pour Visual Studio Code, même si Brackets serait idéal pour cette tâche particulière. Nous allons utiliser Onivim2, qui est un éditeur de style Vim basé sur l’infrastructure de base de VS Code.
  • Bien que vous ayez besoin de compétences en HTML, vous n’aurez pas besoin du même ensemble de connaissances qu’un développeur web moderne (bien que cela ne nuise pas à vos perspectives).
  • Vous aurez besoin d’un moyen de tester vos e-mails – MailHog est une solution que nous présentons ailleurs sur le blog Kinsta.
  • Même si nous n’allons pas utiliser un modèle pré-établi, vous pourriez vouloir en utiliser un à l’avenir.
  • Vous aurez également besoin d’un fournisseur d’e-mail, car vous aurez besoin d’un moyen d’envoyer votre e-mail HTML fini.

Avec tout cela en place, vous êtes prêt à ouvrir un éditeur de texte et à commencer. Nous allons maintenant suivre le processus de création d’un e-mail HTML de base.

Comment créer un e-mail HTML à partir de zéro ?

Avant de commencer, il est bon de noter que nous n’allons pas utiliser un service dédié tel que Mailchimp ou AWeber. Au lieu de cela, nous allons créer un modèle simple à partir de zéro que vous pouvez importer où vous voulez.

Nous allons diviser le processus en plusieurs sections différentes, car même si un e-mail HTML est simplement relatif à un site web, il y a encore beaucoup de choses à prendre en compte.

1. Créez la base de votre e-mail HTML

C’est une bonne idée de commencer par le squelette de votre modèle d’e-mail. Celui-ci suivra certaines pratiques typiques pour le HTML en général :

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

Il y a quelques éléments à mentionner ici. Tout d’abord, nous spécifions un « doctype » pour Transitional XHTML 1.0, ce qui est une pratique courante parmi les développeurs d’e-mails. Ensuite, nous spécifions un espace de noms XML, qui sera important plus tard.

Vous remarquerez également quelques balises méta, qui définissent le jeu de caractères et la manière dont le navigateur doit rendre le HTML qui suit dans sa fenêtre d’affichage.

Le reste du squelette est simple – il y a les balises title et body que nous utiliserons ensuite.

2. Ajoutez la structure de votre modèle d’e-mail

Pour en revenir à notre discussion sur les balises HTML à utiliser, vous vous souviendrez que nous ne voulons pas utiliser de <div> ou d’autres éléments structurels typiques. Au lieu de cela, nous voulons utiliser des tableaux, car cela donne un bon rendu dans les clients et services de messagerie.

Tout commencera par un simple ensemble de balises <table> dans le corps :

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

L’attribut que nous définissons dans la balise <table> aide les lecteurs d’écran à analyser le texte qu’elle contient, ce qui est bon pour l’accessibilité.

À partir de là, vous devrez ajouter de nouvelles lignes et colonnes à votre tableau afin de construire le modèle d’e-mail HTML. La manière de procéder vous appartient, mais il est bon de commencer par une base de sections d’en-tête, de pied de page et de corps. Nous ne les répéterons pas ici par souci de brièveté, mais nous les mentionnerons au fur et à mesure de notre progression.

La bonne nouvelle est que vous pouvez continuer à ajouter de nouvelles lignes à votre tableau si vous avez besoin d’ajouter d’autres sections. Cependant, à partir d’ici, vous voudrez commencer à introduire des éléments de style et autres.

3. Incluez le style de vos éléments

La beauté du HTML est qu’il est presque agnostique à votre style. Le balisage est simple, mais les styles que vous appliquez ne le sont pas forcément. C’est ici que vous verrez votre e-mail HTML prendre vie.

À titre de guide pendant que nous concevons, nous ajouterons une balise <style> au <head> pour afficher une bordure générale :

<style>
  table, td {border:2px solid #000000 !important;}
</style>

Pour commencer, nous allons nous assurer qu’il n’y a pas d’espace inattendu dans le corps ou le tableau principal (qui fait ici office de corps car certains clients de messagerie suppriment cette balise) :

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

Nous allons également ajouter un centrage et supprimer tout remplissage supplémentaire des cellules de nos différentes sections :

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

Si vous regardez ceci dans votre navigateur, cela ne ressemblera pas à grand-chose :

Une fenêtre de navigateur montrant le squelette de l'e-mail HTML.
Une fenêtre de navigateur montrant le squelette de l’e-mail HTML.

Cependant, à partir de là, vous pouvez développer davantage votre modèle d’e-mail en utilisant des tableaux et des balises de style. Par exemple, nous avons créé une section « Hero » pour notre en-tête, et développé le pied de page et le corps :

Une maquette de modèle d'e-mail pendant la création
Une maquette de modèle d’e-mail pendant la création (Image source : Settergren).

Vous créerez probablement un modèle meilleur et plus adapté à vos besoins, mais en utilisant des tableaux imbriqués et quelques compétences HTML de base, vous pouvez créer un modèle d’e-mail HTML responsive et personnalisé qui fait mouche.

4. Testez votre e-mail

Avant de terminer, vous voudrez tester votre e-mail afin de vous assurer qu’il s’affiche correctement sur différents appareils. Il existe quelques services différents qui peuvent vous aider à cet égard.

Par exemple, Email on Acid comprend une liste de contrôle complète de pré-déploiement pour vous aider à vous assurer que votre modèle ne pose pas de problèmes :

Le site web d'Email on Acid.
Le site web d’Email on Acid.

Les utilisateurs de Litmus connaissent PutsMail, mais il est accessible à tous :

Le site web de Litmus.
Le site web de Litmus.

Vous devrez créer un compte pour utiliser le service, mais il est simple à utiliser. Vous exploitez la fonctionnalité pour prévisualiser les e-mails dans un certain nombre de navigateurs différents et sur divers appareils.

Mailgun propose également un service fantastique qui est lié à son offre principale. Vous pouvez tester des clients de messagerie, des navigateurs et bien plus encore via l’interface. En outre, vous pouvez tester des éléments tels que les lignes d’objet, pour vous assurer que vous maintenez vos taux d’ouverture élevés.

L'outil Email Tester de Mailgun.
L’outil Email Tester de Mailgun.

Cependant, une fois que vous aurez testé votre e-mail, vous devrez vous assurer qu’il atteint la boîte de réception du destinataire. Nous en parlerons davantage dans la dernière section.

Envoi d’un e-mail HTML : Ce que vous devez savoir

L’un des avantages de l’utilisation d’un service de marketing par e-mail que nous n’avons pas encore mentionné est la façon dont il gère l’aspect juridique de l’envoi d’e-mails. C’est un point important, car si vous vous trompez, non seulement vous ne parviendrez pas à atteindre un destinataire, mais vous vous mettrez dans le pétrin.

Un service de marketing par e-mail aura déjà une bonne relation de travail avec les organisations qui gèrent le spam et les aspects connexes de l’envoi d’un e-mail. En tant que tel, c’est souvent une bonne idée de choisir l’un d’entre eux si vous ne voulez pas avoir à vous soucier de la livraison de spams.

Toutefois, nous pouvons vous donner quelques conseils qui comptent quelle que soit la plate-forme que vous utilisez :

  • Veillez à respecter toutes les directives de la loi CAN-SPAM, surtout si votre public principal se trouve aux États-Unis. Bien entendu, les différents pays auront leurs propres directives légales.
  • Incluez une double adhésion (opt-in) pour les abonnés. Dans ce cas, vous leur demandez de confirmer leur abonnement, mais vous leur envoyez également une deuxième confirmation. Cela vous protège, ainsi que l’abonné, en cas de demande de spam ou de demande de confidentialité par la suite.

La délivrabilité est un élément clé de vos e-mails, et c’est un sujet que nous abordons en profondeur dans un autre article. Cependant, ce concept est un mélange de plusieurs aspects, comme l’utilisation d’un bon code, l’obtention du bon niveau de permission, et plus encore.

Ceci est lié à une autre facette – votre score d’envoi. Celui-ci s’apparente à un score de confiance et constitue en fin de compte une mesure de votre réputation. Il y a ici quelques composants différents qui forment un tout :

  • Le taux de rebond de votre site.
  • Le nombre de plaintes reçues par votre site concernant les e-mails que vous envoyez.
  • La réputation de votre adresse IP.
  • La signature de votre nom de domaine.

Ce dernier se rapporte à votre DomainKeys Identified Mail (DKIM) et à votre Sender Policy Framework (SPF). En outre, vous pouvez vérifier la réputation de votre IP grâce à des services tels que SenderScore, ou IPQualityScore.

Si vous choisissez le bon fournisseur de protocole de transport d’e-mail (SMTP) en premier lieu, vous pouvez cocher certaines de ces cases d’un seul coup. Tout comme votre choix de solution d’e-mail marketing, ce service comprendra ce dont vous avez besoin pour maintenir un haut niveau de délivrabilité et rester du bon côté des pouvoirs en place.

Mailgun est une solution que nous avons mentionnée précédemment, et cela pourrait être idéal. Cependant, il en existe d’autres comme Mailjet, Sendinblue, et même le propre service de Gmail.

Apprenez à créer et à envoyer des e-mails HTML avec un peu d'aide de ce guide 💪Click to Tweet

Résumé

L’e-mail n’est pas près de toucher à sa fin. En tant que tel, l’utilisation de l’e-mail pour vos propres besoins – tels que la promotion et le marketing – est un moyen fantastique et rentable d’atteindre des abonnés, utilisateurs et clients potentiels.

Alors que vous pourriez acheter un modèle HTML dédié, créer vos propres e-mails HTML n’est pas si difficile. Cela pourrait être la voie de votre réussite si vous avez une vision spécifique en tête. Toutefois, vous devrez ressortir vos vieux trucs HTML, comme les conditionnels et les tableaux imbriqués. La conception d’e-mails en HTML n’est pas encore au niveau de la conception de sites web modernes, mais vous pouvez encore réaliser beaucoup avec peu de choses.

Vous avez besoin de créer des e-mails HTML, et si oui, quelles sont vos questions ? Faites-nous en part dans la section des commentaires ci-dessous !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 34 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.