{"id":51925,"date":"2022-06-30T09:56:49","date_gmt":"2022-06-30T08:56:49","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=51925&#038;preview=true&#038;preview_id=51925"},"modified":"2023-11-16T09:27:02","modified_gmt":"2023-11-16T08:27:02","slug":"html-email","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/html-email\/","title":{"rendered":"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails"},"content":{"rendered":"<p>Schnelles Quiz: Wie hei\u00dft die Sprache, die Webentwickler verwenden, um die Strukturen der Webseiten zu erstellen, die du t\u00e4glich besuchst? Abgesehen von cleveren Antworten ist die <a href=\"https:\/\/kinsta.com\/de\/blog\/html-lernen\/\">Hypertext Markup Language (HTML)<\/a> ein immerw\u00e4hrender Standard, der schon bei den Anf\u00e4ngen des Internets dabei war. Das gilt aber nicht nur f\u00fcr Webseiten. Dein Posteingang ist ein fruchtbarer Boden f\u00fcr die Gestaltung von HTML-E-Mails.<\/p>\n<p>Das macht Sinn, wenn du bedenkst, wie viele Bilder, GIFs, Videos und Markeninhalte du fast jede Stunde in deinen E-Mails siehst. Du k\u00f6nntest zwar eine reine Text-E-Mail anbieten, aber eine HTML-Version bietet mehr Vorteile und gibt dir mehr M\u00f6glichkeiten, <a href=\"https:\/\/kinsta.com\/de\/blog\/positionierungs-strategie\/\">dich und dein Unternehmen<\/a> zu vermarkten.<\/p>\n<p>In diesem Beitrag werden wir besprechen, wie du HTML-E-Mails erstellst und versendest und warum du das tun solltest. An einigen Stellen gehen wir darauf ein, wie du eine E-Mail programmierst, aber du brauchst dieses Wissen nicht, um deine eigene E-Mail zu erstellen.<\/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>Was ist eine HTML-E-Mail?<\/h2>\n<p>E-Mails, die in <a href=\"https:\/\/kinsta.com\/de\/blog\/email-design\/\" rel=\"noopener\">deinem Posteingang<\/a> landen, gibt es in zwei Varianten:<\/p>\n<ul>\n<li><strong>Klartext:<\/strong> Das ist fast ein Telegramm f\u00fcr das moderne Zeitalter. Es gibt kein Styling oder eine minimale Formatierung, und der Empf\u00e4nger sieht nur die W\u00f6rter, nicht alles andere.<\/li>\n<li><strong>HTML:<\/strong> Im Vergleich zu reinem Text ist das ein echter Knaller und sehr designlastig. Es verwendet HTML-Code, um eine E-Mail darzustellen, auch wenn er, wie wir noch sehen werden, nicht immer den modernen Webstandards entspricht.<\/li>\n<\/ul>\n<p>Eine reine Text-E-Mail erkennst du zum Beispiel daran, dass sie genauso aussieht wie ein normales Textdokument. Im Gegensatz dazu sieht eine HTML-E-Mail fast genauso aus wie eine moderne Webseite (abgesehen von ein paar Styling- und Formatierungsproblemen):<\/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=\"Eine HTML-E-Mail, die im Browser angezeigt wird, mit einem Titel, der ein Cookie-Emoji enth\u00e4lt, und einem Text mit Bildern, Emojis und typografischen Formatierungen.\" width=\"1000\" height=\"756\"><figcaption id=\"caption-attachment-123704\" class=\"wp-caption-text\">Eine HTML-E-Mail im Browser.<\/figcaption><\/figure>\n<p>In den meisten F\u00e4llen hat eine HTML-E-Mail nicht den Anspruch, das Nonplusultra an Interaktivit\u00e4t oder dynamischem Engagement zu bieten. Auch darauf werden wir sp\u00e4ter noch eingehen, aber HTML-E-Mails <a href=\"https:\/\/kinsta.com\/de\/blog\/bewaehrte-html-praktiken\/\">hinken dem Web<\/a> in Bezug auf die Standards hinterher. HTML ist also eher ein designorientiertes Werkzeug als ein Hilfsmittel, um ein Erlebnis zu bieten. Das wirft allerdings eine Frage auf: Warum solltest du HTML-E-Mails verwenden, wenn der einzige Grund die Optik ist? Dieser Frage gehen wir als N\u00e4chstes nach.<\/p>\n\n<h2>Warum du HTML-E-Mails der reinen Textformatierung vorziehen solltest<\/h2>\n<p>Es kommt selten vor, dass du eine reine Text-E-Mail von einem Unternehmen erh\u00e4ltst, und zwar aus mehreren Gr\u00fcnden. Allerdings ist reiner Text nicht <em>per se falsch<\/em>, sondern bietet keine der Vorteile der HTML-E-Mail-Formatierung. Ein Beispiel:<\/p>\n<ul>\n<li>Du kannst die inh\u00e4renten visuellen Elemente nutzen, um die Aufmerksamkeit auf die verschiedenen Teile deines <a href=\"https:\/\/kinsta.com\/de\/blog\/email-design\/\">E-Mail-Inhalts<\/a> zu lenken.<\/li>\n<li>Au\u00dferdem ist eine HTML-E-Mail ein umfangreiches Format f\u00fcr die Pr\u00e4sentation deiner Inhalte. Das bedeutet, dass du die Elemente nutzen kannst, die die Nutzerinnen und Nutzer erwarten, um sich mit ihnen zu besch\u00e4ftigen, z. B. Bilder, <a href=\"https:\/\/kinsta.com\/de\/blog\/video-hosting\/\" rel=\"noopener\">Videos<\/a> und mehr.<\/li>\n<li>Beides zusammen bietet dir eine hervorragende M\u00f6glichkeit, deine Inhalte zu vermarkten, genauso wie du es mit deiner Hauptwebseite tun w\u00fcrdest.<\/li>\n<\/ul>\n<p>Die Entscheidung f\u00fcr eine HTML-E-Mail ist jedoch nicht so einfach, wie du denkst. Es gibt auch ein paar Nachteile zu beachten. Erstens musst du, genau wie bei der Gestaltung einer Webseite, die Erfahrungen der Nutzer\/innen ber\u00fccksichtigen. Dazu <a href=\"https:\/\/kinsta.com\/de\/browser-marktanteil\/\">geh\u00f6rt nicht nur der Browser<\/a> &#8211; viele Nutzer\/innen ziehen es vor, E-Mails in einem speziellen Client zu lesen.<\/p>\n<p>Au\u00dferdem musst du auch einige der <a href=\"https:\/\/kinsta.com\/de\/blog\/arbeit-von-zu-hause-sicherheit\/\">Datenschutz- und Sicherheitsfragen<\/a> ber\u00fccksichtigen, die bei der Webentwicklung eine Rolle spielen. Das gilt vor allem, wenn du JavaScript einbinden willst, Schriftarten von Drittanbietern verwendest und andere Aspekte.<\/p>\n<p>Aus diesem Grund musst du an fast noch mehr Fronten als im Web gegen Zug\u00e4nglichkeit und Standards ank\u00e4mpfen. Es ist schwierig, eine HTML-E-Mail zu erstellen, die browser- und client\u00fcbergreifend funktioniert. Nat\u00fcrlich ist es m\u00f6glich, das zu tun, und wir werden den technischen Aspekt in einem sp\u00e4teren Abschnitt behandeln. Jetzt solltest du erst einmal die verschiedenen Elemente deiner E-Mail festlegen und dann versuchen, sie umzusetzen.<\/p>\n<h2>Die wesentlichen Elemente (und typischen Praktiken) einer HTML-E-Mail<\/h2>\n<p>In diesem Artikel wird an einigen Stellen auf das <a href=\"https:\/\/kinsta.com\/de\/blog\/web-design-kurse\/\" rel=\"noopener\">Webdesign Bezug genommen<\/a>, da es hier viele \u00c4hnlichkeiten gibt. Ein Aspekt, der einen \u00e4hnlichen Arbeitsablauf bietet, ist die Entscheidung \u00fcber die Facetten und Abschnitte deiner HTML-E-Mail.<\/p>\n<p>\u00c4hnlich wie im Web gibt es einige Elemente, die f\u00fcr deine E-Mails praktisch nicht verhandelbar sind. Nat\u00fcrlich brauchst du Inhalte. Hier gibt es ein paar typische Elemente, die du beachten solltest:<\/p>\n<ul>\n<li>Deine Kopfzeile ist wichtig, denn sie ist der erste Eindruck, den deine E-Mail bei den Lesern hinterl\u00e4sst.<\/li>\n<li>Genau wie beim Webdesign ist es auch hier von Vorteil, wenn du dir \u00fcberlegst, welche Elemente oberhalb des Headers angezeigt werden.<\/li>\n<li>Der Hauptteil ist wichtig, denn schlie\u00dflich ist er der Grund, warum die Leser\/innen <a href=\"https:\/\/kinsta.com\/de\/blog\/email-marketing-automatisierung\/\">deine E-Mails abonnieren<\/a> werden.<\/li>\n<li>Die Fu\u00dfzeile deiner HTML-E-Mail bietet dir und deinen Abonnenten ebenfalls einen gro\u00dfen Nutzen und kann ein untersch\u00e4tztes Element deiner E-Mails sein.<\/li>\n<\/ul>\n<p>Es gibt ein paar Punkte, auf die wir n\u00e4her eingehen k\u00f6nnen. Erstens, bedenke, wie sehr Emojis unsere t\u00e4gliche Webnutzung durchdringen. Sie sind zwar kein strenges HTML-Element, aber der geschmackvolle Einsatz von Emojis kann Wunder f\u00fcr deinen Inhalt bewirken, vor allem f\u00fcr deine \u00dcberschrift:<\/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=\"Ein Ausschnitt aus einer E-Mail mit schwarzem Hintergrund, auf dem steht: \"Wie schnelle Videos uns helfen, Gedanken zu teilen\" und ein Gl\u00fchbirnen-Emoji.\" width=\"1000\" height=\"207\"><figcaption id=\"caption-attachment-123702\" class=\"wp-caption-text\">Eine Auswahl von Emojis, die in der Titel\u00fcberschrift verwendet werden.<\/figcaption><\/figure>\n<p>Die Fu\u00dfzeile ist auch der beste Platz f\u00fcr einige wichtige rechtliche Informationen. Zwei der gr\u00f6\u00dften Probleme im Zusammenhang mit E-Mails sind Spam und die Frage, ob eine E-Mail die richtigen Posteing\u00e4nge erreicht (wenn \u00fcberhaupt). Darauf werden wir in einem sp\u00e4teren Abschnitt eingehen, denn es ist ein wichtiger Bestandteil beim Erstellen und Versenden von HTML-E-Mails.<\/p>\n<h3>\u00dcberlege dir einige typische Praktiken f\u00fcr deine HTML-E-Mails<\/h3>\n<p>Es gibt viele \u00dcberschneidungen mit dem <a href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-email-marketing\/\" rel=\"noopener\">E-Mail-Marketing<\/a>, wenn es um die optimale Gestaltung und das Layout deiner E-Mails geht. Es gibt eine, die du unbedingt einbauen solltest: Ein Double-Opt-In.<\/p>\n<p>Einer der gr\u00f6\u00dften <a href=\"https:\/\/kinsta.com\/de\/blog\/e-mail-marketing-statistiken\/\" rel=\"noopener\">E-Mail-Marketing-Hacks<\/a> ist, dass du deine E-Mails zum Leser bringen willst. Mit anderen Worten: Biete ein <a href=\"https:\/\/kinsta.com\/de\/blog\/mailchimp-fur-wordpress\/\">Opt-in-Formular<\/a> auf einer Webseite an, denn das hat eine <a href=\"https:\/\/kinsta.com\/de\/blog\/tipps-zur-optimierung-der-conversion-rate\/\" rel=\"noopener\">hohe Konversionsrate<\/a>. Das sollte aber nicht das einzige Mal sein, dass du um eine Best\u00e4tigung bittest. Es ist eine gute Praxis, auch ein zweites Opt-in in Form einer E-Mail zu versenden:<\/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=\"Ein Teil einer Double-Opt-In-Nachricht aus einer HTML-E-Mail, in der der\/die Nutzer\/in erkl\u00e4rt, warum er\/sie eine E-Mail erh\u00e4lt, und ihn\/sie bittet, diese mit einer gr\u00fcnen Schaltfl\u00e4che \"E-Mail best\u00e4tigen\" zu best\u00e4tigen.\" width=\"1000\" height=\"585\"><figcaption id=\"caption-attachment-123710\" class=\"wp-caption-text\">Eine Double-Opt-In-E-Mail.<\/figcaption><\/figure>\n<p>Hierf\u00fcr gibt es einige Gr\u00fcnde:<\/p>\n<ul>\n<li>Erstens schafft er Vertrauen bei deinen Lesern, weil du die ausdr\u00fcckliche Erlaubnis bekommst, ihnen E-Mails zu schicken.<\/li>\n<li>Dar\u00fcber hinaus hast du auch eine ausdr\u00fcckliche Zustimmung im Falle einer Spam-Empfehlung (mehr dazu sp\u00e4ter).<\/li>\n<li>Du tr\u00e4gst dazu bei, <a href=\"https:\/\/kinsta.com\/de\/blog\/email-zustellbarkeitsmanager\/\">E-Mail- und Spam-Missbrauch<\/a> f\u00fcr andere zu verhindern, weil sie sich ausdr\u00fccklich f\u00fcr ein Abonnement deiner E-Mails entscheiden m\u00fcssen.<\/li>\n<\/ul>\n<p>Weil du bei einem Double Opt-in eine E-Mail an die betreffende Adresse schickst, ist dies die beste Methode, um die <a href=\"https:\/\/kinsta.com\/de\/blog\/e-mail-authentifizierung\/\" rel=\"noopener\">E-Mail-Adresse zu best\u00e4tigen<\/a>.<\/p>\n<p>Es gibt noch ein paar andere gute Praktiken, die du beachten solltest. Die folgenden sind jedoch eher optional, denn du wirst fantastische Ergebnisse erzielen, aber es wird Zeiten geben, in denen du diese Richtlinien nicht befolgen willst:<\/p>\n<ul>\n<li>Deine Betreffzeile sollte perfekt sein, und der Inhalt deiner E-Mail sollte auf den Punkt kommen. Angesichts des Aufkommens und der <a href=\"https:\/\/kinsta.com\/de\/mobile-vs-desktop-marktanteil\/\">Dominanz des mobilen Surfens<\/a> ist dies besonders wichtig.<\/li>\n<li>Apropos, du solltest darauf achten, dass deine HTML-E-Mails auch auf kleineren Bildschirmen problemlos gelesen werden k\u00f6nnen &#8211; das bedeutet, dass du keine \u00fcbergro\u00dfen Banner oder Logos einbindest.<\/li>\n<li>Wenn du in jeder E-Mail eine aussagekr\u00e4ftige Handlungsaufforderung (Call to Action, CTA) einbaust, hast du gute Chancen auf eine bessere Beteiligung der Nutzer\/innen.<\/li>\n<li>Tracking ist ein umstrittenes Thema, aber es hilft dir zu ergr\u00fcnden, was deine Nutzer\/innen tun, wenn du ihnen eine E-Mail schickst. Bei einigen Anbietern geh\u00f6ren solide Analysefunktionen zum Standard.<\/li>\n<\/ul>\n<p>Genauso wichtig wie die Art und Weise, wie du deine E-Mail pr\u00e4sentierst und einrichtest, ist das Design und Layout. In den n\u00e4chsten Abschnitten gehen wir darauf ein, wie du eine HTML-E-Mail erstellst, und geben dir abschlie\u00dfend einige Tipps zum Versenden von E-Mails.<\/p>\n<h2>Die technische Herangehensweise an die Erstellung einer HTML-E-Mail<\/h2>\n<p>Wenn du etwas Erfahrung in der Webentwicklung hast, wirst du zweifellos <a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/\" rel=\"noopener\">HTML5<\/a> als Auszeichnungssprache verwenden. Diese Sprache unterscheidet sich deutlich von den fr\u00fcheren <a href=\"https:\/\/kinsta.com\/de\/blog\/xml-vs-html\/\">HTML- und XHTML-Versionen<\/a> und trennt st\u00e4rker zwischen Styling (von dem es praktisch keine g\u00fcltigen Elemente gibt) und Struktur.<\/p>\n<p>Ein Beispiel f\u00fcr Letzteres: HTML5 bietet eine Reihe verschiedener Tags, mit denen du die Inhaltsbereiche deiner Webseite definieren kannst.<\/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=\"Ein HTML-Snippet in der Onivim2-App, das eine Reihe von Tags zeigt, die helfen, Inhaltsbereiche zu definieren, wie &lt;html&gt;, &lt;head&gt;, &lt;body&gt; und mehr.\" width=\"1000\" height=\"799\"><figcaption id=\"caption-attachment-123705\" class=\"wp-caption-text\">Eine Reihe von HTML-Struktur-Tags.<\/figcaption><\/figure>\n<p>E-Mail-HTML ist jedoch etwas anderes, denn es ist nicht mehr zeitgem\u00e4\u00df. Deshalb musst du alle alten HTML4-Tabellen und Inline-Styling verwenden, um dein Layout zu erstellen. Warum das so ist, musst du mit den Entwicklern der E-Mail-Clients besprechen, denn sie ver\u00e4ndern die HTML-E-Mail oft, wenn sie in deinem Posteingang ankommt. Eine der h\u00e4ufigsten Ma\u00dfnahmen ist das Entfernen von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> aus den E-Mails, unter anderem aus Sicherheitsgr\u00fcnden.<\/p>\n<p>Das bedeutet, dass du einen anderen Weg finden musst, um deine HTML-E-Mails zu gestalten &#8211; aus Kompatibilit\u00e4tsgr\u00fcnden ist Inline die einzige Option. Apropos Kompatibilit\u00e4t: Das ist ein wichtiger Punkt. Du musst ein einzigartiges Styling mit den M\u00f6glichkeiten des E-Mail-Clients des Endnutzers in Einklang bringen. Daher gibt es noch ein paar andere technische \u00dcberlegungen, die du beachten solltest:<\/p>\n<ul>\n<li>Die Verwendung von <a href=\"https:\/\/kinsta.com\/de\/blog\/html-fonts\/\" rel=\"noopener\">Systemschriftarten<\/a> anstelle von Drittanbieter-Schriftarten erspart dir eine <a href=\"https:\/\/kinsta.com\/de\/blog\/http-statuscodes\/\">HTTP-Anfrage<\/a>, l\u00e4dt die E-Mail f\u00fcr den Nutzer schnell und <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-schriftarten-fuer-emails\/\" rel=\"noopener\">sieht zudem einheitlich aus<\/a>.<\/li>\n<li>Du kannst sogar noch weiter gehen und eine reine Textversion deiner E-Mail f\u00fcr diejenigen bereitstellen, die HTML-E-Mails in ihrem Client nicht anzeigen k\u00f6nnen. Viele Webseiten bieten eine HTML-Version an, auf die du online zugreifen kannst, sowohl aus diesem Grund als auch als Backup.<\/li>\n<li>Alt-Text ist f\u00fcr HTML-E-Mails genauso wichtig wie f\u00fcr das Internet. Verwende daher \u00fcberall dort, wo du ein Bild in deinen Inhalt einf\u00fcgst, einen Alt-Text, <a href=\"https:\/\/kinsta.com\/de\/blog\/barrierfrei-wordpress\/\" rel=\"noopener\">um die Zug\u00e4nglichkeit zu gew\u00e4hrleisten<\/a>.<\/li>\n<\/ul>\n<p>Es gibt einen technischen Aspekt einer HTML-E-Mail, \u00fcber den du dir mehr Gedanken machen solltest, da er sich im Spannungsfeld zwischen Inline-Styling, CSS und anderen Faktoren bewegen kann. Lass uns kurz \u00fcber die &#8222;Conditionals&#8220; sprechen.<\/p>\n<h3>Verwendung von Conditionals<\/h3>\n<p>Ein \u00dcberbleibsel von HTML-E-Mails, das fr\u00fcher zum Werkzeugkasten \u00e4lterer HTML-Webentwickler\/innen geh\u00f6rte, sind die Conditionals. Damit legst du fest, welcher Browser einen bestimmten Codeschnipsel verwenden soll.<\/p>\n<p>Um ehrlich zu sein, ist dies fast immer ein Problem von Microsoft. F\u00fcr Webentwickler war der Internet Explorer (IE) die d\u00e4monische Browserausgeburt. F\u00fcr HTML-E-Mails hingegen ist es <a href=\"https:\/\/kinsta.com\/de\/blog\/outlook-alternativen\/\">Outlook<\/a>. Zwischen den verschiedenen Versionen kann es vorkommen, dass dein Styling auf eine Weise dargestellt wird, die du nicht erwartet hast.<\/p>\n<p>Deshalb kannst du Bedingungsbl\u00f6cke in deinen Code einf\u00fcgen und diese Elemente definieren. So kannst du zum Beispiel sowohl die Word- als auch die IE-basierte Version von Outlook ansprechen.<\/p>\n<p>Erstens: Word:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if mso]&gt;<\/code><\/pre>\n<p>Dies ist f\u00fcr Word-basierte Versionen von Outlook:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>F\u00fcr den Internet Explorer verwendest du ein anderes Tag:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if (IE)]&gt;<\/code><\/pre>\n<p>Dies ist f\u00fcr IE-basierte Versionen von Outlook:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Wenn der Browser, auf den du abzielst, WebKit-basiert ist (z. B. Apple Safari, der PlayStation-Browser, Amazons Kindle usw.), kannst du eine Medienabfrage verwenden, um ein bestimmtes Styling zu erreichen:<\/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>So kannst du deine HTML-E-Mail etwas besser an die Anzeige des Endnutzers anpassen. Im Gro\u00dfen und Ganzen ist das HTML-Styling f\u00fcr E-Mails nicht perfekt, aber jeder E-Mail-Client bietet genug M\u00f6glichkeiten, um beeindruckende Layouts zu erstellen.<\/p>\n<h2>Deine Optionen f\u00fcr die Erstellung von HTML-E-Mails<\/h2>\n<p>Wie bereits erw\u00e4hnt, hast du eine Reihe flexibler M\u00f6glichkeiten, um HTML-E-Mails zu erstellen. Du kannst zum Beispiel mit einem <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\" rel=\"noopener\">sch\u00f6nen Texteditor<\/a> und HTML von Grund auf neu erstellen.<\/p>\n<p>Es gibt aber auch noch andere Optionen, die wir in Betracht ziehen k\u00f6nnen:<\/p>\n<ul>\n<li>Du k\u00f6nntest einen speziellen Dienst, wie z. B. eine E-Mail-Marketing-App, zur Erstellung deiner E-Mails nutzen. Viele Apps bieten einen visuellen Builder, geben dir aber auch die M\u00f6glichkeit, deinen eigenen Code zu schreiben und <a href=\"https:\/\/www.hubspot.com\/products\/sales\/email-templates-sales\">deine eigene Vorlage zu erstellen<\/a>.<\/li>\n<li>Apropos, du k\u00f6nntest eine Vorlage f\u00fcr deine HTML-E-Mails herunterladen. Das ist \u00e4hnlich wie ein WordPress-Theme, da es eine Basis f\u00fcr den Rest deines Designs bietet. Von dort aus kannst du sie nach deinen W\u00fcnschen anpassen. Es ist ein guter Mittelweg zwischen den Codierungs- und den Bauoptionen.<\/li>\n<\/ul>\n<p>Sp\u00e4ter werden wir unsere E-Mail mit HTML erstellen. Zuvor wollen wir uns aber noch einige E-Mail-Anbieter ansehen, die du unabh\u00e4ngig von der gew\u00e4hlten Methode zur Erstellung deiner E-Mails in Betracht ziehen solltest.<\/p>\n<h2>3 E-Mail-Dienstleister, die sich perfekt f\u00fcr die Erstellung von HTML-E-Mails eignen<\/h2>\n<p>Da wir uns in diesem Beitrag auf die Erstellung von HTML-E-Mails konzentrieren, m\u00fcssen wir nicht allzu sehr ins Detail gehen, wenn es um E-Mail-Dienstleister geht. Trotzdem <a href=\"https:\/\/kinsta.com\/de\/blog\/mailchimp-alternativen\/#mailchimp-alternatives-with-free-plans\">gibt es ein paar<\/a>, die du wahrscheinlich in Betracht ziehen wirst.<\/p>\n<p>Wir k\u00f6nnen nicht alle aufz\u00e4hlen, also werden wir drei der beliebtesten Anbieter erw\u00e4hnen. Wir fassen sie zusammen.<\/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=\"Das Mailchimp-Logo mit dem augenzwinkernden Maskottchen Freddie und den Worten \"Intuit Mailchimp\".\" width=\"1000\" height=\"215\"><figcaption id=\"caption-attachment-123707\" class=\"wp-caption-text\">Das Mailchimp-Logo.<\/figcaption><\/figure>\n<p>Dieser E-Mail-Dienstleister ist eine Standardl\u00f6sung &#8211; f\u00fcr viele ist es fast eine spontane Entscheidung. <a href=\"http:\/\/mailchimp.com\" target=\"_blank\" rel=\"noopener noreferrer\">Mailchimp<\/a> ist in den <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-mailchimp-verwendet\/\" rel=\"noopener\">Augen vieler<\/a> der Goldstandard unter den E-Mail-Marketing-Apps, und daf\u00fcr gibt es eine Menge guter Gr\u00fcnde:<\/p>\n<ul>\n<li>Es enth\u00e4lt viele typische Funktionen, die du in vielen anderen \u00e4hnlichen Apps findest.<\/li>\n<li>Es gibt jede Menge Unterst\u00fctzung, wenn es darum geht, ein Unternehmen zu vermarkten, z. B. Marketing-Automatisierung, Tools zur Verwaltung der Zielgruppe und mehr.<\/li>\n<li>Du hast eine erstklassige Suite von Kreativwerkzeugen, die dir bei der Erstellung von HTML-E-Mails helfen.<\/li>\n<\/ul>\n<p>Nat\u00fcrlich wollen wir uns hier mit letzterem befassen. Mit dem <a href=\"https:\/\/mailchimp.com\/create-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kreativassistenten<\/a> lernt Mailchimp deine Marke kennen und hilft dir bei der Erstellung und Personalisierung deiner E-Mails. Du kannst auch Apps von Drittanbietern wie Adobe Photoshop einbinden, um dir bei der Erstellung der perfekten E-Mail zu helfen.<\/p>\n<p>Es ist auch ganz einfach, mit vorhandenem HTML zu arbeiten, besonders wenn du den Classic Builder von Mailchimp verwendest. Trotzdem hast du die M\u00f6glichkeit, <a href=\"https:\/\/kinsta.com\/de\/blog\/web-komponenten\/#html-templates\" rel=\"noopener\">HTML-Vorlagen zu importieren<\/a>, wenn du sie brauchst.<\/p>\n<p>Mailchimp verwendet eine komplizierte Mischung aus monatlichen Abo-Stufen und der Anzahl der Kontakte, um einen Endpreis zu ermitteln. Wir gehen davon aus, dass kleine Unternehmen einen Tarif von etwa 35 US-Dollar pro Monat f\u00fcr bis zu 2.500 Kontakte ben\u00f6tigen. Du musst jedoch den besten Tarif f\u00fcr dich herausfinden, der auf den von dir ben\u00f6tigten Funktionen und der Anzahl der Kontakte basiert, die du voraussichtlich an Bord bringen wirst.<\/p>\n<h3>2. AWeber<\/h3>\n<p>F\u00fcr manche ist <a href=\"http:\/\/aweber.com\" target=\"_blank\" rel=\"noopener noreferrer\">AWeber<\/a> die Kr\u00f6nung des E-Mail-Marketings. Es ist eine fantastische und leistungsstarke Plattform, die wohl einen gr\u00f6\u00dferen Funktionsumfang als Mailchimp bietet.<\/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=\"Die AWeber-Benutzeroberfl\u00e4che, die die Canva-Benutzeroberfl\u00e4che mit dem Visual Builder \u00fcberlagert. Die Leinwand zeigt das Logo von \"Tara's Healthy Eats\", und die Sidebar enth\u00e4lt eine Reihe von Grafiken und Bildern.\" width=\"1000\" height=\"596\"><figcaption id=\"caption-attachment-123699\" class=\"wp-caption-text\">Das AWeber-Logo.<\/figcaption><\/figure>\n<p>AWeber enth\u00e4lt eine Reihe von wichtigen Funktionen, die du zum Versenden von E-Mails brauchst:<\/p>\n<ul>\n<li>Die M\u00f6glichkeit, Nachrichten, Kampagnen und mehr zu automatisieren und zu planen.<\/li>\n<li>Du hast gro\u00dfartige Organisationstools, wie z. B. die M\u00f6glichkeit, Abonnenten zu markieren und zu segmentieren.<\/li>\n<li>Mit AWeber kannst du auch die Inhalte automatisieren, die du f\u00fcr deine E-Mails erstellst. So kannst du zum Beispiel Blogbeitr\u00e4ge mit minimalem Aufwand in Mailings verwandeln.<\/li>\n<\/ul>\n<p>Wenn es um die Erstellung deiner E-Mails geht, hat AWeber ein paar Tricks in petto. Es verwendet einen visuellen Drag-and-Drop-Builder und enth\u00e4lt eine <a href=\"https:\/\/www.aweber.com\/html-email-templates.htm\" target=\"_blank\" rel=\"noopener noreferrer\">Bibliothek mit benutzerdefinierten Vorlagen<\/a> f\u00fcr den Anfang. Au\u00dferdem kannst du AWeber mit deinem Canva-Konto verbinden und dieses f\u00fcr die Gestaltung deiner E-Mails nutzen.<\/p>\n<p>Au\u00dferdem gibt es einen <a href=\"https:\/\/help.aweber.com\/hc\/en-us\/articles\/204030836-How-Do-I-Use-The-HTML-Editor-\" target=\"_blank\" rel=\"noopener noreferrer\">eigenen HTML-Editor<\/a>, was bei Mailchimp nicht der Fall ist. Diesen bekommst du sogar in der kostenlosen Version von AWeber. Apropos, <a href=\"https:\/\/www.aweber.com\/pricing.htm\" target=\"_blank\" rel=\"noopener noreferrer\">die Preisgestaltung<\/a> ist hier unkomplizierter. Du zahlst etwa 25 US-Dollar pro Monat f\u00fcr bis zu 2.500 Kontakte.<\/p>\n<h3>3. Constant Contact<\/h3>\n<p><a href=\"https:\/\/www.constantcontact.com\" target=\"_blank\" rel=\"noopener noreferrer\">Constant Contact<\/a> ist ein Ausrei\u00dfer unter den E-Mail-Anbietern, aber es ist eher eine Geheimwaffe. Er bietet eine fantastische Bandbreite an Funktionen und Funktionalit\u00e4ten und l\u00e4sst dich auch mit HTML arbeiten, wenn du es brauchst.<\/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=\"Das Constant Contact-Logo in Blau mit einem kreisf\u00f6rmigen Logo, das einen Abschnitt in Gelb enth\u00e4lt.\" width=\"1000\" height=\"500\"><figcaption id=\"caption-attachment-123700\" class=\"wp-caption-text\">Das Constant Contact-Logo.<\/figcaption><\/figure>\n<p>\u00c4hnlich wie AWeber konzentriert sich <a href=\"https:\/\/kinsta.com\/de\/blog\/constant-contact-vs-mailchimp\/\">Constant<\/a> Contact auf E-Mail-Marketing und nicht auf andere gesch\u00e4ftsorientierte Bereiche. Als solches hat es einen <a href=\"https:\/\/www.constantcontact.com\/features\/view-all-features\" target=\"_blank\" rel=\"noopener noreferrer\">Funktionsumfang<\/a>, der dir gefallen wird:<\/p>\n<ul>\n<li>Du hast Tools zur Verwaltung von Kundenlisten und Funktionen zur Marketingautomatisierung.<\/li>\n<li>Es gibt umfangreiche Berichtsoptionen.<\/li>\n<li>Du kannst Werbeprogramme von Facebook, Instagram und Google integrieren.<\/li>\n<li>Es gibt viele M\u00f6glichkeiten, neue Abonnenten f\u00fcr deine Listen zu gewinnen.<\/li>\n<\/ul>\n<p>Auch die Designfunktionen von Constant Contact sind gut. Du kannst <a href=\"https:\/\/www.constantcontact.com\/features\/email-templates\" target=\"_blank\" rel=\"noopener noreferrer\">eine Vorlage ausw\u00e4hlen<\/a> und mit einem visuellen Editor das gesamte Design erstellen. Du kannst aber auch <a href=\"https:\/\/v3.developer.constantcontact.com\/api_guide\/design_code_emails.html\" target=\"_blank\" rel=\"noopener noreferrer\">mit HTML arbeiten<\/a> &#8211; manchmal sogar auf fortgeschrittene Weise im Vergleich zu anderen Tools.<\/p>\n<p>Auch die Preise sind angemessen. Du zahlst etwa 35 US-Dollar pro Monat f\u00fcr den Core-Plan und 2.500 Kontakte oder 70 US-Dollar f\u00fcr den Plus-Plan.<\/p>\n<h2>Was du f\u00fcr die Erstellung einer HTML-E-Mail brauchst<\/h2>\n<p>Bevor du mit der Erstellung deiner HTML-E-Mails beginnst, brauchst du ein paar Werkzeuge und Kenntnisse. Hier ist, was du besorgen solltest, bevor du dich auf die Socken machst:<\/p>\n<ul>\n<li>Du solltest einen Code-Editor verwenden, mit dem du dich wohl f\u00fchlst, denn er muss dich w\u00e4hrend des Prozesses unterst\u00fctzen. Wenn du nicht wei\u00dft, welchen du w\u00e4hlen sollst, entscheiden sich viele Nutzer f\u00fcr <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, obwohl <a href=\"https:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brackets<\/a> f\u00fcr diese Aufgabe ideal w\u00e4re. Wir werden <a href=\"https:\/\/www.onivim.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Onivim2<\/a> verwenden, einen Editor im Stil von Vim, der auf der Infrastruktur von VS Code basiert.<\/li>\n<li>Du brauchst zwar <a href=\"https:\/\/kinsta.com\/de\/blog\/html-lernen\/\" rel=\"noopener\">HTML-Kenntnisse<\/a>, aber nicht das gleiche Wissen wie ein moderner Webentwickler (obwohl das nicht schaden kann).<\/li>\n<li>Du brauchst eine M\u00f6glichkeit, um deine E-Mails zu testen &#8211; <a href=\"https:\/\/kinsta.com\/de\/blog\/mailhog\/\" rel=\"noopener\">MailHog ist eine L\u00f6sung<\/a>, die wir an anderer Stelle im Kinsta-Blog vorstellen.<\/li>\n<li>Wir werden zwar keine vorgefertigte Vorlage verwenden, aber vielleicht willst du ja in Zukunft eine davon nutzen.<\/li>\n<li>Au\u00dferdem brauchst du einen E-Mail-Anbieter, denn du musst deine fertige HTML-E-Mail irgendwie verschicken k\u00f6nnen.<\/li>\n<\/ul>\n<p>Wenn du das alles beisammen hast, kannst du einen Texteditor \u00f6ffnen und loslegen. Als N\u00e4chstes gehen wir den Prozess durch, um eine einfache HTML-E-Mail zu erstellen.<\/p>\n<h2>Wie man eine HTML-E-Mail von Grund auf erstellt<\/h2>\n<p>Bevor wir beginnen, solltest du wissen, dass wir keinen speziellen Dienst wie Mailchimp oder AWeber nutzen werden. Stattdessen werden wir eine einfache Vorlage von Grund auf erstellen, die du \u00fcberallhin importieren kannst.<\/p>\n<p>Wir werden den Prozess in mehrere Abschnitte unterteilen, denn obwohl eine HTML-E-Mail einfach mit einer Webseite zu vergleichen ist, gibt es dennoch eine Menge zu beachten.<\/p>\n<h3>1. Erstelle die Grundlage f\u00fcr deine HTML-E-Mail<\/h3>\n<p>Es ist eine gute Idee, mit dem Grundger\u00fcst deiner E-Mail-Vorlage zu beginnen. Dabei werden einige typische Vorgehensweisen f\u00fcr HTML im Allgemeinen befolgt:<\/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>Hier gibt es ein paar Dinge, die wir erw\u00e4hnen sollten. Zun\u00e4chst geben wir einen &#8222;Doctype&#8220; f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/\" rel=\"noopener\">Transitional XHTML 1.0<\/a> an, was unter E-Mail-Entwicklern \u00fcblich ist. Danach geben wir einen XML-Namensraum an, der sp\u00e4ter wichtig sein wird.<\/p>\n<p>Au\u00dferdem gibt es einige Meta-Tags, die den Zeichensatz festlegen und bestimmen, wie der Browser das folgende HTML in seinem Fenster darstellen soll.<\/p>\n<p>Der Rest des Skeletts ist einfach: Es gibt die title- und body-Tags, die wir als N\u00e4chstes verwenden werden.<\/p>\n<h3>2. F\u00fcge die Struktur f\u00fcr deine E-Mail-Vorlage hinzu<\/h3>\n<p>Wenn du dich an unsere Diskussion \u00fcber die zu verwendenden HTML-Tags erinnerst, wirst du dich daran erinnern, dass wir kein &lt;div&gt; oder andere typische Strukturelemente verwenden wollen. Stattdessen wollen wir Tabellen verwenden, da diese in E-Mail-Clients und -Diensten gut dargestellt werden.<\/p>\n<p>Alles beginnt mit einer einfachen Reihe von &lt;table&gt;-Tags innerhalb des Textk\u00f6rpers:<\/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>Das Attribut, das wir im &lt;table&gt;-Tag setzen, hilft Screenreadern, den Text zu analysieren, und ist daher gut f\u00fcr die Barrierefreiheit.<\/p>\n<p>Von hier aus musst du neue Zeilen und Spalten zu deiner Tabelle hinzuf\u00fcgen, um die HTML-E-Mail-Vorlage zu erstellen. Wie du das machst, ist dir \u00fcberlassen, aber es ist gut, wenn du mit einer Basis aus Kopf-, Fu\u00df- und Textabschnitten beginnst. Der K\u00fcrze halber wiederholen wir sie hier nicht, aber wir werden sie im weiteren Verlauf erw\u00e4hnen.<\/p>\n<p>Die gute Nachricht ist, dass du weiterhin neue Zeilen zu deiner Tabelle hinzuf\u00fcgen kannst, wenn du weitere Abschnitte brauchst. Ab hier solltest du jedoch anfangen, Styling und andere Elemente einzuf\u00fchren.<\/p>\n<h3>3. F\u00fcge Styling f\u00fcr deine Elemente ein<\/h3>\n<p>Das Sch\u00f6ne an HTML ist, dass es fast unabh\u00e4ngig von der Gestaltung ist. Das Markup ist einfach, aber die Stile, die du anwendest, sind es vielleicht nicht. Hier wirst du sehen, wie deine HTML-E-Mail zum Leben erwacht.<\/p>\n<p>Als Anhaltspunkt f\u00fcr die Gestaltung f\u00fcgen wir einen &lt;style&gt;-Tag in den &lt;head&gt; ein, um einen allgemeinen Rahmen anzuzeigen:<\/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>Zun\u00e4chst stellen wir sicher, dass im Textk\u00f6rper oder in der Haupttabelle (die hier als Textk\u00f6rper fungiert, da einige E-Mail-Clients diesen Tag entfernen) kein unerwarteter Leerraum vorhanden ist:<\/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>Au\u00dferdem f\u00fcgen wir eine Zentrierung hinzu und entfernen alle zus\u00e4tzlichen F\u00fcllungen aus den Zellen der einzelnen Abschnitte:<\/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>Wenn du dir das in deinem Browser ansiehst, sieht es nicht nach viel aus:<\/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=\"Ein Browserfenster mit schwarzem Text auf wei\u00dfem Hintergrund: \"Header\", \"Body\" und \"Footer\". Jede Zelle hat einen schwarzen Rand.\" width=\"1000\" height=\"253\"><figcaption id=\"caption-attachment-123703\" class=\"wp-caption-text\">Ein Browserfenster, das das Ger\u00fcst der HTML-E-Mail zeigt.<\/figcaption><\/figure>\n<p>Von hier aus kannst du deine E-Mail-Vorlage mit Hilfe von Tabellen und Styling-Tags weiter ausbauen. Wir haben zum Beispiel einen Heldenabschnitt f\u00fcr unsere Kopfzeile erstellt und die Fu\u00dfzeile und den Textk\u00f6rper erweitert:<\/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=\"Eine HTML-E-Mail mit einem Luftpostumschlag mit Aufklebern, Briefmarke und roten und blauen Flecken, Text von der Webseite von Kinsta und einem Footer-Bereich mit Links zu Datenschutz, Support und Nutzungsbedingungen. Au\u00dferdem gibt es einen Copyright-Hinweis f\u00fcr Kinsta und einen Link zum Abbestellen.\" width=\"1000\" height=\"616\"><figcaption id=\"caption-attachment-123709\" class=\"wp-caption-text\">Ein Mockup der E-Mail-Vorlage w\u00e4hrend der Erstellung (Bildquelle: <a href=\"https:\/\/pixabay.com\/vectors\/post-office-airmail-letter-403145\/\" target=\"_blank\" rel=\"noopener noreferrer\">Settergren<\/a>).<\/figcaption><\/figure>\n<p>Du wirst wahrscheinlich eine bessere und passendere Vorlage f\u00fcr deine Bed\u00fcrfnisse erstellen, aber mit verschachtelten Tabellen und einigen grundlegenden HTML-Kenntnissen kannst du eine ansprechende und individuelle HTML-E-Mail-Vorlage erstellen, die ins Schwarze trifft.<\/p>\n<h3>4. Teste deine E-Mail<\/h3>\n<p>Bevor du fertig bist, solltest du deine E-Mail testen, um sicherzustellen, dass sie auf verschiedenen Ger\u00e4ten gut dargestellt wird. Es gibt verschiedene Dienste, die dir dabei helfen k\u00f6nnen.<\/p>\n<p><a href=\"https:\/\/www.emailonacid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Email on Acid<\/a> zum Beispiel enth\u00e4lt eine umfassende Checkliste, mit der du sicherstellen kannst, dass deine Vorlage keine Probleme verursacht:<\/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=\"Die Benutzeroberfl\u00e4che von Email On Acid zeigt eine E-Mail, eine schwarze Sidebar, eine laufende Checkliste vor der Bereitstellung und den Code f\u00fcr ein Element in der E-Mail.\" width=\"1000\" height=\"602\"><figcaption id=\"caption-attachment-123701\" class=\"wp-caption-text\">Die Email on Acid Website.<\/figcaption><\/figure>\n<p><a href=\"http:\/\/litmus.com\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus-Benutzer\/innen<\/a> werden <a href=\"https:\/\/putsmail.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PutsMail<\/a> kennen, aber es ist f\u00fcr alle zug\u00e4nglich:<\/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=\"Die Webseite von Litmus mit drei Mockup-Panels - eines davon im Dark-Modus - zeigt Optionen zum Erstellen und Teilen von E-Mails sowie Symbole, die ein Schloss und einen Briefumschlag anzeigen.\" width=\"1000\" height=\"598\"><figcaption id=\"caption-attachment-123706\" class=\"wp-caption-text\">Die Litmus-Webseite.<\/figcaption><\/figure>\n<p>Um den Dienst nutzen zu k\u00f6nnen, musst du dich f\u00fcr ein Konto anmelden, aber es ist ganz einfach zu bedienen. Du kannst die Funktion nutzen, um E-Mails in verschiedenen Browsern und auf verschiedenen Ger\u00e4ten zu \u00fcberpr\u00fcfen.<\/p>\n<p><a href=\"https:\/\/www.mailgun.com\/email-testing-tool\/html-email-tester\/free-html-email-tester\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailgun bietet au\u00dferdem<\/a> einen fantastischen Service, der mit seinem Hauptangebot zusammenh\u00e4ngt. \u00dcber die Schnittstelle kannst du E-Mail-Clients, Browser und vieles mehr testen. Au\u00dferdem kannst du Elemente wie Betreffzeilen testen, um sicherzustellen, dass deine \u00d6ffnungsraten hoch sind.<\/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=\"Zwei Panels mit einer bunten Grafik und einer Sammlung von Kennzahlen zu Zustellbarkeit, Risiko und mehr.\" width=\"1000\" height=\"522\"><figcaption id=\"caption-attachment-123708\" class=\"wp-caption-text\">Mailgun&#8217;s Email Tester Tool.<\/figcaption><\/figure>\n<p>Sobald du deine E-Mail getestet hast, musst du sicherstellen, dass sie auch im Posteingang des Empf\u00e4ngers ankommt. Im letzten Abschnitt gehen wir n\u00e4her darauf ein.<\/p>\n<h2>Versenden einer HTML-E-Mail: Was du wissen musst<\/h2>\n<p>Ein Vorteil eines E-Mail-Marketingdienstes, den wir noch nicht erw\u00e4hnt haben, ist, wie er den rechtlichen Aspekt des E-Mail-Versands handhabt. Das ist wichtig, denn wenn du hier etwas falsch machst, erreichst du nicht nur keinen Empf\u00e4nger, sondern bringst dich auch in Schwierigkeiten.<\/p>\n<p>Ein E-Mail-Marketingdienst hat bereits gute Beziehungen zu den Organisationen, die sich mit Spam und anderen Aspekten des E-Mail-Versands befassen. Daher ist es oft eine gute Idee, sich f\u00fcr einen dieser Dienste zu entscheiden, wenn du dir keine Sorgen um den Versand von Spam machen willst.<\/p>\n<p>Es gibt jedoch ein paar Tipps, die unabh\u00e4ngig von der Plattform, die du nutzt, wichtig sind:<\/p>\n<ul>\n<li>Achte darauf, dass du alle Richtlinien des <a href=\"https:\/\/www.congress.gov\/bill\/108th-congress\/senate-bill\/877\/text\" target=\"_blank\" rel=\"noopener noreferrer\">CAN-SPAM-Gesetzes<\/a> befolgst, vor allem, wenn sich dein Hauptzielpublikum in den USA befindet. Nat\u00fcrlich haben andere L\u00e4nder ihre <a href=\"https:\/\/mailchimp.com\/help\/anti-spam-requirements-for-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">eigenen gesetzlichen Richtlinien<\/a>.<\/li>\n<li>F\u00fcge ein Double-Opt-In f\u00fcr deine Abonnenten ein. Das bedeutet, dass du sie bittest, ein Abonnement zu best\u00e4tigen, aber auch eine zweite Best\u00e4tigung sendest. Das sch\u00fctzt dich und den Abonnenten, wenn es sp\u00e4ter eine Spam-Anfrage oder eine Anfrage zum Datenschutz gibt.<\/li>\n<\/ul>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/warum-landen-meine-emails-im-spam\/\" rel=\"noopener\">Zustellbarkeit<\/a> ist ein Schl\u00fcsselelement deiner E-Mails, das wir in einem anderen Artikel ausf\u00fchrlich behandeln. Dieses Konzept setzt sich jedoch aus mehreren Aspekten zusammen, wie z. B. der Verwendung von gutem Code, dem Einholen der richtigen Genehmigungen und vielem mehr.<\/p>\n<p>Das h\u00e4ngt mit einem weiteren Aspekt zusammen &#8211; deinem Sende-Score. Dieser ist vergleichbar mit einem Kreditscore und misst letztlich deinen Ruf. Hier gibt es verschiedene Komponenten, die das Ganze ausmachen:<\/p>\n<ul>\n<li>Die Absprungrate deiner Website.<\/li>\n<li>Die Anzahl der Beschwerden, die deine Website im Zusammenhang mit den von dir verschickten E-Mails erh\u00e4lt.<\/li>\n<li>Der Ruf deiner IP-Adresse.<\/li>\n<li>Die Signatur deines Domainnamens.<\/li>\n<\/ul>\n<p>Letzteres bezieht sich auf deine <a href=\"https:\/\/kinsta.com\/de\/blog\/e-mail-authentifizierung\/\" rel=\"noopener\">DomainKeys Identified Mail (DKIM)<\/a> und Sender Policy Framework (SPF). Dar\u00fcber hinaus kannst du die Reputation deiner IP \u00fcber Dienste wie <a href=\"https:\/\/senderscore.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">SenderScore<\/a> oder <a href=\"https:\/\/www.ipqualityscore.com\/ip-reputation-check\" target=\"_blank\" rel=\"noopener noreferrer\">IPQualityScore<\/a> \u00fcberpr\u00fcfen.<\/p>\n<p>Wenn du von Anfang an den <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlosen-smtp-server\/\" rel=\"noopener\">richtigen SMTP-Anbieter (Simple Mail Transport Protocol)<\/a> w\u00e4hlst, kannst du einige dieser Punkte auf einen Schlag abhaken. \u00c4hnlich wie bei der Wahl deiner E-Mail-Marketingl\u00f6sung wird dieser Dienst wissen, was du brauchst, um deine Zustellbarkeit hoch zu halten und auf der richtigen Seite der M\u00e4chtigen zu stehen.<\/p>\n<p>Mailgun ist eine L\u00f6sung, die wir bereits erw\u00e4hnt haben, und sie k\u00f6nnte ideal sein. Es gibt aber auch andere Anbieter wie <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> und sogar <a href=\"https:\/\/kinsta.com\/de\/blog\/gmail-smtp-server\/\" rel=\"noopener\">den eigenen Dienst von Gmail<\/a>.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Die E-Mail ist noch lange nicht am Ende. Deshalb ist die Nutzung von E-Mails f\u00fcr deine eigenen Bed\u00fcrfnisse &#8211; wie Werbung und Marketing &#8211; eine fantastische und kosteng\u00fcnstige M\u00f6glichkeit, potenzielle Abonnenten, Nutzer und Kunden zu erreichen.<\/p>\n<p>Du kannst zwar eine spezielle HTML-Vorlage kaufen, aber es ist gar nicht so schwer, deine eigenen HTML-E-Mails zu erstellen. Das k\u00f6nnte der Weg zum Erfolg sein, wenn du eine bestimmte Vision im Kopf hast. Allerdings musst du daf\u00fcr deine alten HTML-Tricks anwenden, wie z. B. Konditionierungen und verschachtelte Tabellen. Das HTML-E-Mail-Design ist noch nicht auf dem Niveau des modernen Webdesigns, aber du kannst mit wenig viel erreichen.<\/p>\n<p>Musst du auch HTML-E-Mails erstellen, und wenn ja, welche Fragen hast du? Lass es uns im Kommentarbereich unten wissen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Schnelles Quiz: Wie hei\u00dft die Sprache, die Webentwickler verwenden, um die Strukturen der Webseiten zu erstellen, die du t\u00e4glich besuchst? Abgesehen von cleveren Antworten ist die &#8230;<\/p>\n","protected":false},"author":117,"featured_media":51926,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[182,565,215,270],"topic":[940],"class_list":["post-51925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-deliverability","tag-email-marketing","tag-html","tag-html-editors","topic-e-mail-marketing-tipps"],"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>Ein Leitfaden f\u00fcr Anf\u00e4nger zum Erstellen und Versenden einer HTML-Email<\/title>\n<meta name=\"description\" content=\"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!\" \/>\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\/de\/blog\/html-email\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails\" \/>\n<meta property=\"og:description\" content=\"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/html-email\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T08:56:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T08:27:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"21\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails\",\"datePublished\":\"2022-06-30T08:56:49+00:00\",\"dateModified\":\"2023-11-16T08:27:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/\"},\"wordCount\":4390,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg\",\"keywords\":[\"email deliverability\",\"email marketing\",\"html\",\"HTML editors\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/html-email\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/\",\"name\":\"Ein Leitfaden f\u00fcr Anf\u00e4nger zum Erstellen und Versenden einer HTML-Email\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg\",\"datePublished\":\"2022-06-30T08:56:49+00:00\",\"dateModified\":\"2023-11-16T08:27:02+00:00\",\"description\":\"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/html-email\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/html-email\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tipps zum E-Mail-Marketing\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/e-mail-marketing-tipps\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ein Leitfaden f\u00fcr Anf\u00e4nger zum Erstellen und Versenden einer HTML-Email","description":"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!","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\/de\/blog\/html-email\/","og_locale":"de_DE","og_type":"article","og_title":"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails","og_description":"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!","og_url":"https:\/\/kinsta.com\/de\/blog\/html-email\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-06-30T08:56:49+00:00","article_modified_time":"2023-11-16T08:27:02+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Salman Ravoof","Gesch\u00e4tzte Lesezeit":"21\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails","datePublished":"2022-06-30T08:56:49+00:00","dateModified":"2023-11-16T08:27:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/"},"wordCount":4390,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","keywords":["email deliverability","email marketing","html","HTML editors"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/html-email\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/","url":"https:\/\/kinsta.com\/de\/blog\/html-email\/","name":"Ein Leitfaden f\u00fcr Anf\u00e4nger zum Erstellen und Versenden einer HTML-Email","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","datePublished":"2022-06-30T08:56:49+00:00","dateModified":"2023-11-16T08:27:02+00:00","description":"Wenn du ansprechende E-Mails an deine Abonnenten schicken willst, brauchst du vielleicht ein eigenes Template. Lerne, wie du deine eigenen HTML-E-Mails erstellst!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/html-email\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/06\/html-email.jpg","width":1460,"height":730,"caption":"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/html-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Tipps zum E-Mail-Marketing","item":"https:\/\/kinsta.com\/de\/thema\/e-mail-marketing-tipps\/"},{"@type":"ListItem","position":3,"name":"Eine Anleitung f\u00fcr Anf\u00e4nger zum Erstellen und Versenden von HTML-E-Mails"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=51925"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51925\/revisions"}],"predecessor-version":[{"id":66961,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/51925\/revisions\/66961"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/51925\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/51926"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=51925"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=51925"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=51925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}