Best practices voor e-mailontwerp in de donkere modus

Wat je leert

Lees meer over de donkere modus, een apparaatinstelling die sommige gebruikers inschakelen om hun schermen te verdonkeren. Deze instelling heeft invloed op hoe e-mails worden weergegeven. De donkere modus is een eindgebruikersinstelling die op apparaatniveau wordt geselecteerd, en Klaviyo heeft geen directe controle over hoe de donkere modus op elk apparaat wordt geïmplementeerd.

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.

Apparaten en besturingssystemen die de donkere modus bieden

De details van wijzigingen in de donkere modus verschillen per apparaat en besturingssysteem. Litmus biedt een bron over de apparaten die een donkere modus bieden en hoe ze HTML-e-mails behandelen.

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, brengen geen wijzigingen rechtstreeks aan in de content van je e-mail (tenzij je dark mode-metatags opneemt). In deze inbox is de enige verandering die je ziet tussen een bericht in de donkere of lichte modus de kleur achter je afzenderinformatie.

Kleuren omkeren

Andere inboxen, zoals Outlook op desktop, keren je kleuren deels om. Dit betekent dat sommige lichtere kleuren worden vervangen door donkere tinten en sommige donkerdere kleuren 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.

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.

Gebruik 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 deze strategie echter, dus het is het vermelden waard. E-mails die alleen uit afbeeldingen bestaan, zijn niet afhankelijk van HTML voor kleuren, lettertypen, witruimte en meer. Dit betekent dat ze niet kunnen worden omgekeerd, dus inboxen tonen een e-mail die over het algemeen overeenkomt met je oorspronkelijke ontwerp.