How to Utilize Dark Mode_Stripo
20 Februar 2023

Dunkler Modus für E-Mails: Was es ist und wie man E-Mails optimiert

Erstellen Sie professionelle E-Mails im dunklen Modus
Inhaltsverzeichnis
  1. Was ist der Dunkelmodus?
  2. Warum ist der Dunkelmodus so beliebt?
  3. Liste der E-Mail-Clients, die den dunklen Modus unterstützen, und wie Ihre E-Mails in diesen Clients dargestellt werden
  4. Tipps zur Optimierung von E-Mails für den dunklen Modus
  5. Wie wirkt sich der dunkle Modus auf reine Text-E-Mails aus?
  6. Abschließende Überlegungen
1.
Was ist der Dunkelmodus?

Obwohl Designer und Forscher viel darüber diskutieren, ob der dunkle Modus für E-Mails gesund und notwendig ist, wird er immer häufiger verwendet. In diesem Blog-Beitrag werden wir detaillierter über den dunklen Modus im Allgemeinen sprechen, Tipps für das Design von E-Mails im dunklen Modus erörtern und zeigen, wie Sie Ihrem Newsletter ohne Fehler Stile im dunklen Modus hinzufügen können.

Dunkler Modus _ Stripo

Was ist der Dunkelmodus?

Der dunkle Modus zeigt helle Texte, Symbole und UI-Elemente auf dunklem Hintergrund an.

Wie funktioniert er? Manche glauben, dass der dunkle Modus die Farben in Kontrastfarben umwandelt (die entgegengesetzten Farben des Farbkreises), wenn eine E-Mail auf einem Gerät mit dunklem Modus geöffnet wird.

Dies ist jedoch nicht ganz richtig. Es wird weder Grün in Rot, noch Blau in Gold oder Gelb umgewandelt. Im dunklen Modus werden hellere Schattierungen genau derselben Farben verwendet (falls Sie keine bestimmte Farbe als Hintergrund für den Inhalt festgelegt haben).

Wie wird das gemacht? Ein E-Mail-Client erkennt das Farbschema für den Hintergrund des E-Mail-Inhalts. Dann wendet er dunkle Hintergründe an, falls diese nicht eingestellt sind, und wendet kontrastreiche Farbtöne für den E-Mail-Inhalt an.

Farben im Lichtmodus

(E-Mail im Lichtmodus)

Farben im dunklen Modus

(E-Mail im Dunkelmodus)

Mit dem dunklen Modus wird es in Google Mail auf iOS und Android jedoch weiß, wenn es auf einem schwarzen Hintergrund erscheint. Dunkles Grau wird in helles Grau umgewandelt usw. 

Warum ist der Dunkelmodus so beliebt?

Der dunkle Modus für E-Mails ist aus verschiedenen Gründen so beliebt:

  • es wird von Augenärzten empfohlen

Heller Text auf dunklem Hintergrund soll die Belastung der Augen verringern. Augenärzte streiten sich jedoch immer noch über die Einstellung des Dunkelmodus und seine Auswirkungen auf unsere Augen;

  • es ist jetzt im Trend

Nun ja. Das ist wahr. Viele Leute schalten ihn nur ein, weil der dunkle Modus etwas Neues ist und sie ihn ausprobieren wollen. Infolgedessen gibt es 81.9% der Nutzer, die den dunklen Modus nur auf dem Handy nutzen;

  • es ist einfach bequem

Einige Nutzer finden es angenehmer, im Dunkelmodus zu lesen, vor allem, wenn es draußen dunkel ist;

  • es schont die Lebensdauer der Batterie

Google hat bestätigt, dass der dunkle Modus von Android die Akkulaufzeit um bis zu 50 % verkürzt, da er die Bildschirmhelligkeit reduziert. Allerdings ist dies nur für OLED-Bildschirme relevant;

Laut Wired hat der dunkle Modus keine Auswirkungen auf die Batterie, wenn es sich um LCD-Bildschirme handelt, die von Apple häufig verwendet werden. Übrigens hat Apple versprochen, alle LCD-Bildschirme zugunsten von OLED-Bildschirmen aufzugeben.

Liste der E-Mail-Clients, die den dunklen Modus unterstützen, und wie Ihre E-Mails in diesen Clients dargestellt werden

Der dunkle Modus wird gerade erst populär. Nur die neuesten Android- und iOS-Geräte mit den neuesten Versionen der Betriebssysteme unterstützen den dunklen Modus und stellen die Stile im dunklen Modus korrekt dar. Lassen Sie uns nun darüber sprechen, welche E-Mail-Clients den dunklen Modus unterstützen und wie sie ihn verwalten.

Hinweis: Alles, was nicht auf dieser Liste steht (Desktop-, Web- und ältere mobile E-Mail-Clients), ändert nichts, sodass E-Mails im dunklen Modus in anderen E-Mail-Clients seltsam aussehen können.

  • Gmail-App auf Android (Android 13)            

Es invertiert die Farben vollständig: nicht nur die Benutzeroberfläche, sondern auch die E-Mails werden im dunklen Modus angezeigt.

Wir haben eine breite Palette von E-Mails getestet. Eine von ihnen hatte ursprünglich einen dunklen Hintergrund und eine weiße Zeile/Streifen mit einem Menü.

Android 10 kehrte die dunklen Farben nicht in die hellen um, aber es änderte meine weiße Zeile in eine dunkle.

Dunkler Modus in der Gmail-App _ Android

(Dunkler Modus E-Mail, dunkles Thema)

Wichtig zu beachten:

Wie gesagt, nur die neueste Version von Android - Android 10 - stellt E-Mails im dunklen Modus dar. Aber es gibt noch weitere obligatorische Bedingungen, die Sie beachten müssen, wenn Sie E-Mails im dunklen Modus von Android sehen möchten. Sie sind wie folgt:

  1. Ihre Gmail-App sollte vom Google PlayStore heruntergeladen werden, nicht die App, die standardmäßig auf Ihrem Telefon installiert war. Samsung-Handys haben sie manchmal.
  2. Sie sollten die neueste Version der Google Mail-App haben.

Dunkler Modus für E-Mails _ Überprüfung der Version der Gmail-App

  • Gmail-App auf iOS (iOS 13) 

Was macht die Google Mail-App auf iOS?

Meine E-Mail war ursprünglich dunkel mit einer hellen Menüzeile. iOS hat Schriftfarben und Hintergründe invertiert. Zum Beispiel werden helle Hintergründe mit dunkler Textfarbe zu dunklen Farben mit hellen Schriftfarben.

Gmail-App auf iOS _ E-Mail mit dunklem Thema

Wichtig zu beachten:

Gmail ist noch dabei, den dunklen Modus für E-Mails auf iOS einzuführen. Er soll in etwa 2 Wochen vollständig sichtbar und für alle Nutzer verfügbar sein. Aber der gleiche Prozess für Android dauerte Google etwa zwei Monate anstelle von zwei Wochen. Wir müssen einfach geduldig sein.

  • Die native Mail-App für das iPhone (Native Mail auf iOS)       

Apple hat die Unterstützung für den dunklen Modus ab iOS 13 in der nativen Apple-Mail-App hinzugefügt. Dieser E-Mail-Client ermöglicht es Ihnen, den dunklen Modus für die Benutzeroberfläche und den E-Mail-Bereich zu aktivieren. Wenn Sie eine transparente Hintergrundfarbe eingestellt haben, wandelt iPhone Mail diese in einen dunkleren Hintergrund um.

Andernfalls sehen Ihre E-Mails im dunklen Modus in den beiden Modi "Hell" und "Dunkel" absolut gleich aus.

Emails in Dark Mode _ Native Email on iOS

  • Apple Mail unter macOS

Hier ist die gleiche Situation. Apple Mail ermöglicht das Einschalten des dunklen Modus für die Benutzeroberfläche, aber es hat keinen Einfluss auf die unterstützten Farbschemata Ihrer HTML-E-Mails im dunklen Modus. Außerdem können Sie in Apple Mail unter macOS benutzerdefinierten Code hinzufügen, um den dunklen Modus über CSS nach Ihren Wünschen zu verändern. Dazu gehören HTML-Meta-Tags, CSS-Target und aktualisierte Eigenschaften, mit denen E-Mail-Entwickler die Farben von Schriftarten, Grafiken, Hintergrundbildern usw. ändern können.

HTML-E-Mail im dunklen Modus _ Apple Mail _Test

  • Gmail auf macOS und Windows 

Einer der beliebtesten E-Mail-Clients auf einem Desktop-Betriebssystem invertiert die Farben nicht oder arbeitet teilweise im dunklen Modus - nennen Sie es, wie Sie wollen.

Der E-Mail-Client ermöglicht es Ihnen, den dunklen Modus für die Benutzeroberfläche zu aktivieren, aber der E-Mail-Bereich bleibt hell - es hat also keinerlei Auswirkungen auf die E-Mail-Darstellung. Ihre E-Mails sehen sowohl im dunklen als auch im hellen Modus genau gleich aus.

E-Mails für den dunklen Modus _ Gmail auf macOS

  • Outlook-Anwendung auf Android

Es heißt, dass sie die Farben teilweise invertiert. Als ich die dunkle Modifikation auf meinem Android-Gerät getestet habe, wurden jedoch keine invertierten Farben festgestellt. Wenn Sie jedoch auf ein solches Problem stoßen oder wenn Ihre E-Mail im dunklen Modus nicht mit Outlook auf Android kompatibel ist, fügen Sie einfach das Präfix data-ogsc zu den duplizierten Stilen im dunklen Modus hinzu. Als Ergebnis sollten Sie etwas wie dieses haben:

[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  • Outlook-App auf iOS

Dieser E-Mail-Client soll die Farben im dunklen Modus teilweise invertieren. Aber ich habe auch nicht die Outlook-App auf meinem iPhone.

  • Outlook 2019 auf macOS

Wenn Sie den dunklen Modus in diesem E-Mail-Client aktivieren, wird das Farbschema umgekehrt. Es tut genau wie Android 10 - lässt ein dunkles Farbschema, wie es ist, und dreht einen hellen Hintergrund zu dunkel.

Dunkler Modus für Outlook _ Test-E-Mails

  • Outlook.com

Die Situation bei Outlook.com ist sehr interessant.

Wenn der dunkle Modus aktiviert ist, sollen die Farben teilweise invertiert werden. Aber wenn ich eine E-Mail mit einem dunklen Farbschema sende, verschiebt Outlook.com die Farben im dunklen Modus zu hell. Und wenn ich eine E-Mail mit einem Design in hellen Farben sende, invertiert Outlook.com die Farben in den dunklen Modus.

Testen des dunklen Modus in Outlook

Interessante Fakten über den dunklen Modus auf Outlook.com:

1. Outlook.com beeinträchtigt das Design von AMP-E-Mails überhaupt nicht.

Wenn Sie einen weißen Hintergrund eingestellt haben, werden Ihre Nutzer diesen in diesem speziellen E-Mail-Client sehen, auch wenn die E-Mail einen dunklen Modus hat.

AMP-E-Mails im dunklen Modus _ Outlook

2. Outlook.com ermöglicht es Ihnen, E-Mails sowohl im hellen als auch im dunklen Modus anzuzeigen, ohne die Farbe der Benutzeroberfläche zu ändern.

Um den Effekt des dunklen Modus für Ihre E-Mails zu aktivieren, müssen Sie nur auf diese Schaltfläche klicken:

Einstellen des dunklen Modus in Outlook

3. Outlook invertiert keine Rahmenfarben.

Tipps zur Optimierung von E-Mails für den dunklen Modus

Versuchen Sie nicht, den benutzerdefinierten dunklen Modus in E-Mails zu hacken, damit Ihre E-Mails wie im normalen Modus dargestellt werden. Denn wenn Menschen diesen Modus verwenden, bevorzugen sie das Farbschema aus einem bestimmten Grund. Und das sollten wir respektieren.

Um also Ihre E-Mail-Vorlage für den dunklen Modus zu optimieren und die Nutzer des dunklen Modus anzusprechen, sollten Sie das tun:

1. Arbeit an der Bildsprache

a) Verwenden Sie Symbole und Bilder mit transparentem Hintergrund oder achten Sie darauf, dass die Hintergründe gleich groß sind, um dies zu vermeiden:

Dunkler Modus

Würden Sie zustimmen, dass dies nicht das beste Beispiel für eine E-Mail mit dunklem Thema ist, da Bilder mit weißem, unterschiedlich großem Hintergrund den Gesamteindruck zerstören?

b) Seien Sie vorsichtig mit transparenten PNG-Bildern

Sie sollten transparente Bilder für Produktkarten verwenden, um geeignete Dark-Mode-Bilder für Ihren Newsletter zu erstellen. Vergessen Sie nicht, transparenten PNG-Bildern mit dunklem Text einen durchscheinenden Umriss hinzuzufügen, wenn Sie Ihre E-Mail im dunklen Modus versenden.

Fotos von Menschen würden jedoch besser aussehen, wenn sie einen bestimmten Hintergrund hätten.  Außerdem ist es ratsam, für dunkle Bilder einen Umriss und einen farbigen oder weißen Hintergrund zu verwenden. Bilder mit dunkler Hintergrundfarbe behalten diesen Hintergrund bei, egal wie die E-Mail aussieht.

Fotos mit Hintergründen für den dunklen Modus verwenden

2. Arbeiten an Logos

a) Mögen Ihre Logos keine Hintergründe haben

Schlechtes Beispiel für ein Logo im dunklen Modus

b) Dürfen Ihre Logos nicht in Schwarz geschrieben werden, damit sie sowohl in dunklen als auch in hellen Themen gut dargestellt werden?

Einige Programmierer schlagen vor, zwei Logos zu verwenden und stellen sogar ein Codebeispiel zur Verfügung, das sicherstellt, dass das schwarze Logo im hellen Modus und das weiße im dunklen Modus angezeigt wird.

Wir haben es getestet - der Code hat nicht geholfen. Aber er machte unseren E-Mail-Code viel schwerer.

c) Heller Hintergrund (oder weißer Umriss) und Schatten auf ein dunkles modusspezifisches Logo anwenden

Wenn Ihr Logo in Schwarz geschrieben werden muss, fügen Sie ihm einen hellen Schatten hinzu. Das sieht gut aus und entspricht dem Farbschema Ihrer Marke.

Logo mit Schatten

3. Hinzufügen von Dark Mode Styles für @media über Media Query

Damit Ihre E-Mail im dunklen Modus korrekt angezeigt wird, sollten Sie eine spezielle Medienabfrage zu jedem E-Mail-Medienelement hinzufügen. Am Ende sollten Sie etwas wie dieses erhalten:

@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
}

Mit dieser Medienabfrage können Sie Ihre Dark-Mode-Mailinglisten für eine bessere Kompatibilität mit E-Mail-Clients wie Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) und Outlook App (iOS) optimieren. Fügen Sie einfach die Abfrage (prefers-color-scheme: dark) in den <style></style>-Abschnitt Ihrer E-Mail ein, um benutzerdefinierte Stile für den dunklen Modus zu erstellen.

4. Hintergrundfarben für E-Mail-Container festlegen

Wenn Sie nicht möchten, dass Ihre E-Mail-Inhalte einen dunklen Hintergrund haben, können Sie eine benutzerdefinierte helle Hintergrundfarbe oder einen benutzerdefinierten dunklen Modus mit Stripo einstellen.

Das Farbschema, das Sie als "Hintergrundfarbe des Inhalts" einstellen, bleibt im dunklen Modus in der E-Mail gleich.

Hintergrundfarbe des E-Mail-Inhalts _ Farben mit Stripo einstellen

Legen Sie dann für den Streifen ein "transparentes" Farbschema fest - in diesem Fall wird die gewählte Hintergrundfarbe auf den E-Mail-Inhalt angewendet, aber nicht auf den gesamten E-Mail-Bereich.

Hintergrundfarbe für E-Mail-Inhalte

Achten Sie darauf, dass alle Streifen/Reihen das gleiche Farbschema aufweisen.

4. Testen Sie Ihre E-Mails

Testen Sie Ihre HTML-E-Mails immer sowohl im normalen hellen als auch im dunklen Modus.

5. Fügen Sie keine zusätzlichen Code-Elemente hinzu

Trotz einiger Empfehlungen, spezielle Code-Elemente in Ihre Dark-Themes-Vorlagen einzufügen, die den dunklen Modus für Ihre E-Mails aktivieren sollen, lösen diese Code-Beispiele noch keine Probleme. Zumindest zeigen dies zahlreiche Tests von Stilen, die nur im dunklen Modus funktionieren.

Außerdem funktionieren E-Mail-Vorlagen in den meisten E-Mail-Clients recht gut.

Es ist also keine Raketenwissenschaft, Ihr Design für den vollständig dunklen Modus zu optimieren - Sie müssen nur am Erscheinungsbild Ihrer E-Mails arbeiten, um hervorragende Versionen Ihrer E-Mails im dunklen Modus zu erhalten. Sie brauchen noch nicht mit Codes zu arbeiten.

Wie wirkt sich der dunkle Modus auf reine Text-E-Mails aus?

Persönliche E-Mails im dunklen Modus werden in allen E-Mail-Clients, die diese neue Funktion unterstützen, immer korrekt dargestellt.

Nur-Text-E-Mails im dunklen Modus

Aber stimmt das auch? Überprüfen wir das:

1. Gmail auf dem Desktop invertiert unsere E-Mails überhaupt nicht. Daher sollten wir uns darüber keine Sorgen machen.

2. Gmail auf iOS und Android zeigt helle Typografie auf dunklem Hintergrund.

3. Outlook invertiert auch die Farben unserer Klartext-E-Mails in einem dunklen Modus.

Nur-Text-E-Mails in einem dunklen Modus in Outlook

4. Native iPhone- und Apple Mail-Apps invertieren die Hintergrundfarben von hell nach dunkel und die Textfarben von dunkel nach hell, wenn es um persönliche E-Mails im dunklen Modus geht.

Es gibt jedoch einige Dinge über Textnachrichten in Apple Mail und in iPhone Mail, die erwähnt werden sollten:

  • Die Farben werden nur invertiert, wenn dies die einzige oder die erste E-Mail in einer Kette ist. Manchmal haben die zweite und alle folgenden E-Mails einen weißen Hintergrund und dunkle Schrift;

Klartext-E-Mails in Apple Mail

  • Auch wenn es sich um die erste E-Mail in einer Kette handelt, die ein Bild enthält, kann Ihre persönliche E-Mail in einem dunklen Modus weiß erscheinen. Ihr Firmenlogo, das in Ihrer E-Mail-Signatur enthalten ist, gilt ebenfalls als Bild;
  • persönliche E-Mails, die an Sie weitergeleitet wurden, können ebenfalls einen weißen Hintergrund haben.

Abschließende Überlegungen

Wenn man natürlich bedenkt, dass nur ein kleiner Teil der Nutzer den dunklen Modus sehen kann, könnte man versucht sein, sich zu fragen: Ist der dunkle Modus wirklich die Mühe wert, die er erfordert? Er ist es! Zunächst einmal nutzen die Menschen ihn aus einem bestimmten Grund. Wir sollten das respektieren und unsere E-Mail-Designs für die benutzerdefinierten Dark-Mode-Stile optimieren.

Zweitens wächst die Beliebtheit dieser Funktion, und sehr bald wird eine größere Anzahl unserer Abonnenten diesen Modus aktivieren. Sie müssen also bereit sein, den dunklen Modus in Ihren Newsletter zu implementieren.

Verwenden Sie E-Mail-Vorlagen für den Dark Mode in gängigen E-Mail-Clients
War dieser Artikel hilfreich?
Tell us your thoughts
Vielen Dank für Ihr Feedback!
3 Kommentare
Eymeric Hénin (Yeemirc) vor 5 Monaten
Bonjour et merci pour cet article. J'ai cru voir passer un comfortable au lieu de confortable. J'utilise Outlook dans le cadre professionnel. Et depuis peu, la version web, permettant le mode sombre. Savez-vous si ce mode est disponible sur l'application bureautique svp ? Merci !
Hanna Kuznietsova vor 3 Monaten
Hello, Eymeric Hénin. Microsoft says that Outlook for Microsoft 365 has a dark mode, so if you're using this version of Outlook, you can switch to it in your account. Here's the manual. https://support.microsoft.com/en-au/office/dark-mode-in-outlook-3e2446e0-9a7b-4189-9af9-57fb94d02ae3 Kind regards.
Ellis Edwards vor 3 Jahren
Is there any way to disable dark mode on stripo emails? I have added white as background color of content in all my sections and it still switches to black on dark mode
Typ
Branche
Jahreszeiten
Integration
Stripo-Editor
Vereinfachen Sie den Prozess der E-Mail-Produktion.
Stripo-Plugin
Integrieren Sie den Stripo-Drag-n-Drop-Editor in Ihre Webanwendung.
Bestellen Sie eine individuelle Vorlage
Unser Team kann es für Sie entwerfen und programmieren. Füllen Sie einfach den Fragebogen aus und wir werden uns in Kürze bei Ihnen melden.