In Vorschau anzeigen und optimieren, wie Ihre E-Mail-Designs im Dunkelmodus angezeigt werden
Zuletzt aktualisiert am: Februar 3, 2025
Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):
|
Ehemaliges Marketing Hub Basic |
Viele E-Mail-Clients haben eine Einstellung für Dunkelmodus, aufgrund derer Ihre Marketing-E-Mails in Clients, bei denen ein helleres Erscheinungsbild aktiviert ist, uneinheitlich angezeigt werden.
Vorschau im Dunkelmodus im E-Mail-Editor umschalten
So wechseln Sie während des Entwurfs Ihrer E-Mail in den Dunkelmodus:
- Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
- Klicken Sie auf den Namen eines E-Mail-Entwurfs.
- Klicken Sie oben im E-Mail-Editor auf Anzeigeoptionen und aktivieren Sie dann den Schalter Vorschau für den Dunkelmodus.
Vorschau Ihrer E-Mail im Dunkelmodus bestimmter Clients anzeigen
So zeigen Sie an, wie Ihre E-Mail aussieht, wenn ein Kontakt sie in einem Browser oder Client mit aktivierten Dunkelmodus öffnet:
- Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
- Klicken Sie auf den Namen eines vorhandenen E-Mail-Entwurfs.
- Klicken Sie oben rechts im E-Mail-Editor auf Vorschau und dann auf Posteingangsvorschau.
- Klicken Sie oben im Vorschau-Bildschirm auf „Clients“.
- Aktivieren Sie unter „Dunkelmodus“ das Kontrollkästchen neben allen Clients, für die Sie eine Vorschau anzeigen möchten.
- Klicken Sie oben rechts auf Meine E-Mail jetzt testen.
Best Practices beim Entwerfen von E-Mails für den Dunkelmodus
Wenn Sie eine Vorschau Ihrer E-Mail mit verschiedenen Dunkelmodus-Clients anzeigen, achten Sie darauf, dass jeder Kunde Ihre E-Mail anders darstellen kann. Wenn Ihre Kontakte beispielsweise Ihre E-Mail mit Apple Mail öffnen, wird sie immer genau gleich angezeigt, egal, ob sie den Dunkelmodus aktiviert haben oder nicht. Wenn ein Kontakt den Dunkelmodus in Apps wie Gmail oder Outlook in Windows zulässt, kann es zu größeren Schwankungen bei Ihren E-Mail-Stilen kommen, z. B. invertierte Hintergrundfarben.
Um zu bestätigen, dass Ihre E-Mail-Stile bei allen Clients einheitlich angezeigt werden, überprüfen Sie die folgenden Tipps:
Bilder verwenden, die sowohl bei hellen als auch dunklen Hintergründen deutlich angezeigt werden
Wandeln Sie Ihre Bilder in PNG-Dateien um, bevor Sie Bilder hochladen und zu Ihren E-Mails hinzufügen. Dadurch wird sichergestellt, dass sie in E-Mail-Clients dargestellt werden, die automatisch die Hintergrundfarbe von E-Mails im Dunkelmodus invertieren. Wenn Ihr Bild Text enthält, z. B. ein Logo, können Sie auch eine durchsichtige Kontur um den Text hinzufügen, um ihn abzuheben.
Farben für barrierefreie Webinhalte verwenden
Ihre E-Mail-Inhalte möglichst barrierefrei zu gestalten ist wichtig, unabhängig vom E-Mail-Client, den Ihr Empfänger verwendet. Wenn Sie Standards bezüglich der Barrierefreiheit beachten, z. B. einen deutlichen Farbkontrast bei Ihrem Text, können Sie auch einfacher sicherstellen, dass Ihre E-Mails korrekt im Dunkelmodus angezeigt werden. Erfahren Sie mehr über Farben für barrierefreie Webinhalte im HubSpot-Blog.
Medienabfrage für Dunkelmodus-Stil in iOS angeben
Mehrere E-Mail-Clients, einschließlich Apple Mail und Outlook.com, bieten beschränkten Support für das Erkennen und Hinzufügen von benutzerdefinierten Stilen über eine Medienabfrage. Wenn Sie den aktualisierten klassischen E-Mail-Editor verwenden und über Entwicklerressourcen verfügen, um CSS-Änderungen an Ihren E-Mails vorzunehmen, können Sie eine Medienabfrage mit der Funktion prefers-color-scheme
media hinzufügen, um zu konfigurieren, wie Bilder und Text im dunklen und hellen Modus aussehen sollen