Best practices voor e-mailontwerp in de donkere modus

Wat je leert

Lees meer over de donkere modus, een instelling die gebruikers kunnen inschakelen op hun apparaat of in hun e-mailapp om hun scherm donkerder te maken. Deze instelling beïnvloedt hoe e-mails worden weergegeven. Klaviyo heeft geen directe controle over hoe elke inbox de donkere modus toepast.

Waarom gebruiken mensen de donkere modus?

De donkere modus is populair geworden omdat men denkt dat deze verschillende voordelen heeft. Gebruikers kunnen de donkere modus kiezen om:

• Beperk vermoeide ogen.
• Ondersteun gezondere slaapgewoonten.
• De batterijduur van een apparaat verlengen.
• Verbeter de toegankelijkheid.

Volgens Litmus is het aantal mensen dat e-mails in de donkere modus bekijkt gestegen van 28% in 2021 naar 34% in 2022.

Donkere modus en jouw branding

De donkere modus heeft invloed op je e-mailbranding door de HTML aan te passen die wordt gebruikt om je e-mail in de inbox weer te geven. Deze aanpassingen kunnen zo klein zijn als het omkeren van kleuren in e-mails met alleen tekst (terwijl HTML-e-mails ongewijzigd blijven), of zo ingrijpend als het aanpassen van elke kleur in je volledig ontworpen e-mailtemplate.

Als je bij het ontwerpen van je e-mails geen rekening houdt met de donkere modus, kan dat leiden tot moeilijk leesbare tekst, kleuren die niet bij je merkstijl passen en meer.

Neem het logo van SWAK Cosmetics. Op een witte achtergrond ziet het er geweldig uit.

Maar wanneer dit op een apparaat in de donkere modus wordt bekeken, is het onmogelijk om te lezen.

Let op de wijzigingen in deze e-mailkop tussen de lichte en de donkere modus. De achtergrondkleur van de e-mail, de tekstkleur en de kleur van de linkbalk werden allemaal omgekeerd.

E-mailapps en apparaten die de donkere modus bieden

De details van wijzigingen in de donkere modus verschillen per e-mailapp, apparaat en besturingssysteem. Litmus biedt een bron over de e-mailclients die een donkere modus aanbieden en hoe ze HTML-e-mails verwerken.

Over het algemeen vallen inboxen in 1 van de 2 categorieën: inboxen die minimale of geen wijzigingen aanbrengen en inboxen die e-mailkleuren omkeren.

Minimale wijzigingen

Sommige inboxen, zoals Apple Mail voor desktop, laten de kleuren in volledig ontworpen HTML-e-mails ongewijzigd, tenzij je metatags voor de donkere modus toevoegt. E-mails met alleen tekst kunnen nog steeds veranderen in de donkere modus. Wanneer de inhoud van de e-mail hetzelfde blijft, verandert alleen de omringende inbox van kleur.

Kleuren omkeren

Andere inboxen, zoals Outlook.com, keren je kleuren gedeeltelijk om. Dit betekent dat sommige lichtere kleuren worden vervangen door donkerdere tinten, en sommige donkere kleuren worden vervangen door lichtere (bijv. donkere tekst die eerder op een lichte achtergrond stond). Het eindresultaat is een e-mail die merkbaar donkerder is dan het origineel.

Sommige inboxen passen volledige kleurinversie toe, waardoor zowel lichte als donkere achtergronden veranderen. Outlook 2021 voor Windows kan bijvoorbeeld een donkere achtergrond licht maken.

Mitigatiestrategieën

Er zijn verschillende strategieën om je branding te behouden en tegelijkertijd te optimaliseren voor de lichte en donkere modus. Kies degene die het beste aansluit bij de capaciteit van je team en de behoeften van je branding.

Ontwikkel designs met lichte en donkere modus in gedachten

Als je Klaviyo’s editor voor slepen en neerzetten gebruikt om je e-mails te versturen, is deze strategie het beste. Ontwikkel je e-mailtemplates en houd daarbij rekening met de wijzigingen die ze ondergaan op apparaten met donkere modus:

• Gebruik logo's en afbeeldingen die er goed uitzien op lichte en donkere achtergronden, zoals deze voor het gebak van Bola.
  

• Of voeg een lichtgekleurde schaduw toe aan een donker logo met een transparante achtergrond, zodat het opvalt in de donkere modus.
  

• Je kunt ook afbeeldingsbestanden gebruiken die achtergrondkleuren bevatten, in plaats van een transparante achtergrond te gebruiken. Als je voor deze optie kiest, zorg er dan voor dat je afbeelding de ruimte die deze inneemt volledig vult (bijv. 600 px breed voor afbeeldingen over de volledige breedte).
  

• Gebruik waar mogelijk tekst in plaats van afbeeldingen die tekst bevatten. Hiermee kun je de kleuren volledig omkeren (en het is beter voor de toegankelijkheid).

Donkere en lichte versies van aangepaste code

Als je een ontwikkelaarsteam hebt dat je HTML-e-mails helemaal zelf kan coderen, kun je CSS toevoegen die detecteert of iemand de donkere of lichte modus gebruikt en het ontwerp daarop aanpassen. Dit kan bepaalde standaardinstellingen voor de donkere modus in sommige inboxen overschrijven, zodat je meer controle hebt.

Je kunt @media (prefers-color-scheme: dark) en [data-ogsc] gebruiken om gebruikers in de donkere modus specifiek te targeten in de code van je e-mail. Lees meer over welke e-mailclients deze tags ondersteunen en welke code je in je eigen designs moet gebruiken.

Vermijd e-mails met alleen afbeeldingen

We raden het gebruik van e-mails met alleen afbeeldingen om verschillende redenen niet aan:

• Zonder alt-tekst kan je e-mail er voor inboxen verdacht uitzien en in de spammap terechtkomen.
• E-mails met alleen afbeeldingen zijn geen best practice voor toegankelijkheid, omdat ze voor veel mensen en schermlezers lastig te lezen zijn.
• Het gebruiken van e-mails met alleen afbeeldingen om een weergave in de lichte modus af te dwingen, omzeilt de voorkeuren van je abonnees.

Veel merken gebruiken e-mails met alleen afbeeldingen, omdat afbeeldingsbestanden de kleuren en lettertypen behouden die in de afbeelding zijn verwerkt. E-mails met alleen afbeeldingen zijn echter nog steeds afhankelijk van HTML voor de lay-out, witruimte en omliggende achtergronden. Een inbox kan die omliggende kleuren wijzigen in de donkere modus, dus deze aanpak garandeert niet dat de hele e-mail overeenkomt met je oorspronkelijke ontwerp.

Test je e-mail in de lichte en donkere modus

Controleer vóór het verzenden of je logo’s, tekst en links in beide modi goed leesbaar zijn. Inbox testing is beschikbaar voor betaalde Klaviyo-accounts en omvat 100 tests per gebruiker per maand. Elke inboxpreview die je genereert, telt als 1 test.

1. Klik in de e-maileditor voor slepen en neerzetten op Voorbeeld en selecteer daarna Inbox testen.
2. Selecteer een profiel om een voorbeeld mee te bekijken. Selecteer voor een e-mail die gebeurtenisgegevens gebruikt de relevante gebeurtenis, zodat je de gepersonaliseerde content kunt controleren.
3. Vouw onder Inbox-tests selecteren Donkere modus uit en kies inboxen die door je abonnees worden gebruikt. Selecteer versies in de lichte modus om te vergelijken en verwijder vooraf geselecteerde inboxen die je niet nodig hebt.
4. Klik op Test uitvoeren. Wanneer de previews klaar zijn, klik je op elke tegel om deze te bekijken.
5. Klik op Klaar om terug te keren naar de editor. Breng eventuele ontwerpwijzigingen aan en voer daarna nieuwe tests uit om de bijgewerkte e-mail te controleren.

Meer informatie over het gebruik van inbox testing. Je kunt ook een testmail sturen naar inboxen waartoe je toegang hebt en deze vergelijken in de lichte en donkere modus.

Extra hulpbronnen