zoeken
+31(0) 40 304 0070bel ons
Contactmail ons
menu

Hoe beïnvloedt dark mode mijn e-mails en hoe houd ik er rekening mee?

Terug naar alle blogberichten
Daag ons uit!
  1. Home
  2. Blog
  3. Hoe beïnvloedt dark mode mijn e-mails en hoe houd ik er rekening mee?

In dit blog schijn ik een lichtje (of juist niet) op een nieuwe trend in e-mail: dark mode. Dit is een alternatieve kleurinstelling van je apparaat of een app. Het maakt gebruik van lichte typografie, UI-elementen en iconen op een donkere achtergrond. Je zou dus kunnen zeggen dat dark mode de donkere voorgrond op een lichte achtergrond omdraait. Dit betekent ook dat je e-mails er in sommige clients totaal anders uit kunnen zien. Je e-mail ontwikkel je immers gebaseerd op de ‘standaard’ kleurinstelling van een gebruiker.

Uit een onderzoek van Litmus blijkt echter dat dark mode door 29% van hun ontvangers al wordt gebruikt! Het wordt dus al flink omarmd. Maar het brengt ook voldoende uitdagingen met zich mee. Eerst neem ik je mee door de voordelen voor de gebruiker.

Waarom kiezen voor dark mode?

Voor sommige apparaten werkt dark mode energiebesparend. Daarnaast is het prettiger voor gebruikers die last hebben van fotofobie, oftewel gevoeligheid voor licht. Ook voor slechtzienden kan dark mode prettiger zijn dan de default kleurinstelling van hun apparaat. Het kan ook een gebruikersvoorkeur zijn, simpelweg omdat de gebruiker het mooier of prettiger vindt. Het is in ieder geval belangrijk om er rekening mee te houden. Hoe? Ik leg het je uit.

Welke clients ondersteunen het?

Niet alle clients ondersteunen dark mode. Mocht je willen weten in hoeverre jouw ontvangers hun e-mails openen in een device of app in dark mode, dan kan dat! Gebruik hiervoor een tracking script van bijvoorbeeld Litmus of Email On Acid. Door een stukje code toe te voegen in de head van je e-mailtemplate, kan deze tool achterhalen of jouw e-mail wordt bekeken in dark mode. In de rapportage van de tool, kun jij vervolgens terugzien hoe populair het onder jouw ontvangers is. Zoals gezegd, wordt het niet door iedere client ondersteund. Hieronder een lijstje, volgens Litmus, van de clients die dark mode aanbieden:

Mobiele applicaties

  • iPhone Mail
  • iPad Mail
  • Gmail App (Android)
  • Gmail App (iOS)
  • Outlook App (Android)
  • Outlook App (iOS)

Desktop Clients

  • Apple Mail
  • Outlook 2019 (Mac OS)
  • Outlook 2019 (Windows)

Web-based Clients

  • Outlook.com
  • Hey.com

Maar zoals we al langer weten, behandelt iedere client jouw e-mail op zijn eigen manier. En voor dark mode geldt hetzelfde. Zo past Gmail zelf al images aan als deze getoond worden in dark mode. Zie de social media icons hieronder, die automatisch naar een zwarte variant worden geconverteerd in dark mode, door de Gmail app.

Hieronder zie je een overzicht van Email On Acid, waarin je kunt zien welke clients op welke manier omgaan met dark mode. Waar de Gmail app op mobiel de e-mails volledig aanpast, zal op de web app van Gmail alleen de interface aangepast worden, maar blijft de e-mail ongewijzigd.

Hoe kun je hiermee omgaan?

Gelukkig kun je rekening houden met dark mode. Zoals gebruikers het omarmen, zullen wij als e-mailmarketeers het ook moeten omarmen en niet omzeilen. We zullen dus rekening moeten houden met dark mode in onze designs. En dat kan gelukkig ook. Hoe? Hieronder geef ik je wat tips.

Transparante achtergrond

Vaak hebben je afbeeldingen nog een witte achtergrond. Logisch, omdat je een e-mail opmaakt in de normale modus en niet in dark mode. Maar zoals je in het fictieve voorbeeld van Litmus ziet, kun je in veel gevallen beter kiezen voor images met een transparante achtergrond. Op die manier vallen images, zoals iconen en logo’s, maar ook productfoto’s en call-to-actions, beter weg in de achtergrond dan wanneer je een witte achtergrondkleur hanteert. Gebruik dus PNG’s!

Creëer je eigen achtergrond

Heb je een donker logo dat wegvalt in dark mode? Zorg dat dat je je logo een witte outline geeft, zoals in het voorbeeld van Email On Acid.

Of maak gebruik van een witte waas achter het logo, zoals Litmus doet:

litmus dark mode voorbeeld

Bron: Litmus

Schakel het in

Zorg er daarnaast voor dat je een extra stukje code opneemt in je e-mail, zodat je e-mail überhaupt in dark mode wordt omgezet. Voeg onderstaande metadata in je <head> toe zodat dark mode ook voor jouw e-mails wordt geactiveerd:

  • <meta name=”color-scheme” content=”light dark”>
  • <meta name=”supported-color-schemes” content=”light dark”>

Hack the system

Je kunt specifieke content voor dark mode instellen. Voeg een stuk code toe in de style-section van je e-mail template. Vervolgens kun je een .dark-img en .light-img tonen. Eerstgenoemde komt alleen tevoorschijn in dark mode. Wil je hierover meer informatie? Neem dan contact met ons op.

Geen witte of zwarte tekst

Zorg dat je tekst voldoende contrasteert met de achtergrond wanneer deze wordt getoond in dark mode. Kies nooit een volledig witte (#ffffff) of volledig zwarte (#000000) tekst. Het kan namelijk zijn dat het contrast dan niet hoog genoeg is. Ga daarom voor een ietwat gebroken witte tekst of een donkergrijze tekst. Houd daarnaast ook rekening met het contrast voor tekst op achtergrondafbeeldingen. De e-mailclient, zoals Gmail of Outlook, houdt geen rekening met een achtergrondafbeelding. Dus als je achtergrondafbeelding wit is en je tekst zwart, zal de tekst in dark mode omgezet worden naar wit maar blijft de achtergrondafbeelding zoals deze is. Benieuwd of je kleuren voldoende contrast bevatten? Je kunt de hoogte van het contrast testen via verschillende tools, zoals deze.

Test!

Om er nog maar eens een cliché in te gooien; preview je mails in dark mode. De eerder genoemde tools Litmus en Email On Acid, stellen je in staat om jouw e-mails in een combinatie van de 100 populairste clients, devices, apps en browsers te previewen, ook in dark mode. Op die manier krijg jij een beeld hoe de e-mail er in verschillende clients in dark mode uit komt te zien.

Happy nog vragen over Dark Mode voor e-mail?

Kun je wel wat hulp gebruiken bij het implementeren van dark mode e-mails? Dan staan we voor je klaar! Neem contact met ons op voor meer informatie of een advies.

Verzenden

Blog

Relevant blog posts

Inhaakkalender 2022

17 december 2021

De klant centraal: hoe je klant voorkeuren écht inzet en de privacy waarborgt

1 september 2021

Verbeter jouw e-mail deliverability

18 augustus 2021

Daag jij ons uit voor je volgende project?

Daag ons nu uit!

Op de hoogte blijven van het laatste online nieuws?

Schrijf je in voor de nieuwsbrief

Druk op ENTER om te zoeken of ESC om de zoek overlay te sluiten.