William Meuwissen
Frontend Developer
Heb je al eens de darkmode voor je mail, of zelfs voor je hele telefoon gebruikt? Ontwikkelaars gebruiken het al jaren, maar ook onder desktop en mobiele gebruikers zien we het gebruik toenemen. Darkmode is een persoonlijke voorkeur, maar daarnaast verbruikt de modus ook minder energie. Ben je een marketeer? Let dan extra goed op, want door het gebruik van darkmode kun je middels kleuren ergens extra focus op leggen.
Wat is de darkmode nu eigenlijk?
Een darkmodus zorgt voor hoger contrast door bijvoorbeeld e-mails een donkere achtergrond te geven en de voorgrond juist lichter te maken. Dit maakt content voor veel personen prettiger leesbaar en minder vermoeiend voor de ogen (vooral in een donkere omgeving).
Hoe werkt het?
Darkmode kijkt naar de CSS of naar de HTML attributen en past de weergave hierop aan. Donkere componenten worden lichter, lichte componenten worden donker. Dit gebeurt automatisch zodra de darkmode geactiveerd wordt. Er wordt niet gekeken naar het gebruik van afbeeldingen en dus is het van belang om afbeeldingen te gebruiken zonder achtergrond. Zo voorkom je dat een donkere achtergrond wordt verstoord door een afbeelding met een witte achtergrond. Zoals te zien is op de afbeelding hiernaast.
De ontwikkeling
Je kunt ervoor kiezen om met de bouw van een e-mailtemplate rekening te houden met een dergelijke darkmodus. De ontwikkelaar maakt hier samen met een designer bepaalde kleurprofielen voor aan. Dus stel de ontvanger van de mail heeft een darkmode geactiveerd, dan wordt de mail in een darkmodus getoond. Heeft de ontvanger de darkmodus niet geactiveerd dan wordt de mail in 'normale' staat ontvangen. Mocht de ontvangers niks hebben ingevuld, dan bepaald de e-mail client (het programma) zelf of de mail in darkmode of normale staat wordt getoond.
Elementen zoals een logo, call to action knop, een titel of een prijs zullen hierdoor beter uit de verf komen dan bijvoorbeeld een traditionele e-mail waarbij geen rekening wordt gehouden met een mogelijke darkmode van de gebruiker.
Voordelen van darkmode
- Darkmode bespaart energie (dit geldt overigens alleen voor apparaten met een OLED scherm).
- Het contrast bij darkmode is voor sommige mensen prettiger dan het normale zwart-op-wit: vooral voor slechtzienden en mensen die gevoelig zijn voor (blauw)licht.
Welke clients ondersteunen darkmode?
Een client is een software applicatie die het mogelijk maakt dat jij je e-mail kunt bekijken. Nog lang niet alle clients ondersteunen de darkmode al, maar de populariteit is hard aan het groeien. De volgende clients ondersteunen darkmode wel:
- Mobiele apps
- iPhone mail
- iPad mail
- Gmail app
- Outlook app
- Desktop clients
- Apple mail
- Outlook 2019
- Web clients
- Outlook
De verschillende types
Darkmode heeft 3 verschillende types:
- Dark UI (user interface)
Sommige e-mailclients bieden de mogelijkheid om de darkmodus aan te zetten. Alleen wanneer jouw e-mail geoptimaliseerd is voor darkmode, wordt het ook daadwerkelijk getoond. - Kleuren gedeeltelijk aangepast
Naar eigen inzicht van de e-mailclient worden kleuren omgedraaid. Ook hier kun je met een darkmode-versie de touwtjes in handen nemen. Heeft de ontvanger de modus niet geactiveerd dan worden de kleuren gedeeltelijk aangepast. - Auto-invert, volledige kleuraanpassing
Alle kleuren worden automatisch gedraaid. Het design wordt dus volledig omgedraaid. Het lastige hierbij is dat dit ook invloed heeft op donkere kleuren. Donkere kleuren worden lichte kleuren. Dus ook als je e-mail niet geoptimaliseerd is voor darkmode dan worden alle kleuren omgedraaid. Mocht een element in eerste instantie wel al geschikt zijn voor darkmode, dan wordt deze toch alsnog aangepast.
En dan nog een paar extra tips
- Om 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. Gebruik voldoende contrast. Via een contrast tool kun je controleren of twee kleuren voldoende contrast hebben.
- Om ervoor te zorgen dat je e-mail nog leesbaar blijft voor je ontvanger, is het belangrijk om donkere afbeeldingen of teksten dun te omlijnen met een lichte kleur. De ontvanger kan dan makkelijker onderscheid maken tussen donkere afbeelding en een donkere achtergrond.
- Als je transparante zwarte plaatjes hebt, zullen deze wegvallen doordat de achtergrond ook zwart wordt. Dit los je makkelijk op door een witte rand of gloed om je zwarte content te maken.
Interesse?
Verstuur jij e-mails namens het bedrijf en maak je nog geen gebruik van darkmode? Dan is dat na het lezen van dit blog wellicht het overwegen waard. Wij hebben developers, marketingmedewerkers en designers die staan te springen om jou te helpen.
Neem vrijblijvend contact met ons op en kom erachter wat darkmode voor jouw organisatie kan betekenen!