HTML-E-Mail-Builder
HTML Email Builder
Baut eine E-Mail aus Blöcken als tabellenbasiertes, inline gestyltes HTML mit VML-gestütztem Button und schreibt aus denselben Blöcken die Nur-Text-Alternative.
Ein Block-Editor, der nur das Layout erzeugen kann, auf das sich Mail-Clients einigen: verschachtelte Tabellen, Inline-Styles und ein zweimal gezeichneter Button, damit Outlooks Word-Engine eine echte Form bekommt statt eines Textlinks mit nutzlosem Hintergrund. Er exportiert das HTML und die Nur-Text-Alternative zusammen, und der Text wird aus den Blöcken geschrieben statt durch Entfernen der Tags.
Nachricht
Blöcke
- Überschrift
- Absatz
- Schaltfläche
- Trennlinie
- Zwei Spalten
- Fußzeile
Vorschau
Das ist kein Bildschirmfoto des Clients. Es ist Ihr HTML mit den dokumentierten Streichregeln dieses Clients, hier von diesem Browser gezeichnet.
- Outlook für Windows rendert über Microsoft Word. Dieser Bereich ist ein Browser: Er kann zeigen, was Word nach dem Entfernen noch hätte, aber nicht, wie Word das anordnen würde. Zeilenumbrüche, Abstände und Bildskalierung (Word geht auch auf einem 120-dpi-Bildschirm von 96 dpi aus) werden abweichen.
Für diesen Client entfernt · 2
Deklarationen: border-radius: 6px · border-radius: 8px
Die Schaltfläche wird zweimal gezeichnet: eine VML-Form für die Word-Engine von Outlook und ein Anker für alles andere. Zu sehen ist immer nur eine davon.
Was der Prüfer zu dieser Ausgabe sagt
Nichts, was bricht, und nichts, was Wirkung verliert. Genau dafür baut man es so.
4,98 kB · 5 % der 102 KB von Gmail
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" 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>Diese Woche bei 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">Was sich diese Woche geändert hat und wo der Rest steht‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </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">Das Update dieser Woche</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">Guten Tag.<br>Hier steht, was sich diese Woche geändert hat. Das Layout ist aus Tabellen gebaut und kommt darum in Outlook heil an.</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;">Den ganzen Beitrag lesen</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">Den ganzen Beitrag lesen</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">Das ist die linke Spalte. Die beiden sind eine Zeile einer Tabelle.</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">Und das ist die rechte. Flexbox kommt dabei nicht vor, also stellt die Word-Engine sie nebeneinander.</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;">Absenderadresse · Seoul<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Abmelden</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Reiner Text
Was sich diese Woche geändert hat und wo der Rest steht Das Update dieser Woche ======================= Guten Tag. Hier steht, was sich diese Woche geändert hat. Das Layout ist aus Tabellen gebaut und kommt darum in Outlook heil an. Den ganzen Beitrag lesen: https://example.com/news —————————————————————————————— Das ist die linke Spalte. Die beiden sind eine Zeile einer Tabelle. Und das ist die rechte. Flexbox kommt dabei nicht vor, also stellt die Word-Engine sie nebeneinander. —————————————————————————————— Absenderadresse · Seoul Abmelden: https://example.com/unsubscribe
Aus den Blöcken erzeugt, nicht durch Entfernen der Tags — deshalb lesen sich die Links als Sätze statt als Wand aus URLs.
So funktioniert es
Richten Sie die Nachricht ein
Betreff, Preheader, Breite und Farben. Der Preheader ist die graue Zeile, die die Posteingangsliste nach dem Betreff zeigt – lassen Sie ihn leer, nimmt der Client den erstbesten Text, und das ist gewöhnlich „Im Browser ansehen“.
Stapeln Sie die Blöcke
Überschrift, Absatz, Bild, Button, zwei Spalten, Trennlinie, Abstand, Fußzeile. Der Zwei-Spalten-Block ist eine Tabellenzeile, keine Media Query, er bleibt also zweispaltig in den Clients, die Media Queries ignorieren.
Beobachten Sie Vorschau und Urteil
Dieselben Fenster pro Client wie im Checker, und darunter die eigene Beurteilung des Checkers zu dieser Ausgabe. Sie sollte leer bleiben – das ist der Sinn, es so zu bauen.
Exportieren Sie beide Teile
Senden Sie sie als multipart/alternative. Eine reine HTML-Nachricht schneidet bei jedem Spamfilter schlechter ab und ist für alles, was Mail vorliest, unlesbar.
Häufige Fragen
Warum erscheint der Button zweimal im HTML?
Eine Kopie ist eine VML-Form in einem <!--[if mso]-->-Kommentar, den nur Outlooks Word-Engine liest; die andere ist ein gewöhnlicher Anker in einem Kommentar, den Word ignoriert. Genau eine von beiden ist jemals sichtbar. Ohne die VML-Hälfte fällt in Outlook das Padding weg, und nur der Text selbst ist klickbar.
Wird Koreanisch unter Windows korrekt dargestellt?
Der Font-Stack setzt Apple SD Gothic Neo, Malgun Gothic und Noto Sans KR vor jede lateinische Schrift, weil Outlook auf Times New Roman zurückfällt und nicht auf die nächste Schrift, wenn ein Webfont scheitert – ein Stack mit lateinischer Schrift zuerst ist der Grund, warum Hangul als Kästchen endet.
Kann ich hier mein eigenes HTML einfügen?
Nein – diese Seite baut nur. Vorhandenes HTML gehört in den Kompatibilitäts-Checker, der Ihnen sagt, was zu ändern ist, und für die Elemente, die es brauchen, das Ersatz-Markup erzeugt.
Eingabe aus
HTML-E-Mail-Kompatibilität prüfen
HTML Email Compatibility Check
Prüft das HTML einer E-Mail gegen das, was jeder Mail-Client tatsächlich unterstützt, zeigt auf das Element, das bricht, und stellt nebeneinander dar, was Gmail, Outlook und die anderen übrig lassen.
Support-Tabelle für E-Mail-Clients
Email Client Support Table
Was Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail und Thunderbird in HTML-E-Mails unterstützen, aus den Gerätetests von caniemail, mit dem Datum des jeweils letzten Tests.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Support-Tabelle für E-Mail-Clients
Email Client Support Table
Was Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail und Thunderbird in HTML-E-Mails unterstützen, aus den Gerätetests von caniemail, mit dem Datum des jeweils letzten Tests.
Gesendet-vs-Zugestellt-Vergleich
Sent vs Delivered Comparison
Senden Sie einen Entwurf von Ihrem eigenen Konto an eine Wegwerfadresse und sehen Sie, was der Versandweg umgeschrieben hat – in Redirects gehüllte Links, gestrichene Style-Blöcke, hinzugefügte Beacons, die verwendete Kodierung.
HTML-E-Mail-Kompatibilität prüfen
HTML Email Compatibility Check
Prüft das HTML einer E-Mail gegen das, was jeder Mail-Client tatsächlich unterstützt, zeigt auf das Element, das bricht, und stellt nebeneinander dar, was Gmail, Outlook und die anderen übrig lassen.
Verdächtige URL prüfen
Suspicious URL Check
Untersucht die Form eines Links, bevor Sie ihn öffnen – ähnlich aussehende Zeichen, IP-Adressen als Host, @-Tricks, tiefe Subdomains, ungewöhnliche Ports, Kurzlink-Dienste – und verfolgt auf Wunsch seine Weiterleitungen und schlägt das Registrierungsdatum der Domain nach. Keine Reputationsdatenbank.
Archiv-Inspektor
Archive Inspector
Öffnet ein ZIP, ohne es zu entpacken, und markiert Path-Traversal-Einträge, ausführbare Dateien, Makros und Zip-Bomben.
Audio-Konverter
Audio Converter
Wandelt zwischen MP3, WAV, FLAC, AAC, OGG und Opus um, mit Bitrate und Abtastrate.