Bewährte Verfahren für das E-Mail-Design: Der vollständige Leitfaden (2026)

Wenn E-Mail-Marketingfachleute von visuell ansprechenden E-Mail-Kampagnen sprechen, meinen sie damit unterschiedliche Dinge. Einige konzentrieren sich auf die Struktur der E-Mail, andere auf visuelle Inhalte und animierte GIFs. Man hört auch oft, dass das beste E-Mail-Design eines ist, das bei allen E-Mail-Kunden und auf allen Geräten perfekt angezeigt wird und Konversions fördert. Aufgrund dieser Vielfalt an Faktoren fragen sich beginnende E-Mail-Marketingfachleute oft, was beim E-Mail-Design wirklich wichtig ist.

In diesem Artikel gehen wir auf bewährte Verfahren für das E-Mail-Design ein und besprechen Vorschläge für Betreffzeilen, Handlungsaufforderungen (Call-to-Action-Buttons,CTA), mobile Reaktionsfähigkeit (Responsivität), websichere Schriftarten und andere effektive Kampagnentechniken, um Ihre E-Mails attraktiver zu gestalten und die Konversionsrate zu steigern.

Wichtige Erkenntnisse

1. E-Mail-Design geht über das bloße Erstellen attraktiver E-Mails hinaus und wirkt sich auf den gesamten Kommunikationsprozess aus: ob die E-Mail die gewünschte Person erreicht, geöffnet wird und zur gewünschten Aktion führt.
2. Die Betreffzeile und der Vortext (Preheader) entscheiden darüber, ob der Empfänger die E-Mail öffnet und Ihr Angebot sieht.
3. Die Verwendung einer einzigen primären Handlungsaufforderung (Call-to-Action) in einer E-Mail ermöglicht es den Lesenden, sich auf eine einzige Konversion-Aktion zu konzentrieren.
4. Eine Master-Vorlage und eine Bibliothek mit modularen Blöcken bilden die Grundlage für Markenkonsistenz, verkürzen die Entwicklungszeit von E-Mails und verhindern Abweichungen vom einheitlichen Stil.
5. Ein mobil-freundliches E-Mail-Design ist unerlässlich. Es sorgt für höhere Klickraten und ein besseres Abonnentenerlebnis, da mittlerweile mehr als die Hälfte aller E-Mails auf Smartphones geöffnet wird.
6. Personalisierung im E-Mail-Marketing sollte über eine bloße Namensnennung hinausgehen und verhaltensbasierte kundenspezidische Zuordnung (Segmentierung) sowie dynamische Inhaltsblöcke umfassen.
7. Die Einhaltung der Standards für Barrierefreiheit wie die WCAG-AA-Kontrastverhältnisse, den beschreibenden Alternativtext und eine logische Überschriftenstruktur kommt allen Empfangenden zugute, nicht nur denen, die unterstützende Technologien nutzen.

Was ist E-Mail-Design und warum ist es wichtig

E-Mail-Design ist die Kunst, Text, Bilder und interaktive Elemente innerhalb einer E-Mail so anzuordnen, dass Abonnent:innen sie auf jedem Gerät und in jedem Posteingang lesen, überfliegen und darauf reagieren können. Es umfasst Layout, Typografie, Farbe, Bildmaterial, Platzierung von Call-to-Action-Buttons, Barrierefreiheit und Darstellung bei verschiedenen E-Mail-Anbietern.

Die Wirtschaftlichkeitsanalyse in Zahlen

E-Mailing steht weiterhin an der Spitze der Marketing-Ergebniss für die Kapitalrendite (Return of investment, ROI). Laut dem ROI-Benchmark 2026 von Omnisend erzielt E-Mail-Marketing branchenübergreifend einen Ertrag von 36 $ - 42 $ pro ausgegebenem US-Dollar. Dabei werden die höchsten Renditen im Einzelhandel und im Onlinehandel erzielt. Der von Validity im Juni 2025 veröffentlichte Bericht State of Email 2025, von Litmus ergänzt diesen um den Budgetaspekt: Unternehmen, die mehr als 15 % ihres Marketingbudgets für E-Mails aufwenden, erreichen mit doppelt so hoher Wahrscheinlichkeit E-Mail-Öffnungsraten von über 40 % als der durchschnittliche Unternehmensaccounts.

Weitere Zahlen, die Sie bei der Planung Ihrer E-Mail-Kampagne kennen sollten:

• die globale mittlere Öffnungsrate aller Branchen erreichte 2025 43,46 %, gegenüber 42,35 % im Jahr 2024. Die mittlere Klickrate liegt bei 2,09 % und die Klick-Öffnungs-Rate bei 6,81 %. Die Mail Privacy Protection von Apple überhöht die Öffnungszahlen. Daher sollten Sie die Öffnungszahlen bei der Messung des tatsächlichen Engagements mit den Klick- und Konversionsdaten kombinieren;
• im Onlinehandel sind 93 % der Bestellungen direkt auf Kampagnen-Sendungen zurückzuführen und nicht auf automatisierte E-Mail-Versendungen. Automatisierte E-Mails erreichen trotz allem noch eine durchschnittliche Öffnungsrate von 47,82 % und eine Klickrate von 16,88 %. Dies macht die Marketing-Automatisierung neben Kampagnen-Sendungen zu einem starken Werbe-Kanal;
• auf mobile Endgeräte spezialisierte Designs erzielen bis zu 15 % höhere Klickraten als nicht optimierte Vorlagen. Da mittlerweile 55 % der E-Mails auf Mobilgeräten geöffnet werden, hat sich dieses flexible (responsive) Design von einem Wettbewerbsvorteil zu einer Grundvoraussetzung in E-Mails gewandelt;
• dynamische E-Mail-Inhalte können den Umsatz um bis zu 22 % steigern. Zielgerichtete E-Mails im Onlinehandel weisen eine um 267,21 % höhere Klickrate auf als nicht zielgerichtete Kampagnen;
• personalisierte E-Mails erzielen 6 x höhere Transaktionsraten. Marken, die über eine herausragende Personalisierung verfügen, generieren 17 % mehr Umsatz aus ihren E-Mails als klassische Marketingfachleute.

Wie sich das E-Mail-Design vom Web-Design unterscheidet

Webdesigner stützen sich auf moderne Browser, JavaScript und CSS Grid (Gestaltungsraster). E-Mail-Designer arbeiten mit E-Mail-Diensten, von denen die meisten nach wie vor JavaScript entfernen, ein modernes CSS ignorieren und identische Zeichen (Code) in Gmail, Outlook und Apple Mail unterschiedlich darstellen.

Vielleicht ist das der Grund, warum sich das Design von E-Mail-Vorlagen langsamer entwickelt hat, obwohl eine Vielzahl von E-Mail-Erstellungstools gbt und ständig neue Elemente testen kann. Das ist auch der Hauptgrund, warum alle Design-Innovationen, die auf der Website einer Marke angewendet werden, nicht sofort in E-Mails umgesetzt werden können.

Was dieser Leitfaden behandelt

In diesem Leitfaden stellen wir 17 Abschnitte vor, die so strukturiert sind, dass Sie sie von oben nach unten lesen können, um sich ein umfassendes Bild zu machen. Sie können auch direkt zu dem Teil des Leitfadens springen, den Sie benötigen. Jeder Abschnitt vermittelt Ihnen bewährte Praktiken des E-Mail-Designs, die Gründe dafür und Beispiele, wie sie in der Praxis umgesetzt werden können.

Grundlagen des E-Mail-Designs: Layout und visuelle Hierarchie

Bevor Sie Schriftarten oder Farben auswählen, treffen Sie zwei Entscheidungen: wie die E-Mail aufgebaut sein soll, und wie sich der Blick durch sie bewegen soll. Beides entscheidet darüber, ob die E-Mail-Empfänger:innen, über das erste Überfliegen der E-Mail hinaus, weiterlesen.

Die drei Layout-Muster, und wann Sie sie jeweils verwenden sollten

Je nach den Besonderheiten des E-Mail-Layouts gibt es drei Arten:

1. Das Einspaltige Layout ist der Standard für die meisten Marketing-E-Mails. Funktioniert auf den meisten Mobilgeräten ohne Anpassungen und wird bei allen Anbietern gleich dargestellt. Verwenden Sie es für Newsletter, Willkommensserien, Werbe-E-Mails und die meisten Transaktions-E-Mails.
2. Das Hybrid-Layout (einspaltig auf Mobilgeräten, mehrspaltig auf dem Desktop) basiert auf programmierten Medienabfragen, die die Darstellung eines Dokuments an die verschiedenen Ausgabemedien anpasst. Spalten oder thematische Umbrüche werden flexibel (responsiv) eingeklappt. Verwenden Sie es, wenn Sie nebeneinander angeordnete Vergleiche (Produktmerkmale, Tarifstufen) zeigen wollen, die auf kleinen Bildschirmen lesbar sein müssen.
3. Das Modulare Layout besteht aus einer Reihe unabhängiger Inhaltsblöcke, die Sie bei jedem Versand neu anordnen können. Verwenden Sie es für E-Mails im Newsletter-Stil, bei denen Sie unterschiedliche Inhalte an verschiedene Positionen setzen möchten.

Gestaltung des Leseflusses: F-Muster, Z-Muster, umgekehrtes Dreieck

Durch die Gestaltung des Leseflusses richtet sich Ihr Layout am natürlichen Blickbewegungsmuster aus, um die Aufmerksamkeit der Leser:innen zu lenken.

Studien zur Analyse der Blickbewegungen zeigen durchweg drei Lesemuster:

1. F-Muster: Horizontaler Blick über den oberen Bereich, dann ein kürzerer Blick einige Zeilen tiefer, anschließend ein vertikaler Blick nach links unten. Verwenden Sie dieses Muster für textlastige Newsletter, die die Leser:innen überfliegen werden.
   
   

   
   (Quelle: Email Love)

2. Z-Muster: Diagonaler Blick von links oben nach rechts oben, dann nach unten links und schließlich quer nach rechts unten. Verwenden Sie dieses Muster für kurze Werbe-E-Mails mit einem großen Banner-Bild, einem unterstützenden Block und einem CTA.
   
   

   
   (Quelle: Email Love)

3. Umgekehrtes Dreieck: Breiter, aufmerksamkeitsstarker oberer Bereich (Überschrift, Banner-Bild), sich verjüngender mittlerer Bereich (Text mit Vorteilen), einzelner Fokuspunkt unten Mitte (CTA). Verwenden Sie dieses Muster, wenn Sie möchten, dass alles auf einen einzigen Klick hinführt.
   
   

   
   (Quelle: Email Love)

Wählen Sie immer erst das Muster, bevor Sie die visuellen Elemente auswählen. Layoutentscheidungen, die erst im Nachinein mit einer Designidee kombiniert werden, halten einem Test mit zwei Varianten (A/B-Tests) selten stand.

Weißraum ist ein Gestaltungsmittel, kein Leerraum

Überfüllte E-Mails wirken billig, während großzügige Abstände hochwertig wirken. Der weiße Raum erfüllt gleichzeitig drei Aufgaben: Er trennt die Elemente, damit das Auge zur Ruhe kommen kann, signalisiert durch den Abstand bestimmte Hierarchien und bietet Platz für Touch-Schaltflächen auf Mobilgeräten.

Eine Anfangs-Empfehlung für den weißen Raum lautet 20-30 px zwischen den Inhaltsblöcken, 12-16 px zwischen den Absätzen und mindestens 24 px rundum die Schaltflächen.

Kognitive Belastung: Wie Sie diese in jeder E-Mail reduzieren können

Jedes zusätzliche Element kostet den Leser einen Bruchteil einer Sekunde. Drei Strategien halten die kognitive Belastung gering:

• eine Aufgabe pro E-Mail. Bewerben Sie nur eine Sache. Empfehlen Sie nur eine Aktion. Wenn Sie fünf Dinge bewerben möchten, versenden Sie fünf E-Mails;
• vorhersehbare Struktur. Verwenden Sie für denselben E-Mail-Typ jedes Mal das gleiche Layout, damit Abonnent:innen den Lesefluss nicht bei jeder E-Mail neu justieren müssen;
• visuelle Gruppierung. Kombinieren Sie verwandte Informationen mit gemeinsamen Hintergründen, Rahmen oder Abständen. Lassen Sie die Lesenden die Kombination nicht selbst vornehmen.

Gestaltung der E-Mail-Kopfzeile (Header)

Eine professionelle E-Mail-Kopfzeile erfüllt zwei Aufgaben: Sie identifiziert den Absender und bietet Abonnent:innen die Möglichkeit, zur vollständigen Website oder zur Browser-Version der E-Mail zu wechseln. Halten Sie den Header optisch übersichtlich und minimalistisch, damit sie nicht den Platz für den direkt sichtbaren Bereich (Hero-Bereich) am Anfang der E-Mail überlagert.

Gestalten Sie Ihre Kopfzeile so:

• firmenname und Logo: Helfen Sie Abonnent:innen, das Unternehmen auf einen Blick zu erkennen und Ihre Sendungen von denen der Konkurrenz zu unterscheiden;
• navigationsmenü: Verlinken Sie zu den Hauptbereichen Ihrer Website, aktuellen Angeboten oder einer Filialsuche. Beschränken Sie sich auf drei bis fünf Einträge, damit das Layout nicht überladen wirkt;
• link „Im Browser anzeigen“: Nicht jeder E-Mail-Anbieter rendert interaktive Elemente oder GIFs korrekt. Bieten Sie Abonnent:innen daher die Möglichkeit, sich mit einer direkten Verknüpfung (Link) die Vollversion online anzuschauen;
• abmeldelink: Befindet sich normalerweise in der Fußzeile, wird aber von einigen Marken auch in der Kopfzeile platziert. Beide Platzierungen sind geeignet, solange der Link gut sichtbar und mit einem Klick erreichbar ist.

(Quelle: E-Mail von Pandora)

Die E-Mail-Fußzeile: Struktur und Compliance

Die E-Mail-Fußzeile (Footer) ist der Abschluss Ihrer E-Mail. Sie bietet trotzdem eine gute Gelegenheit, Ihre Abonnent:innen anzusprechen und Ihre Marke zu stärken. Nutzen Sie den Footer für Social-Media-Buttons (Icons), Links zu Ihren wichtigsten Seiten, Kontaktdaten und den Abmeldelink.

Um die CAN-SPAM-Vorschriften der USA und die DSGVO der EU einzuhalten, muss Ihre Fußzeile Folgendes enthalten:

• einen Abmeldelink oder eine Schaltfläche, die mit einem Klick funktioniert;
• einen Grund, warum der Empfänger Ihre E-Mail erhalten hat (zum Beispiel: „Sie haben sich bei example.com angemeldet“);
• eine physische Adresse des versendenden Unternehmens.

(Quelle: E-Mail von Stripo)

Betreffzeile und anschließender kurzer Text (Preheader): Die erste Designentscheidung

In den meisten Veröffentlichungen werden Betreffzeilen als Teil der Texte behandelt. Sie sind jedoch auch eine Designentscheidung. Denn sie entscheiden darüber, ob der restliche Teil Ihres E-Mail-Marketing-Designs überhaupt angesehen wird. Studien zeigen, dass 47 % der E-Mail-Empfänger:innen allein anhand der Betreffzeile entscheiden, ob sie eine E-Mail öffnen oder nicht. Darüber hinaus verschieben 69 % der Empfänger:innen E-Mails mit Verkaufsangeboten direkt in den Spam-Ordner, wenn die Betreffzeilen kommerziell wirken.

Zeichenbegrenzung nach E-Mail-Anbieter (Gmail, Apple Mail, Outlook)

Beachten Sie, dass die Länge der Betreffzeile nicht nur eine Frage der Ästhetik ist. Der Umfang ist ist ein entscheidender Faktor dafür, ob die Empfänger:innen an Ihrer E-Mail interessiert sind und sie öffnen. Die Länge der im E-Mail-Programm angezeigten Betreffzeilen variiert leicht je nach E-Mail-Anbieter.

 

Gestalten Sie die Betreffzeile immer für den kürzesten Sichtbereich (Gmail mobil, ~30-40 Zeichen) und lassen Sie bei Anbietern mit größeren Sichtbereichen mehr anzeigen. Die erfolgreichsten Betreffzeilen haben durchschnittlich 43,85 Zeichen.

Formeln für Betreffzeilen, die Öffnungsraten steigern

Es gibt unzählige Formeln für das Verfassen von Betreffzeilen und Überschriften. Nur durch Tests lässt sich herausfinden, welches Design für Ihr Unternehmen und Ihre Zielgruppe am effektivsten sind.

Hier sind fünf der am häufigsten verwendeten Ansätze, die generische Formulierungen durchweg übertreffen:

1. Neugierde wecken: „Was wir aus dem Versand von 1,8 Millionen E-Mails im 4. Quartal gelernt haben“.
2. Konkreter Nutzen: „Reduzieren Sie Ihre E-Mail-Erstellungszeit um das 3,7-Fache“.
3. Frage: „Stört die Darstellung Ihres Dunkelmodus in Outlook?“
4. Zahlenorientiert: „12 Beispiele für ein E-Mail-Design, die es wert sind, kopiert zu werden“.
5. Persönlich: „{Vorname}, Ihr Monatsbericht ist fertig“.

Den Vortext als zweite Betreffzeile gestalten

Ein aufmerksamkeitserregender Vortext (Preheader) ist der entscheidende Faktor zwischen einer geöffneten und einer ignorierten E-Mail. Preheader sind in der Regel eine Fortsetzung der Betreffzeilen. Sie bieten eine weitere Chance, die Neugier Ihrer Zielgruppe zu wecken oder ein Gefühl auszulösen. Warum? Individuell gestaltete Vortexte steigern die Öffnungsrate Ihrer E-Mail auf 44,67 % verglichen mit 39,28 % ohne Preheader.

Ein paar Regeln:

• wiederholen Sie auf keinen Fall die Betreffzeile. Nutzen Sie den Preheader dazu, um Details hinzuzufügen, nicht, um etwas zu duplizieren;
  
  
• lassen Sie den Preheader nicht standardmäßig gleich die erste Zeile der E-Mail anzeigen („Im Browser anzeigen… “);
• verwenden Sie einen versteckten Preheader, wenn Sie möchten, dass Ihre Abonnent:innen im Posteingang das eine sehen und in der geöffneten E-Mail aber etwas anderes lesen können.
  
  

Dynamische Betreffzeilen: Personalisierung in großem Maßstab

Statische Betreffzeilen behandeln jeden Abonnenten gleich. Dynamische Betreffzeilen tauschen flexibel Variablen aus basierend auf kundenspezifischen Segmentdaten, Verhalten oder Standort.

Drei gut funktionierende Beispiele:

• geografisch personalisiert: „Kostenlose Lieferung am selben Tag in {Stadt}“;
• verhaltensbasiert: „Sie haben {Produkt} in Ihrem Warenkorb liegen lassen“;
• lebenszyklus: „{Vorname}, das erste Jahr mit {Marke} geht auf unsere Rechnung“.

„Zuerst-Mobil”-E-Mail-Design

55 % aller E-Mails werden mittlerweile auf Mobilgeräten geöffnet, so dass ein flexibles Design keine nette Zugabe, sondern eine Grundvoraussetzung ist.

Warum immer „Zuerst Mobil“ statt nur „Mobilfreundlich“

„Mobilfreundlich” bedeutet, dass Sie Ihre Kampagne für den Desktop entworfen haben und sichergestellt haben, dass das Design auf Mobilgeräten nicht kaputtgeht.

Ein E-Mail-Design nach dem Motto:„Zuerst Mobil“ bedeutet, dass Sie zuerst für den mobilen Bildschirm entwerfen und die Desktop-Version davon ableiten.

Der Unterschied zeigt sich an drei Stellen:

• hierarchie: „Zuerst Mobil“-E-Mails beginnen mit dem wichtigsten Block ganz oben, da es keine Seitenleiste gibt, auf die man sich stützen kann;
• fingertipp-Punkte: Schaltflächen sind von Anfang an für Finger dimensioniert (mindestens 44 × 44 px). Es wird nicht einfach nur der Schaltflächen-Effekt (Hover) des Desktops verkleinert;
• wortanzahl: Zuerst Mobil-E-Mails sind kürzer, da das Lesen von 500 Wörtern auf einem Smartphone eine hohe Belastung darstellt.

(Quelle: E-Mail von Gucci)

Selbst wenn Sie das flexible Design dem Ansatz „Zuerst Mobile”-Ansatz vorziehen, sollten Sie diese bewährten Methoden befolgen:

• verwenden Sie zur Optimierung ein einspaltiges Layout. Mehrspaltige Layouts sind für mobile Geräte nicht die beste Wahl;
• verwenden Sie größere Schriftarten. Der Text sollte ohne zu Vergrößern lesbar und gut erkennbar sein;
• entfernen Sie aus der mobilen Version einige Designelemente, um Platz zu schaffen und Unübersichtlichkeit zu vermeiden.

Einspaltig vs. mehrspaltig: Regeln für jede Möglichkeit, das Layout zu ändern (Breakpoint)

Das Entwerfen flexibler E-Mails erfordert die Anpassung Ihres Layouts an bestimmte Breakpoints (Automatische Einklappstellen), um eine optimale Lesbarkeit zu gewährleisten. Die goldene Regel lautet: Mehrspaltige Layouts funktionieren gut auf breiten Bildschirmen, müssen sich jedoch auf schmalen Bildschirmen zu einer einzigen, mobilfreundlichen Spalte stapeln lassen, um ein unnatürliches Zoomen und ein horizontales Scrollen zu vermeiden.

Hier sind drei Hauptgruppen für E-Mail-Layoutgrößen:

• weniger mals 480 px (die meisten Smartphones): Eine einzige Spalte, Bilder in voller Breite, gestapelte CTAs. Einspaltige-Layouts schneiden auf Mobilgeräten durchweg besser ab als mehrspaltige Layouts. Sie verhindern ein horizontales Scrollen und das Vergrößern mittels einer Geste (Pinch), welches die Konversionsrate beeinträchtigen würde;
• 481-768 px (große Smartphones, kleine Tablets): Eine einzige Spalte ist weiterhin die beste Wahl. Erhöhen Sie die Schriftgröße auf mindestens 16 px;
• 769 px und mehr (Tablets, Desktop): Zweispaltige Layouts eignen sich nur für Produktraster, Funktionsvergleiche und Inhaltsmodule, bei denen das nebeneinanderliegende vergleichende Lesen einen Mehrwert bietet.

Größe der Touch-Zielflächen und tippfreundliche CTAs

Das HIG von Apple empfiehlt eine Mindestgröße für Touch-Zielflächen von 44 × 44 px.  Die Material-Richtlinien von Google geben 48 × 48 dp an. Nehmen Sie jeweils den größeren der beiden Werte und fügen Sie einen Rand hinzu. Außerdem sollte jeder Button auf jeder Seite mindestens 8-12 px Abstand zum nächsten Block haben, damit Abonnenten ihn nicht versehentlich antippen.

Und noch eine Regel für mobile Geräte: Vergrößern Sie den Call-to-Action-Button auf die gesamte Länge des mobilen Bildschirms, damit er leichter anzutippen ist.

Vergleichen wir nun das E-Mail-Design für Desktops:

(Quelle: E-Mail von Ryanair)

Hier ist dieselbe E-Mail-Vorlage auf dem Mobilgerät zu sehen:

(Quelle: E-Mail von Ryanair)

Geräteübergreifendes Testen: Tools und Workflow

Ein grundlegender Arbeitsablauf-Test umfasst Apple Mail iOS (hell + dunkel), Gmail Android (hell + dunkel), Gmail Web (Chrome + Firefox), Outlook Desktop (Windows) und Outlook Web. Erstellen Sie diesen Arbeitsablauf als Ihre Mindest-Reichweiten-Matrix.

Hier ist das Ergebnis, bei dem Sie sofort sehen, wie Ihre E-Mail auf verschiedenen Geräten, bei verschiedenen E-Mail-Anbietern und im Dunkelmodus angezeigt wird.

CTA-Button-Design: Mit Absicht Klicks generieren

Call-to-Action-Buttons (CTAs) kommen nie aus der Mode und gehören zu den bestbewährtesten Methoden beim Entwerfen von E-Mails. CTAs generieren nach wie vor Konversionen. Diese motivieren Ihre Zielgruppe, Ihre Website zu besuchen, oder mehr über Ihre Dienstleistungen erfahren zu wollen.

Wie heben Sie die CTA-Buttons in Ihren E-Mail-Kampagnen hervor?

Schauen wir uns das an:

• verwenden Sie kontrastreiche Farben, um die CTA-Buttons deutlich vom restlichen schriftlichen und visuellen Inhalt abzugrenzen;
• fügen Sie Links ein, um Ihre Abonennt:innen auf bestimmte Webseiten weiterzuleiten;
• passen Sie die Größe des Buttons an, um sicherzustellen, dass der Button sowohl auf dem Desktop- als auch auf Mobilgeräten anklickbar ist.

(Quelle: E-Mail von Baublebar)

CTA mit Text vs. bildbasierte CTA-Buttons: Warum es darauf ankommt.

Reine Bild-CTA-Buttons verschwinden, wenn Abonnent:innen die Anzeige von Bildern blockiert haben. Outlook für Windows blockiert Bilder standardmäßig, und viele Unternehmens-Firewalls filtern Remote-Bilder komplett heraus. Wenn Ihr einziger CTA-button nur in einem PNG-Format vorliegt, sieht ein bedeutender Teil Ihrer Zielgruppe nichts davon, und kann nicht damit interagieren.

CTA-Buttons mit einem lebendigen Text (HTML-Buttons mit CSS-Hintergrundfarben) werden immer dargestellt, sehen im Dunkelmodus gut aus und bleiben klickbar, auch wenn die Bilder nicht geladen werden. Verwenden Sie diese als Standard. Reservieren Sie bildbasierte CTA-Buttons nur für stilisierte Einzelkampagnen, bei denen das Bild die Botschaft ist.

Primäre vs. sekundäre CTA-Hierarchie

Jede E-Mail sollte nur eine Aufgabe haben, d. h. einen primären CTA-Button. Wenn Sie eine sekundäre Aktion benötigen („Mehr erfahren“, „Kollektion durchsuchen“), gestalten Sie diese als Textlink oder „Ghost”-Button ohne Extra-Inhalt, damit er sich optisch dem primären CTA-Button unterordnet.

Die Hierarchielogik:

• primärer CTA-Button: Einfarbiger Hintergrund, Markenfarbe, 16-18 px Text, auf Mobilgeräten in voller Breite sichtbar;
• sekundärer CTA-Button: Umrandet oder Nur-Text, kleiner als der Primäre, unten oder seitlich platziert;
• tertiäre Aktionen: Textlinks im Fließtext innerhalb eines Satzes.

Wenn Ihr primärer und sekundärer Button identisch sind, ist keiner von beiden primär.

(Quelle: E-Mail von Stripo)

Button-Text: Die 6-Wörter-Regel

Die besten CTA-Buttons bestehen aus 1-4 Wörtern. Alles, was mehr als 6 Wörter umfasst, ist ein Satz, der vortäuscht, ein Button zu sein.

Vergleich:

• ❌ „Klicken Sie hier, um noch heute Ihre kostenlose Testversion zu erhalten“ (9 Wörter, zu allgemein);
• ✅ „Kostenlose Testversion starten“ (3 Wörter, ein konkretes Verb).

Die Verben vor die Substantive zu setzen, ist besser. Konkretes ist besser als Allgemeines. 

„Laden Sie den Bericht herunter“ ist besser als „Klicken Sie hier“. 

„Aktivieren Sie Ihren Rabatt“ ist besser als „Absenden“.

Platzierung von CTAs: Above the fold und Scrolltiefe

Platzieren Sie Ihren primären CTA-Button auf den Mobilgeräten ganz oben, also innerhalb der ersten 480 px vertikaler Höhe. Wiederholen Sie ihn am Ende langer E-Mails, damit Abonnent:innen, die den gesamten Text lesen, nicht wieder nach oben scrollen müssen.

Positionieren Sie CTA-Buttons auf Mobilgeräten in Bereichen, die mit dem Daumen gut erreichbar sind. Also typischerweise in der mittleren oder unteren Hälfte des Bildschirms.

(Quelle: Stripo-Vorlage)

Personalisierung und dynamische Inhalte im E-Mail-Design

Traditionelle Massen-E-Mails verlieren Quartal für Quartal an Boden. Im Jahr 2025 integrierten 97 % der Werbefachleute mindestens ein interaktives Element in ihre Marketing-E-Mails. 49 % nutzten generative KI zur Erstellung statischer Texte.

Stufen der Personalisierung: vom Namen bis zu verhaltensbasierten Blöcken

Personalisierung ist fließend nicht statisch:

• tokenbasiert: Vorname in der Betreffzeile oder Anrede, das ist das Mindeste;
• segmentbasiert: Unterschiedliche Inhalte für verschiedene Listen und Zielgruppen (Neukunden vs. Bestandskunden, kostenlos vs. kostenpflichtig, geografisch);
• verhaltensbasiert: Flexible Inhalte, die darauf reagieren, was der Abonnent kürzlich getan (oder nicht getan) hat;
• vorhersehbar: Inhalte, die mittels Signalen lernfähiger Programme (machine learning) gesteuert werden (nächstbestes Produkt, Abwanderungsrisiko, Optimierung der Versandzeit).

Die meisten Teams implementieren eine Personalisierung auf den ersten beiden Ebenen. Nur wenige gehen weiter und setzen sie auf allen Ebenen um.

Entwerfen dynamischer Inhaltsblöcke, die sich je nach Kundenspezifikation (Segment) anpassen

Ein dynamischer Inhaltsblock besteht aus drei Teilen: einer Standardversion (für Abonnent:innen ohne personalisierbare Daten), variantenreichen Inhalten und einer Regel, die bestimmt, welche Version angezeigt wird.

Beispiel: Blenden Sie den Block „Willkommen als Neukunde“ für alle aus, die seit mehr als 30 Tagen Kunde sind.

Personalisierte Betreffzeilen, Banner und Produktempfehlungen

Drei Personalisierungselemente, die Ihre Kennzahlen nachhaltig verbessern werden:

• variablen in der Betreffzeile: Name, Stadt, zuletzt angesehenes Produkt;
• auffälliges Banner (Hero): Unterschiedliche Bilder je nach Segment (Herren vs. Damen, Anfänger vs. Fortgeschrittene);
• produktempfehlungen: Werden aus einer Empfehlungs-Maschine abgerufen und beim Öffnen der E-Mail mithilfe von Smart-Elementen aktualisiert.

So erstellen Sie eine personalisierte E-Mail-Vorlage in Stripo

Ein schnelles Rezept für eine kundenspezifische Werbeaktion:

1. Erstellen Sie das Master-Layout mit zwei oder drei Inhaltsblöcken, die für eine Segmentierung markiert werden können.
2. Fügen Sie eine Produktkarte als Smart-Element hinzu, die mit Ihrer Datenquelle verknüpft ist.
3. Legen Sie für jeden Block Anzeigebedingungen fest (z. B. „nur anzeigen, wenn Segment = returning_customer“).
4. Ordnen Sie freie Felder (Merge-Tags) ({first_name}, {city}, {last_product}) in der Betreffzeile und im Textkörper zu.
5. Testen Sie immer vor dem Versand im Vorschaumodus mit Beispiel-Abonnentenprofilen.

Dieser Ansatz ermöglicht es Ihnen, die gesamte E-Mail-Vorlage in einer einzigen Datei zu generieren, anstatt fünf separate Versionen zu erstellen. Dadurch erhalten Sie eine skalierbare kundenspezifische Personalisierung.

Markenkonsistenz über E-Mail-Kampagnen hinweg

Eine konsistente Markenidentität schafft Vertrauen. 78 % de Marketingfachleute können mittlerweile den ROI Ihrer E-Mail-Programme nachverfolgen. Die Marken mit den besten Ergebnissen sind diejenigen, die datengesteuerte, markengerechte Programme durchführen mit denen sie auf individuelle Kundenbedürfnisse eingehen können.

Die Mastervorlage: Die einzige Quelle der Wahrheit für Ihre Marke

Eine Mastervorlage ist eine festgelegte Version Ihrer Markendarstellungn innerhalb einer E-Mail-Datei: Kopf- und Fußzeile, Farb-Markierungen, Schriftgrößen, Schaltflächenstile und Standardabstände. Jede Kampagnen-E-Mail beginnt als Kopie davon.

Die Regel lautet nicht „Verwenden Sie die Mastervorlage“. Die Regel lautet „Bearbeiten Sie die Mastervorlage niemals innerhalb einer Kampagne“. 

Wenn etwas geändert werden muss, ändern Sie es in der Mastervorlage und synchronisieren Sie diese anschließend.

Farbpalette, Typografie und Logo-Regeln für E-Mails

E-Mails sind kein Internetauftritt: die Farben werden anders dargestellt, Schriftarten ändern sich und Logos verändern sich im Dunkelmodus.

Fixieren Sie die folgenden Elemente:

• markenpalette mit 2-3 Farben mit Hex-Werten sowie hellen und dunklen Varianten für jede;
• definierte Schriftgrößen mit internetsicheren Ersatzlösungen (Fallbacks) (mehr dazu im Abschnitt zur Typografie);
• Logo-Darstellung für helle und dunkle Hintergründe: Ein einziges PNG mit transparentem Hintergrund und einem 1-2 px breiten Umriss funktioniert in beiden Modi.

Verwendung des Stripo-Markenrichtlinien-Kits

Stripo bietet den Richtlinien-Baukasten für Ihre Marke für an: ein Programm, das Markenregeln direkt in Ihren E-Mail-Workflow integriert, um die Erstellung und Nutzung von E-Mail-spezifischen Markenrichtlinien zu vereinfachen. Mit diesem Baukasten können Sie eine Rchtlinie zur Darstellung Ihrer Marke auf Basis von E-Mail-Vorlagen erstellen, die direkt in den Stripo-Generator integriert sind. Das System erstellt automatisch einen Markenleitfaden, der alle wesentlichen Elemente enthält und den Sie als PDF exportieren oder im Editor speichern können. Das bedeutet, dass Ihr gesamtes Team jederzeit darauf zugreifen kann, ohne die Plattform verlassen zu müssen.

Kanalübergreifende Konsistenz: E-Mail, Web, Social Media

E-Mail-Design steht nicht für sich alleine. Abonnent:innen, die auf Ihre Landingpage klicken, erwarten dieselben Farben, Schriftarten und denselben Tonfall auch in Ihren E-Mails. Abonnent:innen, die Ihre Instagram-Story sehen, sollten Sie im Posteingang wiedererkennen.

Überprüfen Sie die Konsistenz, indem Sie die drei Elemente nebeneinander anordnen: eine E-Mail mit ausdruckstarkem Banner, eine Landingpage und einen Social-Media-Beitrag. Wenn die visuelle Identität nicht innerhalb von zwei Sekunden übereinstimmt, weist das Markensystem eine Lücke auf.

E-Mail-Vorlagensystem: Aufbau für Skalierbarkeit

Wenn Sie mehr als 4-5 Kampagnen pro Monat versenden, funktioniert ein Ad-hoc-Design nicht mehr. Sie benötigen ein E-Mail-Design-System, das den Designprozess standardisiert und beschleunigt.

Mastervorlagen vs. Bibliotheken mit modularen Blöcken

Um diese Standardisierung zu erreichen, können Sie zwei Ansätze nutzen: Mastervorlagen und eine Bibliothek mit modularen Blöcken, die wiederverwendbare E-Mail-Elemente enthalten.

So können Sie die Anwendungen aufteilen:

• verwenden Sie eine Mastervorlage für Transaktions-E-Mails, Newsletter und alle Massenversendungen mit stabiler Struktur;
• verwenden Sie eine Modulbibliothek für Werbekampagnen, bei denen sich die Struktur ändert, sich aber Komponenten (Banner (Hero), Produktkarte, Empfehlungen, Fußzeile) wiederholen.

Entwerfen wiederverwendbarer Inhaltsblöcke

Wiederverwendbare Inhaltsblöcke sind flexibel (responsiv), individualisiert und können an jeder beliebigen Stelle in einer E-Mail eingesetzt werden. Die Module von Stripo sind beispielsweise gespeicherte, gemeinsam nutzbare, benannte Blöcke, die jedes Teammitglied in jede Vorlage einfügen kann.

Synchronisierbare Module lösen das Problem von Aktualisierungen: Sie müssen ein Modul nur einmal aktualisieren, und alle E-Mail-Vorlagen, in denen es enthalten ist, werden automatisch aktualisiert. Anstatt dieselbe Aktualisierungssequenz viele Male zu wiederholen, führen Sie sie nur einmal durch. So halbieren Sie die Überprüfungszyklen.

Namenskonventionen für Vorlagen und Team-Governance

Eine standardisierte Rollenzuteilung, die jedes Team braucht:

{Kampagnentyp}_{Zielgruppe}_ {Variante}_{Datum}

Beispiele:

• promo_returning-customer_summer-sale-A_2026-05
• newsletter_all-subscribers_weekly_2026-05-12
• transactional_all_password-reset_master

Kombinieren Sie dies mit einem rollenbasierten Zugriff: Designer bearbeiten Module, Marketingfachleute stellen daraus Vorlagen zusammen, Vorgesetzte geben die Freigabe. Stripos Standardisierte Benutzerrollen macht all dies möglich.

Wie Stripos Vorlagenkatalog die Produktion beschleunigt

Über 1.650 vorgefertigte Vorlagen decken die meisten Versandtypen ab: Willkommens-E-Mails, Warenkorb-Erinnerungen, Newsletter, Feiertags-E-Mails, Produkteinführungen und Reaktivierungs-E-Mails. Ausgehend von einer geprüften Vorlage und deren Anpassung lässt sich die Erstellungsszeiteiner E-Mail im Vergleich zur Erstellung von Grund auf um etwa das 3,7-Fache verkürzen.

Typografie in E-Mails: Schriftarten, Schriftgröße und Lesbarkeit

Sie sollten beim Erstellen von E-Mails mit Schriftarten experimentieren. Einige Web-Schriftarten sind heikel, da nicht alle E-Mail-Anbieter sie korrekt anzeigen.

Web-sichere Schriftarten vs. benutzerdefinierte Schriftarten: Kompromisse und Ersatzlösungen (Fallbacks)

Internetsichere Schriftarten (Arial, Tahoma, Verdana, Trebuchet, Georgia, Times New Roman, Helvetica, Courier) werden bei jedem E-Mail-Anbieter korrekt dargestellt. Sie sind nicht aufregend, aber sie funktionieren.

Benutzerdefinierte Schriftarten (Inter, Roboto, Poppins, Open Sans, alles aus Google Fonts) werden in Apple Mail, iOS Mail, Gmail Web und einigen Outlook-Versionen korrekt dargestellt. Bei Outlook Desktop und bei einigen anderen Anbietern wird auf die Standardschriftart zurückgegriffen.

Wählen Sie eine benutzerdefinierte Schriftart für die Hero-Typografie, wenn Sie möchten, aber ordnen Sie sie korrekt an:

Wenn die benutzerdefinierte Schriftart nicht funktioniert, sollte die Ersatz-Schriftart (Fallback) so ähnlich wie möglich aussehen.

Hierarchie der Schriftgrößen: Überschriften, Fließtext, Bildunterschriften

Eine praktikable Schriftgrößenhierarchie für Marketing-E-Mails:

• hero/H1: 28-36 px;
• abschnitt/H2: 22-26 px;
• unterabschnitt/H3: 18-20 px;
• haupttext: mindestens 16 px auf Mobilgeräten (14 px nur für Impressum/Fußzeile);
• bildunterschrift/Kleingedrucktes: 12-13 px.

Ein Haupttext unter 14 px auf Mobilgeräten ist einer der häufigsten Fehler in Verbindung mit der Lesbarkeit. Alles, was kleiner als 14 px ist, zwingt Abonnent:innen zum Zoomen, und die meisten tun das nicht.

Zeilenhöhe, Zeichenabstand und Absatzbreite

Die Optimierung der E-Mail-Typografie ist entscheidend für die Lesbarkeit.

Diese Standards helfen Ihnen dabei, Ihre E-Mails so zu gestalten, dass sich der Text nicht überlappt:

• zeilenhöhe: 1,4-1,6 x der Schriftgröße für den Fließtext. Ein engerer Abstand belastet die Augen, ein größerer Abstand wirkt luftig;
• zeichenabstand: Behalten Sie die Standardeinstellung bei. Es sei denn, Sie gestalten Überschriften in Großbuchstaben (hier reichen +0,5 bis +1 px);
• absatzbreite: 50-75 Zeichen pro Zeile sind im lesbaren Bereich. Auf Mobilgeräten erfolgt dies automatisch. Auf dem Desktop sollten Sie Inhaltsabschnitte auf eine Breite von ~600 px beschränken.

Typografie und Barrierefreiheit: Was Sie vermeiden sollten

Zu den bewährten Methoden für E-Mail-Typografie und Barrierefreiheit gehört folgendes:

• kursivschrift ist ein Barrierefreiheitsproblem, da sie die Lesbarkeit für Empfänger mit Legasthenie und Sehbehinderungen beeinträchtigt;
• beschränken Sie sich auf zwei Schriftfamilien pro E-Mail, drei sind das absolute Maximum;
• text in Großbuchstaben ist schwerer zu lesen als Text mit Groß- und Kleinbuchstaben;
• richten Sie den Fließtext nicht aus; linksbündig liest sich besser, und das vermeidet ungleichmäßige Abstände.

Barrierefreiheit von E-Mails: Design für jeden Abonnenten

Bei barrierefreiem E-Mail-Marketing geht es nicht nur um die Einhaltung gesetzlicher Vorschriften. Es zeigt in erster Linie, dass man sich um die Menschen kümmert. Hier geht es insbesondere um folgenden Personenkreis: Menschen, die Screenreader nutzen, Menschen mit Sehbehinderungen, Menschen, die Inhalte bei schlechten Lichtverhältnissen betrachten und diejenigen, bei denen Bilder deaktiviert sind.

Die WCAG-Checkliste für E-Mail-Designer

Die WCAG-Checkliste für Designer enthält konkrete Schritte, um Ihre HTML-E-Mails intuitiv und kompatibel mit allen gängigen E-Mail-Anbietern zu gestalten.

WCAG 2.2 AA, zusammengefasst für E-Mails:

• kontrast: Mindestens 4,5:1 für Fließtext, 3:1 für großen Text (18 px+) und UI-Komponenten;
• textgrößenanpassung: Der Inhalt bleibt lesbar, auch wenn Abonnent:innen auf 200 % zoomen;
• Alt-Text: Jedes aussagekräftige Bild verfügt über einen beschreibenden Alternativtext, dekorative Bilder verwenden einen leeren Alt-Text (alt=„“);
• semantische Struktur: Verwenden Sie echte Überschriften-Tags (H1, H2, H3) in der richtigen Reihenfolge, keinen formatierten Text;
• tastaturnavigation: Jedes interaktive Element ist ohne Maus erreichbar und bedienbar;
• farbenunabhängigkeit: Verwenden Sie niemals eine Farbe allein, um eine Bedeutung zu vermitteln (fügen Sie Symbole, Beschriftungen oder Text hinzu).

Farbkontrastverhältnisse: Tools und Mindeststandards

WCAG Level AA verlangt ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.

Tools, die das Mindestkontrastverhältnis für Sie prüfen:

• WebAIM Contrast Checker (kostenlos, webbasiert);
• Stark (Figma-Plugin);
• Adobe Color Contrast Analyzer (in Adobe XD integriert).

Prüfen Sie jede Farbkombination in Ihrer Master-Vorlage mit einem dieser Tools, bevor Sie das Design festlegen. Zu geringer Farbkontrast ist der häufigste Verstoß gegen die Barrierefreiheit im Web und betrifft 79,1 % aller Startseiten.

Kompatibilität mit Screenreadern: Semantische Struktur

Screenreader analysieren nur die HTML-Struktur, nicht das visuelle Layout. Das bedeutet:

• verwenden Sie <h1>, <h2> und <h3> für echte Überschriften in der richtigen Reihenfolge. Überspringen Sie niemals Ebenen aus Gründen der Gestaltung;
• verwenden Sie <table role="presentation"> für Layout-Tabellen, damit Screenreader diese als Struktur ignorieren;
• setzen Sie lang="en" (oder Ihre Absendersprache) in den <html>Tag;
• fügen Sie der E-Mail einen aussagekräftigen <title> hinzu, damit Screenreader deren Zweck ankündigen.

Bewährte Methoden für Alt-Text bei Bildern und GIFs

Alt-Text (beschriebende Texte) dient zwei Zielgruppen: assistiver Technologie und Abonnenten, bei denen Bilder blockiert sind.

So sollten Alt-Texte geschrieben werden:

• dekorative Bilder: alt="" (leer, nicht weglassen);
• informative Bilder: Beschreiben Sie, was das Bild vermittelt, nicht wie es aussieht („Frühjahrskollektion: leichte Regenmäntel und wasserdichte Stiefel“, nicht „Foto eines gelben Mantels“);
• CTA-Bilder: Beschreiben Sie die Aktion („Frühjahrskollektion shoppen“);
• GIFs: Beschreiben Sie, was passiert; wenn das GIF nicht geladen wird. Dann sollten der erste Frame und der Alt-Text die Botschaft dennoch vermitteln.

Bilder, GIFs und interaktive Grafiken

Die Verwendung von Bildern, GIFs und interaktiven Grafiken in E-Mails erfordert ebenfalls die Beachtung bestimmter Richtlinien. Damit stellen Sie sicher, dass Ihre E-Mails bei verschiedenen E-Mail-Anbietern ansprechend aussehen, und Ihre Abonnenten die Grafiken sehen können.

Spezifikationen zur Bildgrößenanpassung und -optimierung je nach Gerät

Als Erstes sollten Sie auf die Größe der verwendeten Bilder achten.

Grundlegende Richtlinien für Bildgrößen:

• breite: 600-640 px für den Hauptteil der E-Mail, 1200-1280 px für Retina (verwenden Sie sowohl das width-Attribut als auch CSS);
• dateiformat: JPG für Fotos, PNG für Logos und Grafiken mit Transparenz, GIF für Animationen. WebP nur, wenn Sie sichergestellt haben, dass es beim jeweiligen E-Mail-Anbieter Ihrer Zielgruppe korrekt dargestellt wird;
• dateigröße: Halten Sie die Gesamtgröße der E-Mail unter 100 KB, jedes einzelne Bild unter 50 KB;
• komprimierung: TinyPNG oder Squoosh entfernen Metadaten und komprimieren ohne sichtbaren Qualitätsverlust.

Banner oder Hero-Bilder: Bewährte Methoden Practices für E-Mails

Betrachten Sie die Banner als eine nette Ergänzung Ihrer E-Mail und versuchen Sie nicht, diese zu überdimensionieren. Eine gute Bannerstrategie besteht darin, die Zielgruppe mit markengerechten Bildern, Links oder GIFs anzusprechen, mit denen die Botschaft der E-Mail vermittelt wird.

Der Schlüssel liegt darin, eine Geschichte zu erzählen, anstatt einfach nur verkaufen zu wollen. Übermäßig werbliche Banner können verdächtig wirken. Daher ist es am besten, sich stattdessen auf das Storytelling zu konzentrieren.

Tipps für Banner, die Sie beachten sollten:

• während die meisten Bilder mit einer Standardgröße von 600-700 px auf Desktops verwendet werden, können Sie in E-Mails auch andere Abmessungen ausprobieren. Achten Sie dabei jedoch auf die mobile Responsivität;
• probieren Sie Karussells, Videos und GIFs aus;
• fügen Sie transparente benutzerdefinierte Bilder oder Collagen hinzu, um Ihre E-Mail-Vorlage aufzufrischen.

(Quelle: E-Mail von Chanel)

GIF-Regeln: Ladezeit, Blinkbeschränkungen, Fallback für das erste Bild

GIFs können E-Mails dynamischer und ansprechender wirken lassen, müssen aber mit Bedacht eingesetzt werden. Um lange Ladezeiten und Darstellungsprobleme zu vermeiden, sollten GIFs kleiner als 1 MB sein, da größere Dateien bei manchen E-Mail-Anbietern möglicherweise gekürzt werden oder gar nichterst  geladen werden. Es ist außerdem wichtig, den wichtigsten Frame an den Anfang zu setzen, da einige Versionen von Outlook unter Windows nur den ersten Frame anstelle der vollständigen Animation anzeigen. Falls das GIF gar nicht geladen wird, sollte ein klarer Alt-Text dennoch die Hauptbotschaft oder die CTA vermitteln.

Vermeiden Sie übermäßiges Blinken. Beschränken Sie Animationen auf maximal zwei Blinksignale pro Sekunde, um das Risiko lichtempfindlicher Anfälle zu verringern. Es ist zudem ratsam, die E-Mail nicht mit Bewegung zu überladen. Die Verwendung von mehr als einem GIF pro E-Mail-Bildschirm lenken Lesende schnell ab und kann visuell überwältigend wirken kann.

(Quelle: E-Mail von Tiffany)

Wann sollten Karussells, Videos und interaktive Module verwendet werden?

Interaktive Module und Videos helfen E-Mail-Marketingfachleuten dabei, ihre E-Mails für Lesende, deren Posteingänge mit Werbekampagnen überfüllt sind, unvergesslich zu machen und das Engagement der Abonennt:innen zu steigern. Dies wirkt sich positiv auf Ihre E-Mail-Marketing-Ergebnisse aus.

Hier sind die besten Empfehlungen für diesen Inhaltstyp:

1. Verwenden Sie Karussells (AMP), wenn Sie vier oder mehr Produkte präsentieren möchten und die E-Mail an ein Publikum gesendet wird, das überwiegend Gmail nutzt. Greifen Sie bei Nicht-AMP-Anbietern auf ein statisches Raster zurück.
2. Betten Sie das Video als Vorschaubild ein, mit einer überlagerten Wiedergabetaste, die zum gehosteten Video führt. Echte Inline-Videowiedergabe funktioniert bei einigen Anbietern, jedoch nicht konsistent.
3. Verwenden Sie interaktive Module wie Umfragen, Quizze und Bild-Hotspots, um Interaktionsdaten zu sammeln, ohne Abonnenten dafür auf eine Landingpage weiterleiten zu müssen.

(Quelle: E-Mail von Stripo)

Bildbehandlung im Dunkelmodus: Transparente PNGs vs. einfarbige Hintergründe

Etwa 35 % aller E-Mail-Öffnungen erfolgen im Dunkelmodus, und rund 82 % der Smartphone-Nutzer haben den Dunkelmodus aktiviert.

Die meisten Darstellungsfehler im Dunkelmodus stammen von Bildern:

1. Ein Logo mit dunklem Text auf weißem Hintergrund verschwindet oder kehrt sich im Dunkelmodus um.
   Lösung: Exportieren Sie Logos als transparente PNGs mit einem dünnen hellen Umriss, damit sie sowohl auf hellem als auch auf dunklem Hintergrund sichtbar sind.
2. Fotos mit weißen Rändern haben einen sichtbaren weißen Rahmen.
   Lösung: Schneiden Sie die Bilder ohne weißen Rand zu oder passen Sie die Hintergrundfarbe der E-Mail entsprechend an.

E-Mail-Typen und wann welches Format verwendet werden sollte

Nicht jede E-Mail muss aufwendig gestaltet werden. Manche müssen schlicht, schnell und unmissverständlich sein.

E-Mail im Klartext: Wenn Einfachheit das Design übertrumpft

Reine Text-E-Mails umgehen die Bildblockierungen, werden bei allen E-Mail-Anbietern identisch dargestellt und signalisieren „das ist kein Marketing“. Dies erhöht die Antwortraten für persönlich anmutende E-Mails.

Eine E-Mail im reinen Textformat (oder eine, die so gestaltet ist) überzeugt in drei Szenarien:

1. Von einer echten Person an eine echte Person: Vertriebsnachfassaktionen, Kontoüberprüfungen, Mitteilungen der Unternehmensführung.
2. Hohe Zustellbarkeitsrate: Wenn Sie Probleme mit Spam hatten und Ihre Absenderreputation wiederherstellen müssen.
3. Authentische Erzählungen: Newsletter, die sich wie eine E-Mail lesen und nicht wie eine Broschüre.

Rich-HTML-E-Mail: Der Mini-Landingpage-Ansatz

Die meisten Marketing-E-Mails fallen in diese Kategorie. Hero, Text, CTA-Button, unterstützende Blöcke, Fußzeile. Verwenden Sie Rich-HTML, wenn Sie Branding, eine Hierarchie und ein visuelles Storytelling benötigen. Dies ist bei den meisten Werbe-E-Mails, Newslettern und Produktankündigungen der Fall.

AMP/interaktive E-Mails: Funktionen und Kompromisse

AMP for Email ermöglicht es Empfängern, zu interagieren, ohne den Posteingang verlassen zu müssen: Formulare ausfüllen, Karussells durchblättern, Veranstaltungen zusagen und Live-Bestände einsehen. Stripos eigener A/B-Test ergab, dass AMP-basierte interaktive Feedback-Formulare 520 % mehr Antworten generierten als externe Formulare.

Abwägungen:

• unterstützung: Gmail und Yahoo unterstützen AMP vollständig, Apple Mail und Outlook unterstützen es nicht;
• fallback: Versenden Sie zusätzlich immer ein HTML-Fallback (Ersatzlösung) für nicht-AMP-unterstützende Anbieter. AMP ist kein Ersatz für HTML, sondern nur eine Erweiterung;
• einrichtung: Sie müssen Ihren Absender bei Google auf die Whitelist setzen, bevor AMP-E-Mails in Gmail angezeigt werden.

Transaktions- vs. Marketing-E-Mails: Unterschiedliche Gestaltungsregeln

Marketing- und Transaktions-E-Mails haben unterschiedliche Ziele, daher unterscheiden sich auch ihre Ansätze bei der Erstellung.

 

Gestalten Sie Transaktions-E-Mails nicht wie Marketing-E-Mails. Darstellungen, die wie Werbeaktionen aussehen, führen schnell zu einem Vertrauensverlust.

Gamification und interaktive Elemente

Interaktive Elemente unterscheiden ein gutes E-Mail-Design von einem Großartigem.  E-Mail-Kampagnen mit spielerischen Elementen (Gamifiziert) erzielen bis zu 48 % mehr Engagement bei den Empfänger:innen. E-Mail-Gamification kann die Öffnungsraten um 30 % steigern.

In E-Mails eingebettete Umfragen, Befragungen und Quizze

Umfragen mit einem Fingertipp (AMP-basiert) eignen sich am besten für ein unkompliziertes Feedback („Wie war Ihre Erfahrung? 👍/👎“). Quizze eignen sich für Produktempfehlungen und die personalisierte Segmentierung. Umfragen mit mehr als drei offenen Fragen gehören auf eine Landingpage, nicht in eine E-Mail.

(Quelle: Stripo-Vorlage)

Spiele und Rubbellose: Konversionsdaten

Gamifizierte E-Mails steigern die E-Mail-Konversionsraten um durchschnittlich 2,5 %. Interaktive Inhalte können den durchschnittlichen Kaufwert um 15 % steigern. Der weltweite Gamification-Markt wird bis 2025 voraussichtlich 30,7 Milliarden US-Dollar erreichen.

Mechanismen, die durchweg gut funktionieren:

• „Spin-to-Win“-Räder zur Enthüllung von Rabatten (eignen sich für Erstkäufe);
• rubbellose für Überraschungsprämien (eignen sich für Treueprogramme);
• memory- und Zuordnungsspiele für Engagement-Spitzen (eignet sich für die Wiedergewinnung);
• quizbasierte Personalisierung zur Findung des richtigen Produkts (wirkt bei Neueinführungen).

(Quelle: Stripo-Vorlage)

AMP vs. reine CSS-Interaktivität: Kompatibilitätsmatrix

E-Mail-AMP und reine CSS-Interaktivität stellen zwei unterschiedliche Ansätze für das Engagement im Posteingang dar. AMP bietet app-ähnliche Echtzeit-Datenfunktionalität, erfordert jedoch eine genaue Anbieter-Unterstützung und Whitelisting. Umgekehrt funktioniert die Interaktivität bei den meisten modernen Anbietern nur mit CSS, ist jedoch auf statische, visuelle Umschaltelemente und Animationen beschränkt.

 

Gestalten Sie mit AMP, wenn Ihre Zielgruppe überwiegend Gmail nutzt. Gestalten Sie mit CSS, wenn Sie eine Apple Mail-Unterstützung benötigen. Stellen Sie immer einen HTML-Fallback bereit.

A/B-Tests für E-Mail-Designentscheidungen

Die meisten „Bewährten Methoden“ sind Durchschnittswerte. Das beste Design für Ihre Zielgruppe ist das, das Sie tatsächlich getestet haben.

Was getestet werden sollte: Eine priorisierte Liste von Designvariablen

Testen Sie in dieser Reihenfolge, von der höchsten bis zur niedrigsten erwarteten Auswirkung:

1. Betreffzeile (größter Hebel für die Öffnungsrate).
2. Hero-Bild/Banner (prägt den ersten Eindruck).
3. CTA-Text (eine Änderung des Verbs kann die Klickrate um 10-30 % beeinflussen).
4. CTA-Farbe (nur wenn andere Faktoren bereits optimiert sind; geringerer Effekt als erwartet).
5. Absendername (größere Wirkung, als man denkt).
6. Layout-Muster (einspaltig vs. hybrid).
7. Tiefe der Personalisierung (tokenbasiert vs. verhaltensbasiert).

Aufbau eines validen Tests: Stichprobengröße, Dauer, einzelne Variable

Drei Regeln, die die meisten Fehler beim Testen abfangen:

• nur eine Variable pro Test: Wenn Sie die Betreffzeile und das Hero-Bild gleichzeitig ändern, wissen Sie nicht, welche der beiden Änderungen die Kennzahl beeinflusst hat;
• die Stichprobengröße ist entscheidend: Für ein 95-prozentiges Konfidenzintervall bei einem geringen Anstieg (5-10 %) benötigen Sie in der Regel mehr als 1.000 Empfänger:innen pro Variante. Kleinere Tests führen Sie in die Irre;
• die Dauer sollte das gesamte Öffnungsfenster abdecken: Die meisten E-Mail-Öffnungen erfolgen innerhalb von 24 Stunden, bei B2B-Zielgruppen jedoch über einen Zeitraum von 48-72 Stunden. Beenden Sie die Tests zu früh, messen Sie die falsche Kohorte.

Auswertung der Ergebnisse: Auf welche Kennzahlen sollte man sich bei Designentscheidungen verlassen

Nicht alle E-Mail-Kennzahlen sind gleich zuverlässig. Daher ist es wichtig zu verstehen, was jede Einzelne Ihnen tatsächlich sagt.

Die Öffnungsrate ist nach wie vor nützlich, um allgemeine Trends zu erkennen. Der Datenschutz von Apple Mail hat ihre Genauigkeit beeinträchtigt, sodass sie eher als Richtwert denn als absoluter Wert betrachtet werden sollte. 

Die Klickrate ist eine aussagekräftigere Kennzahl zur Bewertung der CTA-Leistung und der Layout-Effektivität. 

Die Klick-zu-Öffnungs-Rate (CTOR) hilft dabei, die Leistung des E-Mail-Inhalts und des E-Mail-Designs unabhängig von der Betreffzeile zu isolieren.

Was die geschäftlichen Auswirkungen angeht, bleibt die Konversionsrate die wichtigste Kennzahl, da sie die E-Mail-Performance direkt mit dem Umsatz oder den gewünschten Aktionen verknüpft. 

Bei Werbekampagnen ist der Umsatz pro E-Mail (RPE) oft der beste langfristige Indikator für die Gesamtrentabilität der Kampagne.

Die Öffnungsraten sind weniger zuverlässig geworden, da der Apple Mail Privacy Protection mittlerweile etwa 50-60 % der erfassten E-Mail-Öffnungen beeinflusst. Kluge Marketingfachleute legen den Schwerpunkt auf Klickraten, Konversionen und den Umsatz pro E-Mail als primäre KPIs (Leistungskennzahlen).

Gmail-Metadaten (Annotationen) und Strategie für die Vorschau im Posteingang

Auch wenn viele E-Mail-Marketingfachleute ihre Kampagnen im Ordner „Posteingang“ sehen möchten, ist der Ordner „Werbeaktionen“ kein Feind.

So funktionieren Annotationen im Gmail-Ordner „Werbeaktionen“

Gmail-Annotationen sind strukturierte Daten (JSON-LD oder Mikrodaten), die Sie dem <head>-Tag der E-Mail hinzufügen. Gmail verwendet diese, um auf Mobilgeräten eine Vorschau-Karte über der Betreffzeile und als Karussell oben im Tab „Werbeaktionen“ anzuzeigen.

Drei Annotationstypen sind wichtig:

• Promo-Code: Zeigt einen Rabattcode in der Vorschau des Posteingangs an;
• Deal-Badge: Fügt eine Angebotsbezeichnung hinzu („20 % Rabatt“, „Kostenloser Versand“);
• ablaufdatum: Zeigt an, wann das Angebot endet und erzeugt so eine Dringlichkeit in der Vorschau selbst.

Hinzufügen von Deal-Badges (Abzeichen), Ablaufdaten und Promo-Bildern

Eine minimale Gmail-Annotation umfasst ein Werbebild (580 x 400 px), eine Rabattbezeichnung, einen Zeitstempel für das Ablaufdatum und ein Logo. Erstellen Sie diese einmal, speichern Sie sie als Modul, und verwenden Sie sie für jeden Werbeversand wieder.

Stripo enthält einen Gmail-Annotationen-Generator, sodass Sie den JSON-Code nicht manuell schreiben müssen.

Messung der Annotationsleistung

Gmail stellt keine anmerkungsspezifischen Klickdaten zur Verfügung, daher erfolgt die Messung über UTMs (Nachverfolgungsanhänge beim Surfen):

• fügen Sie eine eindeutige UTM-Quelle/ein UTM-Medium für Ihre Annotationen hinzu (z. B. utm_source=gmail&utm_medium=annotation);
• vergleichen Sie die Klickrate (CTR) von Kampagnen mit und ohne Annotationen;
• achten Sie auf einen Anstieg der Klickrate auf Mobilgeräten, da Annotationen dort zuerst angezeigt werden.

Zusammenfassung

E-Maiingl ist einer der wenigen Kanäle, in denen gute Tipps zum Design die Kennzahlen noch immer messbar beeinflussen können. 

Mobile-First-Layouts, eine klare CTA-Hierarchie, Barrierefreiheit, die Unterstützung des Dunkelmodus und ein echtes E-Mail-Design-System sind es, die eine E-Mail - die Ergebnisse liefert -, von einer E-Mail unterscheidet, die Abonnent:innen einfach löschen.

Beginnen Sie mit den Grundlagen und fügen Sie dann Interaktivität und Personalisierung hinzu.

Testen Sie die Variablen, die wichtig sind (Betreffzeile, Hero, CTA), nicht die, die es nicht sind (Eckenradius der Schaltflächen). 

Integrieren Sie die E-Mail-Erstellung in ein System, damit die nächste Kampagne auf einer Vorlage basiert, die Ihre Marke bereits kennt.

Häufig gestellte Fragen zum E-Mail-Design

1. Was ist die ideale E-Mail-Breite?

600 px sind der Standard für den E-Mail-Textbereich auf dem Desktop, während 320-480 px der Standard für die Darstellung auf Mobilgeräten ist. Die meisten Vorlagen verwenden einen 600-px-Wrapper mit internen Inhaltsabschnitten, die auf Mobilgeräten ausgeblendet werden. Stripo-Vorlagen verwenden standardmäßig diese Breite.

2. Wie viele Bilder sollte eine E-Mail enthalten?

Es gibt keine feste Regel, aber ein praktikables Ziel ist ein Text-Bild-Verhältnis von 60:40. Zu viele Bilder: Spamfilter werden misstrauisch, und Anbieter, die Bilder blockieren, zeigen nichts an. Zu wenige: Die E-Mail wirkt flach. Drei bis fünf gut ausgewählte Bilder decken die meisten Marketing-E-Mails ab.

3. Sollte ich einen No-Code-E-Mail-Generator verwenden oder von Grund auf Programmieren?

Einen No-Code-Generator, wenn Sie mehr als zwei E-Mails pro Monat versenden und eine anbieterübergreifende Darstellung benötigen, auf die Sie sich verlassen können. Handcodierung eignet sich für einmalige, maßgeschneiderte Kampagnen oder Entwickler, die bereits eine E-Mail-Codebasis pflegen. Für alle anderen verkürzt die Erstellung in einem No-Code-Editor die Produktionszeit um etwa das 3,7-Fache, ohne die Darstellungsqualität zu beeinträchtigen.

4. Was macht eine E-Mail mobilfreundlich?

Ein Ein-Spalten-Layout unter 480 px, Fließtext mit mindestens 16 px, Klickflächen von mindestens 44 x 44 px, CTAs in voller Breite, Bildbreiten als Prozentangaben oder mit max-width: 100%, getestete Darstellung mindestens in Gmail (Android) und Apple Mail (iOS).  Die vollständige Aufschlüsselung finden Sie im Abschnitt „Zuerst mobil”/„Mobile First“ oben.

5. Wie teste ich die E-Mail-Darstellung bei verschiedenen Anbietern?

Drei Optionen, in aufsteigender Reihenfolge der Abdeckung: Senden an Ihre eigenen Testkonten (kostenlos, begrenzt), Verwendung eines kostenlosen Tools wie PutsMail (einfache Vorschau) oder Nutzung einer kostenpflichtigen Testplattform wie Litmus, Email on Acid oder Stripos integrierter E-Mail-Anbieter-Test (über 90 Anbieter in einem Workflow).

6. Was ist der Unterschied zwischen E-Mail-Design und E-Mail-Marketing?

E-Mail-Marketing ist die Strategie: an wen Sie senden, wann, warum und was Sie messen wollen. E-Mail-Design ist die Gestaltung der Nachricht, damit Ihre Strategie tatsächlich im Posteingang ankommt und die E-Mail geöffnet wird. Man kann eine großartige Strategie mit schlechtem Design haben (hohe Öffnungsraten, niedrige Klickraten). Man kann ein großartiges Design mit einer schlechten Strategie haben (sieht wunderschön aus, aber niemand öffnet die E-Mail). Es handelt sich um unterschiedliche Fähigkeiten, und die besten Kampagnen investieren in beides.