'Dark mode' vraagt om verandering in e-mailopmaak

Nu steeds meer mailboxproviders ondersteuning bieden voor de 'dark mode' (donker kleurthema) wordt het als e-mailmarketeer belangrijker om hier aandacht aan te besteden. Wie dit niet doet loopt namelijk het risico dat verzonden e-mails niet goed worden weergegeven. In dit blogbericht bespreken we hoe je e-mails optimaliseert voor de dark mode en leggen we uit waarom dit belangrijk is.

Ondersteuning door steeds meer e-mailclients

De 'dark mode' is een kleurthema waarbij lichtkleurige teksten worden getoond tegen een donkere achtergrond. In de afgelopen jaren is de populariteit van de dark mode toegenomen. Ook veel mailboxproviders zoals Apple Mail, Gmail en Outlook ondersteunen het.

Aanpassing in e-mailweergave

Als je geen aanpassingen doet aan de oorspronkelijke opmaak van je e-mail, dan worden e-mails in dark mode op één van de volgende drie manieren weergegeven:

• Kleuren worden deels omgekeerd
  Blokken met een lichte achtergrond en donkere tekst worden omgekeerd. Blokken met een donkere achtergrond en lichte tekst blijven onveranderd. Op deze manier wordt de gehele e-mail getoond in een donker thema.
• Alle kleuren worden omgekeerd
  Blokken met een lichte achtergrond en donkere tekst worden omgekeerd. Hetzelfde geldt voor blokken met een donkere achtergrond en lichte tekst. Wanneer je in de originele opmaak een donkere achtergrond gebruikt kan het dus zijn dat e-mails juist lichter worden weergegeven.
• Er worden geen veranderingen toegepast op de originele opmaak
  Het uiterlijk van de e-mail verandert niet wanneer de dark mode wordt ingeschakeld.

Goede e-mailvertoning in dark mode

Om ervoor te zorgen dat je e-mail er in de dark mode van verschillende mailboxproviders goed uitziet kun je een aantal aanpassingen doen aan de e-mailopmaak.

Zorg ervoor dat afbeeldingen een doorzichtige achtergrond hebben

Als je in je originele e-mailopmaak een ronde afbeelding met een witte achtergrond gebruikt of gebruikmaakt van een achtergrondkleur die aansluit bij de template wordt deze rand zichtbaar in de dark mode. Gebruik daarom transparante afbeeldingen in PNG-formaat. Deze 'kleuren' worden in de dark mode goed weergegeven.

Gebruik tags om afbeeldingen af te stemmen op de dark mode

In de HTML-code van je e-mailtemplate kan je speciale tags toevoegen waarmee je de weergave in de dark en light mode bepaalt. Door 'dark' of 'light' toe te voegen aan de code kan een afbeelding bijvoorbeeld worden afgestemd op het gekozen kleurthema van de ontvanger. Hieronder een voorbeeld:

<img alt="" />
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)" />
<img src="light-image.png" alt="" />

Tenslotte: test altijd hoe je e-mail eruitziet in verschillende mailboxproviders

Doordat een e-mailtemplate er soms anders uitziet in de inbox van de ontvanger is het belangrijk om e-mails goed te testen. Je kunt de weergave van e-mails in verschillende e-mailclients controleren door een testmail te versturen naar verschillende adressen (bijvoorbeeld een @hotmail-, @gmail- en @yahoo-adres). Ook kun je gebruikmaken van de inboxplaatsing-test in Copernica. Zo heb je op voorhand inzicht in de weergave van e-mails in de meestgebruikte e-mailclients en op verschillende apparaten.