Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Fast jede einzelne Marketing-E-Mail enthält ein Logo. Warum?
Denn ein Logo ist ein großer Teil der visuellen Darstellung einer Marke. Die konsequente Einbeziehung eines solchen in Marketingmaterialien (z. B. E-Mails!) trägt dazu bei, die Markenerinnerung und das Vertrauen in den Augen von Kunden, Klienten und Followern zu stärken. Schließlich kaufen 59 % der Verbraucher lieber bei bekannten Marken ein und 90 % erwarten von Unternehmen, dass sie auf allen Plattformen konsistent sind. Auf kohäsives Design kommt es an.
Da der Dunkelmodus für E-Mails jedoch immer beliebter wird, kann es schwierig sein, ihn auf eine Art und Weise anzupassen, die immer noch der Marke entspricht. Logos sind für E-Mail-Vermarkter in der Regel ein besonders frustrierendes Problem im Dunkelmodus.
Pathwire hat kürzlich eine Dark-Mode-Umfrage durchgeführt, um herauszufinden, wie E-Mail-Marketer und -Designer wie Sie über Herausforderungen denken. 43 % der Befragten gaben an, dass die Optimierung von Logos und Bildern eine der größten Herausforderungen im Zusammenhang mit Dark Mode UX darstellt. Und weitere 33 % sagten dasselbe über die Ausrichtung des E-Mail-Designs auf die Marke.
Warum genau sind Logos im Dunkelmodus ein so großes Problem? Und was ist die Lösung?
Probleme und Lösungen mit dem Logo im Dunkelmodus
Der Dunkelmodus kehrt die Farben Ihrer E-Mails um, sodass der schwarze Text weiß und weiße Hintergründe schwarz werden. E-Mail-Clients reagieren je nach Client auf eine von drei Arten auf den Dunkelmodus:
- Sie kehren absolut alles um. Alles Weiße ist schwarz. Alles, was schwarz ist, ist weiß.
- Sie invertieren teilweise Elemente. Nicht alle Farben werden sich ändern, aber einige werden sich ändern.
- Sie geben Ihnen im Dunkelmodus die vollständige Kontrolle über Ihre E-Mails, indem sie Medienabfragen unterstützen. Wir werden uns das später genauer ansehen.
Diese unterschiedlichen Szenarien führen zu Problemen mit Logos, die ebenfalls schwer vorhersehbar sind. Wie sich ein Logo genau ändert, hängt sowohl vom E-Mail-Client als auch von Ihrer spezifischen Logodatei ab. Hier sind einige Dinge, die passieren können:
1. Hinter Ihrem Logo erscheint ein weißes Kästchen
Wenn Ihr Logo einen weißen Hintergrund hat, sieht es auf Weiß möglicherweise perfekt aus. Aber sobald die Seite umgedreht ist und der Hintergrund schwarz wird, wird sie mit einem nicht ganz so schönen weißen Rahmen um sie herum angezeigt. Ein Beispiel hierfür sehen Sie unten:
Ja, es funktioniert. Abonnenten können das Logo sehen und die Marke identifizieren. Allerdings verbringen Sie zu viel Zeit und investieren zu viele Ressourcen in die Gestaltung schöner E-Mails, um dies zu vernachlässigen.
Die Lösung: Verwenden Sie transparente PNGs
Durch die Verwendung eines transparenten Hintergrunds wird sichergestellt, dass sich hinter Ihrem Logo kein weißes Kästchen auf einem dunklen Hintergrund befindet.
Dies funktioniert jedoch nur, wenn die Farbe Ihres Logos sowohl auf hellem als auch auf dunklem Hintergrund gut aussieht. Dieser blaue Text ist beispielsweise auf Weiß und Schwarz perfekt lesbar:
Wenn dasselbe Logo jedoch beispielsweise dunkelrot wäre, würde ein transparenter Hintergrund das Problem nicht lösen:
2. Ein dunkles Logo verschwindet
Oder vielleicht ist Ihr Logo ein PNG mit transparentem Hintergrund. Das sollte funktionieren, oder? Nun ja, vielleicht.
Wenn Ihr Logo eine Farbe hat, die sowohl auf schwarzem als auch auf weißem Hintergrund funktioniert, können Sie loslegen. Wenn es jedoch schwarz ist, schwarze Elemente enthält oder eine andere dunkle Farbe enthält (z. B. Marineblau), ist es nicht lesbar.
Dunkler Text auf einem Logo verschwindet im Dunkelmodus
Sie werden sehen, dass ein Teil unseres Logos auf einem schwarzen Hintergrund großartig aussieht. Aber die dunklen Buchstaben verschwinden vollständig. Das ist überhaupt keine gute Erfahrung für Ihre Abonnenten.
Die Lösung: Verwenden Sie Striche, Schlagschatten oder Leuchteffekte
Dies sind alles relativ geringfügige Änderungen, die Sie an einer Logodatei vornehmen können, damit sie sowohl im Hell- als auch im Dunkelmodus funktioniert.
Fügen Sie einen Strich hinzu
Ein weißer Strich um das gesamte Logo herum ist auf weißen Hintergründen unsichtbar, lässt aber ein schwarzes Logo auf dunklen Hintergründen immer noch hervorstechen. Hier ein Beispiel mit unserem Logo:
Dark-Mode-Logo mit weißem Strich
Nicht schlecht! Für komplizierte, detaillierte Logoelemente ist dies jedoch möglicherweise nicht die beste Option.
Fügen Sie einen Schatten hinzu
Ein heller Schatten ist eine weitere Möglichkeit. Wie Sie sehen, erleichtert dies die Lesbarkeit unseres Logos, ist aber dennoch nicht die beste Option. Bei einigen Logos funktioniert ein Schatten möglicherweise besser als bei anderen.
Logo für den dunklen Modus mit Schlagschatten
Stellen Sie sicher, dass Sie mit der Deckkraft des Schattens, der Unschärfe, der x-Höhe und der y-Höhe experimentieren, um die beste Lösung für Ihre spezifische Grafik zu finden. Möglicherweise möchten Sie einigen Elementen auch einfach einen Schatten hinzufügen, z. B. dem Logotext.
Fügen Sie einen Glanz hinzu
Ein Leuchten kann auch dazu führen, dass Ihr Logo auf dunklem Hintergrund von der Seite abhebt. Auch dies ist möglicherweise nicht für jede Marke die beste Lösung. Bei uns macht es nur einen kleinen Unterschied:
Dunkelmodus-Logo mit Glanz
Alle drei dieser Lösungen können für die Marke, mit der Sie zusammenarbeiten, eine gute Wahl sein oder auch nicht. Designer mögen sie normalerweise nicht, weil sie die Marke verbilligen oder dafür sorgen können, dass die Dinge im Allgemeinen unschön aussehen. Und in vielen Fällen sind sie in Markenrichtliniendokumenten strengstens verboten.
3. Unschöne Farbkombinationen oder schlechter Kontrast
Bei E-Mail-Clients, die die Farben vollständig invertieren, kann es zu wirklich ausgefallenen Kombinationen kommen. Diese könnten unprofessionell wirken, völlig markenfremd sein oder zu einem schlechten Kontrast führen, der dazu führt, dass Ihre E-Mail völlig unzugänglich ist.
Denken Sie daran, dass einige E-Mail-Clients mehr als nur Schwarzweiß umkehren. Wenn Sie also eine bestimmte Markenfarbe auf einer Schaltfläche verwenden, wird diese Farbe im Dunkelmodus umgekehrt. Die violette Schaltfläche unten wird beispielsweise im Dunkelmodus als Grünton angezeigt. Das sieht zwar nicht unbedingt schlecht aus, passt aber wahrscheinlich nicht in die Markenrichtlinien.
CTA-Buttons mit invertierten Farben
Ehrlich gesagt sind alle drei dieser Möglichkeiten ziemlich schlecht – für Abonnenten und Marken.
Die Lösung: E-Mails im dunklen Modus in der Vorschau anzeigen
Die einzige Möglichkeit, wirklich zu wissen, wie Ihr Logo (und andere grafische Elemente) im Dunkelmodus aussehen, besteht darin, sie zu testen. Da natürlich alle E-Mail-Clients den Dunkelmodus unterschiedlich handhaben, müssen Sie Ihr E-Mail-Design in allen Clients überprüfen – oder zumindest in denen, die Ihre Abonnenten am häufigsten verwenden.
Am einfachsten geht das mit einem E-Mail-Vorschau-Tool wie Email on Acid. Es wird Ihnen eine Menge Zeit und Frust ersparen. Aber dazu später mehr!
Erweiterte Logo-Tipps für den Dunkelmodus für E-Mail-Teams
1. Platzieren Sie das Logo in einer Header-Grafik
Sie können auch eine Kopfzeilengrafik erstellen, die der Breite Ihrer E-Mail-Vorlage entspricht und Ihr Logo enthält. Dadurch haben Sie die genaue Kontrolle über das Logo und was sich dahinter verbirgt.
Diese Grafik kann zusätzliche Elemente enthalten – zum Beispiel den Titel eines E-Mail-Newsletters – oder einfach eine einfarbige Farbe haben, die ausreichend Kontrast zum Logo bietet. Bedenken Sie jedoch, dass das Logo beim Verkleinern der Grafik auf Mobilgeräten möglicherweise zu klein wird.
Diese E-Mail von Yoco hat beispielsweise ein weißes Headerbild, das es ihnen ermöglicht, ihre Standardlogoversion zu verwenden. Auch wenn der Rest des Inhalts auf schwarzem Hintergrund steht, können sie sich an ihre Markenrichtlinien halten.
2. Fügen Sie einen Farbverlauf hinter das Logo ein
Durch das Hinzufügen eines Farbverlaufs hinter dem Logo wird sichergestellt, dass es immer noch sichtbar ist, ohne dass harte, störende Linien entstehen, wie dies bei einem weißen Kästchen der Fall wäre. Das Logo könnte sanft in den Hintergrund (oder das Headerbild) verschwinden, sodass es markenkonform und zugänglich ist. Dies könnte auch sowohl im Hell- als auch im Dunkelmodus funktionieren.
Logo für den dunklen Modus mit einem Farbverlauf in der Kopfzeile
3. Zielen Sie mit CSS auf den Dunkelmodus
In mancher Hinsicht ist dies die beste Lösung, da Sie damit spezifische Designstandards für den Dunkelmodus und den Hellmodus festlegen können. Es gibt Ihnen die volle Kontrolle.
Beispielsweise könnten Sie Ihre Standard-Logoversion so einstellen, dass sie im hellen Modus angezeigt wird, und eine andere Datei – vielleicht eine mit weißem Text – für den dunklen Modus auswählen. Oder Sie können einen farbigen Strich nur für dunkle Hintergründe hinzufügen.
Sie können dies mit der folgenden Medienabfrage tun:
@media (bevorzugt-Farbschema)
Nehmen wir also an, Sie möchten die Hintergrundfarbe für den Textkörper sowie eine bestimmte Farbe und Auffüllung für Kopfzeilen und Tabellen festlegen – nur für den dunklen Modus. Sie würden diesen Code verwenden:
@media (bevorzugtes Farbschema: dunkel) { .body { Hintergrundfarbe: #CCCCCC !important; } h1, h2, h3, td { color: #9ea1f9 !important; Polsterung: 0px 0px 0px 0px !important; } }
Sie können die @media-Abfrage auch verwenden, um Bilder (oder Logos) auszutauschen, wenn der Dunkelmodus aktiviert ist, sodass eine für den Dunkelmodus geeignete Version angezeigt wird, wenn Abonnenten die Einstellung aktiviert haben.
So könnte das aussehen:
CSS:
@media (prefers-color-scheme:dark) { .dark-mode-hide{ display:none!important; } .dark-mode-show{ display:block!important; } }
HTML
Notiz: Der folgende Code ist ein bedingter Microsoft Office-Code, der Outlook anweist, das Dunkelmodus-Logo zu ignorieren. Mit Outlook können Sie auch das Tag „mso-hide:all“ verwenden, um Elemente im dunklen oder hellen Modus auszublenden.
Das liegt daran, dass leider nicht alle E-Mail-Clients diese Medienabfrage unterstützen, darunter auch viele Versionen von Outlook und Gmail. Interessanterweise verfügt die Gmail-App jedoch über die Option, E-Mails im hellen Modus anzuzeigen, selbst wenn das Telefon insgesamt auf dunkel eingestellt ist.
Wenn also Elemente Ihrer E-Mail nicht optimal aussehen, kann ein Abonnent sie stattdessen im Light-Modus anzeigen. Verlassen Sie sich jedoch nicht zu sehr darauf – nicht jeder weiß, dass diese Einstellung existiert, oder wird sich nicht die Mühe machen, sie zu aktivieren.
Kann ich eine E-Mail senden? verfügt über eine vollständige Liste der Clients, die @media (prefers-color-scheme) unterstützen.
4. Erstellen Sie eine für den Dunkelmodus geeignete Vorlage
Wenn Sie E-Mail-Vorlagen erstellen, anstatt einen Drag-and-Drop-Builder zu verwenden, ist dies eine hervorragende Lösung. Erstellen Sie Vorlagen, die sowohl im hellen als auch im dunklen Modus gut funktionieren. Dies ist der beste Weg, um sicherzustellen, dass es mit allen E-Mail-Clients kompatibel ist.
Allerdings sind viele Tests erforderlich, um es auf allen Clients richtig zu machen. Und das bringt uns zu …
Bringen Sie Licht in den Dunkelmodus
Die einzige Möglichkeit, sicherzustellen, dass Ihr Logo im Dunkelmodus auf ganzer Linie funktioniert, besteht darin, es zu testen – und noch einmal zu testen! Aber Ihre E-Mails über alle Clients und Geräte hinweg zu überprüfen, wäre unglaublich zeitaufwändig und schwierig.
Hier kommen die E-Mail-Vorschauen von Email on Acid ins Spiel. Sie können Ihre E-Mails schnell und einfach auf allen wichtigen Clients und Browsern sehen und da es keine Testbeschränkungen gibt, können Sie alle Probleme beheben und es noch einmal versuchen. Außerdem handelt es sich um präzise Live-Clients und nicht um Emulationen, sodass Sie sicher sein können, dass Sie das Original sehen.
Haben Sie also keine Angst vor dem Dunkelmodus. Mit der E-Mail-Vorschau von Email on Acid können Sie sicher sein, dass Ihre E-Mails jedes Mal großartig aussehen.
Autor: Megan Boshuyzen
Megan ist Grafikdesignerin und E-Mail-Entwicklerin, die an allen Aspekten des E-Mail-Marketings gearbeitet hat. Sie glaubt, dass gute E-Mails für gute Zwecke einen positiven Unterschied in der Welt bewirken. Megan arbeitet derzeit als E-Mail-Entwicklerin für Sinch Email. Besuchen Sie ihre Website und erfahren Sie mehr unter megbosh.com.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
