Fleur van Boeckel
Publicatiedatum 1 september 2021
Campaign development

Dark mode neemt in rap tempo de inbox over. Verschillende browsers, apps en besturingssystemen geven gebruikers de mogelijkheid om te schakelen naar de donkere modus. Denk aan: Apple OS en iOS, Android telefoons, Microsoft Outlook, YouTube & Google. Spotify heeft zelfs altijd al een donker design gehad. Ook in verschillende e-mail clients komt dark mode steeds vaker voor. In deze blogpost lees je meer over wat dark mode nou eigenlijk is en de mogelijkheden van dark mode voor jou als e-mailmarketeer.

Highlights uit deze blog

  • Voordelen van dark mode zijn alleen van toepassing in een donkere omgeving
  • Niet alle e-mail clients ondersteunen dark mode
  • Drie dark mode versies: dark UI, gedeeltelijke kleuraanpassing en auto-invert
  • Praktische tips voor het werken met dark mode

Wat is dark mode en hoe werkt het?

De donkere modus zorgt voor een hoger contrast door e-mails een donkere achtergrond te geven en de voorgrond juist licht te maken, zoals een lichte typografie. Voor veel mensen maakt dit een e-mail prettiger leesbaar, omdat het minder vermoeiend is voor de ogen. Vooral in een donkere omgeving, denk aan ’s nachts.

Met de dark mode worden donkere componenten in de e-mail lichter en lichte componenten juist donkerder. Dat resulteert vaak in een donkere achtergrond met lichte teksten. Daarbij wordt er gekeken naar de CSS van de gehele e-mail of van HTML-attributen. Dit betekent dat afbeeldingen niet automatisch worden aangepast naar dark mode. Het kan dus gebeuren dat een afbeelding opeens een witte rand heeft als de e-mail in de donkere modus wordt geopend.

Wat zijn de voordelen van dark mode?

Waarom kiezen gebruikers voor dark mode in plaats van light mode? Dit heeft drie redenen. Allereerst verbruiken OLED en AMOLED schermen in de donkere modus minder energie. Als je een LCD-scherm gebruikt, dan valt de vermindering in energieverbruik relatief mee.

Ten tweede wordt ook geclaimed dat het beter zou zijn voor je ogen. Dit gaat echter alleen op als de omgeving donker is. Onze ogen zijn het namelijk gewend om objecten op een lichte achtergrond te bekijken als de omgeving is verlicht 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.

Als je je e-mails nog even checkt wanneer je in bed ligt, dan is dark mode wel prettiger. Je ogen beginnen dan te wennen aan de donkere kamer en kunnen beter hun werk doen als het scherm ook donker is.

Tot slot kiezen veel gebruikers voor de donkere modus omdat ze dat persoonlijker mooier of fijner vinden.

Welke e-mail clients ondersteunen dark mode?

Iedere e-mail client ondersteunt dark mode op een andere manier. Allereerst is het belangrijk om te weten welke e-mail clients dark mode überhaupt wel of niet ondersteunen. Hiervan vind je een lijstje hieronder.

Image
Overzicht van e-mail clients die CSS voor dark mode wel of niet ondersteunen (Bron: Litmus, november 2019)

Daarnaast verschilt het dus per e-mail client welke versie van dark mode wordt ondersteund. Er zijn drie versies.

Dark mode versie 1: Dark UI (User Interface), alleen de kleur van de inbox verandert

Sommige e-mail clients, zoals Apple Mail, bieden de gebruiker de mogelijkheid om de app zelf in donkere modus te gebruiken. Als een gebruiker hiervoor kiest wordt alleen de inbox zelf zwart met witte letters. Dit heeft verder geen impact op de e-mails zelf, die houden hun oorspronkelijke kleur.

Image
Voorbeeld van Dark UI

Dark mode versie 2: gedeeltelijke kleuraanpassing

Als een e-mail client deze versie ondersteunt, wordt er in de e-mail gekeken of er een lichte achtergrond is en/of een donkere tekst. Zo ja, dan wordt dit omgezet. Mocht je e-mail al donkere vlakken bevatten, dan worden deze niet aangepast.

Dark mode versie 3: volledige kleuraanpassing, auto-invert

Bij deze versie worden alle kleuren 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. Dit gebeurt ook andersom.

Hieronder zie je een overzicht waarin per e-mail client staat aangegeven welke versie van dark mode wordt ondersteund.

Image
Overzicht van e-mail clients. Welk type dark mode wordt ondersteund? (Bron: Litmus, november 2019)

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

Wat nu als je als developer je eigen kleurthema voor je e-mails hebt ontwikkeld? Je wilt dat het kleurenthema behouden blijft of in ieder geval mooi wordt weergegeven in dark mode. Hiervoor moet je in de CSS duiken. Met ‘prefers-color-scheme’ kan je verschillende voorkeuren schrijven in de CSS van je e-mail. Dit kun je op twee verschillende manieren doen.

  1. @media (prefers-color-scheme: dark) werkt voor Outlook op Apple en Apple Mail.
  2. [data-ogsc] en/of [data-ogsb] werkt voor Outlook op Android-systemen. Zie hier een voorbeeld van in de afbeelding hieronder.
Image
Bron: Mark Robbins #EmailGeeks

Bij alles is het dus belangrijk dat je weet welke e-mail clients het meest worden gebruikt door jouw e-mailontvangers. Je kunt bovenstaande CSS ook met elkaar combineren, zodat de e-mail goed leesbaar is in meerdere e-mail clients.

Praktische tips voor het werken met de donkere modus in e-mail

Dark mode is een snel opkomende ontwikkeling. Steeds meer e-mail clients zullen dit ondersteunen. Daarom is het belangrijk om jezelf als e-mailmarketeer de vraag te stellen: Zijn mijn e-mails in de donkere modus nog goed leesbaar of moet ik aanpassingen doorvoeren?

Verder hebben we nog een aantal praktische tips voor je:

  • Gebruik plaatjes met een transparante achtergrond en in .png-formaat. Zo veranderen ze op een mooie manier mee in de omschakeling naar dark modus. Geen witte kaders op een donkere achtergrond.
  • Voeg een witte subtiele rand toe om je donkere content. Als je donkere afbeeldingen met een transparante achtergrond gebruikt, zullen deze wegvallen als de achtergrond ook donker wordt.
  • Gebruik geen witte teksten in je e-mails. Zo ben je er zeker van dat de teksten in je e-mails altijd goed te lezen zijn, in welke modus die ook worden bekeken. Je kunt beter kiezen voor een kleur die niet donker en niet licht is, zoals blauw. Met deze tool, contrast-ratio, zie je het contrasteffect van een bepaalde kleur als je switcht tussen dark mode en light mode.
  • Maak bij vaste plaatjes, zoals je logo, twee versies op. In de HTML van je e-mail kun je dan aangeven welke van de twee versies getoond dienen te worden in welke situatie.

Kortom; houd rekening met de donkere modus in je volgende e-mailcampagnes

Dark mode is een leuke uitdaging geworden voor e-mailmarketeers. Smartphone-gebruikers kunnen bij steeds meer e-mail clients instellen of ze een e-mail in dark mode willen lezen. Ze kiezen daar ook graag voor. Het leest prettiger in het donker, voor veel telefoons werkt de dark mode zuiniger en ze hebben er een persoonlijke voorkeur voor.

Aan jou als e-mailmarketeer de taak om te kijken hoe jouw e-mails er in dark mode uit komen te zien. Blijft de e-mail die je hebt gebouwd goed leesbaar ongeacht de modus waarin deze wordt gelezen? Maar ook: welke e-mail clients gebruiken jouw e-mailontvangers? Dit is niet altijd een eenvoudige klus, maar hiermee speel je in op de voorkeuren van je subscribers.

Logo van 100ProcentEmail

Bij 100%EMAIL is jouw ambitie onze drijfveer, want ieder e-mailvraagstuk verdient het een succesverhaal te maken. Met onze gestructureerde en volledige aanpak én ons gedreven en ervaren team van e-mailexperts halen we buitengewone resultaten. Zo creëren we samen met onze klanten succesverhalen.

Je hebt direct contact met je eigen e-mailexpert en daarachter een team van experts. Je krijgt dus niet te maken met dure tussenlagen, zoals projectmanagers of accountmanagers. Bovendien zijn we software onafhankelijk, dat betekent dat we verder werken in jouw e-mailsoftware of marketingplatform.

Dus, zeg het maar… Gaan wij samen van jouw e-mailambitie een succesverhaal maken?

Bel ons gerust voor een vrijblijvend gesprek over jouw uitdagingen. Je kunt ons per telefoon bereiken op 010 – 254 03 20, of een e-mail sturen naar info@100procent.email.

Contact?

Vul hier je gegevens in, dan hoor je snel van ons.

    Noodzakelijke cookies helpen een website bruikbaarder te maken door basisfuncties als paginanavigtie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren functioneren.

     

    Inschakelen

    Statistische cookies helpen ons begrijpen hoe bezoekers de website gebruiken, door anoniem gegevens te verzamelen en te rapporteren. Deze cookies verzamelen dus geen persoonlijke gegevens van de bezoekers.

    Inschakelen

    Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Het doel hiervan is om de bezoeker advertenties te laten zien die relevant zijn voor de bezoeker.

    Cookies zijn kleine tekstbestanden die door websites kunnen worden gebruikt om gebruikerservaringen efficiënter te maken. Volgens de wet mogen wij cookies op uw apparaat opslaan als ze strikt noodzakelijk zijn voor het gebruik van de website. Dit zijn de functionele cookies. Voor alle andere soorten cookies hebben we uw toestemming nodig. Deze cookies worden benoemd als: voorkeuren en statistieken en hoeft u dus niet te accepteren. Deze website maakt gebruik van verschillende soorten cookies. Sommige cookies worden geplaatst door diensten van derden die op onze pagina’s worden weergegeven.

    Cookies

    100%EMAIL gebruikt cookies om je de beste online ervaring te geven. Wil je meer weten, bekijk ons privacy statement

    ×
    Browser update aanbevolen.
    Beste gebruiker, u maakt gebruik van een verouderde browser. Voor een optimale ervaring bij ons en bij andere websites adviseren we u om een nieuwere browser te gebruiken. Bijvoorbeeld Microsoft Edge, of Google Chrome.