Artikelen

Analyse: Wat doet Dark Mode met e-mails?

Hoe jouw transactionele e-mails beïnvloed worden door de donkere modus

Het laatste woord is er nog niet over gezegd, maar zeker is dat Dark Mode zijn officiële intrede heeft gedaan in de wereld van Customer Experience. Halverwege het vorige decennium werd er al mee geëxperimenteerd, maar steeds meer software-ontwikkelaars omarmen het verduisteren van hun weergave. Dat heeft ook effect op e-mail. Mobiele telefoons (zoals de iPhone) en inbox providers (zoals Gmail) hebben al een optie om Dark Mode in te schakelen. In dit artikel analyseren we het effect van Dark Mode voor jouw transactionele e-mails.

light tegenover dark mode in iOS inbox op iPhone
Light vs. Dark Mode voor iOS inboxes

Wat is Dark Mode?

Dark Mode is een toegankelijkheidsinstelling op devices of in applicaties die er voor zorgt dat de standaard heldere vormgeving veranderd wordt in een donker, vaak beter leesbaar kleurenpalet. In de basis draait Dark Mode zwart en wit om, vermindert het blauw licht en verlaagt het het contrast van een interface.

Deze instelling zorgt er echter ook voor dat e-mail rendering een nieuwe uitdaging leert kennen.

Stijgende populariteit

Ondanks dat de meningen over het nut van Dark Mode verdeeld zijn, wordt de toepassing wel steeds meer omarmd door grote aanbieders. Dark Mode gaat al een aantal jaar mee, maar 'pas' in 2019 ging bijvoorbeeld de donkere modus van Outlook live. Hiermee gaan de grootste spelers op de inbox-markt al mee met de trend: Apple Mail, Gmail en Outlook hebben Dark Mode geadopteerd.

Voor- en nadelen aan Dark Mode

Terwijl je dit artikel leest, stel je jezelf misschien de vraag in hoeverre jouw organisatie rekening moet houden met de invloed van Dark Mode. Al je e-mails aanpassen voor de donkere modus kan namelijk een flinke, tijdrovende klus worden. Om te kunnen bepalen of het voor jouw ontvangers zin heeft om voor Dark Mode te optimaliseren, zetten we hieronder voor- en nadelen aan het gebruik van dark mode op een rijtje:

Voordelen

  1. Dark Mode bespaart energie op een aantal apparaten met OLED display (Apple’s iPhone XS, XS Max en X, plus een aantal Samsung Galaxy en Google Pixel telefoons en een aantal laptops);
  2. Het contrast bij Dark Mode is voor sommige mensen prettiger dan het normale zwart-op-wit: vooral voor slechtzienden en mensen die gevoelig zijn voor licht (fotofobie).

Nadelen

  1. Donkere modus zou negatieve invloed hebben op performance van de gebruiker (vooral in werksituaties een belangrijke graadmeter);
  2. De weergave in donkere modus zorgt ervoor dat verschillende elementen van een e-mail niet makkelijk te onderscheiden zijn van de achtergrond (vooral lastig, wanneer een e-mail belangrijke informatie bevat).

Per branche kan het effect van Dark Mode dus verschillen. Bestaat je klantenbestand voornamelijk uit B2B-adressen? Dan is de kans dat Dark Mode breed geaccepteerd is kleiner dan wanneer veel B2C ontvangers hun e‑mail openen op mobiel.

Hoe Dark Mode jouw e-mails beïnvloedt

E-mail rendering is van veel factoren afhankelijk, waaronder Dark Mode. Het aan- of uitschakelen van de donkere modus bepaalt hoe je ontvanger je e-mail leest. Wat het precieze effect van de donkere modus is, is afhankelijk van de ontvangende partij. Zo zit er bijvoorbeeld verschil tussen de donkere modus op web-based client en app-based clients, maar verschillen die ook weer onderling.

Wit > Zwart > Wit

DARK MODE E-mail in Gmail Inbox
In de web-based client van Gmail is de inbox wel in Dark Mode, maar de e-mail zelf niet

Vrijwel alle ontvangende partijen wisselen automatisch wit en zwart om, afhankelijk van Dark of Light Mode. In Dark Mode is de achtergrond zo donker mogelijk en contrasteert het met witte letters, terwijl het 'normaal' in Light Mode andersom is.

Een paar partijen hebben echter wel een donkere User Interface (UI), maar hebben geen zwart-wit inversie voor de e-mails zelf, zoals het voorbeeld van de Gmail webmail hiernaast, AOL en Yahoo!-mail. Normaliter, bij de meeste partijen dus, betekent het inschakelen van Dark Mode voor de applicatie of de hele device echter gewoon dat ook het contrast van de e-mail veranderd wordt.

Alle blokken in je e-mail die niet voorzien zijn van een kleur (en dus zwart óf wit zijn) worden daarmee automatisch omgedraaid. Dat betekent dus dat ook alle witruimte tussen de blokken meeveranderd. Dat heeft het volgende effect:

verschil tussen dark en normale modus in Hotmail (live.com)
Witruimte in de header en tussen de blokken wordt veranderd in Dark Mode

Uit bovenstaand voorbeeld blijkt ook al dat Dark Mode niet alleen effect heeft op zwart en wit in je e-mail. Er wordt verschillend omgegaan met kleuren, maar vaak worden ze donkerder gemaakt. Ook kleurinversie varieert weer per inbox.

Kleurinversie

Zoals eerder aangekaart, heeft Dark Mode effect op de kleuren van de interface. Door het reduceren van blauwtonen in buttons, achtergrondkleuren en dergelijke HEX waarden, is het resultaat bij Dark Mode kleurinversie een doffere button of kleur in je e-mail. In bovenstaand voorbeeld is duidelijk dat de blauwe achtergrond donkerder is geworden dan in het origineel, maar dit geldt ook voor andere kleuren in je e-mail.

Omdat een HEX-waarde (bijvoorbeeld ons eigen #41bac3) altijd is opgebouwd uit rood-, groen- en blauwtinten, heeft Dark Mode soms ook effect op je oranje button, je groene H1-tekst en je bruine footer.
sources aanmaken in light mode
Origineel blok uit onze onboardings e-mail in Light Mode
sources aanmaken in dark mode
Hetzelfde blok, maar dan in Dark Mode


Bovenstaand voorbeeld illustreert de werking van Dark Mode voor zwart versus wit en voor blauwtinten. De roze button daarentegen is niet of nauwelijks veranderd. Dat heeft er mee te maken dat de kleur button ook in donkere modus een rustige uitstraling heeft en dus balanceert op het randje tussen Dark en Light Mode. Daarnaast kan dit ook per e-mail client en operating system veranderen. De ene client verandert wél zoveel mogelijk kleuren, terwijl de andere client slechts een gedeelte aanpakt. Hieronder zie je hoe dat verdeeld is:

Inversie bij Dark Mode, per grote e-mail client

tabel voor darkmode inversie per client en OS

Omgaan met Dark Mode als verzender

Als e-mailverzender kan Dark Mode dus best een uitdaging vormen, met drie uitkomsten: Je laat het voor wat het is, je probeert met CSS de donkere modus-code te kraken, of je past je content aan voor Dark Mode gebruikers. Voor de tweede optie is echter geen straight-forward oplossing; CSS aanpassen om de Dark Mode te 'hacken' kent slechts verdeeld succes: Alleen Apple Mail en varianten van Outlook ondersteunen dit. Waar je echter wel rekening mee kunt houden als e-mailverzender, zijn een aantal tips die helpen je e-mails te optimaliseren voor Dark Mode, zonder dat dit effect heeft op je standaard e-mails.

#1 Content beter uitlijnen

Door de content in je e-mails iets meer ruimte te geven aan de zijkant, creëer je in alle gevallen een (beter) leesbare e-mail. Voor kleinere schermen scheelt het dat tekst dan niet tegen de zijkant van het scherm aangeplakt zit, maar in sommige inboxes met Dark Mode is de tekst dan leesbaarder. Dat komt doordat zwarte tekst in normale modus veel witruimte aan de zijkant heeft, maar een groot deel hiervan wordt in donkere modus opgeheven. Hierdoor zit de zwarte tekst snel dicht tegen de donkere achtergrond aan. Met een beetje extra ademruimte vermijd je dat probleem.

witruimte in donkere modus is een pré
In sommige inboxes zorgt Dark Mode voor dit effect, waardoor tekst tegen de rand aan zit

#2 Afbeeldingen zoveel mogelijk .png-formaat

Door zoveel mogelijk afbeeldingen in je e-mail te vervangen door een .png-bestand, verhoog je ook de leesbaarheid van je e-mail. Het is namelijk gek, wanneer je een e-mail opent en je een volledig donkere e-mail ziet met her en der witte vlakken. Met png-afbeeldingen (zonder achtergrond, dus) heb je dat probleem niet. Voor png geldt bovendien dat het zich uitstekend leent voor kleine afbeeldingen, zoals een logo, tekstafbeelding of een thumbnail van een whitepaper (zie voorbeeld).

.png- tegenover .jpeg-bestanden in Dark Mode
Het verschil tussen PNG en JPEG, die in Light Mode allebei een witte achtergrond hebben, maar in Dark Mode verschillen

#3 Donkere afbeeldingen subtiel omlijnen

Een andere tip om ervoor te zorgen dat je e-mail nog leesbaar blijft voor je ontvanger, is om donkere afbeeldingen (vaak tekst) dun te omlijnen. Hoewel dit niet de meest favoriete tip is van designers en huisstijlgoeroes, werkt het dun omlijnen wel goed voor je ontvanger. Die kan dan makkelijker onderscheid maken tussen de donkere afbeelding en de donkere achtergrond. Je kunt er natuurlijk in sommige omstandigheden ook voor kiezen om je donkere afbeelding sowieso iets lichter te maken, waardoor die zowel in Dark als Light Mode zichtbaar is.

verschil tussen dark mode en light mode bij png bestanden met een dunne lijn eromheen

#4 Geavanceerd: In de e-mail switchen tussen light en dark modus

De vierde manier om je e-mails Dark Mode-proof te krijgen, is wat ingewikkelder. Je kunt namelijk in de e-mail zelf een toggle bouwen (aan/uit-knop) voor verschillende modi. Zo creëer je je eigen Dark Mode e-mail. Het voordeel daarvan is dat je volledig zelf in de hand hebt hoe een e-mail vertoond wordt in Dark Mode, omdat de ontvanger de mogelijkheid heeft om jouw design in donkere modus te bekijken. In tegenstelling tot de eerder genoemde designtips, geeft dit dus veel meer vrijheid.

Het nadeel aan deze manier van werken, is dat het nog niet helemaal bekend is hoe dit moet. Er bestaat al een dergelijke oplossing voor het in-mail wijzigen van de content voor bijv. slechtzienden (Accessibility Switcher™), maar er is nog niet veel mee geëxperimenteerd voor Dark Mode, laat staan voor transactionele e-mails. Daarom vergt deze manier van werken meer kennis en kunde van e-mail dan voorgaande tips.

Ga je met deze tips aan de slag, dan blijft het altijd belangrijk om te testen.

Testen

Wanneer je aan de slag gaat met het optimaliseren van je e-mails voor Dark Mode, wil je er zeker van zijn dat je veranderingen het gewenste effect hebben op Dark Mode en géén effect hebben op de normale variant. Daarom is het belangrijk om te blijven testen. Dat kun je op twee manieren doen; ofwel door voor jezelf een aantal e‑mailadressen aan te maken waarop je test. Aan de hand van dit artikel kun je bepalen welke e-mail clients voor jou relevant zijn.

Een andere manier om je e-mails te testen op Dark Mode compatibiliteit is door je e-mails naar een e-mail test tool te sturen, die ze analyseert voor alle bekende e-mail clients. Zo heb je overzicht in alle varianten die van je e‑mail gemaakt kunnen worden. Het nadeel dat hier aan kleeft is dat niet alle test tools voldoende functionaliteit hebben om te testen op Dark Mode.

Dark Mode; kans of bedreiging?

Hoewel nog vrijwel geen enkele ontvanger heeft geklaagd over het niet Dark Mode-proof zijn van een e-mail, is het wel van belang om te weten hoe de trend zich ontwikkelt en hoe de adoptie ervan verloopt. Dark Mode biedt jou als verzender de mogelijkheid om de inbox weer op een nieuwe manier te veroveren: Jouw e-mails passen perfect in de beleving van je ontvanger. Volledig in jouw stijl, volledig compatibel met Dark Mode. Aan de slag gaan met Dark Mode voor jouw e-mails is dus zeker een kans.

⏴terug naar artikelen