Digitales Marketing

Newsletter gestalten: So bauen Sie eine HTML E-Mail richtig

Talha Aslan 16 Minuten Lesezeit 2 Aufrufe

Was heißt Newsletter gestalten und wie unterscheidet es sich vom Webdesign?

Newsletter gestalten heißt, Layout, Bilder, Texte und Buttons einer HTML E-Mail so zu bauen, dass sie in E-Mail Clients zuverlässig angezeigt wird. Es unterscheidet sich vom Webdesign, weil Gmail, Outlook und Apple Mail denselben Code unterschiedlich lesen. Ziel ist keine aufwendige Seite, sondern eine schlichte Nachricht, die überall funktioniert.

Im Web verlassen Sie sich auf modernes CSS. In der E-Mail ist es dagegen umgekehrt. Denn jeder Client wendet eigene Regeln an, und manche schreiben Ihren Code sogar um.

Zum Beispiel bauen Sie drei Spalten nebeneinander im Web mit wenigen Zeilen CSS. Dieselben Spalten können im klassischen Outlook auseinanderfallen. Kurz gesagt: Sie akzeptieren die Grenzen von Anfang an.

Dieser Leitfaden stützt jede technische und rechtliche Aussage auf offizielle Quellen. Wenn Sie KI für E-Mail Texte nutzen möchten, lesen Sie unseren Beitrag zu KI im E-Mail Marketing; wir wiederholen ihn hier nicht.

Welches Ziel setzen Sie, bevor Sie einen Newsletter gestalten?

Legen Sie zunächst ein einziges Ziel fest. Soll der Newsletter verkaufen, Besucher auf einen Blogbeitrag lenken oder ein Gespräch buchen? Wenn Sie das Layout vor dem Ziel bauen, zieht die Nachricht in mehrere Richtungen, und niemand klickt.

Schreiben Sie das Ziel in einen Satz. Dann wählen Sie höchstens drei Inhaltsblöcke, die dieses Ziel stützen.

  • Eine Überschrift und ein Versprechen in einem Satz.
  • Ein kurzer Absatz oder ein Bild, das das Versprechen belegt.
  • Ein einziger Button für den Call to Action.

So wird die Vorlage von allein schlichter. Denken Sie außerdem an die Zielgruppe. Ein Newsletter an Bestandskunden klingt nämlich anders als eine Nachricht an eine kalte Liste, daher passen Sie den Ton an. Wer die Einwilligung gegeben hat, bestimmt Inhalt und rechtliche Lage.

Ein Beispielsatz für das Ziel: "Diese E-Mail soll Leser nur zum Anfrageformular auf unserer neuen Leistungsseite führen." Ein solcher Satz zeigt Ihnen konkret, was in die E-Mail gehört und was draußen bleibt. Außerdem dient er später als Maßstab für die Auswertung.

Wie breit sollte ein Newsletter sein?

Die meisten Teams halten die Hauptspalte bei etwa 600 Pixeln. Allerdings ist das eine Gewohnheit, kein offizieller Standard. Lesebereiche am Desktop passen gut dazu, und auf dem Handy schrumpft die Spalte auf die Bildschirmbreite.

Denken Sie also in "bis etwa 600, auf kleinen Bildschirmen schmaler" statt in einer festen Zahl. Passen Sie außerdem Bildbreiten an die Spalte an und lassen Sie die Höhe automatisch.

Ein Haken: Microsofts Dokumentation zur Word Engine nennt max-width unter den nicht unterstützten Eigenschaften. Für Outlook geben Sie die Breite daher zusätzlich als Attribut an der Tabelle an. So bekommt das klassische Outlook eine feste Breite, moderne Clients dagegen eine flexible.

Lassen Sie außerdem Innenabstand in der Spalte. Wenn der Text am Rand klebt, lesen Sie ihn nämlich am Handy schlecht. Geben Sie den Abstand der Tabellenzelle, denn dasselbe Microsoft Dokument führt padding bei Tabellenzellen als unterstützt auf. Bauen Sie dieses Gerüst also einmal und kopieren Sie es in spätere Vorlagen.

Warum müssen Sie beim Newsletter gestalten auf Tabellen setzen?

Das klassische Outlook für den Desktop zeigt HTML mit der Word Engine an. Die archivierte Microsoft Dokumentation sagt, dass diese Engine float, position, background-image und max-width nicht unterstützt. Tabellen gehören dagegen zur voll unterstützten Gruppe.

Deshalb besteht das Gerüst eines E-Mail Layouts weiterhin aus verschachtelten Tabellen. Die äußere Tabelle trägt Hintergrundfarbe und Breite. Dann trägt die innere Tabelle den Inhalt.

Microsoft schrieb das Dokument für Outlook 2007. Das klassische Outlook nutzt aber weiter eine Word basierte Engine, daher bleiben die Grenzen ein praktischer Anhaltspunkt. Prüfen Sie den aktuellen Stand trotzdem mit eigenen Tests.

Das kleine Beispiel zeigt eine Layouttabelle, die Hilfstechnik mitteilt, dass sie nur dem Layout dient.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
  <tr>
    <td align="left" bgcolor="#ffffff" height="48">
      Überschrift und kurzes Versprechen stehen hier.
    </td>
  </tr>
</table>

Eine Layouttabelle ist keine Datentabelle. Sagen Sie das daher Screenreadern mit role="presentation".

Wie sorgen Sie für Kompatibilität in allen E-Mail Clients?

Kompatibilität entsteht nämlich nicht durch einen Zaubercode. Sie entsteht, wenn Sie bei einem kleinen Funktionsumfang bleiben. Laut Microsofts Dokument kennt die Word Engine Elemente wie form, script, iframe und button nicht. Außerdem zeigt sie von einem animierten GIF nur eine statische Fassung.

Legen Sie deshalb die wichtigste Information in das erste Bild des GIFs. Dann bleibt die Botschaft auch in Clients erhalten, die nie animieren.

Die Tabelle fasst Gewohnheiten aus dem Web und ihre E-Mail tauglichen Alternativen zusammen.

Gewohnheit aus dem WebProblem in der E-MailE-Mail taugliche Alternative
float für Spalten nebeneinanderWord Engine unterstützt es nichtTabellenzellen
HintergrundbildKlassisches Outlook zeigt es eventuell nichtEinfarbiger Hintergrund und separates Bild
max-width für flexible SpalteWord Engine unterstützt es nichtAttribut width und Tabelle
Formular und Button ElementWord Engine kennt sie nichtLink und Button aus einer Zelle
Animiertes GIFNur ein statisches Bild erscheintKernbotschaft im ersten Bild

Anders gesagt: Sie müssen Ihre Gewohnheiten aus dem Web nicht aufgeben. Sie brauchen nur einen zweiten Weg für die E-Mail.

Wie gehen Sie mit Inline CSS und Schriften um?

Zunächst schreiben Sie die wichtigen Stile direkt an die Elemente. Manche Clients kürzen Stilblöcke im head oder ignorieren sie. Tatsächlich führt Microsofts Tabelle das style Element ohne Unterstützung auf. Farbe, Größe und Abstand direkt am Element zu setzen, ist deshalb der sicherste Weg.

Die meisten Werkzeuge übernehmen das automatisch. Prüfen Sie das Ergebnis dennoch selbst, denn Fehler passieren.

Microsofts Dokument nennt die Grundeigenschaften, die die Word Engine voll unterstützt. Dazu gehören:

  • color, font-family, font-size und font-weight.
  • text-align, line-height und vertical-align.
  • background-color und die border Eigenschaften.
  • width, height und padding bei Tabellenzellen.

Setzen Sie diese direkt am Element, erhalten Sie in den meisten Clients die erwartete Darstellung, auch im klassischen Outlook.

Halten Sie zudem Schriften schlicht. Webfonts laden nicht in jedem Client, also nennen Sie eine Ersatzschrift, die auf dem System vorhanden ist. Wenn Sie eine eigene Überschriftschrift möchten, testen Sie, ob die Ersatzschrift ebenfalls gut aussieht.

Wie lässt sich ein Newsletter gestalten, der mobil gut lesbar ist?

Beginnen Sie zunächst mit einem einspaltigen Ablauf. Ein Layout, das Spalten auf dem Handy untereinander setzt, macht auf schmalen Bildschirmen die wenigsten Probleme. Halten Sie den Fließtext danach in einer angenehmen Größe. Etwa 16 Pixel sind ein üblicher Startwert, aber das ist eine Gewohnheit und kein Standard.

Machen Sie Buttons also groß genug für den Daumen und lassen Sie Platz drumherum. Setzen Sie Links nicht dicht aneinander.

Mobile First gilt also auch für Newsletter. Die Webvariante haben wir im Beitrag Was ist Mobile First Design erklärt. Das Prinzip bleibt gleich: Bauen Sie zuerst den schmalsten Bildschirm, dann erweitern Sie.

Schicken Sie außerdem einen Test an Ihr eigenes Handy. Wenn Sie dieselbe Nachricht in mehreren Clients öffnen, zeigen sich Probleme in Sekunden. Prüfen Sie am Handy diese kurze Liste:

  • Passt die Spalte ohne seitliches Scrollen auf den Bildschirm?
  • Sind Überschrift und Button auf dem ersten Bildschirm sichtbar?
  • Trifft der Daumen jeden Link einzeln?
  • Bleibt die Nachricht ohne Bilder verständlich?

Diese vier Fragen fangen die meisten mobilen Probleme vor dem Versand ab.

Was beachten Sie beim Newsletter gestalten für den Dark Mode?

Im Dark Mode kehren manche Clients Farben von selbst um oder passen sie an. Dadurch kann also dunkle Schrift auf dunklem Grund verschwinden, oder um Ihr Logo erscheint ein weißer Kasten. Jeder Client macht das anders, daher gibt es keine einzelne Regel.

Im Web erkennt die Medienabfrage prefers-color-scheme, ob jemand ein helles oder dunkles Thema bevorzugt. Laut MDN hat sie seit Januar 2020 breite Browserunterstützung. Das Meta Tag color-scheme teilt dem Browser zudem mit, welche Themen Sie unterstützen.

E-Mail Clients unterstützen diese Funktionen unterschiedlich weit. Verlassen Sie sich also nicht allein auf die Abfrage.

  • Exportieren Sie das Logo mit transparentem Hintergrund und testen Sie es auf hellem und dunklem Grund.
  • Wählen Sie weichere Töne statt reinem Schwarz und reinem Weiß.
  • Setzen Sie Text nicht in Bilder.
  • Schauen Sie sich die Vorschau im hellen und im dunklen Modus an.

Wie wichtig ist der Alternativtext beim Newsletter gestalten?

Manche Clients blockieren Bilder standardmäßig. Dann sieht der Leser den Alternativtext anstelle des Bildes. Ohne Alternativtext wird die halbe Nachricht zu einem leeren Kasten.

Schreiben Sie deshalb zu jedem aussagekräftigen Bild einen kurzen, beschreibenden Alternativtext. Lassen Sie ihn bei reinen Deko Bildern leer.

Bauen Sie den Button nicht als Bild, denn ein Bild Button verschwindet ganz, sobald Bilder aus sind. Bauen Sie stattdessen einen Textbutton mit Hintergrundfarbe in der Zelle.

Die Einzelheiten finden Sie in unserem Beitrag Alt Text richtig schreiben. Zum Beispiel hilft "Rabatt auf ausgewählte Winterartikel" mehr als nur "Angebot".

Außerdem zeigt die Word Engine laut Microsoft von einem animierten GIF nur eine statische Fassung. Binden Sie wichtige Informationen daher nie an die Animation.

Welche Bildgrößen und Formate wählen Sie?

Bereiten Sie zunächst Bilder passend zur Spaltenbreite vor. Üblich ist, ein Bild in doppelter Spaltenbreite zu exportieren und mit dem Attribut width zu verkleinern, damit es auf scharfen Bildschirmen gut aussieht. Das ist ein praktischer Tipp, keine Regel. Halten Sie auch die Dateigrößen klein, denn schwere Bilder laden mobil langsam.

In der Praxis sind JPEG und PNG die gängigsten Formate. JPEG passt zu Fotos, PNG zu Logos mit Transparenz. Nicht jeder Client zeigt neuere Formate, also testen Sie diese zuerst in Ihren Ziel Clients.

Zum Verkleinern nutzen Sie unser Werkzeug Bild verkleinern.

  • Verstecken Sie nicht die ganze Botschaft in einem Bild.
  • Schreiben Sie die Kerninformation als Text.
  • Geben Sie bei jedem Bild Breite und Höhe an.
  • Entfernen Sie große, ungenutzte Dateien vom Server.

So bleibt die Nachricht lesbar, egal ob Bilder aus sind oder langsam laden.

Was ist ein Preheader und wie schreiben Sie ihn?

Der Preheader ist der kurze Vorschautext neben oder unter der Betreffzeile. Er stammt meist vom ersten Text der Nachricht. Schreiben Sie keinen, zeigt der Client womöglich den ersten Text, den er findet, etwa einen Link "Im Browser ansehen".

Behandeln Sie den Preheader also wie die zweite Hälfte der Betreffzeile. Weckt der Betreff Neugier, dann nennt der Preheader den konkreten Nutzen.

Die meisten Vorlagen schreiben diesen Text in ein verstecktes span ganz oben in der Nachricht. Sie verbergen es mit Inline Werten wie display:none. Die Zahl der sichtbaren Zeichen unterscheidet sich je Client, also setzen Sie die Kerninformation an den Anfang des ersten Satzes.

Wiederholen Sie schließlich nicht denselben Satz in Betreff und Preheader. Leser sehen darin eine vertane Chance.

Ein Beispielpaar: Betreff "Unsere neue Leistungsseite ist online", Preheader "Füllen Sie das Anfrageformular in zwei Minuten aus." Beide ergänzen sich. Das ist nur ein Beispiel, passen Sie es an Ihre Nachricht an.

Warum funktioniert die Regel mit nur einem Call to Action?

Hat ein Newsletter mehrere gleich starke Buttons, fällt Lesern nämlich die Wahl schwer. Ein klarer Aufruf verkürzt den Klickweg. Andere Links dürfen natürlich existieren. Nur ein Aufruf sollte optisch dominieren.

Der Buttontext nennt die Handlung. Wählen Sie statt "Hier klicken" lieber "Anfrageformular öffnen" oder "Bestellung abschließen". Halten Sie ihn außerdem kurz, damit der Button in eine Zeile passt.

Bauen Sie den Button als Tabellenzelle. Geben Sie der Zelle eine Hintergrundfarbe, setzen Sie den Link hinein und fügen Sie großzügigen Innenabstand hinzu. Das funktioniert auch in der Word Engine, denn Zellhintergrund und Innenabstand stehen auf der Liste der unterstützten Eigenschaften.

Ideen für Texte finden Sie im Beitrag Call to Action Beispiele.

Auch die Farbe zählt. Geben Sie Buttontext und Buttonfläche genug Kontrast, sonst wirkt der Button blass. Prüfen Sie, dass er im Dark Mode noch auffällt.

Wie ordnen Sie den Inhalt in der Newsletter Vorlage?

Leser überfliegen einen Newsletter schnell von oben nach unten. Setzen Sie daher die wichtigste Information nach oben. Die folgende Reihenfolge ist für die meisten Newsletter ein solider Start.

  1. Preheader Text.
  2. Ein kleines Logo und bei Bedarf ein Link zur Browseransicht.
  3. Eine Überschrift in einem Satz.
  4. Ein kurzer Absatz, der das Versprechen erklärt.
  5. Genau ein Button für den Call to Action.
  6. Ein zweiter Block, etwa die Zusammenfassung eines Produkts oder Beitrags.
  7. Fußbereich und Abmeldelink.

Behalten Sie dieses Gerüst bei jedem Versand bei. Dann lernen Leser, wo was steht, und finden sich schneller zurecht.

Vermeiden Sie lange Newsletter. Weil zu viele Themen in einer Nachricht verwirren, teilen Sie sie auf mehrere Sendungen auf. Zusammengefasst: Jeder Newsletter erledigt eine Aufgabe gut.

Gehören Absendername und Betreffzeile zum Newsletter gestalten?

Ja, denn Leser sehen vor dem Öffnen nur diese beiden Dinge. Halten Sie den Absendernamen vertraut und gleichbleibend. Wechseln Sie ihn bei jedem Versand, verlieren Sie also Vertrauen.

Halten Sie außerdem die Betreffzeile wahrheitsgemäß. Ein irreführender Betreff kostet Leser und kann rechtlichen Ärger auslösen. Die deutsche Regelung nennt unter anderem das Verschleiern der Identität des Absenders als unzumutbare Belästigung.

Auch der Versand von einer Firmendomain zählt. Ein Massenversand von einem kostenlosen Postfach schwächt Vertrauen und Zustellbarkeit. Zur Einrichtung lesen Sie den Beitrag E-Mail mit eigener Domain.

Leiten Sie die Antwortadresse auf ein Postfach, das jemand liest. So verlieren Sie keine Leser, die antworten.

Wie sichern Sie Kontrast und Barrierefreiheit beim Newsletter?

Der Kontrast zwischen Text und Hintergrund ist die erste Bedingung für Barrierefreiheit. Das Erfolgskriterium 1.4.3 der W3C WCAG 2.2 verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 und für großen Text mindestens 3:1. Streben Sie diese Werte daher auch in der E-Mail an.

Hellgrauer Text auf grauem Grund sieht edel aus, doch auf einem sonnigen Bildschirm liest ihn niemand. Messen Sie den Kontrast daher vorab. Unser Kontrastrechner erledigt das in Sekunden.

Außerdem lohnen sich weitere Schritte für Barrierefreiheit.

  • Fügen Sie Layouttabellen role="presentation" hinzu.
  • Geben Sie die Sprache der Nachricht mit dem Attribut lang an.
  • Schreiben Sie aussagekräftige Linktexte statt "hier klicken".
  • Zeichnen Sie Überschriften mit echten Überschriftselementen aus.

Die allgemeinen Prinzipien finden Sie unter Kontrast im Webdesign.

Wie halten Sie die Marke im Newsletter einheitlich?

Der Newsletter ist das E-Mail Gesicht Ihrer Website. Logo, Farbe und Ton sollten zur Seite passen. Wenn Leser an beiden Orten dieselbe Marke sehen, wächst somit das Vertrauen.

Halten Sie zunächst die Farbpalette klein. Eine Hauptfarbe, eine Akzentfarbe und neutrale Töne genügen für die meisten Newsletter. Setzen Sie den Akzent nur beim Call to Action Button ein, fällt er von selbst auf.

Bleiben Sie auch im Ton konsistent, denn Brüche fallen auf. Klingt Ihre Website freundlich, wechseln Sie im Newsletter nicht zu einem förmlichen Stil. Übernehmen Sie außerdem den Stil der Überschriften.

Es hilft, Schrift, Farbe und Logo in einem Leitfaden festzuhalten. Dabei unterstützt Sie unsere Leistung Markenidentität.

Geben Sie zudem eine Vorlage einmal frei und kopieren Sie sie. Jedes Mal neu zu gestalten, kostet Zeit und stört die Einheitlichkeit.

Was verlangt das deutsche Recht bei E-Mail Werbung?

Nach § 7 Absatz 2 Nummer 2 des Gesetzes gegen den unlauteren Wettbewerb (UWG) gilt Werbung unter Verwendung elektronischer Post ohne vorherige ausdrückliche Einwilligung des Adressaten als unzumutbare Belästigung. Das ist also die Grundregel für Newsletter.

Absatz 3 nennt eine Ausnahme mit vier Voraussetzungen. Der Unternehmer erhielt die Adresse im Zusammenhang mit dem Verkauf einer Ware oder Dienstleistung. Er nutzt sie für Direktwerbung für eigene ähnliche Waren oder Dienstleistungen. Der Kunde widersprach nicht. Schließlich erhielt der Kunde bei der Erhebung und bei jeder Verwendung einen klaren Hinweis auf sein Widerspruchsrecht.

Zudem gilt nach Absatz 2 Nummer 3 Werbung als unzumutbar, wenn keine gültige Adresse für den Widerspruch angegeben ist. Setzen Sie also einen sichtbaren Abmeldelink in den Fußbereich.

Das Gesetz nennt kein bestimmtes Verfahren wie die doppelte Bestätigung. Dieser Abschnitt ist keine Rechtsberatung. Lesen Sie den Gesetzestext und fragen Sie bei Bedarf eine Anwältin oder einen Anwalt. Zum Datenschutz hilft unser Beitrag DSGVO konforme Website.

Was gilt, wenn Sie Empfänger in der Türkei anschreiben?

In der Türkei sind die Regeln bei der Einwilligung streng. Artikel 6 des Gesetzes Nr. 6563 sagt, dass kommerzielle elektronische Nachrichten nur mit vorheriger Zustimmung an Empfänger gehen dürfen. Sie können die Zustimmung schriftlich oder auf elektronischem Weg einholen.

Der zweite Absatz desselben Artikels erlaubt den Versand an Händler und Gewerbetreibende ohne vorherige Zustimmung. Artikel 8 gibt Empfängern das Recht, jederzeit abzulehnen. Sie müssen eine einfache und kostenlose Möglichkeit bieten und binnen drei Werktagen nach der Anfrage aufhören zu senden.

Artikel 11 sieht ein staatliches System für Zustimmungen vor. Zustimmungen, die Sie dort nicht eintragen, gelten als ungültig. In der Praxis heißt dieses System IYS.

Das ist keine Rechtsberatung. Prüfen Sie den Originaltext im türkischen Gesetzesportal und fragen Sie einen Anwalt vor Ort.

Wie wirken sich Absenderprüfung und Abmeldeheader auf die Zustellung aus?

Ein schönes Design hilft nicht, wenn die Nachricht im Spamordner landet. Laut den Absenderrichtlinien von Google müssen Massenversender, die mehr als 5.000 Nachrichten pro Tag an Gmail Konten senden, SPF, DKIM und DMARC einrichten.

Dieselben Richtlinien verlangen bei Werbenachrichten die Abmeldung mit einem Klick über die Header List-Unsubscribe und List-Unsubscribe-Post. Außerdem sollen Sie die Spamrate in den Postmaster Tools unter 0,30 % halten.

Diese Einstellungen liegen auf Ebene von DNS und Versandplattform. Allerdings tragen die meisten E-Mail Plattformen sie für Sie ein.

Die Einträge Ihrer eigenen Domain prüfen Sie mit unserem SPF, DKIM und DMARC Check. Einzelheiten lesen Sie in Googles Richtlinien für E-Mail Absender.

Wie testen Sie, bevor Sie den Newsletter gestalten abschließen?

Der Test ist der Schritt, den Teams am häufigsten überspringen, deshalb planen Sie ihn fest ein. Gehen Sie in dieser Reihenfolge vor.

  1. Senden Sie eine Testnachricht an sich und Ihr Team.
  2. Öffnen Sie sie in Gmail, Outlook und Apple Mail.
  3. Prüfen Sie das Handy im hellen und im dunklen Modus.
  4. Schalten Sie Bilder aus und prüfen Sie, ob der Alternativtext gut lesbar ist.
  5. Klicken Sie jeden Link an; bei defekten Links hilft der Broken Link Checker.
  6. Fügen Sie den Links Tracking Parameter hinzu.

Fürs Tracking erledigt der UTM Generator die Arbeit. Die Logik erklären wir im Beitrag UTM Parameter für Kampagnen Tracking.

Senden Sie Testnachrichten nie an eine echte Kundenliste. Schicken Sie stattdessen nur an Ihre eigenen Adressen.

Prüfen Sie außerdem, ob die Nachricht im Spamordner landet. Senden Sie sie dazu an eigene Adressen bei verschiedenen Anbietern. Erstellen Sie auch eine reine Textversion, damit Clients ohne HTML Ihre Botschaft trotzdem zeigen. Lesen Sie schließlich kurz vor dem Versand die Betreffzeile noch einmal Korrektur.

Welche Fehler passieren beim Newsletter gestalten am häufigsten?

Dieselben Fehler wiederholen sich. Wer sie kennt, spart also Zeit.

  • Zu viele Buttons und Links.
  • Die ganze Botschaft in einem großen Bild.
  • Leerer Alternativtext.
  • Kein Preheader.
  • Ein versteckter oder blasser Abmeldelink.
  • Kein Test im Dark Mode.

Ein Newsletter aus nur einem Bild wirkt leer, sobald Bilder aus sind. Außerdem sagt er Screenreader Nutzern nichts.

Die meisten dieser Fehler vermeiden Sie am Anfang, nicht am Ende. Legen Sie daher Ziel, den einen Aufruf und den Ausstieg fest, bevor Sie die Vorlage bauen.

Kurz gesagt: Eine schlichte Vorlage schlägt eine aufwendige, aber zerbrechliche immer.

Wie messen Sie den Erfolg eines Newsletters?

Entscheiden Sie zunächst, was Sie messen. Manche Clients können die Öffnungsmessung verzerren, also verlassen Sie sich nicht allein auf die Öffnungsrate. Klicks und die Conversions danach sind belastbarere Signale.

Fügen Sie jedem Link UTM Parameter hinzu, damit Sie die Quelle im Analysewerkzeug sehen. Danach betrachten Sie die Conversions Seite für Seite.

Die Rate berechnen Sie mit unserem Conversion Rate Rechner. Vergleichen Sie dann das Ergebnis mit Ihrem Ziel.

Bleiben die Ergebnisse zurück, ändern Sie zuerst den Betreff, dann den Text des Buttons und zuletzt das Layout. Ändern Sie drei Dinge gleichzeitig, wissen Sie nicht, welches gewirkt hat.

Beobachten Sie diese Signale:

  • Klicks und der Link, der sie erhalten hat.
  • Was Klickende auf Ihrer Website tun, etwa ein Formular absenden.
  • Der Anteil der Leser, die sich abmelden.
  • Der Anteil der Nachrichten, die nicht ankommen.

Steigen die Abmeldungen unerwartet, schreiben Sie also womöglich die falsche Zielgruppe an. Prüfen Sie dann zuerst die Auswahl der Liste.

Wann sollten Sie den Newsletter nicht selbst bauen?

Sie müssen allerdings nicht jede Vorlage von Hand programmieren. Der Vorlageneditor einer fertigen E-Mail Plattform reicht für viele kleine Unternehmen. Trotzdem sollten Sie die Arbeit in manchen Fällen an Fachleute geben.

  • Sie brauchen ein makelloses Bild in vielen Clients und haben keine Testumgebung.
  • Zustellprobleme tauchen immer wieder auf, und Sie können SPF, DKIM und DMARC nicht verwalten.
  • Sie haben eine große Liste und müssen die Versandinfrastruktur aufbauen.
  • Sie sind unsicher, ob Ihre Einwilligungen und Abmeldungen rechtlich passen.

Fragen Sie für Versandinfrastruktur und DNS Ihren Hosting oder E-Mail Anbieter. Holen Sie für die rechtliche Prüfung eine Anwältin oder einen Anwalt dazu.

Unser Webdesign kann zudem an diesen Ablauf anschließen, wenn Sie ein einheitliches Bild von Website und Newsletter wünschen.

Häufig gestellte Fragen

Welche Breite ist beim Newsletter gestalten am besten?
Die meisten Teams halten die Hauptspalte bei etwa 600 Pixeln. Das ist eine Gewohnheit, kein offizieller Standard. Lassen Sie die Spalte auf kleinen Bildschirmen schrumpfen und geben Sie die Breite zusätzlich als Attribut an der Tabelle an, damit Outlook sie beachtet. Senden Sie abschließend Tests an mehrere Clients und prüfen Sie die Darstellung am Handy.
Warum nutzen HTML Nachrichten weiterhin Tabellen für das Layout?
Das klassische Outlook für den Desktop zeigt HTML mit der Word Engine an. Laut der archivierten Microsoft Dokumentation unterstützt sie die Eigenschaften float, position, Hintergrundbild und Maximalbreite nicht, Tabellen dagegen voll. Ein Layout aus verschachtelten Tabellenzellen ist deshalb der sicherste Weg zu einer einheitlichen Darstellung in vielen E-Mail Clients.
Was tun, wenn der Dark Mode meinen Newsletter zerstört?
Exportieren Sie das Logo mit transparentem Hintergrund und prüfen Sie, ob es auf hellem und dunklem Grund lesbar bleibt. Wählen Sie weichere Töne statt reinem Schwarz und reinem Weiß und setzen Sie keinen Text in Bilder. Clients behandeln den Dark Mode unterschiedlich, also schauen Sie sich vor dem Versand beide Vorschauen an.
Brauche ich in jeder E-Mail einen Preheader?
Ja, ein Preheader gehört zur guten Praxis. Ohne ihn zeigt der Client womöglich den ersten gefundenen Text, etwa einen Link zur Browseransicht. Behandeln Sie den Preheader wie die zweite Hälfte der Betreffzeile und nennen Sie den konkreten Nutzen. Die sichtbare Länge unterscheidet sich je Client, daher steht die Kernaussage am Anfang.
Brauche ich für einen Newsletter in Deutschland eine Einwilligung?
Nach § 7 Absatz 2 Nummer 2 UWG gilt Werbung per elektronischer Post ohne vorherige ausdrückliche Einwilligung als unzumutbare Belästigung. Absatz 3 nennt eine Ausnahme für eigene ähnliche Waren oder Dienstleistungen mit vier Voraussetzungen. Das ist keine Rechtsberatung. Lesen Sie den Gesetzestext und fragen Sie bei Bedarf eine Anwältin oder einen Anwalt.
Muss jeder Newsletter einen Abmeldelink enthalten?
Das UWG nennt es unzumutbar, wenn keine gültige Adresse für die Aufforderung zur Einstellung solcher Nachrichten vorhanden ist. Außerdem verlangt Google von Massenversendern mit mehr als 5.000 Nachrichten pro Tag an Gmail Konten die Abmeldung mit einem Klick bei Werbenachrichten. Setzen Sie daher in jeden Fußbereich einen sichtbaren Abmeldelink. Das ist keine Rechtsberatung.
  • newsletter gestalten
  • html e-mail
  • e-mail design
  • e-mail marketing
  • preheader
  • dark mode
  • barrierefreiheit
  • newsletter vorlage
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Sprechen wir über Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Das Erstgespräch ist kostenlos, wir hören zu und melden uns mit einer klaren Roadmap.