Eine durchschnittliche Marketing-E-Mail wird von 6,81 % der Empfänger, die sie öffnen, auch angeklickt (MailerLite). Von 100 Lesern, die interessiert genug waren, die E-Mail zu öffnen, scrollen also 93, überfliegen den Inhalt und schließen sie wieder.
Die meisten dieser E-Mails sehen gleich aus: ein Stock-Hero, ein zentrierter „Jetzt shoppen“-Button, ein Footer aus der letzten Kampagne kopiert. Nichts ist kaputt, aber nichts ist einen Klick wert.
Dieser Leitfaden zeigt, wie Ihre E-Mail tatsächlich heraussticht. Wir gehen die E-Mail-Design Best Practices Block für Block durch, vom Hero bis zum Footer — und beginnen mit dem, was im DACH-Raum vor jedem Designdetail steht: dem Umgang mit Daten und Pflichtangaben.
Zuerst Datenschutz: was gutes E-Mail-Design im DACH-Raum voraussetzt
Gutes E-Mail-Design arbeitet mit Daten: dem Vornamen, der Schuhgröße, den zuletzt angesehenen Produkten. Für Leser in Deutschland, Österreich und der Schweiz ist deshalb nicht nur wichtig, wie eine E-Mail aussieht, sondern auch, wo diese Daten verarbeitet werden.
- Personalisierung auf geprüfter Infrastruktur. Merge Tags, Liquid und Produktempfehlungen in Pushwoosh laufen auf einer Plattform, die DSGVO-konform, nach ISO 27001:2022 und SOC 2 Type II zertifiziert ist und Rechenzentren in der EU betreibt.
- Pflichtangaben im Footer. Abmeldelink und Postanschrift gehören in jede Marketing-E-Mail; im DACH-Raum ergänzen Unternehmen den Footer üblicherweise um ihre Impressumsangaben. Ein synchronisierter Footer (Praxis 8) hält diese Angaben in jeder Kampagne identisch.
- Text statt Bild. Viele E-Mail-Programme laden Bilder erst nach Zustimmung des Empfängers. Headline und Button als Live-Text bleiben auch dann lesbar (Praxis 2).
Die Verantwortung für Einwilligung und Pflichtangaben liegt bei Ihrem Unternehmen; Pushwoosh liefert die Bausteine, mit denen Sie diese Angaben einmal sauber anlegen und überall wiederverwenden.
Warum die meisten E-Mails gleich aussehen
Wer eine Galerie mit E-Mail-Design-Inspiration durchscrollt, erkennt bei den besten Beispielen eine Gemeinsamkeit: Jeder Block wurde für genau diese E-Mail gestaltet. Der Großteil des Posteingangs funktioniert umgekehrt, aus 3 Gründen.
- E-Mail-HTML ist schwer zu bauen. E-Mails basieren nach wie vor auf Tabellenlayouts und Inline-Styles, und ein Design, das in Gmail stimmt, kann in Outlook auseinanderfallen. Alles jenseits des Standard-Templates bedeutet also Entwickleraufwand und eine Testrunde. Die meisten Teams nehmen das Standardlayout, tauschen das Logo aus und versenden.
- Stock-Visuals. Das Hero-Bild wird so gewählt, dass es zu jeder Kampagne passt, und passt damit zu keiner. Es ist das Erste, was der Leser sieht, und sagt nichts über das Angebot aus.
- Kein Designsystem. Es gibt keinen zentralen Ort für Markenfarben, Schriften und den Footer, also wird jede Kampagne von Hand gestaltet. Nach ein paar Monaten sehen keine 2 E-Mails mehr gleich aus.
Die Folgen zeigen sich nach dem Öffnen. Die Betreffzeile hat ihre Aufgabe erfüllt, der Leser hat die E-Mail geöffnet. Dann schließt er sie ohne Klick, weil sie aussieht wie jede andere E-Mail im Posteingang und nichts seine Aufmerksamkeit weckt.
Wie sticht Ihre E-Mail tatsächlich heraus?
Die kurze Antwort: besseres Design. Die längere: Optimieren Sie jeden Block der E-Mail so, dass er für den Leser relevant und persönlich wirkt und ihm einen echten Grund gibt, zu klicken und das zu tun, was Sie von ihm erwarten — kaufen, buchen oder in die App zurückkehren.
Und nein, dafür muss kein Entwickler oder Designer für jede E-Mail HTML neu schreiben.
Gehen wir die E-Mail nun Block für Block durch: wie Sie jeden Teil verbessern, um mehr Klicks zu erzielen.
E-Mail-Design Best Practices, Block für Block
Diese E-Mail nehmen wir auseinander: ein Herbst-Sale einer Laufsport-App, 48 Stunden, 25 % auf Trailschuhe, gebaut im Drag-and-Drop-Editor von Pushwoosh.
Die E-Mail besteht aus 5 Blöcken. Das macht jeden davon herausragend, und das ändert sich dadurch für den Leser.
| Block | So sticht er heraus | Wirkung |
|---|---|---|
| Header | Ein kompakter Header auf 1 Markensystem: Brand book mit Derive brand, als synchronisierter Block gespeichert | Sofortiger Wiedererkennungswert, gleiches Erscheinungsbild in jeder E-Mail |
| Hero | Ein Visual rund um das Angebot mit Generate with AI, Headline als Live-Text | Der Leser erfasst das Angebot auf den ersten Blick |
| Text & CTA | Eine Headline für 1 Leser mit Merge Tags und Liquid und 1 gestalteter Live-Text-Button | Relevanz und 1 klarer nächster Schritt |
| Inhalt | Produkt-Grids aus dem Live-Katalog, zielgruppenspezifische Abschnitte mit Anzeigebedingungen, ein Countdown mit dem Timer block | Mehr Produktklicks, das passende Angebot für jeden Leser, Dringlichkeit zum sofortigen Handeln |
| Footer | 1 Footer als synchronisierter Block, geprüft durch Smart check | Pflichtangaben stimmen in jeder E-Mail |
Im Folgenden öffnen wir jeden Block über seine Praktiken, von oben nach unten: warum jede Praxis funktioniert und wie Sie sie in Pushwoosh umsetzen.
Oben in der E-Mail: Header & Hero
#1. Header auf Ihrem Markensystem aufbauen
Warum es funktioniert: Der Header eröffnet jede E-Mail. Wenn Logo, Farben und Schriften jedes Mal gleich aussehen, erkennen Leser den Absender auf einen Blick, und jeder Block darunter übernimmt dasselbe Erscheinungsbild.
Statt: Farben aus der letzten E-Mail kopiert und ein neues Header-Layout für jede Kampagne → besser: 1 Markensystem und ein kompakter Header (Logo plus 2 oder 3 Links), identisch in jeder E-Mail.
In Pushwoosh: Richten Sie das Brand book ein: Logo, Farben, Schriften, Block-Standards und Markenstimme. Von Hand ausfüllen müssen Sie es nicht: Derive brand analysiert Ihre Website, ein Brandbook-PDF oder Ihr Logo und schlägt Farbpalette, Schriften und Tonalität vor. Apply brand book styles gestaltet jedes Template neu, auch ältere, ohne den Inhalt anzutasten.
Bauen Sie anschließend den Header mit Ihrem Logo und einem Menu block und speichern Sie ihn als wiederverwendbaren Block mit aktiviertem Keep copies in sync (Kopien synchron halten). So erscheint ein neuer Menülink sofort in jeder E-Mail. Der Footer funktioniert genauso (siehe Praxis 8).
#2. Den Hero um das Angebot bauen, nicht um ein Stockfoto
Warum es funktioniert: Den Hero sieht der Leser, bevor er entscheidet, ob er weiterscrollt. Zeigt er das Angebot, ist die Botschaft mit 1 Blick klar.
Statt: ein lächelnder Läufer aus der Stock-Bibliothek → besser: die tatsächlich reduzierten Trailschuhe, darüber „25 % auf Trailschuhe. Nur 48 Stunden.“ als Live-Text.
In Pushwoosh: Im Image block erzeugt Generate with AI das Visual aus einem Prompt („Trailrunning-Schuhe auf einem nassen Waldweg, warmes Herbstlicht“) im Bannerformat 16:9. Setzen Sie es als Hintergrund eines Card block ein, dann bleiben Headline und Button Live-Text: Sie sind auch bei blockierten Bildern sichtbar, und Screenreader können sie vorlesen.
Der Hauptteil: Text, CTA und Inhalt
#3. Eine personalisierte Headline für jeden Empfänger
Warum es funktioniert: Eine Headline, die etwas nennt, das der Leser wiedererkennt (seinen Namen, seine Größe, die zuletzt besuchte Kategorie), liest sich wie eine Nachricht an ihn persönlich, nicht wie eine Massenaussendung.
Statt: „Entdecken Sie unsere Herbstkollektion“ → besser: „Anna, Ihre Trail-Größe ist wieder verfügbar.“
In Pushwoosh: Fügen Sie den Namen als Merge Tag über die Heading-Toolbar ein und legen Sie einen Standardwert wie „Laufbegeisterte“ für Leser ohne hinterlegten Namen fest. Für eine andere Zeile je nach Sprache oder Land — etwa getrennte Varianten für Deutschland, Österreich und die Schweiz — nutzen Sie Liquid-Templates.
#4. Jeder E-Mail 1 CTA geben, der klar heraussticht
Warum es funktioniert: Jeder zusätzliche Button teilt die Aufmerksamkeit. 1 primärer CTA in einer Kontrastfarbe zeigt dem Leser, was als Nächstes zu tun ist, und auf dem Smartphone braucht er laut Apples Human Interface Guidelines eine Tippfläche von mindestens 44×44 pt.
Statt: 3 gleichwertige Buttons („Jetzt shoppen“, „Mehr erfahren“, „Alle ansehen“) oder ein Button, der ins Bild eingebrannt ist → besser: 1 Live-Text-Button, „Meine Größe finden“, in Ihrer Akzentfarbe.
In Pushwoosh: Gestalten Sie den Button block mit einfarbigem oder Verlaufshintergrund, Eckenradius und Innenabstand, und legen Sie einen größeren Innenabstand für Mobilgeräte fest, damit der Button daumengroß bleibt.
#5. Produkt-Grids mit Live-Daten befüllen
Warum es funktioniert: Ausverkaufte Artikel und veraltete Preise kosten Klicks und Vertrauen.
Statt: 6 Schuhe, am Montag ins Template kopiert, von denen am Donnerstag 2 ausverkauft sind → besser: ein Grid mit Trailschuhen auf Basis dessen, was sich der jeweilige Leser angesehen hat, direkt aus dem Live-Katalog.
In Pushwoosh: Der Products block befüllt Artikel nach Katalogregel, aus dem abgebrochenen Warenkorb des Empfängers oder mit einer Empfehlungsstrategie wie Bestseller, wieder verfügbar oder auf Basis angesehener Produkte. Ihr Product catalog-Feed wird stündlich synchronisiert, sodass Preise und Bestände aktuell bleiben, ohne dass jemand die E-Mail bearbeitet.
Für Medien- und Content-Apps leistet der News block dasselbe mit Artikeln aus Ihren Feeds, inklusive KI-generierter Teaser unter jeder Überschrift.
#6. Jeder Zielgruppe einen eigenen Abschnitt geben
Warum es funktioniert: Ein treues Mitglied und ein Kunde, der seit 3 Monaten nicht bestellt hat, brauchen unterschiedliche Gründe zum Klicken.
Statt: dieselbe „Neue Kollektion“-Botschaft für alle → besser: 1 Abschnitt mit 3 Varianten: Early Access für Mitglieder des Treueprogramms, 25 % Rabatt für alle, die seit 90+ Tagen inaktiv sind, und Neuheiten für alle anderen.
In Pushwoosh: Versehen Sie jede Variante mit einer Anzeigebedingung auf Basis von Tags oder einem Liquid-Ausdruck und verketten Sie sie mit IF / ELSE IF / ELSE. 1 Kampagne zu bauen und zu testen, 3 verschiedene E-Mails im Posteingang.
#7. Dringlichkeit mit einem Countdown konkret machen
Warum es funktioniert: „Bald“ ist abstrakt. Eine sichtbare Frist macht aus „vielleicht später“ eine Entscheidung, die der Leser jetzt treffen muss.
Statt: „Sale endet bald!“ in Betreff, Headline und Button → besser: ein Countdown bis zum tatsächlichen Ende des 48-Stunden-Sales, direkt neben dem CTA platziert.
In Pushwoosh: Fügen Sie den Timer block ein, legen Sie Enddatum, Uhrzeit und Zeitzone fest (für DACH-Kampagnen in der Regel MEZ/MESZ) und gestalten Sie die Ziffern in Ihren Markenfarben. Dasselbe Muster eignet sich für Black Friday und Cyber Monday im November. Sie haben ein Angebot, das im Geschäft eingelöst wird? Der Barcode block erzeugt für jeden Empfänger einen scanbaren Code.
Unten in der E-Mail: der Footer
#8. Den Footer einmal bauen und überall synchron halten
Warum es funktioniert: Der Footer enthält den Abmeldelink, die Postanschrift und rechtliche Hinweise, im DACH-Raum meist auch die Impressumsangaben. Er muss in jeder E-Mail stimmen.
Statt: ein Footer, der von Kampagne zu Kampagne kopiert wird, bis es 2 Versionen der Rechtstexte gibt → besser: 1 Footer, an 1 Stelle gepflegt.
In Pushwoosh: Bauen Sie 1 Footer in Ihren Markenstilen mit Abmeldelink, Postanschrift, Impressumsangaben und Social-Media-Links und speichern Sie ihn als wiederverwendbaren Block mit aktiviertem Keep copies in sync. Ändern Sie die Adresse einmal, und jede E-Mail mit diesem Footer wird aktualisiert, auch bereits geplante Versendungen.
Tipp: Smart check markiert Marketing-E-Mails ohne Postanschrift im Footer und warnt Sie, wenn eine E-Mail die Kürzungsgrenze von Gmail bei ~102 KB überschreitet — dort wird der Footer als Erstes abgeschnitten.
E-Mail-Design mit KI-Tools beschleunigen
Eine herausragende E-Mail muss keine Woche dauern. Diese KI-Tools (Hinweis: verfügbar für alle Pushwoosh-Nutzer) verkürzen die Produktionszeit und helfen, das Design zu verbessern.
KI-Assistent
Beschreiben Sie die E-Mail im AI tab, und der Assistent stellt eine vollständige E-Mail für Sie zusammen.
KI-Bilder und Alt-Texte
Generate with AI erzeugt ein Visual aus einem Text-Prompt, direkt im Image block. Generate alt with AI schreibt den Alt-Text auf Basis des Bildes selbst — ein Beitrag zur Barrierefreiheit Ihrer E-Mails.
KI-Betreffzeilen und Preheader
Sobald der Inhalt steht, entwirft 1 Klick eine Betreffzeile und einen Preheader auf Basis dessen, was tatsächlich in der E-Mail steht.
Automatische Übersetzung
Fehlende Sprachversionen ergänzt die KI, statt dass Sie jede Sprache von Hand eingeben — praktisch, wenn Sie neben Deutsch auch Französisch und Italienisch für die Schweiz ausspielen.
Brand book & synchronisierte Blöcke
Stile, Header und Footer aus den Praktiken 1 und 8 sorgen dafür, dass niemand die Grundlagen für eine neue Kampagne neu aufbauen muss.
Ihre 1. herausragende E-Mail bauen
-
Mit einem Template oder einem Prompt starten.
Ein Layout aus der Bibliothek der E-Mail-Templates oder ein erster Entwurf vom KI-Assistenten.
-
Ihr Brand book anwenden.
Markenstile und ein synchronisierter Header: Praxis 1. Legen Sie dabei auch den synchronisierten Footer mit Abmeldelink, Postanschrift und Impressumsangaben an: Praxis 8.
-
Die E-Mail von oben nach unten durchgehen.
Hero, Headline, CTA, Produkte, Zielgruppenabschnitte, Countdown, Footer.
-
Die mobile Version gestalten.
Lassen Sie das Desktop-Layout nicht einfach auf das Smartphone schrumpfen. Wechseln Sie in die mobile Ansicht, die in echter Smartphone-Breite vollständig bearbeitbar ist, und wählen Sie für jede Columns-Zeile Stack, Keep row oder Reverse. Legen Sie mobile Schriftgrößen, Innenabstände und Bildformate fest, und nutzen Sie Hide on mobile oder Hide on desktop für Blöcke, die nur auf 1 Bildschirm sinnvoll sind. Das ist responsives E-Mail-Design, ohne eine einzige Media Query zu schreiben.
-
Testen.
Führen Sie Smart check aus und senden Sie anschließend eine Test-E-Mail an bis zu 50 Adressen.
-
Versenden und die Click map auswerten.
Der Click map tab legt eine Heatmap über die E-Mail-Vorschau. So sehen Sie, welche Elemente Klicks erzielt haben und ob der neue Hero seine Aufgabe erfüllt hat.
