Best practices voor e-mailontwerp in donkere modus
Wat je leert
Leer meer over de donkere modus, een apparaatinstelling die sommige gebruikers inschakelen om hun beeldscherm donkerder te maken. Deze instelling beïnvloedt hoe e-mail wordt 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?Waarom gebruiken mensen de donkere modus?
De donkere modus is populair geworden omdat er verschillende voordelen aan worden toegeschreven. Gebruikers kunnen de donkere modus kiezen om:
- Minimaliseer vermoeide ogen.
- gezondere slaapgewoonten ondersteunen.
- Verleng de levensduur van de batterij van een apparaat.
- De toegankelijkheid verbeteren.
Volgens Litmus steeg het aantal mensen dat e-mail in de donkere modus bekijkt van 28% in 2021 naar 34% in 2022.
Donkere modus en je brandingDonkere modus en je branding
De donkere modus beïnvloedt de branding van je e-mail door de HTML aan te passen die wordt gebruikt om de e-mail in de inbox weer te geven. Deze aanpassingen kunnen zo klein zijn als het omkeren van kleuren in e-mail met alleen tekst (terwijl HTML e-mail ongewijzigd blijft), of zo omvangrijk als het aanpassen van elke kleur in je volledig ontworpen e-mailtemplate.
Als je geen rekening houdt met de donkere modus bij het ontwerpen van je e-mail, kan dat resulteren in moeilijk leesbare tekst, kleuren die niet overeenkomen met je merkstijlen en meer.
Denk aan het logo van SWAK Cosmetics. Op een witte achtergrond ziet het er geweldig uit.
Maar als je het bekijkt op een apparaat met donkere modus, is het onmogelijk om te lezen.
Let op de veranderingen in deze e-mailheader tussen de lichte en donkere modus. De achtergrondkleur van de e-mail, de tekstkleur en de kleur van de linkbalk zijn allemaal omgekeerd.
Apparaten en besturingssystemen die een donkere modus biedenApparaten en besturingssystemen die een donkere modus bieden
De details van de veranderingen in de donkere modus verschillen per apparaat en besturingssysteem. Litmus biedt een overzicht van de apparaten die de donkere modus bieden en hoe ze HTML e-mail behandelen.
Over het algemeen vallen inboxen in 1 van de 2 categorieën: degenen die minimale of geen wijzigingen aanbrengen en degenen die e-mailkleuren omkeren.
Minimale wijzigingenMinimale wijzigingen
Sommige inboxen, zoals Apple Mail voor desktop, brengen niet direct wijzigingen aan in de inhoud van je e-mail (tenzij je metatags in de donkere modus toevoegt). In deze inbox is de enige verandering die je ziet tussen een bericht in donkere of lichte modus de kleur achter de afzenderinformatie.
Kleurinversie
Andere inboxen, zoals Outlook op de desktop, draaien je kleuren gedeeltelijk om. Dit betekent dat sommige lichtere kleuren worden vervangen door donkerdere tinten en dat sommige donkere kleuren worden vervangen door lichtere (bijvoorbeeld donkere tekst die eerder op een lichte achtergrond stond). Het eindresultaat is een e-mail die aanzienlijk donkerder is dan het origineel.
Matigingsstrategieën
Er zijn verschillende strategieën om je branding te behouden terwijl je optimaliseert voor de lichte en donkere modus. Kies de oplossing die het beste past bij de capaciteit van je team en de behoeften op branding.
Ontwikkel ontwerpen met licht en donker in gedachtenOntwikkel ontwerpen met licht en donker in gedachten
Als je Klaviyo's drag-and-drop editor gebruikt om je e-mail te versturen, is deze strategie het beste. Ontwikkel je e-mailtemplate terwijl je in gedachten houdt welke veranderingen ze zullen ondergaan op apparaten met een donkere modus:
- Gebruik logo's en afbeeldingen die er goed uitzien op lichte en donkere achtergronden, zoals deze voor Bola's bakkerijproducten.
- 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 met achtergrondkleuren gebruiken in plaats van een transparante achtergrond. Als je deze optie kiest, zorg er dan voor dat je afbeelding de ruimte die hij inneemt volledig vult (bijvoorbeeld 600px breed voor afbeeldingen over de hele breedte).
- Gebruik waar mogelijk tekst in plaats van afbeeldingen die tekst bevatten. Dit maakt volledige kleurinversie mogelijk (plus, het is beter voor de toegankelijkheid).
Aangepaste code donkere en lichte versies
Als je een ontwikkelaarsteam hebt dat je HTML e-mail van de grond af aan kan aanpassen, kun je CSS opgeven dat detecteert of een kijker de donkere of lichte modus gebruikt en het ontwerp daarop aanpassen. Dit kan bepaalde standaardinstellingen van de donkere modus in sommige inboxen opheffen, zodat je meer controle hebt.
Elke inbox, elk apparaat en elk besturingssysteem is anders, dus je moet rekening houden met een grote verscheidenheid aan e-mail ontvangers bij het ontwerpen van donkere en lichte versies van een e-mail.
Je kunt @media (prefers-color-scheme: dark) en [gegevens-ogsc] gebruiken om gebruikers met een donkere modus specifiek te targeten in de code van je e-mail. Lees meer over welke e-mailclients support deze tag gebruiken en welke code je kunt gebruiken in je eigen ontwerpen.
Gebruik e-mail met alleen afbeeldingen
We raden het gebruik van e-mail met alleen afbeeldingen om verschillende redenen af:
- Zonder alt-tekst kan je e-mail er verdacht uitzien voor inboxen en in de spammap belanden.
- E-mails met alleen afbeeldingen zijn geen best practice voor toegankelijkheid, omdat ze voor veel mensen en schermlezers moeilijk te lezen zijn.
- Als je e-mail met alleen afbeeldingen gebruikt om een lichtmodus te forceren, omzeil je de voorkeuren van je abonnee.
Maar veel merken gebruiken deze strategie, dus het is het vermelden waard. E-mails met alleen afbeeldingen zijn niet afhankelijk van HTML voor kleuren, lettertypen, spatiëring en meer. Dit betekent dat ze niet kunnen worden omgekeerd, dus inboxen zullen een e-mail weergeven die over het algemeen overeenkomt met je oorspronkelijke ontwerp.
Extra hulpbronnen