Was alle Vermarkter über Dark-Mode-E-Mails wissen müssen

Veröffentlicht: 2022-06-29

Heutzutage nutzen sogar Apps den Gothic-Trend.

Im Ernst, wir sprechen über den dunklen Modus. Betriebssysteme haben schon immer umgekehrte Farbschemata angeboten, aber E-Mails und Apps im Dunkelmodus sind etwas anders.

Während viele Benutzer vom Dunkelmodus begeistert sind, bereitet er E-Mail-Vermarktern einige Kopfschmerzen.

Sie haben sicher schon bemerkt, dass jeder E-Mail-Client dieselbe Kampagne anders anzeigen kann. Nun, die Einführung des Dunkelmodus fügt der Gleichung eine weitere Ebene hinzu.

In diesem Beitrag gehen wir auf einige der Grundlagen ein, die Sie wissen sollten, bevor Sie Ihre E-Mail-Kampagnen für den Dark Mode optimieren.

Was ist der Dunkelmodus und warum wird er verwendet?

Seit Jahren zeigen Betriebssysteme und Apps Inhalte standardmäßig mit weißem Hintergrund und schwarzem Text an. Für unsere Zwecke hier nennen wir dies „Lichtmodus“.

Der Light-Modus ist immer noch die Standardoption für die meisten Apps und Systeme, aber er gerät bei vielen versierten Internetnutzern in Ungnade – insbesondere bei denen, die den größten Teil ihres Tages online verbringen.

Neue Daten zeigen, dass die durchschnittliche Person jede Woche über 44 Stunden online verbringt. Für viele Menschen sind sechs Stunden am Computer oder Laptop nichts.

Nun, es stellt sich heraus, dass es nicht gut für unsere Augen ist, den ganzen Tag auf Bildschirme zu starren. Zu viel Zeit vor dem Bildschirm – ob Fernseher, Telefon oder Laptop – führt zu einer Überanstrengung der Augen.

Bright Screens digitale Augenbelastung

Quelle: Weekdone

Nicht nur die Helligkeit kann schädlich sein. Blaue Lichtemissionen von weißen Bildschirmen hindern Ihren Körper daran, Melatonin zu produzieren, was Ihren circadianen Rhythmus und Schlafzyklus stören kann. Wenn man bedenkt, dass bis zur Hälfte der Amerikaner entweder an chronischer oder akuter Schlaflosigkeit leiden, könnten wir alle unsere Schlafhygiene verbessern.

Viele Telefone und Betriebssysteme ermöglichen es Ihnen jetzt, zu einem wärmeren Farbton zu wechseln, um blaues Licht zu reduzieren, oder jeden Tag nach einer bestimmten Zeit automatisch einen Blaulichtfilter einzuschalten.

E-Mails und Apps im Dunkelmodus bieten eine andere Auswahl. Anstatt den weißen Farbton zu optimieren, können Sie einfach das gesamte Thema in Schwarz oder Dunkelgrau ändern und es wird schädliches blaues Licht eliminieren – kinderleicht.

Mehrere beliebte Apps wie Reddit, Facebook Messenger, Twitter und WhatsApp bieten integrierte Dark Mode-Optionen. Facebook Messenger startete zuerst den Dunkelmodus als Osterei, das Sie durch das Senden eines Emoji auslösen konnten, aber jetzt kann ihn jeder in seinen App-Einstellungen aktivieren.

Einige Smartphone-Apps bieten Dark Modes an, Nutzer müssen ihr Apple- oder Android-Theme jedoch auf diesen Modus umstellen. Mit anderen Worten, es wird nicht über die App-Einstellungen angeboten.

E-Mails und Apps im Dunkelmodus sind auch nützlich, um den Akkuverbrauch bei Geräten mit OLED-Bildschirmen zu senken. Bei OLEDs werden dunkle Pixel auf dem Bildschirm nicht beleuchtet, weil sie schwarz sind. Bei LCD- und Standard-LED-Bildschirmen benötigen die dunklen Pixel jedoch immer noch Akkulaufzeit.

Welche Clients bieten Dark-Mode-E-Mail an?

E-Mail-Clients scheinen den Dark Mode nur ungern zu akzeptieren.

Es ist nicht unbedingt, dass sie es nicht anbieten wollen, aber es ist schwierig, eine ästhetisch ansprechende dunkle Version zu implementieren, da jede E-Mail-Kampagne anders codiert ist.

Einige E-Mail-Clients bieten den Dunkelmodus als spezielle Einstellung, die Sie in der App aktivieren können. In der Zwischenzeit müssen Sie bei anderen Clients die Einstellungen Ihres Betriebssystems ändern, bevor die App automatisch in den Dunkelmodus wechselt.

Hier sind die Clients und Apps, von denen wir wissen, dass sie derzeit den Dunkelmodus anbieten:

  • Gmail-App (iOS und Android)

  • Outlook-App (iOS und Android)

  • Apple-Mail (Desktop)

  • Outlook 2019 (Mac, Windows und Web)

Sie werden auch feststellen, dass Google Mail zwar keinen bestimmten „Dunkelmodus“ bietet, aber Sie Ihr Design von hellen auf dunkle Töne umstellen können.

Wie sieht eine Dark-Mode-E-Mail aus?

Wie bei allen E-Mail-Dingen kommt es darauf an.

Bei Apps ist der Dunkelmodus unkompliziert. Entwickler tauschen einfach einige CSS-Teile aus und lassen Benutzern die Wahl.

Twitter bietet zwei Versionen des Dunkelmodus: Lichter aus und Dimmen.

Twitter-DunkelmodusEin Screenshot einer automatisch generierten Handy-Beschreibung

Quelle: Twitter

So sieht der Dunkelmodus auf Facebook Messenger und Reddit aus.

Facebook und Reddit Dark ModeEin Screenshot einer automatisch generierten Computerbeschreibung

Quelle: Facebook, Reddit

In einer perfekten Welt würde E-Mail im Dunkelmodus genau so aussehen wie diese Grafik aus dem Microsoft-Blog.

Dunkelmodus des Microsoft-Blogs

Quelle: Microsoft-Blog

Hier ist die Sache mit E-Mails im dunklen Modus: E-Mail-Clients haben keine bestimmte Version zur Verwendung ausgewählt. Es scheint, dass es drei spezifische Arten von Dunkelmodus gibt, die wir bei verschiedenen E-Mail-Clients sehen.

1. Keine Farbänderungen

Erstens haben wir E-Mails, die mit ihrem einzigartigen HTML gerendert werden, während der E-Mail-Client ein Dark-Mode-Design beibehält.

Bei Gmail für den Desktop ändert sich der Inhalt von E-Mails kein bisschen – nur das Gmail-Design wird dunkel.

So sieht es in der Google Mail-Desktop-App aus.

Gmail-Dunkelmodus

Gmail-Dunkelmodus

Quelle: Gmail

Bei Apple scheinen Klartext-E-Mails den Wechsel vom Hell- in den Dunkelmodus auszulösen – nicht aber HTML-E-Mails.

2. Teilweise dunkler Modus

Bei E-Mails im partiellen Dunkelmodus erkennt der Client helle Hintergründe und schaltet sie automatisch auf dunkel um (während dunkler Text auf hell umgestellt wird).

Die Gestaltung einer E-Mail-Kampagne mit dunklem Hintergrund ändert sich in diesem Fall nicht, wenn ein Abonnent den Dunkelmodus aktiviert hat.

Dark-Mode-Design

Quelle: Lackmus

3. Vollständig invertierter Dunkelmodus

Schließlich zielt der vollständige Dunkelmodus auf jede E-Mail ab – unabhängig davon, wie sie gestaltet ist – und invertiert das CSS vollständig.

Das heißt, wenn Sie eine E-Mail für den dunklen Modus mit schwarzem Hintergrund entwerfen, schaltet der E-Mail-Client sie wieder auf weiß um.

Dies ist die Version des dunklen Modus, die viele verwenden.

Beliebte Clients wie Gmail und Outlook erlauben es Ihnen auch nicht, Benutzer im dunklen Modus anzusprechen. Wenn E-Mail-Entwickler beginnen, sich anzupassen, werden E-Mail-Clients hoffentlich ihren Code ändern, um einen dunklen Modus zu finden, der für alle geeignet ist.

Entwerfen für E-Mails im dunklen Modus

Das wichtigste Designelement, das Sie sich merken sollten, ist, dass die Hintergrundfarbe zu Schwarz wechselt.

Es ist üblich, dass Designer Bilder mit teilweise weißen Elementen auswählen, um sie mit dem Hintergrund des Bildschirms zu verschmelzen. In anderen Fällen erstellen Designer Bilder mit einer bestimmten Farbe und verwenden dieselbe Farbe für den Hintergrund, damit es nahtlos aussieht.

Wenn der dunkle Modus die Farben umkehrt, kann dies ein durchdachtes Design beeinträchtigen.

Sehen Sie, wie sich die Farben in dieser E-Mail ganz leicht ändern.

Teilweises Dark-Mode-Design

Quelle : Medium

Das leuchtende Gelb im Hellmodus wechselt zu Braun im Dunkelmodus. Der blaugrüne Hintergrund im Samsung-Bild fällt im Dunkelmodus auf, da die Hintergrundfarbe der E-Mail dunkler wird.

Erstellen von Bildern für E-Mails im dunklen Modus

Es ist eine kluge Idee, so oft wie möglich Bilder mit transparentem Hintergrund zu verwenden.

Wenn Sie die Hintergrundfarbe nicht steuern können, möchten Sie, dass Ihre Fotos und Logos sauber bleiben. Transparenz ist also angesagt.

Auch hier verwenden die meisten Designer Logos und Bilder mit weißem Randrand. Normalerweise ist das kein Problem, da der Beschnitt mit dem weißen Hintergrund der E-Mail verschmilzt.

Im Dunkelmodus fällt diese Verkleidung jedoch auf. Es ist normalerweise kein großer Fehler, aber es kann dazu führen, dass Ihre E-Mails ein wenig überladen aussehen.

Sehen Sie den Unterschied mit diesen Social-Media-Symbolen?

Social-Media-Symbole im dunklen Modus

Quelle: Kampagnenmonitor

Es lohnt sich auch, einen Dimmfilter über alle hellen Bilder hinzuzufügen, die sich im Dunkelmodus grell anfühlen könnten.

Optimieren von Text für E-Mails im Dunkelmodus

Viele Marken verwenden schlichte schwarze Logos. Wenn Sie einen transparenten Hintergrund hinzufügen und das Logo über einen schwarzen Hintergrund werfen, wird Ihr Logo unsichtbar.

Glücklicherweise ist es eine einfache Lösung mit ein wenig Planung.

Wenn Sie es mit einem Logo oder Header zu tun haben, der durchgehend schwarz ist, fügen Sie einen weißen Rand hinzu, damit er in E-Mails im Dunkelmodus auf schwarzem Hintergrund angezeigt wird.

Das Hinzufügen eines weißen Randes funktioniert sowohl im dunklen als auch im hellen Modus hervorragend, da der Rand verschwindet, wenn der Hintergrund weiß wird.

Sitepoint-Dunkelmodus

Quelle: Kampagnenmonitor

Testen nicht vergessen

Wie bei jedem E-Mail-Marketing – und insbesondere beim Dark Mode – stellen Sie sicher, dass Sie Ihre Kampagnen nicht ohne zahlreiche Tests versenden.

Denken Sie daran, dass E-Mail-Clients und Apps noch nicht ihre ideale Dark-Mode-Strategie gefunden haben, also erwarten Sie, dass sich Standards und CSS-Stile ein paar Mal ändern.

Außerdem sieht die E-Mail im Dunkelmodus auf jedem Client anders aus. Das Ausführen von Tests im Hell- und Dunkelmodus kann jedoch dazu beitragen, dass Ihre E-Mails auf jedem Gerät lesbar und beeindruckend bleiben.

Einpacken

Ein konsistentes E-Mail-Design festzunageln kann bereits eine Herausforderung sein, und E-Mail-Funktionen im Dunkelmodus helfen nicht weiter. Glücklicherweise können Sie sich darüber informieren, welche E-Mail-Clients Ihre Abonnenten verwenden, und einige Best Practices befolgen, damit Ihre E-Mails gut aussehen.

  • Fügen Sie einen weißen Umriss um durchgehenden schwarzen Text oder Logos ein.

  • Fügen Sie allen hellen Bildern einen Vignetten- oder Abblendfilter hinzu.

  • Versuchen Sie, Bilder, Logos und Fotos mit transparentem Hintergrund zu verwenden.

  • Vermeiden Sie es, Bilder mit Hintergrundfarben zu mischen.

  • Führen Sie viele Tests durch.

Möchten Sie Ihr Design verbessern und Ihre bisher besten E-Mails versenden? Sehen Sie sich diesen ultimativen Leitfaden für effektives E-Mail-Design an.