E-mail Labs

Alles wat je wilt weten over dark mode.

Developers gebruiken al jaren dark mode voor hun scherm en begin 2019 heeft Google het voor de browser uitgerold. Google was hiermee niet de eerste. In 2016 had Twitter al een versie en er zijn ook dark modes voor Android telefoons, Microsoft Outlook, YouTube, Gmail, Reddit, Safari en het Apple’s Mojave systeem. Spotify heeft deze modus zelfs altijd als standaard uitstraling toegepast. En nu komt deze ontwikkeling in rap tempo naar de e-mail. In dit blog meer over wat dark mode nou eigenlijk is en wat jij als e-mailmarketeer ermee zou kunnen doen.

Wat is het en hoe werkt het?

Dark mode zorgt voor een hoger contrast door e-mails een donkere achtergrond te geven en de voorgrond juist licht te maken. Dit maakt voor veel personen een e-mail prettiger leesbaar en het minder vermoeiend voor de ogen, vooral in een donker omgeving.

 

Het zorgt er namelijk voor dat donkere componenten van de e-mail lichter worden en lichte componenten juist donkerder. Dat resulteert vaak in een donkere achtergrond met lichte teksten. Dark mode kijkt daarbij naar de CSS van de e-mail of van de HTML-attributen en past het daarop aan. Dit betekent dat afbeeldingen niet aangepast worden naar dark mode. Het kan dus gebeuren dat een afbeelding opeens een rand heeft als je e-mail in dark mode wordt gezet.

Wat is het voordeel van dark mode?

OLED en AMOLED schermen verbruiken in deze stand minder energie. Wel zo fijn voor je batterij! Heb je een LCD-scherm, dan valt de vermindering in energieverbruik relatief mee.

Ook wordt geclaimd dat het beter zou zijn voor je ogen. Dat gaat alleen op als de omgeving donker is. Onze ogen zijn namelijk gewend om objecten op een lichte achtergrond te bekijken met zonlicht of een lamp. De spieren van onze ogen zijn zo erg getraind op dat contrast, dat ze overdag weinig moeite hoeven te doen om een donkere tekst op een witte achtergrond te lezen. Maar, als je nog even e-mails gaat checken als je al in bed ligt, is dark mode prettiger. Je ogen beginnen dan te wennen aan de donkere kamer en kunnen beter hun werk doen als ook het scherm donker is.

Welke clients ondersteunen dit?

Dark mode heeft drie verschillende types en per client verschilt welke modus wordt ondersteund:

  1. Dark UI (User Interface), alleen kleur van de inbox verandert.

Sommige clients, zoals Apple Mail, bieden de gebruiker de mogelijkheid om de app zelfs in donkere modus te gebruiken. Daardoor wordt de inbox zwart met witte letters. Echter heeft die instelling geen impact op de e-mails zelf. Deze houden hun oorspronkelijke kleur.

dark mode UI

voorbeeld Dark UI

  1. Kleuren gedeeltelijk aangepast.

Hierbij wordt alleen gekeken of een e-mail een donkere achtergrond heeft en/of een lichte tekst. Zo ja, dan wordt dit aangepast. Mocht je in de e-mail al donkere vlakken hebben, dan worden die niet aangepast.

  1. Auto-invert, volledige kleuraanpassing.

Alle kleuren worden automatisch omgedraaid, waardoor e-mails met een donkere achtergrond en lichte tekst juist een lichte achtergrond en donkere tekst krijgen. Het design wordt dus volledig omgedraaid.  

darke mode email clients

Overzicht van welk e-mail clients, welke type dark mode wordt ondersteunen.
Bron Litmus november 2019

 

Van standaard HTML e-mail naar kleurenschema’s in CSS

Zoals in het overzicht hierboven aangegeven, weet je nu hoe de meest reguliere e-mail clients omgaan met je HTML e-mails wanneer deze in dark mode worden gezet.

Echter kan je ook als developer je eigen kleurenthema’s voor e-mail hebben ontwikkeld. Dan wil je ook dat de kleurenthema’s behouden blijft, of in elk geval mooi worden weergegeven in dark mode. Hiervoor moet er in de CSS gedoken worden. Via ‘prefers-color-scheme’ kan je verschillende voorkeuren in de CSS schrijven.

Hiervoor zijn twee mogelijkheden:

1)         @media (prefers-color-scheme: dark) werkt voor Outlook en Apple.

2)         [data-ogsc] and/or [data-ogsb] is in te stellen voor Outlook op android systemen. Een voorbeeld van deze methode staat in deze afbeelding weer gegeven.

dark mode css Robbins

Bron: Mark Robbins #EmailGeeks

Bij alles is het dus van beland dat je weet welke e-mail clients het meest populair is bij jouw e-mailontvangers.  Bovenstaande CSS is ook te combineren zodat de e-mail goed leesbaar is bij meerdere e-mail clients. 

dark mode media data ogsc

Overzicht van welk e-mail clients, welke type dark modeOverzicht van e-mail client welke CSS voor dark mode ondersteunen.
Bron: Litmus november 2019

Wat betekent deze ontwikkeling voor jou als e-mailmarketeer?

Dark mode is een snel opkomende ontwikkeling. Steeds meer e-mail clients zullen hierop in gaan spelen en dit mogelijk maken. Daarom is het belangrijk om als e-mailmarketeer jezelf de vraag te stellen: is mijn e-mail in deze modus nog goed leesbaar? 

Enkele handige tips:

  • Gebruik plaatjes met een transparante achtergrond, zodat deze op een mooie manier mee veranderen in dark mode.
  • Als je transparante zwarte plaatjes hebt, zullen deze wegvallen doordat de achtergrond ook zwart wordt. Dit los je makkelijk op door een witte rand om je zwarte content te maken.
  • Ook zeker te zijn dat de tekst altijd goed te lezen is, kun je beter geen witte teksten meer gebruiken. Je kunt dan gaan voor een kleur die niet donker en niet licht is, zoals bijvoorbeeld blauw. Hier is een tool, contrast-ratio, waarmee je het contrast effect van de kleur kan zien als er wordt geswitched naar dark mode.

Bij vaste plaatjes, zoals je logo, kun je twee versies opmaken. Daarna

 

Kortom: neem dark mode mee in de volgende campagnes

Dark mode is een leuke uitdaging geworden voor e-mailmarketeers. Smartphonegebruikers kunnen bij steeds meer e-mail clients instellen of ze een e-mail in dark mode willen lezen en ze kiezen daar ook graag voor. Het leest prettiger in het donker en voor veel telefoons scheelt het batterijverbruik. Aan jou als e-mailmarketeer de taak om te kijken hoe jouw e-mails er in dark mode uit komen te zien: welke e-mail clients gebruiken jouw nieuwsbriefontvangers en blijft de e-mail goed leesbaar ongeacht dark? Dit is niet altijd een eenvoudige klus, maar het laat zien dat je meegaat met de trends en inspeelt op de voorkeuren van je nieuwsbriefontvangers.

Bij 100%EMAIL hebben we developers en e-mailmarketeers om je te helpen met het maken van goede templates en content voor je e-mailcampagnes. Dus ook voor dark mode e-mails. Want, wij zijn de e-mailmarketingafdeling voor wanneer je die nodig hebt!

Wil je meer lezen over succesvolle e-mailcampagnes?

 

logo 100%e-mail

100%EMAIL is de e-mailmarketing specialist die je kan inzetten als flexibel verlengstuk van je organisatie. We werken met verschillende e-mailsoftware en marketingplatformen, hebben alle skills in huis om jouw e-mailmarketing tot een succes te brengen en dat zonder tussenpersonen zoals projectmanagers of accountmanagers.

Dus zeg het maar, hoeveel e-mailmarketing heb je nodig?

Wil je hier meer over horen?

Laat hier je gegevens achter en wij nemen graag contact met je op.