Bewährte Verfahren für die Gestaltung von E-Mails für den Dark Mode

Als jemand, der viel Zeit mit der Erstellung ansprechender E-Mail-Kampagnen verbracht hat, habe ich eine deutliche Verschiebung der Benutzerpräferenzen hin zum Dark Mode festgestellt.

Diese Veränderung hat mich veranlasst, meine Designstrategien zu überdenken, um sicherzustellen, dass E-Mails unabhängig von den Anzeigeeinstellungen klar und ansprechend bleiben.

Durch Versuch und Irrtum habe ich mehrere Techniken entdeckt, die helfen, die Lesbarkeit und Markenkonsistenz zu erhalten, insbesondere für E-Mails im Dark Mode.

In diesem Leitfaden teile ich diese Erkenntnisse, um Ihnen bei der Optimierung Ihrer E-Mails für den Dark Mode zu helfen und das Erlebnis für alle Ihre Abonnenten zu verbessern.

Den Dunkelmodus in E-Mails verstehen

Der Dunkelmodus ist eine Anzeigeeinstellung, die helle, lichtfarbene Hintergründe durch dunklere ersetzt, Blendung reduziert und Bildschirme schont, insbesondere in Umgebungen mit wenig Licht.

Viele Benutzer bevorzugen diesen Modus, da er auch hilft, die Akkulaufzeit bei Geräten mit OLED-Bildschirmen zu verlängern. Aber es geht nicht nur darum, Farben zu ändern. Der Dunkelmodus modifiziert oft auch andere Elemente.

Für E-Mail-Marketer bedeutet dies eine zusätzliche Komplexität, da Designelemente nahtlos an helle und dunkle Einstellungen angepasst werden müssen.

Verbreitung der Nutzung des Dunkelmodus

Der Dunkelmodus ist immer beliebter geworden, da immer mehr Benutzer ihn auf Apps und Geräten verwenden. Eine Umfrage von Android Authority aus dem Jahr 2020 ergab, dass 81,9 % ihrer Leser den Dunkelmodus auf ihren Handys nutzen. Hier sind einige Gründe, warum der Dunkelmodus an Bedeutung gewinnt:

• Reduzierte Augenbelastung: Der Dunkelmodus erleichtert die Anzeige von E-Mails bei schlechten Lichtverhältnissen, indem helle Hintergründe durch dunklere ersetzt werden. Dies reduziert Blendung und sorgt für ein angenehmeres Leseerlebnis.
• Energieeffizient: Der Dunkelmodus verbraucht auf Geräten mit OLED- oder AMOLED-Bildschirmen weniger Strom und verlängert die Akkulaufzeit erheblich. Dies ist besonders nützlich für Benutzer, die viel Zeit mit dem Lesen von E-Mails auf Mobilgeräten verbringen.
• Verbesserte Lesbarkeit: Der Dunkelmodus minimiert Blendung und optimiert den Textkontrast, sodass Benutzer E-Mails auch bei schwachem Licht leichter lesen können. Er stellt auch sicher, dass wichtige Nachrichten immer klar und lesbar sind.
• Modernes Erscheinungsbild: Viele Benutzer finden die dunklere Ästhetik optisch ansprechend und ehrlich gesagt sehr cool. Sie verleiht E-Mail-Designs ein professionelles, poliertes Gefühl und hilft Unternehmen, mit aktuellen Trends Schritt zu halten.
• Barrierefreiheitsfreundlich: Der Dunkelmodus kann Benutzer mit Lichtempfindlichkeit oder Sehbehinderungen durch ein benutzerfreundlicheres Erlebnis unterstützen. Er stellt sicher, dass Ihre E-Mails inklusiv und für alle Empfänger zugänglich sind.

Da immer mehr Menschen den Dunkelmodus als Standard wählen, kann die Erfüllung dieser Nachfrage das E-Mail-Engagement verbessern. Gut gestaltete Kampagnen in beiden Modi schaffen Vertrauen bei Ihrem Publikum.

Beheben Sie jetzt Ihre WordPress-E-Mails

Variationen zwischen E-Mail-Clients

Nicht alle E-Mail-Clients verarbeiten den Dunkelmodus auf die gleiche Weise. Einige invertieren Farben vollständig, andere nehmen teilweise Anpassungen vor, und einige ignorieren den Dunkelmodus ganz.

Hier ist ein schneller Vergleich, wie gängige E-Mail-Clients auf den Dunkelmodus reagieren:

E-Mail-Client	Verhalten im Dunkelmodus	Unterstützung von Media Queries	Hintergrundanpassung	Besondere Hinweise
Apple Mail (macOS)	Keine Änderung für die meisten Farben	Unterstützt	✓ Für reines Weiß angepasst	Reine weiße Hintergründe (#ffffff) können automatisch invertiert werden.
iPhone / iPad (iOS)	Minimale Änderungen, leichte Anpassungen	Unterstützt	✓ Für reines Weiß angepasst	Einige weiße Hintergründe werden je nach <meta>-Tag invertiert.
Gmail App (iOS)	Teilweise Invertierung angewendet	✘ Nicht unterstützt	✓ Eingeschränkte Unterstützung	Schriftfarben können sich leicht an dunklere Hintergründe anpassen.
Gmail App (Android)	Teilweise Invertierung angewendet	✘ Nicht unterstützt	✓ Eingeschränkte Unterstützung	Hellere Hintergründe werden automatisch dunkler.
Outlook.com (Web)	Teilweise Invertierung für helle Farben	✘ Nicht unterstützt	✘ Keine Anpassung	Verlinkte Bilder können Helligkeitsanpassungen erfahren.
Outlook 2021 (Windows)	Vollständige Invertierung angewendet	✘ Nicht unterstützt	✘ Keine Anpassung	Der Dunkelmodus kann VML-Designelemente beeinflussen.
Outlook App (iOS)	Teilweise Invertierung für Hintergründe	✘ Nicht unterstützt	✘ Keine Anpassung	Textfarben auf dunklen Hintergründen können ebenfalls invertiert werden.
Outlook App (Android)	Teilweise Invertierung für Hintergründe	✘ Nicht unterstützt	✘ Keine Anpassung	Verlinkte Bilder passen sich einer leicht dunkleren Farbpalette an.
Office 365 (Windows)	Vollständige Invertierung angewendet	✘ Nicht unterstützt	✘ Keine Anpassung	Keine spezifische Zielgruppenansprache für die Anpassung verfügbar.
Office 365 (macOS)	Teilweise Invertierung für helle Farben	✘ Teilweise Unterstützung	✓ Für reines Weiß angepasst	Helle Hintergründe wurden leicht abgedunkelt.
Windows Mail	Vollständige Invertierung angewendet	✘ Nicht unterstützt	✘ Keine Anpassung	Einheitliche Invertierung betrifft alle Farben und Elemente.

Methoden zur gezielten Ansprache im Dunkelmodus

Wie bereits erwähnt, gehen E-Mail-Clients auf unterschiedliche Weise mit dem Dunkelmodus um und wenden oft ihre eigenen Farbanpassungen auf Ihre E-Mail-Designs an. Wenn Sie jedoch die Kontrolle übernehmen und sicherstellen möchten, dass Ihre E-Mails im Dunkelmodus so aussehen, wie Sie es beabsichtigen, können Sie benutzerdefinierte Stile anwenden.

@media (prefers-color-scheme: dark)

Die Abfrage @media (prefers-color-scheme: dark) ist eine der zuverlässigsten Methoden, um den Dunkelmodus anzusprechen. Diese Methode ermöglicht es Ihnen, spezifische CSS-Regeln für Benutzer des Dunkelmodus zu definieren. Viele E-Mail-Clients und Browser, die den Dunkelmodus unterstützen, verwenden diese Abfrage, um Benutzereinstellungen zu erkennen.

Sie können beispielsweise alternative Hintergrundfarben, Schriftfarben oder Rahmen speziell für den Dunkelmodus erstellen. So könnte es in der Praxis aussehen:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
  a {
    color: #4d9efd;
  }
}

[data-ogsc]/[data-ogsb]

Für E-Mail-Clients wie Outlook beinhaltet die Ansprache des Dunkelmodus die Verwendung von Attributselektoren wie [data-ogsc] oder [data-ogsb]. Diese Selektoren helfen, Stile für E-Mails zu ändern, die der Client teilweise oder vollständig invertiert.

• [data-ogsc]: Zielt auf Elemente ab, die der Dunkelmodus von Outlook teilweise anpasst, wie z. B. helle Hintergründe oder bestimmte Schriftfarben.
• [data-ogsb]: Konzentriert sich auf Elemente, die von der automatischen Invertierung nicht betroffen sind, aber dennoch im Dunkelmodus gerendert werden.

Hier ist ein Beispiel dafür, wie diese Selektoren angewendet werden können:

[data-ogsc] {
  background-color: #222222 !important;
  color: #e0e0e0 !important;
}

[data-ogsb] {
  background-color: #ffffff !important;
  color: #333333 !important;
}

Herausforderungen beim Design von E-Mails für den Dunkelmodus

Das Design von E-Mails für den Dunkelmodus birgt eine Reihe einzigartiger Herausforderungen, die sich darauf auswirken können, wie Ihre Nachricht aussieht und funktioniert. Nachfolgend finden Sie einige häufige Hindernisse und wie sie das E-Mail-Design beeinflussen.

Probleme mit der Farb-Invertierung

Eines der größten Hindernisse beim Design für den Dunkelmodus ist die automatische Farb-Invertierung durch E-Mail-Clients. Beispielsweise kann ein dunkler Hintergrund hell werden und hellfarbiger Text dunkel werden.

Auch wenn dies hilfreich erscheint, kann es zu unbeabsichtigten Kontrasten führen, die den Text schwer lesbar machen oder mit anderen Designelementen kollidieren. Dies ist besonders knifflig für E-Mails, die für Klarheit und Wirkung auf bestimmte Farbkombinationen angewiesen sind.

Probleme bei der Bilddarstellung

Bilder, insbesondere Logos oder Grafiken mit transparenten Hintergründen, können sich im Dunkelmodus unvorhersehbar verhalten. Zum Beispiel kann ein Logo mit dunklem Text, das für den Dunkelmodus entworfen wurde, mit dem Hintergrund verschmelzen, wenn es invertiert wird oder unverändert bleibt.

Ebenso können Verläufe oder Schatten verzerrt erscheinen. Daher ist es unerlässlich, Bilder gründlich zu testen und das Hinzufügen von kontrastierenden Umrissen oder alternativen Versionen, die für den Dunkelmodus optimiert sind, in Betracht zu ziehen.

Bewährte Praktiken für das E-Mail-Design im Dunkelmodus

Da der Dunkelmodus immer beliebter wird, ist es heute eine entscheidende Überlegung, sicherzustellen, dass Ihre E-Mail-Designs sowohl im hellen als auch im dunklen Modus gut aussehen. Lassen Sie uns untersuchen, wie Sie Ihre E-Mail-Visuals optimieren können, um sicherzustellen, dass sie in allen Ansichtseinstellungen glänzen.

1. Verwenden Sie transparente Bilder mit angemessenem Kontrast

Beim Design von E-Mails für den Dunkelmodus können Ihre Bilder die visuelle Erfahrung entscheidend beeinflussen. Eine einfache, aber effektive Strategie ist die Verwendung von Bildern mit transparenten Hintergründen.

Transparente Bilder ermöglichen es Ihrem Design, sich nahtlos in verschiedene Farbschemata einzufügen. Aber Transparenz allein reicht nicht aus. Sie müssen auch sicherstellen, dass Ihre Bilder genügend Kontrast aufweisen, um hervorzustechen.

Zum Beispiel sehen hell gefärbte Logos oder Grafiken im Standardmodus vielleicht großartig aus, verschwinden aber möglicherweise vor dunklen Hintergründen. Ähnlich können dunkel gefärbte Bilder in helleren Designs untergehen.

2. Vermeiden Sie fest codierte Hintergrundfarben

Bei der Gestaltung von E-Mails für den Dunkelmodus ist ein häufiger Fehler die Verwendung fester Hintergrundfarben, die sich nicht an die Präferenzen des Benutzers anpassen.

Fest codierte Farben können unschöne Kontraste erzeugen oder Text unleserlich machen, wenn sie mit den dunklen oder hellen Einstellungen auf dem Gerät eines Benutzers kollidieren.

Um diese Probleme zu vermeiden, ist es besser, anpassungsfähige Hintergrundfarben zu verwenden. Dieser Ansatz ermöglicht es Ihrer E-Mail, sich nahtlos anzupassen und sicherzustellen, dass das Design poliert aussieht, egal ob es im Dunkel- oder Standardmodus angezeigt wird.

3. Stellen Sie alternative Logos und Bilder bereit

Der Dunkelmodus verschiebt oft Farben und Kontraste, was dazu führen kann, dass bestimmte Logos oder Bilder im Hintergrund verschwinden oder völlig fehl am Platz wirken.

Wenn Ihr Logo auf dunklen Tönen oder transparenten Hintergründen basiert, kann seine Sichtbarkeit im Dunkelmodus verloren gehen. Eine Lösung hierfür ist die Erstellung alternativer Versionen Ihrer Logos und wichtigen Bilder, die speziell für den Dunkelmodus optimiert sind.

Diese Variationen können hellere Farben, zusätzliche Umrisse oder subtile Schatten enthalten, um sie hervorzuheben. Dieser zusätzliche Schritt hilft, die Konsistenz Ihrer Marke in jedem Szenario zu stärken.

Wenn Sie einen Formular-Builder wie WPForms verwenden und E-Mail-Benachrichtigungen gestalten, werden Sie sich freuen zu hören, dass das Plugin Ihnen anbietet, sowohl helle als auch dunkle Versionen Ihrer Logos hochzuladen.

4. Wählen Sie Textfarben sorgfältig aus

Die Auswahl der richtigen Textfarben ist entscheidend für die Lesbarkeit. Während der Dunkelmodus schwarzen Text automatisch in weißen umwandelt, werden andere Textfarben wie Überschriften oder Links möglicherweise nicht wie erwartet angepasst.

Testen Sie Ihre E-Mail immer, um zu überprüfen, wie Ihr Text in hellen und dunklen Modi erscheint. Einige Farben, die in einem Modus hervorstechen, können im anderen schwer zu lesen sein.

Unabhängig davon, welche Farben Sie wählen, stellen Sie sicher, dass Ihr Text einen ausreichenden Kontrast zum Hintergrund aufweist. Dies dient nicht nur der Optik, sondern stellt sicher, dass Ihre Nachricht für alle gut lesbar ist.

5. Testen Sie E-Mails auf mehreren Clients und Geräten

Das Testen Ihrer E-Mails auf verschiedenen E-Mail-Clients und Geräten ist entscheidend, um sicherzustellen, dass sie für alle Empfänger gut aussehen und wie vorgesehen funktionieren. Der Dunkelmodus kann je nach Plattform unterschiedlich funktionieren, sodass das, was auf einem Gerät funktioniert, möglicherweise nicht perfekt auf ein anderes übertragen wird.

Es gibt verschiedene Tools, die Ihnen helfen zu überprüfen, wie Ihre E-Mails im Dunkelmodus aussehen. Diese Plattformen ermöglichen es Ihnen, Ihre E-Mails auf einer Vielzahl von E-Mail-Clients und Geräten in der Vorschau anzuzeigen:

• Litmus: Bietet detaillierte Vorschauen für verschiedene E-Mail-Clients, einschließlich der Darstellung von E-Mails im Dunkelmodus.
• Email on Acid: Bietet Testoptionen für den Dunkelmodus und hebt potenzielle Designprobleme hervor.
• GlockApps: Konzentriert sich auf die Zustellbarkeit von E-Mails, enthält aber auch Rendering-Vorschauen im hellen und dunklen Modus.
• Mailtrap: Simuliert E-Mail-Designs und zeigt, wie sie auf verschiedenen Geräten und Apps aussehen.

Sobald Ihre E-Mails live sind, können Rückmeldungen von Empfängern helfen, Ihre Designs zu verfeinern. Fragen Sie die Benutzer, ob sie Probleme mit der Lesbarkeit oder visuelle Inkonsistenzen im Dunkelmodus haben.

FAQs – Best Practices für das Design von E-Mails für den Dunkelmodus

Das Design von E-Mails für den Dunkelmodus ist ein beliebtes Thema, das unsere Leser interessiert. Hier sind Antworten auf einige häufig gestellte Fragen dazu:

Wie mache ich meine E-Mail im Dunkelmodus?

Die meisten E-Mail-Marketingdienste bieten die Möglichkeit, Ihr E-Mail-Design in den Dunkelmodus zu ändern. Denken Sie daran, dass Sie neutrale Hintergrundfarben verwenden und hartcodierte weiße oder schwarze Elemente vermeiden müssen, um Ihre E-Mail mit dem Dunkelmodus kompatibel zu machen.

Wie wirkt sich der Dunkelmodus auf E-Mails aus?

Der Dunkelmodus ändert die Hintergrund- und Textfarben in dunklere Töne, was die Lesbarkeit von E-Mails mit hellen Designs oder Bildern beeinträchtigen kann.

Automatisch invertierte Farben sehen möglicherweise nicht immer wie gewünscht aus, daher sind Tests und Anpassungen erforderlich, um die Konsistenz zu gewährleisten.

Wie passe ich mein E-Mail-Design an?

Das Anpassen eines E-Mail-Designs umfasst die Einrichtung geeigneter Farbschemata, die Gewährleistung ausreichender Kontraste zwischen Text und Hintergrund sowie die Verwendung transparenter Bilder zur Anpassung an verschiedene Modi.

Testen Sie Ihr Design in verschiedenen E-Mail-Clients, um die Kompatibilität mit dunklen und hellen Modi zu überprüfen.

Wie viele Leute nutzen den Dunkelmodus für E-Mails?

Studien zeigen, dass ein erheblicher Prozentsatz der Benutzer den Dunkelmodus für E-Mails bevorzugt, wobei die Nutzungsraten je nach Plattform zwischen 30 % und 50 % variieren.

Dieser Trend unterstreicht die Notwendigkeit von E-Mail-Designs, die sowohl im hellen als auch im dunklen Modus gut funktionieren.

Als Nächstes: E-Mail-Design-Beispiele und Best Practices

Wenn Sie E-Mails versenden, müssen Sie Ihr Design berücksichtigen. Selbst die überzeugendste Nachricht kann übersehen werden, wenn sie nicht gut präsentiert wird. Dieser Leitfaden untersucht einige wichtige Best Practices für das E-Mail-Design, komplett mit Beispielen, um Ihnen dabei zu helfen, E-Mails zu erstellen, die nicht nur großartig aussehen, sondern auch zum Handeln anregen.

Beheben Sie jetzt Ihre WordPress-E-Mails

Bereit, Ihre E-Mails zu reparieren? Fangen Sie noch heute an mit dem besten WordPress SMTP-Plugin. Wenn Sie keine Zeit haben, Ihre E-Mails zu reparieren, können Sie gegen Aufpreis eine vollständige White Glove Setup-Unterstützung erhalten, und für alle kostenpflichtigen Tarife gilt eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere WordPress-Tipps und Tutorials.