Die Designerin verbrachte zwei Wochen damit, die E-Mail zu perfektionieren. Pixelgenaue Abstände, schöne Typografie, ein Hero-Bild, das sofort geladen wurde. Sie sah es sich in Chrome in der Vorschau an, nickte zustimmend und schickte es zur Freigabe an den CEO.
Der CEO öffnete sie in Outlook 2016. Das zweispaltige Layout war zu einer einzigen Spalte zusammengebrochen. Die benutzerdefinierte Schrift fiel auf Times New Roman zurück. Das Hero-Bild wurde standardmäßig blockiert und hinterließ einen defekten Platzhalter. Die sorgfältig ausgearbeitete E-Mail wirkte, als wäre sie von jemandem zusammengeschustert worden, der noch nie einen Computer gesehen hat.
Das ist das Grundproblem bei E-Mails: Es gibt keine standardisierte Rendering-Engine. Gmail verwendet seine eigene. Apple Mail nutzt WebKit. Outlook verwendet die Rendering-Engine von Microsoft Word (ja, das Textverarbeitungsprogramm). Jede interpretiert Ihr HTML anders und hat ihre eigenen Bugs und Einschränkungen.
Vorschau-Tools lösen das, indem sie Ihnen schon vor dem Versand genau zeigen, wie Ihre E-Mail in Dutzenden von Clients aussieht. Hier ist, was es gibt.
Die wichtigsten Anbieter
Litmus dominiert den Markt für E-Mail-Vorschauen aus gutem Grund. Laden Sie Ihr HTML hoch oder senden Sie eine Test-E-Mail, und innerhalb von Sekunden sehen Sie Screenshots aus über 90 E-Mail-Clients und Geräten. Die Oberfläche zeigt Vorschauen in einem Raster, sodass sich Probleme leicht scannen lassen. Klicken Sie auf eine Vorschau, um sie in voller Größe zu sehen, mit Tools zum Vergleich mit anderen Clients.
Über die Vorschauen hinaus analysiert Litmus Ihren Code auf häufige Probleme—fehlende Alt-Texte, defekte Links, Barrierefreiheitsprobleme, Spam-Trigger-Wörter. Das Builder-Tool ermöglicht es, HTML zu bearbeiten und Änderungen in Echtzeit in allen Vorschauen zu sehen. Das Analytics-Feature verfolgt nach dem Versand Öffnungen und Engagement.
Der Preis spiegelt den umfassenden Funktionsumfang wider. Pläne beginnen bei rund 99 $/Monat für Einzelpersonen und skalieren für Teams. Für Organisationen, die kritische E-Mails versenden, sind die Kosten durch verhinderte Pannen gerechtfertigt. Für gelegentliche Versender könnte es überdimensioniert sein.
Email on Acid bietet ähnliche Vorschau-Funktionen zu einem etwas niedrigeren Preis. Ihre Vorschau-Bibliothek deckt wichtige Clients auf Desktop, Mobil und Webmail ab. Die Oberfläche ist funktional, wenn auch nicht ganz so poliert wie bei Litmus. Ihre Differenzierung sind unbegrenzte Tests in höheren Tarifen—wenn Ihr Team Designs schnell iteriert, kann das unbegrenzte Modell wirtschaftlicher sein als eine Abrechnung pro Test.
Das Campaign Precheck-Feature läuft eine Checkliste zu Zustellbarkeitsfaktoren, Spam-Tests und Barrierefreiheitskonformität durch, bevor Sie eine Vorschau erstellen. Es ist ein nützlicher Mechanismus, um Probleme früh im Prozess zu entdecken.
Entwicklerorientierte Optionen
Mailtrap begann als SMTP-Testserver—ein Fake-Posteingang, der Test-E-Mails während der Entwicklung abfängt. Mittlerweile haben sie sich zu einer vollständigen E-Mail-Testplattform entwickelt, einschließlich HTML-Vorschauen über die wichtigsten Clients hinweg.
Die Email Sandbox bleibt ihre Kernstärke. Richten Sie die SMTP-Einstellungen Ihrer Entwicklungsumgebung auf Mailtrap aus, und alle ausgehenden E-Mails werden abgefangen statt zugestellt. Sie können HTML, Klartext, Header und Anhänge jeder E-Mail prüfen. Die Vorschau-Funktion zeigt, wie die E-Mail in verschiedenen Clients gerendert wird.
Die kostenlose Stufe ist großzügig—100 Test-E-Mails pro Monat mit grundlegenden Vorschauen. Bezahlte Stufen fügen mehr Volumen und erweiterte Funktionen hinzu. Für Entwickler, die sowohl eine Test-Sandbox als auch Vorschaufunktionen benötigen, ist der integrierte Ansatz bequem.
Parcel positioniert sich als Code-Editor für E-Mail, beinhaltet aber Vorschaufunktionen. Sie schreiben HTML (oder MJML) in ihrem Editor und sehen Live-Vorschauen, während Sie tippen. Das Vorschaufenster zeigt, wie Ihre E-Mail in ausgewählten Clients gerendert wird, und aktualisiert sich in Echtzeit, während Sie Änderungen vornehmen.
Die Kollaborationsfunktionen ermöglichen es Teams, gemeinsam an E-Mails zu arbeiten; der Versionsverlauf zeichnet Änderungen nach. Für Teams, die ernsthaft E-Mail-Entwicklung betreiben, reduziert der integrierte Bearbeitungs- und Vorschau-Workflow Kontextwechsel.
Preisgünstige Alternativen
Testi.at bietet E-Mail-Vorschauen für einen Bruchteil der Kosten von Litmus oder Email on Acid. Die Vorschau-Bibliothek ist kleiner—rund 30 Clients im Vergleich zu 90+—deckt aber die wichtigsten ab. Die Oberfläche ist unkompliziert: HTML hochladen, Screenshots erhalten.
Für Teams, die grundlegende Vorschaufunktionen ohne den vollen Funktionsumfang von Premium-Tools benötigen, trifft Testi.at ein vernünftiges Preis-Leistungs-Verhältnis. Vergewissern Sie sich nur, dass die für Sie relevanten Clients in deren Vorschau-Bibliothek enthalten sind, bevor Sie sich festlegen.
PutsMail von Litmus ist ein kostenloses Tool, um Test-E-Mails an sich selbst zu senden. Es ist nicht genau ein Vorschau-Tool—Sie müssen die E-Mail weiterhin in echten Clients öffnen—aber es ist nützlich für schnelle Tests. Geben Sie Ihr HTML ein, legen Sie Empfängeradressen fest, und es sendet die E-Mail. Sie können dann prüfen, wie sie in Ihren eigenen E-Mail-Clients dargestellt wird.
Die Einschränkung ist offensichtlich: Sie können nur Clients testen, auf die Sie Zugriff haben. Aber um die Darstellung in Gmail, Outlook und Apple Mail (die großen drei) zu verifizieren, ist es eine funktionierende, kostenlose Option.
Selbstgehostete Optionen
Für Organisationen mit strengen Datenanforderungen kann es inakzeptabel sein, E-Mail-HTML an Drittanbieter-Dienste zu senden. Es gibt selbstgehostete Alternativen, sie erfordern jedoch mehr Einrichtung.
Die Herausforderung beim Self-Hosting besteht darin, die Vorschau-Infrastruktur zu pflegen. E-Mail-Clients werden ständig aktualisiert, und eine Farm virtueller Maschinen mit verschiedenen Outlook-Versionen, Mobilgeräten und Webmail-Konten am Laufen zu halten, bedeutet erheblichen Betriebsaufwand. Die meisten Organisationen stellen fest, dass die Sicherheitsprüfung eines renommierten SaaS-Anbieters einfacher ist, als die eigene Vorschau-Infrastruktur zu betreiben.
Das heißt: Für grundlegende Tests können Sie virtuelle Maschinen mit verschiedenen Outlook-Versionen einrichten und BrowserStack oder ähnliche Dienste für Tests auf Mobilgeräten verwenden. Es ist manuell und zeitaufwendig, aber es funktioniert für Organisationen, die keine externen Dienste nutzen können.
Was Sie wirklich testen sollten
Vorschau-Tools zu haben ist das eine; zu wissen, worauf man achten muss, das andere.
Beginnen Sie mit den großen drei: Gmail (Web und Mobil), Outlook (2016, 2019 und 365) und Apple Mail. Diese decken die Mehrheit der geschäftlichen E-Mail-Nutzer ab. Wenn Ihre E-Mail in diesen gut aussieht, haben Sie die meisten Darstellungsprobleme im Griff.
Schenken Sie Outlook besondere Aufmerksamkeit. Die Word-basierte Rendering-Engine hat einzigartige Bugs, die sonst nirgends auftreten. Hintergrundbilder funktionieren oft nicht. Bestimmte CSS-Eigenschaften werden komplett ignoriert. Wenn etwas nur in Outlook kaputt aussieht, ist das normal—Sie brauchen Outlook-spezifische Fixes.
Prüfen Sie die mobile Darstellung sorgfältig. Mehr als die Hälfte aller E-Mails wird auf Mobilgeräten geöffnet, und eine für den Desktop optimierte E-Mail, die auf dem Handy unlesbar ist, ist eine fehlgeschlagene E-Mail. Stellen Sie sicher, dass Text groß genug zum Lesen ist, Buttons groß genug zum Tippen sind und das Layout sich sinnvoll an schmale Bildschirme anpasst.
Testen Sie den Dunkelmodus. Viele E-Mail-Clients bieten inzwischen einen Dunkelmodus, und sie gehen damit unterschiedlich um. Einige invertieren Farben automatisch, was Ihre sorgfältig gewählte Palette schrecklich aussehen lassen kann. Einige respektieren Ihre angegebenen Farben. Vorschau-Tools bieten zunehmend Dunkelmodus-Vorschauen—nutzen Sie sie.
Testen Sie schließlich mit deaktivierten Bildern. Viele E-Mail-Clients blockieren Bilder standardmäßig, besonders in Unternehmensumgebungen. Ihre E-Mail sollte auch dann verständlich sein, wenn Bilder nicht geladen werden. Alt-Text sollte Bedeutung transportieren, und das Layout sollte ohne Bilder nicht zusammenbrechen.
Frequently asked questions
Wie viele E-Mail-Clients muss ich wirklich testen?
Mindestens Gmail, Outlook und Apple Mail—sie decken die Mehrheit der Nutzer ab. Fügen Sie die mobilen Versionen jeweils hinzu. Wenn Sie Analysen dazu haben, welche Clients Ihre Zielgruppe nutzt, priorisieren Sie diese. Das Testen von 10–15 Clients fängt die meisten Probleme ab, ohne zu überfordern.
Warum sieht meine E-Mail in Outlook anders aus als überall sonst?
Outlook verwendet die Rendering-Engine von Microsoft Word statt einer Browser-Engine. Word wurde nie dafür entwickelt, HTML-E-Mails zu rendern, daher geht es mit CSS anders (oder gar nicht) um. Viele CSS-Eigenschaften, die überall sonst funktionieren, funktionieren in Outlook schlicht nicht. Deshalb verwendet HTML für E-Mails Tabellen für das Layout—das ist in Outlook die einzige verlässliche Methode.
Reichen kostenlose Vorschau-Tools aus?
Für gelegentliche E-Mails und grundlegende Tests kann die Kombination aus kostenlosen Tools wie PutsMail und manuellem Testen in Ihren eigenen Clients funktionieren. Für regelmäßige Kampagnen oder transaktionale E-Mails, die den Umsatz beeinflussen, bieten kostenpflichtige Tools umfassendere Abdeckung und fangen Probleme ab, die manuelles Testen übersieht.
Wie oft ändern E-Mail-Clients ihre Darstellung?
Häufiger, als Sie erwarten würden. Gmail aktualisiert seine Darstellung regelmäßig und zerstört dabei manchmal E-Mails, die zuvor funktioniert haben. Outlook aktualisiert sich mit Office-Releases. Mobile Clients aktualisieren sich mit OS-Versionen. Deshalb ist es wichtig, bestehende Vorlagen regelmäßig erneut zu testen—was vor sechs Monaten funktioniert hat, funktioniert heute vielleicht nicht mehr.