E-Mail Design: Strategien für mehr Klicks und Conversions

E-Mail-Design entscheidet, ob eine Nachricht gelesen oder sofort geschlossen wird. Wer Kontrast, Schriftgröße, Layout und CTA-Platzierung bewusst steuert, erzielt deutlich mehr Klicks als mit unstrukturierten Textnachrichten. Dieser Beitrag zeigt die entscheidenden Design-Strategien und wie du sie direkt in ActiveCampaign umsetzt.

Das Wichtigste in Kürze

• Single-Column-Layouts funktionieren auf Mobilgeräten und Desktop gleich gut; mehrspaltige Designs brechen auf kleinen Bildschirmen regelmäßig zusammen.
• Dark Mode ist in den verbreiteten E-Mail-Clients aktiv – wer keine Dark-Mode-Stile definiert, riskiert schwarzen Text auf schwarzem Hintergrund.
• CTA-Buttons müssen mindestens 44 Pixel hoch und per HTML sowie CSS gebaut sein, damit sie auch dann funktionieren, wenn Bilder blockiert sind.
• Conditional Content in ActiveCampaign ermöglicht inhaltlich unterschiedliche E-Mails aus einem einzigen Template, ohne mehrere Versionen manuell zu pflegen.
• A/B-Tests für Design-Elemente liefern nur dann belastbare Ergebnisse, wenn du pro Test genau ein Merkmal isolierst.

Visuelle Hierarchie legt fest, was Empfänger wahrnehmen

Eine E-Mail ohne klare Hierarchie wirkt wie eine Seite aus einem Wörterbuch: alles gleich gewichtet, nichts zieht den Blick. Wer Schriftgröße, Abstände und Farbe bewusst einsetzt, lenkt die Aufmerksamkeit entlang eines Pfades – von der Überschrift über den Kernsatz bis zum CTA. Die Hierarchie ist keine Designfrage, sondern eine Kommunikationsfrage: Was soll der Empfänger zuerst verstehen, was danach?

Visuelle Hierarchie entsteht durch Kontrast zwischen Elementen, nicht durch die Schönheit einzelner Elemente. Der Headline-Text sollte mindestens doppelt so groß sein wie der Fließtext. Subheadlines trennst du deutlich durch Abstände vom Textblock darunter. Elemente, die gleichrangig sind, gestaltest du gleich – Elemente mit anderen Funktionen anders. Ein häufiger Fehler ist das Überladungsprinzip: Wenn alle Elemente Aufmerksamkeit beanspruchen, bekommt kein Element tatsächlich Aufmerksamkeit.

Eine E-Mail mit drei gleich groß gesetzten Überschriften, einem fett hervorgehobenen Absatz und zwei Buttons in Signalfarbe hat keine Hierarchie – sie hat Lärm. Die Lösung ist nicht weniger Inhalt, sondern eine klare Priorisierung. Was soll der Empfänger zuerst wahrnehmen? Was danach? Was ist optional, wenn er schnell scannt?

Abstände strukturieren, nicht nur dekorieren

Padding und Margin sind Strukturwerkzeuge. Ein Absatzabstand von mindestens 16 Pixeln zwischen Textblöcken verbessert die Lesbarkeit spürbar. Zwischen Abschnitt und der nächsten Überschrift empfehlen sich 24 bis 32 Pixel, damit der Empfänger erkennt, dass ein neuer Gedanke beginnt, bevor er den Überschriftentext liest.

Für den E-Mail-Body selbst gilt: Ein seitlicher Padding von mindestens 16 Pixeln auf mobilen Geräten verhindert, dass Text am Bildschirmrand klebt. Im Desktop-Bereich reichen 20 bis 24 Pixel. ActiveCampaign setzt dieses Padding im Drag-and-Drop-Editor standardmäßig auf den Content-Blocks; anpassen kannst du es in den Block-Einstellungen unter Abstände. Wer eigene HTML-Templates baut, muss diese Werte manuell im Inline-CSS setzen, weil viele E-Mail-Clients externes Stylesheet-CSS ignorieren.

Schriftgröße und Zeilenlänge im richtigen Verhältnis

Für den Fließtext liegt die Untergrenze bei 14 Pixeln – 16 Pixel sind in der Praxis der bessere Standard, besonders auf hochauflösenden Displays. Überschriften funktionieren ab 20 Pixeln; für einen prominenten Hero-Text können 28 bis 32 Pixel sinnvoll sein, wenn er als einzige starke Aussage auf dem Bildschirm steht und alle anderen Elemente zurücktreten.

Die Zeilenlänge sollte 600 Pixel im E-Mail-Container nicht überschreiten. Längere Zeilen werden auf Desktop vollständig dargestellt, erhöhen aber den Leseaufwand, weil das Auge beim Zeilenrücklauf den Anfang der nächsten Zeile schwerer findet. Für die meisten Templates ist eine Gesamtbreite von 560 bis 600 Pixeln der richtige Wert. Bei Single-Column-Layouts mit viel Text kannst du den Textblock auf 480 Pixel begrenzen und die seitlichen Abstände mit Farbe oder Leerraum füllen.

Drei Hierarchie-Fehler, die Klicks kosten

Diese Muster tauchen so häufig auf, dass es sich lohnt, sie konkret zu benennen:

• Zu viele gleichwertige Signale: Mehrere fett gedruckte Sätze, zwei Buttons in identischer Größe und Farbe und eine Headline, die sich optisch nicht vom Fließtext abhebt – wenn alles nach Aufmerksamkeit ruft, bekommt nichts davon tatsächlich welche.
• Schriftgrößen ohne System: Wenn Überschriften nur zwei Pixel größer sind als Fließtext, nimmt das Auge keine Hierarchie wahr; Empfänger scannen den Block ohne Orientierungspunkte und springen zum nächsten Inhalt.
• Abstände ohne Logik: Zu enger Zeilenabstand macht Absätze undurchdringlich; zu großzügiger Abstand ohne Rhythmus trennt Elemente voneinander, die inhaltlich zusammengehören, und zerstört den Lesefluss.

Warum Mobile-First das Standardformat ist, nicht eine Einschränkung

Die Mehrheit der E-Mails wird auf Mobilgeräten geöffnet. Das bedeutet: Wer eine E-Mail zuerst für den Desktop gestaltet und sie dann nachträglich für Mobile anpasst, arbeitet in die falsche Richtung. Mobile-First bedeutet, dass die Mobilansicht das primäre Format ist – die Desktop-Ansicht erweitert, was auf dem Smartphone bereits funktioniert.

In der Praxis zeigt sich das an einem einfachen Test: Öffne die fertige E-Mail auf einem echten Smartphone, nicht nur in der Vorschau des Editors. Wenn du scrollen musst, bevor du den CTA siehst, ist der Aufbau für die erste Bildschirmhöhe zu lang. Wenn du Text ohne Zoomen lesen kannst, ist die Schriftgröße korrekt. Wenn Buttons mit dem Daumen bequem erreichbar sind, ohne dass Nachbarelemente versehentlich getippt werden, stimmt die Treffläche.

Single-Column-Layouts als sicherer Standard

Mehrspaltige Layouts sehen auf Desktop gut aus, brechen auf Mobilgeräten jedoch regelmäßig zusammen – außer du schreibst eigene Media Queries, die das Layout bei schmalen Bildschirmen auf eine Spalte umschalten. In ActiveCampaign stellt der Editor vorgefertigte responsive Layouts bereit; trotzdem lohnt ein Test auf echten Geräten, weil einzelne Blöcke unterschiedlich reagieren können.

Die verlässlichste Wahl ist ein Single-Column-Layout mit maximal 600 Pixel Breite. Wenn du Produktkacheln zeigen willst, kannst du innerhalb eines Single-Column-Containers zwei Kacheln nebeneinander setzen – solange beide in den mobilen Viewport passen und ihre Schrift ab 14 Pixeln leserlich bleibt. Drei oder mehr Kacheln nebeneinander funktionieren auf Mobilgeräten praktisch nie ohne eigene CSS-Anpassung.

Bilder und ihre Fallbacks

Viele E-Mail-Clients – darunter Gmail in bestimmten Netzwerken und Outlook in Unternehmensumgebungen – blockieren Bilder standardmäßig. Wenn ein Bild ohne Alt-Text blockiert wird, sieht der Empfänger eine leere Fläche. Das ist besonders problematisch, wenn das Bild den Kerninhalt oder den CTA trägt.

Für jedes Bild gilt: Der Alt-Text muss beschreiben, was das Bild kommuniziert, nicht wie es aussieht. Bei rein dekorativen Bildern kann der Alt-Text leer bleiben. Bei einem Hero-Bild, das das Hauptversprechen der E-Mail enthält, muss der Alt-Text dieses Versprechen wiedergeben. In ActiveCampaign kannst du Alt-Texte direkt im Bild-Block eintragen, ohne in den HTML-Editor wechseln zu müssen.

Dark Mode: Was passiert, wenn du keine Dark-Mode-Stile schreibst

Apple Mail, die Gmail-App auf iOS und mehrere andere verbreitete E-Mail-Clients schalten automatisch in den Dark Mode, wenn das Betriebssystem Dark Mode aktiviert hat. Was dabei mit schlecht vorbereiteten E-Mails passiert, ist vorhersehbar: Weißer Text auf weißem Hintergrund wird unsichtbar. Schwarzer Text auf dunkelgrauem Hintergrund wird kaum lesbar. Logos mit transparentem Hintergrund wirken invertiert und erscheinen in dunklen Varianten unter Umständen gar nicht mehr.

Das Problem ist nicht der Dark Mode selbst – er verbessert die Lesbarkeit für viele Nutzer. Das Problem ist, dass viele E-Mail-Templates ausschließlich für helle Hintergründe entwickelt wurden und keinerlei Dark-Mode-Stile definieren. Der E-Mail-Client übernimmt dann die Kontrolle und invertiert nach eigenem Ermessen, was zu Ergebnissen führen kann, die der Absender nie gesehen hat.

Wie Dark Mode in E-Mail-Clients funktioniert

E-Mail-Clients reagieren auf Dark Mode auf drei verschiedene Arten. Einige, wie Apple Mail, respektieren Media Queries mit prefers-color-scheme: dark und wenden die dafür definierten Stile an. Andere, wie Outlook auf Windows, ignorieren Dark Mode in der E-Mail-Darstellung weitgehend. Wieder andere, wie Gmail, invertieren Farben nach eigenen Regeln, ohne Media Queries zu berücksichtigen.

Das bedeutet, dass du kein einheitliches Dark-Mode-Verhalten in allen Clients garantieren kannst – aber du kannst verhindern, dass deine E-Mail im Dunkelmodus unlesbar wird. Die wichtigste Maßnahme: Definiere Textfarben immer explizit im Inline-Stil, nicht nur über den impliziten Kontrast zum Hintergrund. Schwarzer Text, der nur schwarz wirkt, weil er auf weißem Hintergrund steht, wird in manchen Clients automatisch invertiert. Explizit auf ein sehr dunkles Grau gesetzter Text – zum Beispiel rgb(30, 30, 30) – bleibt in dieser Umgebung ebenfalls lesbar.

Die folgende Übersicht zeigt, wie die wichtigsten Clients mit Dark-Mode-Stilen umgehen:

Logos und Grafiken für Dark Mode vorbereiten

Ein Logo im PNG-Format mit transparentem Hintergrund erscheint im Dark Mode oft als helles Motiv auf dunklem Hintergrund – was bei dunklen oder schwarzen Logos zur Unsichtbarkeit führt. Drei Wege helfen dagegen:

• Exportiere das Logo auf einer farbigen Fläche und setze diese Farbe als Hintergrundfarbe des Logo-Blocks – damit ist die Darstellung unabhängig vom Dark-Mode-Verhalten des Clients.
• Verwende zwei Bildversionen (eine für helle, eine für dunkle Hintergründe) und blende sie per prefers-color-scheme-Media-Query um – das funktioniert in Clients, die Media Queries unterstützen.
• Setze das Logo als SVG mit explizit definierten Füllfarben; SVG-Elemente können per Media Query umgefärbt werden, ohne dass du zwei Dateiexporte brauchst.

ActiveCampaign schreibt für Logo-Blöcke automatisch eine Hintergrundfarbe, wenn du sie im Block-Editor festlegst. Das ist die einfachste Lösung und für die meisten Anwendungsfälle ausreichend.

CTA-Buttons, die ohne Bilder funktionieren

Der Call-to-Action ist das Element, auf das alle anderen Design-Entscheidungen einzahlen. Trotzdem werden CTA-Buttons häufig als Bild eingebettet – mit dem Ergebnis, dass sie für einen erheblichen Teil der Empfänger nicht sichtbar sind, wenn Bilder blockiert werden. Ein Button, den du nicht anklicken kannst, weil du ihn nicht siehst, ist kein Button.

Bulletproof Buttons lösen dieses Problem: Sie werden als reines HTML mit CSS-Styling gebaut und funktionieren daher unabhängig davon, ob Bilder laden oder nicht. Ein solcher Button ist ein a-Element mit Padding, Hintergrundfarbe, Textfarbe und einem definierten Display-Wert. Das Ergebnis sieht aus wie ein Button, verhält sich wie ein Button und wird in allen verbreiteten E-Mail-Clients korrekt dargestellt.

Größe und Platzierung von CTA-Buttons

Apple empfiehlt für Touch-Ziele auf mobilen Geräten eine Mindestgröße von 44 mal 44 Punkten. Übertragen auf E-Mail-Buttons bedeutet das: Der Button sollte mindestens 44 Pixel hoch sein, idealerweise 48 bis 52 Pixel. Die Breite hängt vom Text ab; bei kurzen Texten wie "Jetzt testen" reicht eine feste Breite mit ausreichend Padding links und rechts. Bei längeren Beschriftungen wähle display: block mit automatischer Breitenanpassung, damit der Text nie umbricht.

Den CTA-Button oberhalb der Scrolllinie zu platzieren erhöht die Sichtbarkeit – er muss jedoch von einem Satz oder Absatz vorbereitet werden, der den Nutzen nennt. Ein Button ohne Kontext lädt nicht zum Klick ein. Platziere den primären Button nach dem entscheidenden Argument, nicht am Ende der E-Mail, wo Empfänger längst weggescrollt haben könnten.

Farbwahl und Kontrast beim CTA

Der Button muss sich visuell vom Rest der E-Mail abheben. Ein blauer Button in einer E-Mail mit vorherrschend blauem Design hebt sich nicht ab, auch wenn er technisch korrekt gebaut ist. Nutze für den CTA eine Akzentfarbe, die in deinem Brand-System eindeutig als Handlungsaufforderung definiert ist. Das muss keine Signalfarbe sein; wichtig ist, dass sie sich vom Hintergrund und von Textelementen deutlich unterscheidet.

Für Barrierefreiheit gilt ein Kontrastverhältnis von mindestens 4,5:1 zwischen Buttontext und Buttonhintergrund. Wenn deine Akzentfarbe ein mittleres Grün ist, prüfe den Kontrast zu weißem und zu schwarzem Text – der WebAIM Contrast Checker gibt direkte Auskunft. Beachte, dass sich das Kontrastverhältnis im Dark Mode verschieben kann, wenn der Client die Buttonfarbe anpasst. Explizites Inline-CSS für Farbe und Hintergrundfarbe des Buttons verringert dieses Risiko.

Personalisierung, die inhaltlich unterscheidet statt nur den Namen variiert

Eine E-Mail, die den Empfänger beim Vornamen nennt, aber denselben Inhalt wie alle anderen schickt, ist personalisierte Form mit generischem Inhalt. Der Vorname im Betreff erhöht die Öffnungsrate in manchen Segmenten, aber er ändert nichts daran, ob die E-Mail nach dem Öffnen relevant wirkt. Wirkliche Personalisierung beginnt beim Inhalt.

Inhaltliche Personalisierung bedeutet: Ein Kontakt, der ein bestimmtes Produkt angeschaut hat, bekommt eine E-Mail, die auf dieses Produkt eingeht. Ein Kontakt, der in der letzten Kampagne einen bestimmten Link geklickt hat, bekommt eine E-Mail, die an dieses Interesse anknüpft. Ein Kontakt mit einem bestimmten Tag bekommt anderen Inhalt als ein Kontakt ohne diesen Tag. Gleiches Template, verschiedene Botschaft.

Conditional Content in ActiveCampaign einrichten

ActiveCampaign ermöglicht Conditional Content – auf Deutsch: bedingten Inhalt – direkt im E-Mail-Editor. Damit kannst du innerhalb einer E-Mail Blöcke definieren, die nur für bestimmte Kontakte sichtbar sind, basierend auf Tags, Custom Fields, Listen-Zugehörigkeit oder dem Ergebnis von Automationen.

Der Ablauf im Editor: Du fügst einen Inhaltsblock ein und öffnest die Block-Optionen über das Zahnrad-Symbol. Dort wählst du Bedingter Inhalt und legst die Bedingung fest. Empfänger, die die Bedingung erfüllen, sehen den Block; alle anderen sehen ihn nicht. Damit kannst du aus einem Template zwei oder mehr inhaltlich verschiedene Varianten machen, ohne mehrere E-Mails manuell zu duplizieren. Änderungen an Header, Footer und gemeinsamen Inhalten pflegst du an einer Stelle.

Ein Anwendungsfall: Ein B2B-Unternehmen versendet monatliche Produkt-Updates. Kontakte mit dem Tag "Bestandskunde" sehen einen Block mit Funktionsupdates für Features, die sie bereits nutzen. Kontakte ohne diesen Tag sehen stattdessen einen Einführungsblock, der erklärt, welches Problem das Produkt löst. Beide Gruppen bekommen dieselbe E-Mail – aber mit inhaltlich passendem Schwerpunkt.

Site Tracking als Grundlage für verhaltensbasierte Inhalte

ActiveCampaign zeichnet mit Site Tracking auf, welche Seiten ein Kontakt besucht hat, sofern der Tracking-Code auf der Website eingebunden ist und der Kontakt in ActiveCampaign bekannt ist. Diese Daten kannst du als Auslöser für Automationen und als Bedingung für Conditional Content nutzen.

Wichtig: Site Tracking verarbeitet personenbezogene Daten. Deine Datenschutzerklärung muss das abdecken, und die Cookie-Einwilligung der Website muss Tracking durch ActiveCampaign einschließen. Ohne diese Grundlage solltest du Site Tracking nicht aktivieren. Wenn die rechtliche Basis steht, ist Site Tracking eine der direktesten Methoden, um E-Mail-Inhalte an das tatsächliche Verhalten zu koppeln – nicht an Annahmen darüber, was Kontakte interessieren könnte.

So baust du ein Template-System in ActiveCampaign auf

Ohne Template-System wird jede neue E-Mail von Grund auf neu gestaltet. Das kostet Zeit und führt zu Inkonsistenzen in Farben, Schriftgrößen und Abständen, die über Kampagnen hinweg sichtbar werden. Mit einem durchdachten Template-System erstellst du neue E-Mails, indem du ein vorhandenes Template anpasst – nicht neu gestaltest.

Das System funktioniert auf drei Ebenen: Das Basis-Template enthält alle Brand-Elemente (Header, Footer, Grundfarben, Schriften). Kampagnen-Templates erben vom Basis-Template und definieren das Layout für einen bestimmten E-Mail-Typ (Newsletter, Produkt-Announcement, Event-Einladung). Einzelne Kampagnen füllen das Kampagnen-Template mit aktuellem Inhalt. Änderungen am Brand – etwa ein neues Logo oder eine geänderte Hauptfarbe – werden nur im Basis-Template vorgenommen und gelten danach für alle neuen Kampagnen.

Basis-Template in ActiveCampaign anlegen

Folge diesen Schritten, um ein wiederverwendbares Basis-Template anzulegen:

1. Öffne in ActiveCampaign den Bereich Kampagnen und wähle E-Mail-Templates. Klicke auf Neues Template erstellen und wähle entweder Von Grund auf neu oder ein passendes Ausgangs-Template als Startpunkt.
2. Erstelle den Header-Block mit deinem Logo, deiner Hauptfarbe und einem Abstandsblock als Trenner zum Content darunter. Lege in den Block-Einstellungen explizit Hintergrundfarbe und Padding fest; verlass dich nicht auf implizite Standardwerte.
3. Erstelle den Footer-Block mit Absendeadresse, Impressum-Link, Link zur Datenschutzerklärung und dem Abmeldelink über den {{unsubscribe}}-Tag. Der Abmeldelink ist rechtlich verpflichtend und darf in keiner kommerziellen E-Mail fehlen.
4. Lege eine Content-Zone zwischen Header und Footer an: ein Abstandsblock oben, ein Platzhalter-Textblock, ein optionaler Platzhalter-Bild-Block, ein Button-Block. Diese Platzhalter ersetzt du in jeder Kampagne durch echten Inhalt – das Template gibt nur die Struktur vor.
5. Speichere das Template unter einem eindeutigen Namen – zum Beispiel Basis-Template 2026 – und aktiviere die Option Als Template speichern, damit es in der Template-Bibliothek erscheint und für neue Kampagnen ausgewählt werden kann.
6. Dupliziere das Basis-Template für jeden E-Mail-Typ, den du regelmäßig sendest: Newsletter, Produkt-Announcement, Event-Einladung. Passe Layout und Block-Reihenfolge für jeden Typ an, behalte Header und Footer aber unverändert, damit die visuelle Konsistenz gewahrt bleibt.

A/B-Tests in das Template-System integrieren

ActiveCampaign erlaubt A/B-Tests für Betreffzeile, Absendername und E-Mail-Inhalt. Für Design-Tests empfiehlt sich, das betreffende Template direkt zu duplizieren: Version A bleibt unverändert, Version B enthält genau eine Design-Änderung – zum Beispiel einen anders platzierten CTA oder eine andere Button-Farbe.

Für belastbare Ergebnisse brauchst du eine ausreichend große Empfängerliste. Wer einen Test mit wenigen Dutzend Empfängern startet und aus dem Ergebnis eine allgemeine Design-Regel ableitet, trifft keine datengestützte Entscheidung – die Stichprobe ist zu klein, um Zufall auszuschließen. ActiveCampaign wählt nach einer definierten Testphase automatisch die bessere Variante und sendet sie an die verbleibenden Empfänger. Die Testphase solltest du mindestens einige Stunden, besser einen bis zwei Tage lang ansetzen, damit Unterschiede statistisch belastbar werden.

Halte die Ergebnisse deiner Tests fest, auch wenn du kein formales Testing-Dokument pflegst. Was bei Segment A funktioniert, funktioniert bei Segment B möglicherweise nicht. Ein einfaches Notizdokument mit den Spalten Datum, Hypothese und Ergebnis ist ausreichend und spart dir die Wiederholung von Experimenten, die du bereits durchgeführt hast. Wer systematisch testen und auswerten will, findet im A/B-Testing-Leitfaden für E-Mail-Marketing einen strukturierten Einstieg.

Häufige Fragen

Wie breit sollte eine HTML-E-Mail sein?

Der Standard für HTML-E-Mails liegt bei 600 Pixel Gesamtbreite. Dieser Wert hat sich etabliert, weil er auf Desktop-Clients vollständig sichtbar ist und sich auf Mobilgeräten durch responsives CSS auf die Viewport-Breite anpasst. Für den Textbereich innerhalb des Containers empfehlen sich 480 bis 560 Pixel, damit die Zeilenlänge nicht zu groß wird und das Auge beim Zeilenrücklauf die nächste Zeile leicht findet.

Welche Schriftarten funktionieren in E-Mails zuverlässig?

Websichere Schriftarten wie Arial, Georgia, Verdana und Times New Roman werden in allen E-Mail-Clients dargestellt, weil sie auf dem Betriebssystem installiert sind. Google Fonts und andere Web Fonts werden von manchen Clients unterstützt – darunter Apple Mail und Samsung Mail –, von anderen nicht. Definiere Web Fonts deshalb immer mit einem Fallback-Stack: font-family: 'Deine Schrift', Arial, sans-serif. Outlook auf Windows zeigt dann Arial, alle anderen zeigen die gewünschte Schrift – und das Layout bleibt stabil.

Muss ich einen Abmeldelink in jede Marketing-E-Mail einfügen?

Ja. Das UWG schreibt vor, dass kommerzielle E-Mails dem Empfänger die Möglichkeit geben müssen, zukünftige Nachrichten abzubestellen. Ein fehlender Abmeldelink ist nicht nur ein rechtliches Risiko – er verschlechtert auch die Zustellbarkeit, weil viele E-Mail-Clients Spam-Beschwerden registrieren, wenn kein einfacher Abmeldeweg vorhanden ist. ActiveCampaign bindet den Abmeldelink automatisch ein, wenn du den {{unsubscribe}}-Tag im Footer verwendest.

Was ist der Unterschied zwischen Preheader und Preview-Text?

Preheader und Preview-Text bezeichnen dasselbe: den kurzen Text, der im Posteingang hinter der Betreffzeile erscheint, bevor die E-Mail geöffnet wird. Der Preheader ist der erste sichtbare Text im E-Mail-Body, der nicht Betreff ist. Wenn du ihn nicht explizit setzt, zieht der E-Mail-Client den ersten sichtbaren Text aus der E-Mail – oft einen Abmeldehinweis oder den Alt-Text des ersten Bildes. ActiveCampaign hat ein eigenes Preheader-Feld im Kampagnen-Editor, das du direkt ausfüllen kannst, ohne den HTML-Code anzufassen.

Wie viele Bilder sollte eine Marketing-E-Mail enthalten?

Eine Regel für die genaue Anzahl gibt es nicht, aber das Verhältnis von Bild zu Text spielt eine Rolle bei der Spam-Bewertung durch E-Mail-Provider. E-Mails, die fast nur aus einem einzigen großen Bild bestehen und kaum HTML-Text enthalten, werden von Spam-Filtern schlechter bewertet, weil Bild-Spam früher häufig so aufgebaut war. Ein ausgewogenes Verhältnis mit überwiegendem HTML-Text ist deshalb sinnvoll. Jedes Bild braucht einen sinnvollen Alt-Text; rein dekorative Bilder, die nichts zum Verständnis beitragen, kannst du auch weglassen.

Kann ich in ActiveCampaign E-Mails für Dark Mode optimieren?

Ja, mit Einschränkungen. Im Drag-and-Drop-Editor kannst du Hintergrundfarben und Textfarben auf Block-Ebene explizit setzen – das ist der einfachste Weg, Dark-Mode-Probleme zu vermeiden. Für fortgeschrittenes Styling mit prefers-color-scheme-Media-Queries musst du in den HTML-Editor wechseln und eigene Stile schreiben. Das erfordert E-Mail-HTML-Kenntnisse und regelmäßiges Testen in mehreren Clients, weil die Unterstützung von Media Queries je nach E-Mail-Programm stark variiert.

Wer das E-Mail-Design systematisch aufbauen und dabei auf ActiveCampaign setzen will, findet in unserem ActiveCampaign-Kurs eine Schritt-für-Schritt-Anleitung – von Template-Aufbau bis zu Automationen und Segmentierung.