In Vorschau anzeigen und optimieren, wie Ihre E-Mail-Designs im Dunkelmodus angezeigt werden

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:

• 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 das Dropdown-Menü „Aktionen“ und klicken Sie dann auf „Vorschau“.
• 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 für CSS-Änderungen an Ihren E-Mails verfügen, können Sie eine Medienabfrage mit dem prefers-color-scheme-Media Feature hinzufügen, um zu konfigurieren, wie Bilder und Text im Dunkelmodus und Hellmodus angezeigt werden.