Zurück zu Wissen
Bevor du eine E-Mail-Kampagne sendest, teste sie mindestens in Outlook Desktop, Gmail im Browser, Apple Mail und einem Android-Client. Die Unterschiede im Rendering sind erheblich: Outlook verwendet Microsoft Word als HTML-Engine und ignoriert CSS-Eigenschaften, die in jedem Browser funktionieren. Eine visuelle Prüfung in der Vorschau deines Versandtools ersetzt keinen Test im echten Postfach.
Das Wichtigste in Kürze
- Outlook – in DACH-B2B-Umgebungen dominant – rendert HTML über die Word-Engine und ignoriert Hintergrundbilder, CSS-Floats und viele moderne Eigenschaften.
- Für verlässliche Tests brauchst du ein Tool wie Litmus oder Email on Acid, das über 100 Clients gleichzeitig simuliert.
- Dark Mode ist ein eigenständiger Testfall: Invertierte Farben können Text unlesbar machen oder Logos unsichtbar werden lassen.
- Die eingebaute Vorschau in ActiveCampaign zeigt grundlegende Layouts, ersetzt aber keine client-spezifischen Rendering-Tests.
- Eine feste Pre-Send-Checkliste reduziert Fehler: Rendering prüfen, dann Links, dann Personalisierungsfelder.
Warum derselbe HTML-Code in verschiedenen Clients unterschiedlich aussieht
Browser haben sich in den vergangenen zwanzig Jahren auf gemeinsame HTML- und CSS-Standards geeinigt. E-Mail-Clients nicht. Jeder Anbieter hat seine eigene Rendering-Engine entwickelt und selbst entschieden, welche CSS-Eigenschaften er unterstützt – und welche nicht. Das Ergebnis ist ein Flickenteppich aus inkonsistenten Darstellungen, der seit Jahrzehnten bestehen bleibt und sich durch neue Clients eher vergrößert als verkleinert.
Gmail entfernt <head>-Sektionen aus E-Mails, bevor es sie anzeigt – Styles, die du dort definierst, landen im Papierkorb. Web.de und GMX strippen CSS besonders aggressiv und fallen auf Inline-Styles zurück. Apple Mail hingegen unterstützt moderne CSS-Eigenschaften weitgehend, verhält sich bei Dark Mode aber eigenständig. Thunderbird, das in deutschen Behörden und Kanzleien noch weit verbreitet ist, folgt wieder anderen Regeln.
Das Kernproblem ist kein technisches Versagen, sondern ein historisches Erbe. E-Mail-Protokolle stammen aus den 1970ern, HTML-E-Mails aus den späten 1990ern. Die Clients wurden nie für das Rendering komplexer Layouts gebaut. Weil ältere Versionen weiter im Einsatz sind und Kompatibilität gewahrt bleiben muss, kann kein Anbieter seinen Standard einfach anpassen, ohne bestehende Nutzer zu verlieren.
Das Outlook-Problem: Warum die Word-Engine so viel kaputt macht
Microsoft hat die Desktop-Version von Outlook auf Microsoft Word als Rendering-Engine umgestellt. Diese Entscheidung ist für Outlook 2010, 2016, 2019, 2021 und die klassische Desktop-Variante von Outlook 365 bis heute gültig. Das bedeutet konkret: Diese CSS-Eigenschaften werden in diesen Versionen nicht oder nur unzuverlässig unterstützt:
- Hintergrundbilder per CSS (
background-image) werden ignoriert – nur VML-Fallbacks helfen - CSS Floats und Flexbox funktionieren nicht – Layouts müssen über verschachtelte Tabellen aufgebaut sein
- Benutzerdefinierte Web-Schriften per
@font-facewerden nicht geladen - Viele Margin- und Padding-Werte werden anders interpretiert als erwartet
- Animierte GIFs zeigen nur das erste Frame
Für DACH-Marketer mit B2B-Zielgruppe ist das besonders relevant: In deutschen, österreichischen und Schweizer Unternehmen ist Outlook das Standard-Mail-Programm. Wer hier schlechte Darstellung liefert, trifft einen Großteil der eigenen Empfänger in schlechtem Licht.
Die neue Outlook-Version für Windows, die schrittweise an Nutzer ausgerollt wird, verwendet dagegen eine Webkit-basierte Engine – ähnlich wie Browser. Sie stellt E-Mails deutlich besser dar, ist aber noch nicht flächendeckend im Einsatz. Du musst also beide Varianten in deinen Testpfad aufnehmen, bis die Migration abgeschlossen ist.
VML als Workaround für Outlook-Hintergrundbilder
Weil Outlook CSS-Hintergrundbilder ignoriert, kannst du auf VML (Vector Markup Language) ausweichen – eine ältere Microsoft-Spezifikation, die Outlook bis heute rendert. VML-Code wird in Conditional Comments eingebettet, die nur Outlook versteht, während alle anderen Clients sie ignorieren. Das ist wenig elegant, funktioniert aber zuverlässig für Hero-Banner und farbige Hintergründe. ActiveCampaigns Drag-and-Drop-Editor generiert in vielen Fällen automatisch VML-Fallbacks; ob das für dein konkretes Template gilt, zeigt dir ein Test in Litmus oder Email on Acid.
Welche Clients du für B2B-Kampagnen in DACH testen musst
Eine vollständige Abdeckung aller existierenden E-Mail-Clients ist nicht sinnvoll. Stattdessen priorisierst du nach deiner Zielgruppe. Für B2B-Kampagnen in DACH sind folgende Clients besonders relevant:
Client | Besonderheit | Priorität B2B |
|---|---|---|
Outlook Desktop (klassisch) | Word-Engine, CSS-Einschränkungen | Hoch |
New Outlook / Outlook 365 Web | Webkit-Engine, bessere CSS-Unterstützung | Hoch |
Gmail (Browser) | Entfernt <head>-Styles | Hoch |
Apple Mail (macOS) | Gute CSS-Unterstützung, Dark Mode aktiv | Mittel |
Gmail App (iOS und Android) | Unterschiedliches Verhalten nach OS | Mittel |
Web.de und GMX | Aggressives CSS-Stripping | Hoch für B2C, mittel für B2B |
Thunderbird | In Behörden und Kanzleien verbreitet | Situationsabhängig |
Du musst nicht alle Clients bei jeder Kampagne manuell prüfen. Definiere einmalig einen Testpfad für deine wichtigsten fünf Clients und führe ihn bei jeder neuen Kampagne durch. Tools wie Litmus oder Email on Acid zeigen dir alle auf einmal, was die manuelle Arbeit auf Ausnahmen reduziert.
Inbox-Testing-Tools: Womit du arbeitest
Die Kernfunktion jedes Inbox-Testing-Tools ist dieselbe: Du lädst deine E-Mail hoch oder sendest sie an eine Testadresse, und das Tool simuliert das Rendering in dutzenden Clients innerhalb von Sekunden. Die Unterschiede liegen in der Tiefe der Analyse, der Integration mit deinem Versandtool und den zusätzlichen Funktionen.
Tool | Stärke | Schwäche | ActiveCampaign-Integration |
|---|---|---|---|
Litmus | Über 100 Clients, Engagement-Tracking, gute DACH-Abdeckung | Teuer im Einstiegspreis | Ja, nativ |
Email on Acid | Starke Troubleshooting-Features, umfassende Checklisten | Oberfläche weniger intuitiv | Ja |
Mailtrap | SMTP-Testing, gut für transaktionale Mails | Weniger geeignet für Marketing-Kampagnen | Indirekt |
Mail-Tester.com | Kostenloser Spam-Score-Check | Kein Rendering-Test | Nein |
ActiveCampaign Vorschau | Sofort verfügbar, kein Extra-Tool nötig | Nur simulierte, keine echten Rendering-Tests | Eingebaut |
Für Teams, die regelmäßig Kampagnen versenden, zahlt sich Litmus oder Email on Acid aus. Die Zeitersparnis gegenüber manuellen Tests und die Sicherheit, keine Rendering-Fehler zu übersehen, wiegen den Preis auf. Für einzelne oder seltene Versendungen eignen sich auch Testversionen oder günstigere Einstiegspakete beider Tools.
So richtest du einen Testing-Workflow in ActiveCampaign ein
Ein konsistenter Testing-Prozess verhindert, dass du bei Zeitdruck Schritte überspringst. Dieser Ablauf funktioniert für einzelne Kampagnen ebenso wie für automatisierte E-Mails.
- Template fertigstellen in ActiveCampaign. Inhalt, Links und Personalisierungsfelder vollständig befüllen, bevor du mit dem Testing anfängst. Halb leere Vorlagen erzeugen halb leere Testergebnisse.
- Spam-Score prüfen. Sende die E-Mail an Mail-Tester.com oder nutze den eingebauten Spam-Check in Litmus. Betreffzeile und Inhalte auf Spam-Trigger-Wörter prüfen.
- Rendering in Litmus oder Email on Acid testen. Nutze die ActiveCampaign-Integration, um die aktuelle Version direkt an das Tool zu übergeben, ohne sie exportieren zu müssen. Prüfe mindestens: Outlook Desktop klassisch, Outlook 365 Web, Gmail im Browser, Apple Mail, Gmail App auf iOS und Web.de.
- Dark Mode gesondert prüfen. Schalte in der Tool-Vorschau explizit auf Dark Mode um. Prüfe, ob Text lesbar bleibt, Logos sichtbar sind und Buttons erkennbar bleiben.
- Alle Links einzeln klicken. Testversand an eine eigene Adresse, dann jeden Link manuell klicken. UTM-Parameter auf Vollständigkeit prüfen.
- Personalisierungsfelder validieren. Prüfe, ob alle Merge-Tags in ActiveCampaign korrekt aufgelöst werden. Falls ein Fallback-Wert fehlt, erscheint ein leerer String im Postfach des Empfängers.
- Abmeldelink und Pflichtangaben kontrollieren. DSGVO-konformer Abmeldelink vorhanden, Impressum erreichbar, Absenderadresse und -name korrekt eingetragen.
- Finale Test-E-Mail an eigenes Postfach senden. Auf Smartphone und Desktop öffnen – nicht nur im Desktop-Client.
Dokumentiere diesen Ablauf einmalig für dein Team, zum Beispiel als Checkliste in eurem Projektmanagement-Tool. Das reduziert die Abhängigkeit davon, dass alle Beteiligten dieselben Schritte im Kopf haben, und verhindert, dass beim nächsten Zeitdruck Schritte wegfallen.
Typische Darstellungsfehler und wie du sie behebst
Die meisten Rendering-Probleme in E-Mail-Projekten folgen bekannten Mustern. Wer diese kennt, kann sie gezielt testen statt blind suchen.
Hintergrundbilder verschwinden in Outlook
Ursache ist die Word-Engine, die background-image in CSS ignoriert. Die Lösung: VML-Code in Conditional Comments, kombiniert mit einer Fallback-Hintergrundfarbe für alle anderen Clients. Litmus zeigt dir mit einem Klick, ob dein Template in Outlook einen leeren weißen Bereich anzeigt, wo eigentlich ein Hero-Bild sein sollte.
Buttons werden in bestimmten Clients nicht angezeigt
Wenn Buttons rein über CSS-Klassen gestaltet sind, fehlen sie in Clients, die externe Styles entfernen. Der robustere Ansatz: Buttons als verschachtelte Tabellenstruktur mit Inline-Styles aufbauen. Dieses Prinzip – oft als Bulletproof Button bezeichnet – kombiniert HTML-Code für alle Clients mit VML-Code für Outlook.
Schriftarten fallen auf System-Defaults zurück
Web-Schriften per @font-face werden in Outlook und vielen anderen Clients nicht geladen. Definiere immer einen Fallback-Stack: zuerst die gewünschte Web-Font, dann eine systemnahe Alternative wie Arial, Georgia oder Times New Roman, die auf jedem Gerät vorhanden ist. So bleibt das Layout stabil, auch wenn deine Wunsch-Schrift nicht geladen wird.
Touch-Targets zu klein auf Mobilgeräten
Buttons und Links, die auf dem Desktop gut bedienbar sind, können auf Touchscreens frustrierend klein wirken. Empfohlene Mindestgröße für interaktive Elemente: 44 × 44 Pixel. Prüfe das im Mobile-Rendering deines Testing-Tools und ergänzend auf einem echten Smartphone mit echter Daumen-Bedienung.
Bilder werden standardmäßig blockiert
Viele Outlook-Installationen und einige Web-Clients blockieren Bilder beim ersten Öffnen. Alt-Texte für alle Bilder sind deshalb keine optionale Ergänzung – sie sind der Text, den viele Empfänger beim ersten Blick sehen. Formuliere Alt-Texte so, dass sie den Inhalt beschreiben, nicht nur "Bild" oder den Dateinamen wiederholen.
Dark Mode: Der am häufigsten vergessene Testfall
Dark Mode ist in Apple Mail, der Gmail App und zahlreichen anderen mobilen Clients aktiv – und betrifft einen wachsenden Anteil deiner Empfänger. Das Problem: E-Mail-Clients implementieren Dark Mode auf drei unterschiedliche Arten, ohne sich auf einen gemeinsamen Standard geeinigt zu haben.
- Partielle Umkehrung: Der Client ändert nur den Hintergrund auf dunkel, lässt Bilder und Farben unverändert. Das kann zu schwarzem Text auf dunklem Hintergrund führen – unlesbar.
- Vollständige Umkehrung: Alle Farben werden invertiert – helle Logos werden dunkel, dunkle Texte werden hell. Ein weißes Logo auf transparentem Hintergrund verschwindet dann auf schwarzem Grund.
- CSS-basierte Dark-Mode-Unterstützung: Der Client erkennt
@media (prefers-color-scheme: dark)und wendet deine eigenen Dark-Mode-Styles an, sofern du sie definiert hast.
Die einfachste Schutzmaßnahme: Verwende PNG-Logos mit transparentem Hintergrund statt JPEG, und teste Dark Mode in Litmus oder Email on Acid explizit. Apple Mail und die Gmail App auf iOS sind die wichtigsten Clients, die du für Dark Mode im Blick haben musst. Wer Dark Mode einmal sauber durchdenkt und das Template entsprechend aufbaut, muss bei späteren Kampagnen nur noch validieren statt neu entwickeln.
Häufige Fragen
Reicht es, die Vorschau-Funktion in ActiveCampaign zu nutzen?
Die Vorschau in ActiveCampaign zeigt grundlegende Layout-Unterschiede zwischen Mobile und Desktop, simuliert aber nicht das echte Rendering einzelner Clients. Outlook, Gmail und Apple Mail verhalten sich im Detail anders als die Vorschau anzeigt. Für Kampagnen mit größeren Listen ist ein Test in Litmus oder Email on Acid vor dem Versand sinnvoll – die Vorschau bleibt als schneller erster Check nützlich, ersetzt aber den Rendering-Test nicht.
Wie viele Clients muss ich mindestens testen?
Für B2B-Kampagnen in DACH decken fünf Clients die wichtigsten Rendering-Engines ab: Outlook Desktop klassisch, Outlook 365 Web, Gmail im Browser, Apple Mail und Gmail App auf iOS. Damit triffst du die Varianten, die in deiner Zielgruppe mit hoher Wahrscheinlichkeit vorkommen. B2C-Kampagnen an Verbraucher in Deutschland sollten Web.de und GMX höher gewichten.
Muss ich bei jeder Kampagne einen vollständigen Rendering-Test durchführen?
Wenn du ein bestehendes, bereits getestetes Template verwendest und nur Inhalt und Links austauschst, reicht ein Quick-Check der Links und Personalisierungsfelder. Sobald du das Template-Layout änderst, neue Elemente hinzufügst oder ActiveCampaign ein Update an seiner Rendering-Logik vornimmt, ist ein vollständiger Test fällig. Neue Templates werden immer vollständig getestet.
Was ist der Unterschied zwischen Spam-Test und Inbox-Test?
Ein Spam-Test prüft, ob deine E-Mail von Spamfiltern als unerwünscht eingestuft wird – er analysiert Betreffzeilen, Absender-Reputation, Textinhalt und technische Header wie SPF und DKIM. Ein Inbox-Test prüft, wie die E-Mail im Postfach dargestellt wird, sobald sie angekommen ist. Beides ist notwendig, adressiert aber unterschiedliche Probleme und wird mit unterschiedlichen Tools durchgeführt.
Wie erkenne ich, welche Clients meine Empfänger tatsächlich nutzen?
Schau dir die Öffnungsstatistiken deiner letzten Kampagnen in ActiveCampaign an. Unter Berichte siehst du, welche E-Mail-Clients tatsächlich genutzt werden. Clients mit einem sehr kleinen Anteil kannst du niedriger priorisieren und nur prüfen, wenn du konkrete Hinweise auf Darstellungsprobleme bekommst. Das Ergebnis ist ein Testpfad, der zu deiner realen Zielgruppe passt – nicht zu einer allgemeinen Statistik.
Wer einen verlässlichen Testprozess einmal etabliert hat, braucht ihn bei jeder weiteren Kampagne nur noch abzuarbeiten statt neu zu denken. Der Aufwand liegt einmalig im Aufbau: Template testen, Workflow dokumentieren, Checkliste für das Team bereitstellen. Wer dabei Unterstützung bei der technischen Einrichtung in ActiveCampaign sucht, findet bei Advertal als offizieller ActiveCampaign-Partner einen qualifizierten Ansprechpartner.
