{"id":59084,"date":"2022-06-30T09:57:23","date_gmt":"2022-06-30T08:57:23","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=59084&#038;preview=true&#038;preview_id=59084"},"modified":"2025-09-15T16:31:55","modified_gmt":"2025-09-15T15:31:55","slug":"creation-envoi-e-mail-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/","title":{"rendered":"Guide du d\u00e9butant pour la cr\u00e9ation et l&rsquo;envoi d&rsquo;un e-mail HTML"},"content":{"rendered":"<p>Petit quiz rapide : Quel est le nom du langage que les d\u00e9veloppeurs web utilisent pour cr\u00e9er les structures des sites que vous visitez tous les jours ? Le <a href=\"https:\/\/kinsta.com\/fr\/blog\/apprendre-le-html\/\">langage de balisage hypertexte (Hypertext\u00a0 Markup Language ou HTML)<\/a> est une norme \u00e9ternelle, pr\u00e9sente d\u00e8s la naissance du web. Cependant, cela ne s&rsquo;applique pas uniquement aux pages web. Votre bo\u00eete de r\u00e9ception est un terrain fertile pour la conception d&rsquo;e-mails en HTML.<\/p>\n<p>C&rsquo;est logique si l&rsquo;on consid\u00e8re le nombre d&rsquo;images, de GIF, de vid\u00e9os 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&rsquo;avantages et vous donnera plus d&rsquo;occasions de <a href=\"https:\/\/kinsta.com\/fr\/blog\/strategie-positionnement\/\">vous faire conna\u00eetre et de commercialiser votre entreprise<\/a>.<\/p>\n<p>Dans cet article, nous allons voir comment cr\u00e9er et envoyer des e-mails en HTML, et pourquoi vous devriez le faire. \u00c0 certains moments, nous nous pencherons sur la mani\u00e8re de coder un e-mail, mais vous n&rsquo;aurez pas besoin de ces connaissances pour cr\u00e9er le v\u00f4tre.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce qu&rsquo;un e-mail HTML ?<\/h2>\n<p>Les e-mails qui <a href=\"https:\/\/kinsta.com\/fr\/blog\/conception-email\/\" rel=\"noopener\">arrivent dans votre bo\u00eete de r\u00e9ception<\/a> peuvent \u00eatre de deux types :<\/p>\n<ul>\n<li><strong>Texte brut :<\/strong> C&rsquo;est presque un t\u00e9l\u00e9gramme pour l&rsquo;\u00e8re moderne. Il n&rsquo;y a pas de style ou un formatage minimal, et le destinataire verra les mots \u00e0 l&rsquo;exclusion de tout le reste.<\/li>\n<li><strong>HTML :<\/strong> Compar\u00e9 au texte brut, c&rsquo;est un feu d&rsquo;artifice qui fait la part belle au design. Il utilise le code HTML pour pr\u00e9senter un e-mail, bien que, comme nous le verrons, il n&rsquo;utilise pas toujours les normes web modernes.<\/li>\n<\/ul>\n<p>Par exemple, vous saurez si vous recevez un email en texte brut, car il ressemble exactement \u00e0 un document en texte brut. En revanche, un e-mail HTML ressemble presque \u00e0 une page web moderne (\u00e0 quelques d\u00e9tails pr\u00e8s) :<\/p>\n<figure id=\"attachment_123704\" aria-describedby=\"caption-attachment-123704\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123704 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-email-example.png\" alt=\"Un e-mail HTML dans le navigateur.\" width=\"1000\" height=\"756\"><figcaption id=\"caption-attachment-123704\" class=\"wp-caption-text\">Un e-mail HTML dans le navigateur.<\/figcaption><\/figure>\n<p>Dans la plupart des cas, un e-mail HTML ne cherchera pas \u00e0 offrir le summum de l&rsquo;interactivit\u00e9 ou de l&rsquo;engagement dynamique. Encore une fois, c&rsquo;est un sujet que nous aborderons plus tard, mais l&rsquo;e-mail HTML est <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-html\/\">\u00e0 la tra\u00eene par rapport au web<\/a>, du point de vue des normes. En tant que tel, le HTML est davantage un outil ax\u00e9 sur la conception qu&rsquo;un outil permettant d&rsquo;offrir une exp\u00e9rience. Cela soul\u00e8ve toutefois une question : Pourquoi vouloir utiliser l&rsquo;e-mail HTML si la seule raison est visuelle ? Nous tenterons d&rsquo;y r\u00e9pondre dans un prochain article.<\/p>\n\n<h2>Pourquoi utiliser l&rsquo;e-mail HTML plut\u00f4t que le formatage en texte brut<\/h2>\n<p>Il est rare que vous voyiez un email en texte brut provenant d&rsquo;une entreprise, et ce pour plusieurs raisons. Cependant, le texte brut n&rsquo;est pas <em>mauvais en soi<\/em>, mais plut\u00f4t qu&rsquo;il n&rsquo;offre aucun des avantages du formatage des e-mails HTML. Par exemple :<\/p>\n<ul>\n<li>Vous pouvez utiliser les \u00e9l\u00e9ments visuels inh\u00e9rents pour aider \u00e0 concentrer l&rsquo;attention sur les diff\u00e9rentes parties du <a href=\"https:\/\/kinsta.com\/fr\/blog\/conception-email\/\">contenu de votre e-mail<\/a>.<\/li>\n<li>Par extension, un e-mail HTML est un format riche pour pr\u00e9senter votre contenu. Cela signifie que vous pouvez tirer parti des \u00e9l\u00e9ments que les utilisateurs attendent pour s&rsquo;engager avec eux, tels que les images, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/hebergement-video\/\" rel=\"noopener\">vid\u00e9os<\/a>, etc.<\/li>\n<li>Combin\u00e9s, ces deux aspects peuvent vous offrir une superbe opportunit\u00e9 de marquer votre contenu, tout comme vous le feriez pour votre site web principal.<\/li>\n<\/ul>\n<p>Cependant, d\u00e9cider d&rsquo;utiliser un e-mail HTML n&rsquo;est pas la temp\u00eate parfaite que l&rsquo;on pourrait croire. Il y a aussi quelques inconv\u00e9nients \u00e0 consid\u00e9rer. Tout d&rsquo;abord, vous devez tenir compte de l&rsquo;exp\u00e9rience de l&rsquo;utilisateur, tout comme vous le feriez lors de la conception d&rsquo;un site web. Cela ne <a href=\"https:\/\/kinsta.com\/fr\/parts-de-marche-des-navigateurs\/\" rel=\"noopener\">concerne pas uniquement le navigateur<\/a>\u00a0&#8211; de nombreux utilisateurs pr\u00e9f\u00e8rent \u00e9galement lire les e-mails dans un client d\u00e9di\u00e9.<\/p>\n<p>De plus, vous devez \u00e9galement tenir compte de certaines des <a href=\"https:\/\/kinsta.com\/fr\/blog\/securite-du-travail-a-domicile\/\">questions de confidentialit\u00e9 et de s\u00e9curit\u00e9<\/a> qui dominent le d\u00e9veloppement web. Cela est particuli\u00e8rement vrai si vous voulez inclure JavaScript, si vous faites appel \u00e0 des polices de caract\u00e8res tierces, et d&rsquo;autres aspects.<\/p>\n<p>De ce fait, vous devez mener des batailles d&rsquo;accessibilit\u00e9 et de normes presque sur d&rsquo;autres fronts que le web. Il est difficile de cr\u00e9er un e-mail HTML qui fonctionne sur plusieurs navigateurs et clients. Bien s\u00fbr, il est possible de le faire, et nous couvrirons l&rsquo;aspect technique dans une prochaine section. Pour l&rsquo;instant, il s&rsquo;agit de d\u00e9cider des diff\u00e9rents \u00e9l\u00e9ments de votre e-mail, puis de chercher \u00e0 les mettre en \u0153uvre.<\/p>\n<h2>Les \u00e9l\u00e9ments essentiels (et les pratiques typiques) d&rsquo;un e-mail HTML<\/h2>\n<p>Cet article <a href=\"https:\/\/kinsta.com\/fr\/blog\/cours-web-design\/\" rel=\"noopener\">fera r\u00e9f\u00e9rence \u00e0 la conception web<\/a> \u00e0 plusieurs endroits, en raison des similitudes inh\u00e9rentes. Un aspect qui offre un flux de travail similaire est la fa\u00e7on de d\u00e9cider des facettes et des sections de votre e-mail HTML.<\/p>\n<p>Tout comme sur le web, certains \u00e9l\u00e9ments sont pratiquement non n\u00e9gociables pour vos e-mails. Bien s\u00fbr, vous avez besoin de contenu. Il y a quelques \u00e9l\u00e9ments typiques \u00e0 consid\u00e9rer ici :<\/p>\n<ul>\n<li>Votre en-t\u00eate est important car il s&rsquo;agit de la premi\u00e8re impression que votre e-mail offrira aux lecteurs.<\/li>\n<li>\u00c0 l&rsquo;instar de la conception de sites web, r\u00e9fl\u00e9chir aux \u00e9l\u00e9ments \u00e0 afficher au-dessus du pli sera \u00e9galement b\u00e9n\u00e9fique.<\/li>\n<li>Le contenu du corps du message est vital car, apr\u00e8s tout, c&rsquo;est la raison pour laquelle le lecteur <a href=\"https:\/\/kinsta.com\/fr\/blog\/email-marketing-automatisation\/\">s&rsquo;abonnera \u00e0 vos e-mails<\/a>.<\/li>\n<li>Le pied de page de votre e-mail HTML offre \u00e9galement beaucoup de valeur pour vous et vos abonn\u00e9s, et il peut \u00eatre un \u00e9l\u00e9ment sous-\u00e9valu\u00e9 de vos e-mails.<\/li>\n<\/ul>\n<p>Il y a ici quelques points que nous pouvons aborder plus en d\u00e9tail. Tout d&rsquo;abord, consid\u00e9rez \u00e0 quel point les emojis impr\u00e8gnent notre utilisation quotidienne du web. Bien qu&rsquo;ils ne soient pas un \u00e9l\u00e9ment HTML strict, une application de bon go\u00fbt des emojis peut faire des merveilles pour votre contenu, en particulier votre en-t\u00eate :<\/p>\n<figure id=\"attachment_123702\" aria-describedby=\"caption-attachment-123702\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123702 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/emoji-usage.png\" alt=\"Une s\u00e9lection d'emojis utilis\u00e9s dans l'en-t\u00eate du titre.\" width=\"1000\" height=\"207\"><figcaption id=\"caption-attachment-123702\" class=\"wp-caption-text\">Une s\u00e9lection d&#8217;emojis utilis\u00e9s dans l&rsquo;en-t\u00eate du titre.<\/figcaption><\/figure>\n<p>Le pied de page est \u00e9galement le meilleur endroit pour quelques informations juridiques essentielles. Deux des plus grands probl\u00e8mes li\u00e9s aux e-mails sont le spam et le fait de savoir si un e-mail atteint les bonnes bo\u00eetes de r\u00e9ception (le cas \u00e9ch\u00e9ant). Nous nous pencherons sur ce sujet dans une section ult\u00e9rieure, car il s&rsquo;agit d&rsquo;une partie essentielle de la cr\u00e9ation et de l&rsquo;envoi d&rsquo;e-mails HTML.<\/p>\n<h3>Consid\u00e9rer quelques pratiques typiques pour vos e-mails HTML<\/h3>\n<p>Il existe de nombreux points communs entre le <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-email-marketing\/\" rel=\"noopener\">marketing par e-mail<\/a> 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 \u00e9l\u00e9ment non n\u00e9gociable : Une double adh\u00e9sion.<\/p>\n<p>L&rsquo;une des plus grandes <a href=\"https:\/\/kinsta.com\/fr\/blog\/statistiques-email-marketing\/\" rel=\"noopener\">astuces de marketing par e-mail<\/a> est que vous voulez amener vos e-mails au lecteur. En d&rsquo;autres termes, proposez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/mailchimp-pour-wordpress\/\">formulaire d&rsquo;adh\u00e9sion<\/a> sur un site web, car cela a un <a href=\"https:\/\/kinsta.com\/fr\/blog\/conseils-optimisation-taux-conversion\/\" rel=\"noopener\">fort taux de conversion<\/a>. Toutefois, cela ne doit pas \u00eatre le seul moment o\u00f9 vous demandez une confirmation. C&rsquo;est une excellente pratique d&rsquo;envoyer \u00e9galement une seconde adh\u00e9sion sous forme d&rsquo;e-mail :<\/p>\n<figure id=\"attachment_123710\" aria-describedby=\"caption-attachment-123710\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123710 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/opt-in.png\" alt=\"Un email de double adh\u00e9sion.\" width=\"1000\" height=\"585\"><figcaption id=\"caption-attachment-123710\" class=\"wp-caption-text\">Un email de double adh\u00e9sion.<\/figcaption><\/figure>\n<p>Il y a plusieurs raisons \u00e0 cela :<\/p>\n<ul>\n<li>Premi\u00e8rement, cela \u00e9tablit une relation de confiance avec votre lecteur, car vous obtenez la permission explicite de lui envoyer des e-mails.<\/li>\n<li>Par extension, vous avez \u00e9galement un consentement explicite dans le cas d&rsquo;un renvoi de spam (nous y reviendrons plus tard).<\/li>\n<li>Vous contribuez \u00e0 mettre fin \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/gestionnaire-delivrabilite-email\/\">l&rsquo;abus d&rsquo;e-mails et de spam<\/a> pour les autres, car ils doivent sp\u00e9cifiquement opter pour un abonnement \u00e0 vos e-mails.<\/li>\n<\/ul>\n<p>En effet, comme une double adh\u00e9sion implique que vous envoyiez un e-mail \u00e0 l&rsquo;adresse en question, c&rsquo;est le meilleur moyen de <a href=\"https:\/\/kinsta.com\/fr\/blog\/authentification-emails\/\" rel=\"noopener\">valider l&rsquo;adresse e-mail<\/a>.<\/p>\n<p>Il existe \u00e9galement quelques autres bonnes pratiques \u00e0 prendre en compte. Cependant, celles qui suivent sont plus facultatives, en ce sens que vous obtiendrez des r\u00e9sultats fantastiques, mais qu&rsquo;il y aura des moments o\u00f9 vous ne voudrez pas suivre ces directives :<\/p>\n<ul>\n<li>Votre ligne d&rsquo;objet doit \u00eatre parfaite, et le contenu de vos e-mails doit aller droit au but. \u00c9tant donn\u00e9 l&rsquo;av\u00e8nement et maintenant <a href=\"https:\/\/kinsta.com\/fr\/part-marche-mobile-vs-ordinateur\/\">la domination de la navigation mobile<\/a>, ceci est particuli\u00e8rement important.<\/li>\n<li>En parlant de cela, vous devez vous assurer que votre e-mail HTML se lit sans probl\u00e8me sur les \u00e9crans plus petits &#8211; ce qui signifie pas de banni\u00e8res trop grandes ou de logos surdimensionn\u00e9s.<\/li>\n<li>Si vous incluez un appel \u00e0 l&rsquo;action (Call To Action ou CTA) fort dans chaque e-mail, vous avez de bonnes chances d&rsquo;obtenir un meilleur engagement des utilisateurs.<\/li>\n<li>Le suivi est une question controvers\u00e9e, mais vous aidera \u00e0 comprendre ce que font vos utilisateurs lorsque vous leur envoyez un e-mail. Certains fournisseurs incluent un solide ensemble d&rsquo;analyses en standard.<\/li>\n<\/ul>\n<p>La conception et la mise en page sont tout aussi importantes que la fa\u00e7on dont vous pr\u00e9sentez 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.<\/p>\n<h2>L&rsquo;approche technique que vous devez adopter pour cr\u00e9er un e-mail HTML<\/h2>\n<p>Si vous avez une certaine exp\u00e9rience du d\u00e9veloppement web, vous <a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/\" rel=\"noopener\">utiliserez sans doute le HTML5<\/a>\u00a0comme langage de balisage. Il s&rsquo;agit d&rsquo;un monde \u00e0 part par rapport aux instances pr\u00e9c\u00e9dentes du <a href=\"https:\/\/kinsta.com\/fr\/blog\/xml-vs-html\/\">HTML et du XHTML<\/a>, qui comprend une plus grande division entre le style (dont il n&rsquo;existe pratiquement aucun \u00e9l\u00e9ment valide) et la structure.<\/p>\n<p>Pour illustrer cette derni\u00e8re, HTML5 propose un certain nombre de balises diff\u00e9rentes pour d\u00e9finir les zones de contenu de votre site.<\/p>\n<figure id=\"attachment_123705\" aria-describedby=\"caption-attachment-123705\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123705 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-tags.png\" alt=\"Un certain nombre de balises HTML structurelles.\" width=\"1000\" height=\"799\"><figcaption id=\"caption-attachment-123705\" class=\"wp-caption-text\">Un certain nombre de balises HTML structurelles.<\/figcaption><\/figure>\n<p>Cependant, le HTML des e-mails est une b\u00eate diff\u00e9rente, dans la mesure o\u00f9 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\u00e9er votre mise en page. Pour savoir pourquoi, il faut s&rsquo;adresser aux d\u00e9veloppeurs des clients de messagerie, car ils modifient souvent l&rsquo;e-mail HTML lorsqu&rsquo;il arrive dans votre bo\u00eete de r\u00e9ception. L&rsquo;un des actes les plus courants consiste \u00e0 supprimer les <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">CSS<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a> des e-mails pour des raisons de s\u00e9curit\u00e9 (entre autres).<\/p>\n<p>Cela signifie que vous devrez fournir un autre moyen d&rsquo;ajouter du style \u00e0 vos e-mails HTML &#8211; l&rsquo;insertion en ligne est la seule option pour la compatibilit\u00e9. En parlant de compatibilit\u00e9, il s&rsquo;agit d&rsquo;une consid\u00e9ration importante. Vous devez trouver un \u00e9quilibre entre un style unique et les capacit\u00e9s du client de messagerie de l&rsquo;utilisateur final. En tant que tel, il y a quelques autres consid\u00e9rations techniques que vous voudrez noter :<\/p>\n<ul>\n<li>L&rsquo;utilisation de <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-html\/\" rel=\"noopener\">polices syst\u00e8me<\/a> plut\u00f4t que de polices tierces vous permettra d&rsquo;\u00e9conomiser une <a href=\"https:\/\/kinsta.com\/fr\/blog\/codes-statut-http\/\">requ\u00eate HTTP<\/a>, de charger rapidement l&rsquo;e-mail pour l&rsquo;utilisateur et de fournir un <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-polices-pour-e-mails\/\" rel=\"noopener\">e-mail d&rsquo;apparence coh\u00e9rente<\/a>.<\/li>\n<li>Vous pouvez m\u00eame aller plus loin et fournir une version en texte brut de votre e-mail pour ceux qui ne peuvent pas afficher l&rsquo;e-mail HTML dans leur client. De nombreux sites proposent une version HTML \u00e0 laquelle vous pouvez acc\u00e9der en ligne, \u00e0 la fois pour cette raison et comme sauvegarde.<\/li>\n<li>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\u00f9 vous ajoutez une image \u00e0 votre contenu <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-accessible\/\" rel=\"noopener\">pour des raisons d&rsquo;accessibilit\u00e9<\/a>.<\/li>\n<\/ul>\n<p>Il y a un aspect technique d&rsquo;un e-mail HTML auquel vous devriez r\u00e9fl\u00e9chir davantage, car il peut chevaucher la ligne entre le style en ligne, le CSS et d&rsquo;autres facteurs. Parlons bri\u00e8vement des \u00ab conditionnels \u00bb.<\/p>\n<h3>Utilisation des conditionnels<\/h3>\n<p>Les conditionnels sont un vestige des e-mails HTML qui faisaient partie de la bo\u00eete \u00e0 outils des anciens d\u00e9veloppeurs web HTML. C&rsquo;est l\u00e0 que vous sp\u00e9cifiez quel navigateur utilisera un extrait de code particulier.<\/p>\n<p>En toute honn\u00eatet\u00e9, il s&rsquo;agit presque toujours d&rsquo;un probl\u00e8me li\u00e9 \u00e0 Microsoft. Pour les d\u00e9veloppeurs web, Internet Explorer (IE) a \u00e9t\u00e9 le d\u00e9mon des navigateurs. En revanche, pour les e-mails HTML, c&rsquo;est <a href=\"https:\/\/kinsta.com\/fr\/blog\/alternatives-outlook\/\">Outlook<\/a>. Entre les diff\u00e9rentes versions, vous pouvez constater que votre style est rendu d&rsquo;une mani\u00e8re \u00e0 laquelle vous ne vous attendiez pas.<\/p>\n<p>Pour cette raison, vous pouvez ajouter des blocs de condition \u00e0 votre code, et d\u00e9finir ces \u00e9l\u00e9ments. Par exemple, vous pouvez cibler les versions d&rsquo;Outlook bas\u00e9es sur Word et sur IE.<\/p>\n<p>D&rsquo;abord, Word :<\/p>\n<pre><code class=\"language-html\">&lt;!--[if mso]&gt;<\/code><\/pre>\n<p>Ceci est pour les versions d&rsquo;Outlook bas\u00e9es sur Word :<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Pour Internet Explorer, vous utilisez une balise diff\u00e9rente :<\/p>\n<pre><code class=\"language-html\">&lt;!--[if (IE)]&gt;<\/code><\/pre>\n<p>Ceci est pour les versions d&rsquo;Outlook bas\u00e9es sur IE :<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Si le navigateur que vous ciblez est bas\u00e9 sur WebKit (comme Apple Safari, le navigateur PlayStation, le Kindle d&rsquo;Amazon, etc.), vous pouvez utiliser une requ\u00eate m\u00e9dia pour fournir un style sp\u00e9cifique :<\/p>\n<pre><code class=\"language-html\">.html-email-webkit {\n  display: none;\n}\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n  ..html-email-webkit {\n    display: block !important;\n  }\n}<\/code><\/pre>\n<p>Vous disposez ainsi d&rsquo;un moyen l\u00e9g\u00e8rement plus efficace d&rsquo;adapter votre e-mail HTML \u00e0 l&rsquo;affichage de l&rsquo;utilisateur final. Dans l&rsquo;ensemble, le style HTML pour les e-mails n&rsquo;est pas parfait, mais il y a suffisamment de puissance sous le capot de chaque <a href=\"https:\/\/kinsta.com\/fr\/sujets\/conseils-marketing-e-mail\/\">client de messagerie<\/a> pour vous aider \u00e0 cr\u00e9er des mises en page \u00e9tonnantes.<\/p>\n<h2>Vos options pour cr\u00e9er des e-mails HTML<\/h2>\n<p>Malgr\u00e9 ce que nous avons d\u00e9j\u00e0 \u00e9voqu\u00e9, vous disposez d&rsquo;un certain nombre d&rsquo;options flexibles pour vous aider \u00e0 cr\u00e9er des e-mails HTML. Par exemple, vous pouvez partir de z\u00e9ro en utilisant un <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\" rel=\"noopener\">bon \u00e9diteur de texte<\/a> et du HTML.<\/p>\n<p>Cependant, il existe d&rsquo;autres options que nous pouvons envisager :<\/p>\n<ul>\n<li>Vous pouvez utiliser un service d\u00e9di\u00e9, tel qu&rsquo;une application de marketing par e-mail, pour cr\u00e9er vos e-mails. De nombreuses applications fournissent un constructeur visuel, mais vous donnent \u00e9galement la possibilit\u00e9 d&rsquo;\u00e9crire votre propre code et de cr\u00e9er votre propre mod\u00e8le.<\/li>\n<li>En parlant de cela, vous pouvez t\u00e9l\u00e9charger un mod\u00e8le pour vos e-mails HTML. Cela ressemble beaucoup \u00e0 un th\u00e8me WordPress, dans la mesure o\u00f9 il fournit une base pour le reste de votre conception. \u00c0 partir de l\u00e0, vous pouvez le personnaliser \u00e0 votre guise. C&rsquo;est un bon moyen terme entre les options de codage et de construction.<\/li>\n<\/ul>\n<p>Plus tard, nous construirons notre e-mail \u00e0 l&rsquo;aide de HTML. Mais avant cela, examinons certains des fournisseurs de services d&rsquo;e-mail que vous pouvez envisager, quelle que soit la m\u00e9thode que vous avez choisie pour cr\u00e9er vos e-mails.<\/p>\n<h2>3 fournisseurs de services d&rsquo;e-mail parfaits pour cr\u00e9er des e-mails HTML<\/h2>\n<p>Cet article \u00e9tant consacr\u00e9 \u00e0 la cr\u00e9ation d&rsquo;e-mails en HTML, il n&rsquo;est pas n\u00e9cessaire d&rsquo;aller trop loin en ce qui concerne les fournisseurs de services de messagerie. N\u00e9anmoins, il <a href=\"https:\/\/kinsta.com\/fr\/blog\/alternatives-mailchimp\/#mailchimp-alternatives-with-free-plans\" rel=\"noopener\">y en a quelques-uns<\/a> que vous allez probablement consid\u00e9rer.<\/p>\n<p>Nous ne pouvons pas tous les couvrir, nous allons donc mentionner trois des plus populaires. Faisons le tour de la question.<\/p>\n<h3>1. Mailchimp<\/h3>\n<figure id=\"attachment_123707\" aria-describedby=\"caption-attachment-123707\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123707 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailchimp-logo.png\" alt=\"Le logo de Mailchimp.\" width=\"1000\" height=\"215\"><figcaption id=\"caption-attachment-123707\" class=\"wp-caption-text\">Le logo de Mailchimp.<\/figcaption><\/figure>\n<p>Ce fournisseur de services d&rsquo;e-mail est une solution de premier choix &#8211; presque une d\u00e9cision instinctive pour beaucoup. <a href=\"http:\/\/mailchimp.com\" target=\"_blank\" rel=\"noopener noreferrer\">Mailchimp<\/a> est l&rsquo;\u00e9talon-or des applications d&rsquo;e-mail marketing aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-utiliser-mailchimp\/\" rel=\"noopener\">yeux de beaucoup<\/a>, et il y a beaucoup de bonnes raisons \u00e0 cela :<\/p>\n<ul>\n<li>Il comprend de nombreuses fonctionnalit\u00e9s typiques que vous trouverez dans de nombreuses autres applications similaires.<\/li>\n<li>Il y a beaucoup d&rsquo;aide lorsqu&rsquo;il s&rsquo;agit de promouvoir une entreprise, comme l&rsquo;automatisation du marketing, les outils de gestion de l&rsquo;audience, et plus encore.<\/li>\n<li>Vous disposez d&rsquo;une suite d&rsquo;outils cr\u00e9atifs de premier ordre pour vous aider \u00e0 cr\u00e9er des e-mails HTML.<\/li>\n<\/ul>\n<p>Bien entendu, nous voulons ici nous pencher sur ces derni\u00e8res. L&rsquo;<a href=\"https:\/\/mailchimp.com\/create-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">assistant cr\u00e9atif<\/a> est un moyen pour Mailchimp d&rsquo;apprendre \u00e0 conna\u00eetre votre marque et de vous aider \u00e0 construire et \u00e0 personnaliser vos e-mails. Vous pouvez \u00e9galement connecter des applications tierces telles qu&rsquo;Adobe Photoshop pour vous aider \u00e0 construire l&rsquo;e-mail parfait.<\/p>\n<p>Il est \u00e9galement simple de travailler avec du HTML existant, surtout si vous utilisez le Classic Builder de Mailchimp. Quoi qu&rsquo;il en soit, vous disposez de moyens <a href=\"https:\/\/kinsta.com\/fr\/blog\/composants-web\/#html-templates\">d&rsquo;importer des mod\u00e8les HTML<\/a> si vous en avez besoin.<\/p>\n<p>Mailchimp utilise un hybride compliqu\u00e9 de niveaux d&rsquo;abonnement mensuel et du nombre de contacts pour arriver \u00e0 un prix final. Nous pensons que les petites entreprises ont besoin d&rsquo;un plan d&rsquo;environ 35 $ par mois, jusqu&rsquo;\u00e0 2 500 contacts. Cependant, vous devrez rechercher le meilleur plan pour vous, en fonction des fonctionnalit\u00e9s dont vous avez besoin et du nombre de contacts que vous pensez amener \u00e0 bord.<\/p>\n<h3>2. AWeber<\/h3>\n<p>Pour certains, <a href=\"http:\/\/aweber.com\" target=\"_blank\" rel=\"noopener noreferrer\">AWeber<\/a> repr\u00e9sente l&rsquo;apog\u00e9e du marketing par e-mail. Il s&rsquo;agit d&rsquo;une plateforme fantastique et puissante qui comprend un ensemble de fonctionnalit\u00e9s sans doute plus cibl\u00e9es que Mailchimp.<\/p>\n<figure id=\"attachment_123699\" aria-describedby=\"caption-attachment-123699\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123699 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/aweber.png\" alt=\"Le logo AWeber.\" width=\"1000\" height=\"596\"><figcaption id=\"caption-attachment-123699\" class=\"wp-caption-text\">Le logo AWeber.<\/figcaption><\/figure>\n<p>Il comprend un certain nombre de fonctionnalit\u00e9s essentielles dont vous aurez besoin pour envoyer des e-mails :<\/p>\n<ul>\n<li>Vous avez la possibilit\u00e9 d&rsquo;automatiser et de planifier des messages, des campagnes, et plus encore.<\/li>\n<li>Vous disposez d&rsquo;excellents outils d&rsquo;organisation, tels que le marquage et la segmentation des abonn\u00e9s.<\/li>\n<li>AWeber vous permet \u00e9galement d&rsquo;automatiser le contenu que vous cr\u00e9ez pour vos e-mails. Par exemple, vous pouvez transformer des articles de blog en publipostages avec un minimum de travail.<\/li>\n<\/ul>\n<p>Lorsqu&rsquo;il s&rsquo;agit de cr\u00e9er vos e-mails, AWeber a quelques tours dans son sac. Il utilise un constructeur visuel de type glisser-d\u00e9poser et comprend une <a href=\"https:\/\/www.aweber.com\/html-email-templates.htm\" target=\"_blank\" rel=\"noopener noreferrer\">biblioth\u00e8que de mod\u00e8les personnalis\u00e9s<\/a> pour vous permettre de d\u00e9marrer. De plus, vous pouvez connecter AWeber \u00e0 votre compte Canva et utiliser ce dernier pour vous aider \u00e0 concevoir vos e-mails.<\/p>\n<p>Il y a \u00e9galement un <a href=\"https:\/\/help.aweber.com\/hc\/en-us\/articles\/204030836-How-Do-I-Use-The-HTML-Editor-\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9diteur HTML d\u00e9di\u00e9<\/a>, ce qui n&rsquo;est pas le cas avec Mailchimp. Vous en b\u00e9n\u00e9ficiez m\u00eame dans la version gratuite d&rsquo;AWeber. En parlant de cela, la <a href=\"https:\/\/www.aweber.com\/pricing.htm\" target=\"_blank\" rel=\"noopener noreferrer\">tarification<\/a> est plus simple ici. Vous paierez environ 25 $ par mois pour un maximum de 2 500 contacts.<\/p>\n<h3>3. Constant Contact<\/h3>\n<p><a href=\"https:\/\/www.constantcontact.com\" target=\"_blank\" rel=\"noopener noreferrer\">Constant Contact<\/a> est un cas \u00e0 part parmi les fournisseurs de services de messagerie, mais il s&rsquo;agit plut\u00f4t d&rsquo;une arme secr\u00e8te. Il offre une gamme fantastique de caract\u00e9ristiques et de fonctionnalit\u00e9s, et vous permet \u00e9galement de travailler avec du HTML lorsque vous en avez besoin.<\/p>\n<figure id=\"attachment_123700\" aria-describedby=\"caption-attachment-123700\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123700 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/constant-contact.png\" alt=\"Le logo de Constant Contact.\" width=\"1000\" height=\"500\"><figcaption id=\"caption-attachment-123700\" class=\"wp-caption-text\">Le logo de Constant Contact.<\/figcaption><\/figure>\n<p>Tout comme AWeber, <a href=\"https:\/\/kinsta.com\/fr\/blog\/constant-contact-vs-mailchimp\/\">Constant Contact<\/a> se concentre sur le marketing par e-mail plut\u00f4t que sur d&rsquo;autres domaines centr\u00e9s sur les entreprises. En tant que tel, il dispose d&rsquo;un <a href=\"https:\/\/www.constantcontact.com\/features\/view-all-features\" target=\"_blank\" rel=\"noopener noreferrer\">ensemble de fonctionnalit\u00e9s<\/a> que vous appr\u00e9cierez :<\/p>\n<ul>\n<li>Vous disposez d&rsquo;outils de gestion des listes de clients et d&rsquo;une fonctionnalit\u00e9 d&rsquo;automatisation du marketing.<\/li>\n<li>Il existe des options de rapports \u00e9tendues.<\/li>\n<li>Vous \u00eates en mesure d&rsquo;int\u00e9grer des programmes publicitaires de Facebook, Instagram et Google.<\/li>\n<li>Il existe de nombreuses fa\u00e7ons d&rsquo;engager et d&rsquo;attirer de nouveaux abonn\u00e9s sur vos listes.<\/li>\n<\/ul>\n<p>La fonctionnalit\u00e9 de conception de Constant Contact est \u00e9galement bonne. Vous pouvez <a href=\"https:\/\/www.constantcontact.com\/features\/email-templates\" target=\"_blank\" rel=\"noopener noreferrer\">choisir un mod\u00e8le<\/a> et travailler avec un \u00e9diteur visuel pour construire l&rsquo;ensemble du design. Cependant, vous pouvez \u00e9galement <a href=\"https:\/\/v3.developer.constantcontact.com\/api_guide\/design_code_emails.html\" target=\"_blank\" rel=\"noopener noreferrer\">travailler avec le HTML<\/a> &#8211; parfois de mani\u00e8re avanc\u00e9e par rapport \u00e0 d&rsquo;autres outils.<\/p>\n<p>Le prix est \u00e9galement raisonnable. Vous paierez environ 35 $ par mois pour le plan Core et 2 500 contacts, ou 70 $ pour le plan Plus.<\/p>\n<h2>Ce dont vous avez besoin pour cr\u00e9er un e-mail HTML<\/h2>\n<p>Avant de commencer \u00e0 construire vos e-mails HTML, vous aurez besoin de quelques outils et comp\u00e9tences \u00e0 port\u00e9e de main. Voici ce dont vous devez disposer avant de vous lancer :<\/p>\n<ul>\n<li>Vous voudrez utiliser un \u00e9diteur 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 <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, m\u00eame si <a href=\"https:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brackets<\/a> serait id\u00e9al pour cette t\u00e2che particuli\u00e8re.<\/li>\n<li>Bien que vous ayez besoin de <a href=\"https:\/\/kinsta.com\/fr\/blog\/apprendre-le-html\/\" rel=\"noopener\">comp\u00e9tences en HTML<\/a>, vous n&rsquo;aurez pas besoin du m\u00eame ensemble de connaissances qu&rsquo;un d\u00e9veloppeur web moderne (bien que cela ne nuise pas \u00e0 vos perspectives).<\/li>\n<li>Vous aurez besoin d&rsquo;un moyen de tester vos e-mails &#8211; <a href=\"https:\/\/kinsta.com\/fr\/blog\/mailhog\/\" rel=\"noopener\">MailHog est une solution<\/a> que nous pr\u00e9sentons ailleurs sur le blog Kinsta.<\/li>\n<li>M\u00eame si nous n&rsquo;allons pas utiliser un mod\u00e8le pr\u00e9-\u00e9tabli, vous pourriez vouloir en utiliser un \u00e0 l&rsquo;avenir.<\/li>\n<li>Vous aurez \u00e9galement besoin d&rsquo;un fournisseur d&rsquo;e-mail, car vous aurez besoin d&rsquo;un moyen d&rsquo;envoyer votre e-mail HTML fini.<\/li>\n<\/ul>\n<p>Avec tout cela en place, vous \u00eates pr\u00eat \u00e0 ouvrir un \u00e9diteur de texte et \u00e0 commencer. Nous allons maintenant suivre le processus de cr\u00e9ation d&rsquo;un e-mail HTML de base.<\/p>\n<h2>Comment cr\u00e9er un e-mail HTML \u00e0 partir de z\u00e9ro ?<\/h2>\n<p>Avant de commencer, il est bon de noter que nous n&rsquo;allons pas utiliser un service d\u00e9di\u00e9 tel que Mailchimp ou AWeber. Au lieu de cela, nous allons cr\u00e9er un mod\u00e8le simple \u00e0 partir de z\u00e9ro que vous pouvez importer o\u00f9 vous voulez.<\/p>\n<p>Nous allons diviser le processus en plusieurs sections diff\u00e9rentes, car m\u00eame si un e-mail HTML est simplement relatif \u00e0 un site web, il y a encore beaucoup de choses \u00e0 prendre en compte.<\/p>\n<h3>1. Cr\u00e9ez la base de votre e-mail HTML<\/h3>\n<p>C&rsquo;est une bonne id\u00e9e de commencer par le squelette de votre mod\u00e8le d&rsquo;e-mail. Celui-ci suivra certaines pratiques typiques pour le HTML en g\u00e9n\u00e9ral :<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttps:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d&gt;\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"&gt;\n    &lt;title&gt;&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Il y a quelques \u00e9l\u00e9ments \u00e0 mentionner ici. Tout d&rsquo;abord, nous sp\u00e9cifions un \u00ab doctype \u00bb pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/\" rel=\"noopener\">Transitional XHTML 1.0<\/a>, ce qui est une pratique courante parmi les d\u00e9veloppeurs d&rsquo;e-mails. Ensuite, nous sp\u00e9cifions un espace de noms XML, qui sera important plus tard.<\/p>\n<p>Vous remarquerez \u00e9galement quelques balises m\u00e9ta, qui d\u00e9finissent le jeu de caract\u00e8res et la mani\u00e8re dont le navigateur doit rendre le HTML qui suit dans sa fen\u00eatre d&rsquo;affichage.<\/p>\n<p>Le reste du squelette est simple &#8211; il y a les balises title et body que nous utiliserons ensuite.<\/p>\n<h3>2. Ajoutez la structure de votre mod\u00e8le d&rsquo;e-mail<\/h3>\n<p>Pour en revenir \u00e0 notre discussion sur les balises HTML \u00e0 utiliser, vous vous souviendrez que nous ne voulons pas utiliser de &lt;div&gt; ou d&rsquo;autres \u00e9l\u00e9ments structurels typiques. Au lieu de cela, nous voulons utiliser des tableaux, car cela donne un bon rendu dans les clients et services de messagerie.<\/p>\n<p>Tout commencera par un simple ensemble de balises &lt;table&gt; dans le corps :<\/p>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;table role=\"presentation\"&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>L&rsquo;attribut que nous d\u00e9finissons dans la balise &lt;table&gt; aide les lecteurs d&rsquo;\u00e9cran \u00e0 analyser le texte qu&rsquo;elle contient, ce qui est bon pour l&rsquo;accessibilit\u00e9.<\/p>\n<p>\u00c0 partir de l\u00e0, vous devrez ajouter de nouvelles lignes et colonnes \u00e0 votre tableau afin de construire le mod\u00e8le d&rsquo;e-mail HTML. La mani\u00e8re de proc\u00e9der vous appartient, mais il est bon de commencer par une base de sections d&rsquo;en-t\u00eate, de pied de page et de corps. Nous ne les r\u00e9p\u00e9terons pas ici par souci de bri\u00e8vet\u00e9, mais nous les mentionnerons au fur et \u00e0 mesure de notre progression.<\/p>\n<p>La bonne nouvelle est que vous pouvez continuer \u00e0 ajouter de nouvelles lignes \u00e0 votre tableau si vous avez besoin d&rsquo;ajouter d&rsquo;autres sections. Cependant, \u00e0 partir d&rsquo;ici, vous voudrez commencer \u00e0 introduire des \u00e9l\u00e9ments de style et autres.<\/p>\n<h3>3. Incluez le style de vos \u00e9l\u00e9ments<\/h3>\n<p>La beaut\u00e9 du HTML est qu&rsquo;il est presque agnostique \u00e0 votre style. Le balisage est simple, mais les styles que vous appliquez ne le sont pas forc\u00e9ment. C&rsquo;est ici que vous verrez votre e-mail HTML prendre vie.<\/p>\n<p>\u00c0 titre de guide pendant que nous concevons, nous ajouterons une balise &lt;style&gt; au &lt;head&gt; pour afficher une bordure g\u00e9n\u00e9rale :<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  table, td {border:2px solid #000000 !important;}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Pour commencer, nous allons nous assurer qu&rsquo;il n&rsquo;y a pas d&rsquo;espace inattendu dans le corps ou le tableau principal (qui fait ici office de corps car certains clients de messagerie suppriment cette balise) :<\/p>\n<pre><code class=\"language-html\">&lt;body style=\"margin:0;padding:0;\"&gt;\n  &lt;table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;\"&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>Nous allons \u00e9galement ajouter un centrage et supprimer tout remplissage suppl\u00e9mentaire des cellules de nos diff\u00e9rentes sections :<\/p>\n<pre><code class=\"language-html\">&lt;tr&gt;\n  &lt;td align=\"center\" style=\"padding:0;\"&gt;Header\n  &lt;\/td&gt;\n&lt;\/tr&gt;<\/code><\/pre>\n<p>Si vous regardez ceci dans votre navigateur, cela ne ressemblera pas \u00e0 grand-chose :<\/p>\n<figure id=\"attachment_123703\" aria-describedby=\"caption-attachment-123703\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123703 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/front-end-skeleton.png\" alt=\"Une fen\u00eatre de navigateur montrant le squelette de l'e-mail HTML.\" width=\"1000\" height=\"253\"><figcaption id=\"caption-attachment-123703\" class=\"wp-caption-text\">Une fen\u00eatre de navigateur montrant le squelette de l&rsquo;e-mail HTML.<\/figcaption><\/figure>\n<p>Cependant, \u00e0 partir de l\u00e0, vous pouvez d\u00e9velopper davantage votre mod\u00e8le d&rsquo;e-mail en utilisant des tableaux et des balises de style. Par exemple, nous avons cr\u00e9\u00e9 une section \u00ab Hero \u00bb pour notre en-t\u00eate, et d\u00e9velopp\u00e9 le pied de page et le corps :<\/p>\n<figure id=\"attachment_123709\" aria-describedby=\"caption-attachment-123709\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123709 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mockup-email.png\" alt=\"Une maquette de mod\u00e8le d'e-mail pendant la cr\u00e9ation\" width=\"1000\" height=\"616\"><figcaption id=\"caption-attachment-123709\" class=\"wp-caption-text\">Une maquette de mod\u00e8le d&rsquo;e-mail pendant la cr\u00e9ation (Image source : <a href=\"https:\/\/pixabay.com\/vectors\/post-office-airmail-letter-403145\/\" target=\"_blank\" rel=\"noopener noreferrer\">Settergren<\/a>).<\/figcaption><\/figure>\n<p>Vous cr\u00e9erez probablement un mod\u00e8le meilleur et plus adapt\u00e9 \u00e0 vos besoins, mais en utilisant des tableaux imbriqu\u00e9s et quelques comp\u00e9tences HTML de base, vous pouvez cr\u00e9er un mod\u00e8le d&rsquo;e-mail HTML responsive et personnalis\u00e9 qui fait mouche.<\/p>\n<h3>4. Testez votre e-mail<\/h3>\n<p>Avant de terminer, vous voudrez tester votre e-mail afin de vous assurer qu&rsquo;il s&rsquo;affiche correctement sur diff\u00e9rents appareils. Il existe quelques services diff\u00e9rents qui peuvent vous aider \u00e0 cet \u00e9gard.<\/p>\n<p>Par exemple, <a href=\"https:\/\/www.emailonacid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Email on Acid<\/a> comprend une liste de contr\u00f4le compl\u00e8te de pr\u00e9-d\u00e9ploiement pour vous aider \u00e0 vous assurer que votre mod\u00e8le ne pose pas de probl\u00e8mes :<\/p>\n<figure id=\"attachment_123701\" aria-describedby=\"caption-attachment-123701\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123701 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/email-on-acid.png\" alt=\"Le site web d'Email on Acid.\" width=\"1000\" height=\"602\"><figcaption id=\"caption-attachment-123701\" class=\"wp-caption-text\">Le site web d&rsquo;Email on Acid.<\/figcaption><\/figure>\n<p>Les utilisateurs de <a href=\"http:\/\/litmus.com\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus<\/a> connaissent <a href=\"https:\/\/putsmail.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PutsMail<\/a>, mais il est accessible \u00e0 tous :<\/p>\n<figure id=\"attachment_123706\" aria-describedby=\"caption-attachment-123706\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123706 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/litmus.png\" alt=\"Le site web de Litmus.\" width=\"1000\" height=\"598\"><figcaption id=\"caption-attachment-123706\" class=\"wp-caption-text\">Le site web de Litmus.<\/figcaption><\/figure>\n<p>Vous devrez cr\u00e9er un compte pour utiliser le service, mais il est simple \u00e0 utiliser. Vous exploitez la fonctionnalit\u00e9 pour pr\u00e9visualiser les e-mails dans un certain nombre de navigateurs diff\u00e9rents et sur divers appareils.<\/p>\n<p><a href=\"https:\/\/www.mailgun.com\/solutions\/email-testing-software\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailgun propose \u00e9galement<\/a> un service fantastique qui est li\u00e9 \u00e0 son offre principale. Vous pouvez tester des clients de messagerie, des navigateurs et bien plus encore via l&rsquo;interface. En outre, vous pouvez tester des \u00e9l\u00e9ments tels que les lignes d&rsquo;objet, pour vous assurer que vous maintenez vos taux d&rsquo;ouverture \u00e9lev\u00e9s.<\/p>\n<figure id=\"attachment_123708\" aria-describedby=\"caption-attachment-123708\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-123708 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailgun-tester.png\" alt=\"L'outil Email Tester de Mailgun.\" width=\"1000\" height=\"522\"><figcaption id=\"caption-attachment-123708\" class=\"wp-caption-text\">L&rsquo;outil Email Tester de Mailgun.<\/figcaption><\/figure>\n<p>Cependant, une fois que vous aurez test\u00e9 votre e-mail, vous devrez vous assurer qu&rsquo;il atteint la bo\u00eete de r\u00e9ception du destinataire. Nous en parlerons davantage dans la derni\u00e8re section.<\/p>\n<h2>Envoi d&rsquo;un e-mail HTML : Ce que vous devez savoir<\/h2>\n<p>L&rsquo;un des avantages de l&rsquo;utilisation d&rsquo;un service de marketing par e-mail que nous n&rsquo;avons pas encore mentionn\u00e9 est la fa\u00e7on dont il g\u00e8re l&rsquo;aspect juridique de l&rsquo;envoi d&rsquo;e-mails. C&rsquo;est un point important, car si vous vous trompez, non seulement vous ne parviendrez pas \u00e0 atteindre un destinataire, mais vous vous mettrez dans le p\u00e9trin.<\/p>\n<p>Un service de marketing par e-mail aura d\u00e9j\u00e0 une bonne relation de travail avec les organisations qui g\u00e8rent le spam et les aspects connexes de l&rsquo;envoi d&rsquo;un e-mail. En tant que tel, c&rsquo;est souvent une bonne id\u00e9e de choisir l&rsquo;un d&rsquo;entre eux si vous ne voulez pas avoir \u00e0 vous soucier de la livraison de spams.<\/p>\n<p>Toutefois, nous pouvons vous donner quelques conseils qui comptent quelle que soit la plate-forme que vous utilisez :<\/p>\n<ul>\n<li>Veillez \u00e0 respecter toutes les directives de la <a href=\"https:\/\/www.congress.gov\/bill\/108th-congress\/senate-bill\/877\/text\" target=\"_blank\" rel=\"noopener noreferrer\">loi CAN-SPAM<\/a>, surtout si votre public principal se trouve aux \u00c9tats-Unis. Bien entendu, les diff\u00e9rents pays auront leurs <a href=\"https:\/\/mailchimp.com\/help\/anti-spam-requirements-for-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">propres directives l\u00e9gales<\/a>.<\/li>\n<li>Incluez une double adh\u00e9sion (opt-in) pour les abonn\u00e9s. Dans ce cas, vous leur demandez de confirmer leur abonnement, mais vous leur envoyez \u00e9galement une deuxi\u00e8me confirmation. Cela vous prot\u00e8ge, ainsi que l&rsquo;abonn\u00e9, en cas de demande de spam ou de demande de confidentialit\u00e9 par la suite.<\/li>\n<\/ul>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/pourquoi-mes-emails-vont-ils-en-spam\/\" rel=\"noopener\">d\u00e9livrabilit\u00e9<\/a> est un \u00e9l\u00e9ment cl\u00e9 de vos e-mails, et c&rsquo;est un sujet que nous abordons en profondeur dans un autre article. Cependant, ce concept est un m\u00e9lange de plusieurs aspects, comme l&rsquo;utilisation d&rsquo;un bon code, l&rsquo;obtention du bon niveau de permission, et plus encore.<\/p>\n<p>Ceci est li\u00e9 \u00e0 une autre facette &#8211; votre score d&rsquo;envoi. Celui-ci s&rsquo;apparente \u00e0 un score de confiance et constitue en fin de compte une mesure de votre r\u00e9putation. Il y a ici quelques composants diff\u00e9rents qui forment un tout :<\/p>\n<ul>\n<li>Le taux de rebond de votre site.<\/li>\n<li>Le nombre de plaintes re\u00e7ues par votre site concernant les e-mails que vous envoyez.<\/li>\n<li>La r\u00e9putation de votre adresse IP.<\/li>\n<li>La signature de votre nom de domaine.<\/li>\n<\/ul>\n<p>Ce dernier se rapporte \u00e0 votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/authentification-emails\/\" rel=\"noopener\">DomainKeys Identified Mail (DKIM)<\/a> et \u00e0 votre Sender Policy Framework (SPF). En outre, vous pouvez v\u00e9rifier la r\u00e9putation de votre IP gr\u00e2ce \u00e0 des services tels que <a href=\"https:\/\/senderscore.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">SenderScore<\/a>, ou <a href=\"https:\/\/www.ipqualityscore.com\/ip-reputation-check\" target=\"_blank\" rel=\"noopener noreferrer\">IPQualityScore<\/a>.<\/p>\n<p>Si vous choisissez le <a href=\"https:\/\/kinsta.com\/fr\/blog\/serveur-smtp-gratuit\/\" rel=\"noopener\">bon fournisseur de protocole de transport d&rsquo;e-mail (SMTP)<\/a> en premier lieu, vous pouvez cocher certaines de ces cases d&rsquo;un seul coup. Tout comme votre choix de solution d&rsquo;e-mail marketing, ce service comprendra ce dont vous avez besoin pour maintenir un haut niveau de d\u00e9livrabilit\u00e9 et rester du bon c\u00f4t\u00e9 des pouvoirs en place.<\/p>\n<p>Mailgun est une solution que nous avons mentionn\u00e9e pr\u00e9c\u00e9demment, et cela pourrait \u00eatre id\u00e9al. Cependant, il en existe d&rsquo;autres comme <a href=\"https:\/\/www.mailjet.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailjet<\/a>, <a href=\"https:\/\/www.sendinblue.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sendinblue<\/a>, et m\u00eame <a href=\"https:\/\/kinsta.com\/fr\/blog\/serveur-smtp-gmail\/\" rel=\"noopener\">le propre service de Gmail<\/a>.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>L&rsquo;e-mail n&rsquo;est pas pr\u00e8s de toucher \u00e0 sa fin. En tant que tel, l&rsquo;utilisation de l&rsquo;e-mail pour vos propres besoins &#8211; tels que la promotion et le marketing &#8211; est un moyen fantastique et rentable d&rsquo;atteindre des abonn\u00e9s, utilisateurs et clients potentiels.<\/p>\n<p>Alors que vous pourriez acheter un mod\u00e8le HTML d\u00e9di\u00e9, cr\u00e9er vos propres e-mails HTML n&rsquo;est pas si difficile. Cela pourrait \u00eatre la voie de votre r\u00e9ussite si vous avez une vision sp\u00e9cifique en t\u00eate. Toutefois, vous devrez ressortir vos vieux trucs HTML, comme les conditionnels et les tableaux imbriqu\u00e9s. La conception d&rsquo;e-mails en HTML n&rsquo;est pas encore au niveau de la conception de sites web modernes, mais vous pouvez encore r\u00e9aliser beaucoup avec peu de choses.<\/p>\n<p>Vous avez besoin de cr\u00e9er des e-mails HTML, et si oui, quelles sont vos questions ? Faites-nous en part dans la section des commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Petit quiz rapide : Quel est le nom du langage que les d\u00e9veloppeurs web utilisent pour cr\u00e9er les structures des sites que vous visitez tous les &#8230;<\/p>\n","protected":false},"author":117,"featured_media":59085,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[260,590,254,342],"topic":[968],"class_list":["post-59084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-deliverability","tag-email-marketing","tag-html","tag-html-editors","topic-conseils-marketing-e-mail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide pour la cr\u00e9ation et l&#039;envoi d&#039;un e-mail HTML<\/title>\n<meta name=\"description\" content=\"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s&#039;av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide du d\u00e9butant pour la cr\u00e9ation et l&#039;envoi d&#039;un e-mail HTML\" \/>\n<meta property=\"og:description\" content=\"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s&#039;av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T08:57:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-15T15:31:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s&#039;av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Guide du d\u00e9butant pour la cr\u00e9ation et l&rsquo;envoi d&rsquo;un e-mail HTML\",\"datePublished\":\"2022-06-30T08:57:23+00:00\",\"dateModified\":\"2025-09-15T15:31:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\"},\"wordCount\":5269,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\",\"keywords\":[\"email deliverability\",\"email marketing\",\"html\",\"HTML editors\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\",\"name\":\"Guide pour la cr\u00e9ation et l'envoi d'un e-mail HTML\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\",\"datePublished\":\"2022-06-30T08:57:23+00:00\",\"dateModified\":\"2025-09-15T15:31:55+00:00\",\"description\":\"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s'av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Guide du d\u00e9butant pour la cr\u00e9ation et l'envoi d'un e-mail HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conseils pour le marketing par e-mail\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conseils-marketing-e-mail\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide du d\u00e9butant pour la cr\u00e9ation et l&#8217;envoi d&#8217;un e-mail HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guide pour la cr\u00e9ation et l'envoi d'un e-mail HTML","description":"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s'av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/","og_locale":"fr_FR","og_type":"article","og_title":"Guide du d\u00e9butant pour la cr\u00e9ation et l'envoi d'un e-mail HTML","og_description":"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s'av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !","og_url":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-06-30T08:57:23+00:00","article_modified_time":"2025-09-15T15:31:55+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s'av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Guide du d\u00e9butant pour la cr\u00e9ation et l&rsquo;envoi d&rsquo;un e-mail HTML","datePublished":"2022-06-30T08:57:23+00:00","dateModified":"2025-09-15T15:31:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/"},"wordCount":5269,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","keywords":["email deliverability","email marketing","html","HTML editors"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/","url":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/","name":"Guide pour la cr\u00e9ation et l'envoi d'un e-mail HTML","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","datePublished":"2022-06-30T08:57:23+00:00","dateModified":"2025-09-15T15:31:55+00:00","description":"Si vous souhaitez envoyer des e-mails attrayants \u00e0 vos abonn\u00e9s, votre propre mod\u00e8le peut s'av\u00e9rer n\u00e9cessaire. Apprenez \u00e0 cr\u00e9er vos propres e-mails HTML !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/06\/html-email.jpg","width":1460,"height":730,"caption":"Guide du d\u00e9butant pour la cr\u00e9ation et l'envoi d'un e-mail HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/creation-envoi-e-mail-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conseils pour le marketing par e-mail","item":"https:\/\/kinsta.com\/fr\/sujets\/conseils-marketing-e-mail\/"},{"@type":"ListItem","position":3,"name":"Guide du d\u00e9butant pour la cr\u00e9ation et l&#8217;envoi d&#8217;un e-mail HTML"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=59084"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59084\/revisions"}],"predecessor-version":[{"id":80935,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/59084\/revisions\/80935"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/59084\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/59085"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=59084"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=59084"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=59084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}