In Vorschau anzeigen und optimieren, wie Ihre E-Mail-Designs im Dunkelmodus angezeigt werden
Zuletzt aktualisiert am: Juni 25, 2024
Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):
Marketing Hub Professional , Enterprise |
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 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:
- Navigieren Sie in Ihrem HubSpot Account zu Marketing > Marketing-E-Mails.
- 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