Créateur d’e-mail HTML
HTML Email Builder
Compose un e-mail par blocs en HTML à base de tableaux et de styles en ligne, avec un bouton appuyé sur VML, et écrit la version texte à partir des mêmes blocs.
Un éditeur par blocs qui ne sait produire que la mise en page sur laquelle les clients de messagerie s’accordent : tableaux imbriqués, styles en ligne, et un bouton dessiné deux fois pour que le moteur Word d’Outlook reçoive une vraie forme plutôt qu’un lien texte avec un arrière-plan inutile. Il exporte le HTML et la variante en texte brut ensemble, et le texte est écrit à partir des blocs plutôt qu’en retirant les balises.
Message
Blocs
- Titre
- Paragraphe
- Bouton
- Séparateur
- Deux colonnes
- Pied de page
Aperçu
Ce n’est pas une capture d’écran du client. C’est votre HTML auquel on a appliqué les règles de suppression documentées de ce client, rendu ici par ce navigateur.
- Outlook pour Windows fait son rendu avec Microsoft Word. Ce panneau est un navigateur : il peut vous montrer ce qui resterait à Word après le nettoyage, mais pas comment Word le mettrait en page. Les retours à la ligne, les espacements et la mise à l’échelle des images (Word suppose 96 dpi face à un écran à 120 dpi) seront différents.
Retiré pour ce client · 2
Déclarations : border-radius: 6px · border-radius: 8px
Le bouton est dessiné deux fois : une forme VML pour le moteur Word d’Outlook et un lien pour tout le reste. Un seul des deux est visible à la fois.
Ce que le vérificateur dit de cette sortie
Rien qui casse, rien qui se dégrade. C’est bien pour cela qu’on le construit ainsi.
5,02 ko · 5 % des 102 KB de Gmail
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Cette semaine chez Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">Ce qui a changé cette semaine, et où lire la suite‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">La mise à jour de la semaine</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">Bonjour.<br>Voici ce qui a changé cette semaine. La mise en page est faite de tableaux : elle arrive donc intacte dans Outlook.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">Lire l’article en entier</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">Lire l’article en entier</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">Voici la colonne de gauche. Les deux ne font qu’une seule ligne de tableau.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">Et voici celle de droite. Aucun flexbox n’intervient, le moteur de Word les garde donc côte à côte.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">Adresse de l’expéditeur · Séoul<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Se désabonner</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Texte brut
Ce qui a changé cette semaine, et où lire la suite La mise à jour de la semaine ============================ Bonjour. Voici ce qui a changé cette semaine. La mise en page est faite de tableaux : elle arrive donc intacte dans Outlook. Lire l’article en entier: https://example.com/news —————————————————————————————— Voici la colonne de gauche. Les deux ne font qu’une seule ligne de tableau. Et voici celle de droite. Aucun flexbox n’intervient, le moteur de Word les garde donc côte à côte. —————————————————————————————— Adresse de l’expéditeur · Séoul Se désabonner: https://example.com/unsubscribe
Généré à partir des blocs, pas en retirant les balises : c’est pour cela que les liens se lisent comme des phrases et non comme un mur d’URL.
Comment s’en servir
Réglez le message
Objet, préen-tête, largeur et couleurs. Le préen-tête est la ligne grise que la liste de la boîte de réception affiche après l’objet — laissez-le vide et le client prendra le premier texte venu, qui est d’ordinaire « Voir dans le navigateur ».
Empilez les blocs
Titre, paragraphe, image, bouton, deux colonnes, séparateur, espacement, pied de page. Le bloc à deux colonnes est une ligne de tableau et non une requête média, donc il reste à deux colonnes dans les clients qui ignorent les requêtes média.
Surveillez l’aperçu et le verdict
Les mêmes volets par client que le vérificateur, et en dessous la lecture que le vérificateur fait de cette sortie. Elle devrait rester vide : c’est tout l’objet de construire ainsi.
Exportez les deux parties
Envoyez-les en multipart/alternative. Un message en HTML seul obtient une moins bonne note auprès de chaque filtre anti-spam et est illisible pour tout ce qui lit le courrier à voix haute.
Questions fréquentes
Pourquoi le bouton apparaît-il deux fois dans le HTML ?
Une copie est une forme VML à l’intérieur d’un commentaire <!--[if mso]-->, que seul le moteur Word d’Outlook lit ; l’autre est une ancre ordinaire dans un commentaire que Word ignore. Exactement une des deux est visible à la fois. Sans la moitié VML, la marge intérieure est abandonnée dans Outlook et seul le texte lui-même est cliquable.
Le coréen s’affichera-t-il correctement sous Windows ?
La pile place Apple SD Gothic Neo, Malgun Gothic et Noto Sans KR avant toute police latine, parce qu’Outlook retombe sur Times New Roman plutôt que sur la police suivante quand une police web échoue — une pile qui commence par du latin est la façon dont le hangeul finit en carrés.
Puis-je coller mon propre HTML ici ?
Non : cette page ne fait que construire. Le HTML existant va au vérificateur de compatibilité, qui vous dira quoi changer et générera le balisage de remplacement pour les éléments qui en ont besoin.
À alimenter depuis
Compatibilité d’un e-mail HTML
HTML Email Compatibility Check
Confronte le HTML d’un e-mail à ce que chaque logiciel de messagerie prend réellement en charge, désigne l’élément qui casse, et montre côte à côte ce qui survit à Gmail, à Outlook et aux autres.
Tableau de compatibilité des messageries
Email Client Support Table
Ce que Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail et Thunderbird prennent en charge dans un e-mail HTML, d’après les tests sur appareils de caniemail, avec la date du dernier test de chacun.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Tableau de compatibilité des messageries
Email Client Support Table
Ce que Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail et Thunderbird prennent en charge dans un e-mail HTML, d’après les tests sur appareils de caniemail, avec la date du dernier test de chacun.
Comparaison envoyé et reçu
Sent vs Delivered Comparison
Envoyez un brouillon depuis votre propre compte vers une adresse jetable et voyez ce que le chemin d’expédition a réécrit — liens enveloppés dans des redirections, blocs de style supprimés, balises de suivi ajoutées, encodage employé.
Compatibilité d’un e-mail HTML
HTML Email Compatibility Check
Confronte le HTML d’un e-mail à ce que chaque logiciel de messagerie prend réellement en charge, désigne l’élément qui casse, et montre côte à côte ce qui survit à Gmail, à Outlook et aux autres.
Contrôle d’un lien suspect
Suspicious URL Check
Examine la forme d’un lien avant que vous ne l’ouvriez — caractères sosies, hôte en adresse IP, ruse de l’arobase, sous-domaines à rallonge, ports inhabituels, raccourcisseurs — et, à la demande, suit ses redirections et cherche la date de création du domaine. Aucune base de réputation.
Inspecteur d’archive zip
Archive Inspector
Ouvre un zip sans l’extraire et signale les entrées à traversée de chemin, les exécutables, les macros et les bombes zip.
Convertisseur audio
Audio Converter
Convertit entre MP3, WAV, FLAC, AAC, OGG et Opus, avec réglage du débit et de la fréquence d’échantillonnage.