Bästa praxis för design av e-post i mörkt läge

Du kommer att lära dig

Lär dig mer om mörkt läge, en inställning som användare kan slå på i sin enhet eller e-postapp för att göra skärmen mörkare. Den här inställningen påverkar hur e-postmeddelanden visas. Klaviyo har inte direkt kontroll över hur varje inkorg tillämpar mörkt läge.

Varför använder folk mörkt läge?

Mörkt läge har blivit populärt eftersom det anses ha en rad fördelar. Användare kan välja mörkt läge för att:

• Minska ansträngningen för ögonen.
• Stöd hälsosammare sömnvanor.
• Förläng en enhets batteritid.
• Förbättra tillgängligheten.

Enligt Litmus ökade antalet personer som läser e-post i mörkt läge från 28 % år 2021 till 34 % år 2022.

Mörkt läge och ditt varumärke

Mörkt läge påverkar din e-postbranding genom att justera HTML-koden som används för att rendera den i inkorgen. Dessa justeringar kan vara så små som att invertera färger i e-postmeddelanden med enbart text (samtidigt som du lämnar HTML-e-postmeddelanden oförändrade), eller så omfattande som att justera varje färg i din helt designade e-postmall.

Om du inte tar hänsyn till mörkt läge när du designar dina e-postmeddelanden kan det leda till svårläst text, färger som inte stämmer överens med din varumärkesstil och mer.

Tänk på SWAK Cosmetics logotyp. Mot en vit bakgrund ser den bra ut.

Men när den visas på en enhet i mörkt läge är den omöjlig att läsa.

Lägg märke till ändringarna i det här e-postsidhuvudet mellan ljust och mörkt läge. E-postmeddelandets bakgrundsfärg, textfärg och färg på länkfältet var alla inverterade.

E-postappar och enheter som erbjuder mörkt läge

De specifika ändringarna i mörkt läge varierar mellan e-postappar, enheter och operativsystem. Litmus erbjuder en resurs om e-postklienter som erbjuder mörkt läge och hur de hanterar HTML-e-post.

I allmänhet faller inkorgar in i 1 av 2 kategorier: de som gör minimala eller inga ändringar och de som inverterar e-postfärger.

Minimala ändringar

Vissa inkorgar, som Apple Mail för datorer, lämnar färgerna i helt designade HTML-mejl oförändrade om du inte inkluderar metataggar för dark mode. Mejl med enbart text kan fortfarande ändras i dark mode. När innehållet i mejlet förblir detsamma är det bara inkorgen runt omkring som byter färg.

Färginvertering

Andra inkorgar, som Outlook.com, inverterar delvis dina färger. Det innebär att vissa ljusare färger byts ut mot mörkare nyanser, och vissa mörkare färger byts ut mot ljusare (t.ex. mörk text som tidigare låg på en ljus bakgrund). Slutresultatet blir ett mejl som är märkbart mörkare än originalet.

Vissa inkorgar använder fullständig färginvertering och ändrar både ljusa och mörka bakgrunder. Outlook 2021 för Windows kan till exempel göra en mörk bakgrund ljus.

Strategier för riskreducering

Det finns flera strategier för att behålla din varumärkesprofil samtidigt som du optimerar för ljust och mörkt läge. Välj den som bäst stämmer överens med ditt teams kapacitet och varumärkesbehov.

Utveckla design med ljust och mörkt läge i åtanke

Om du använder Klaviyo dra-och-släpp-redigerare för att skicka dina e-postmeddelanden är den här strategin bäst. Utveckla dina e-postmallar samtidigt som du tänker på vilka förändringar de kommer att genomgå på enheter i mörkt läge:

• Använd logotyper och bilder som ser bra ut på ljusa och mörka bakgrunder, som den här för Bolas bakverk.
  

• Eller lägg till en ljusfärgad skugga till en mörk logotyp med en transparent bakgrund, så att den syns tydligare i mörkt läge.
  

• Alternativt kan du använda bildfiler som innehåller bakgrundsfärger i stället för att använda en transparent bakgrund. Om du väljer det här alternativet ska du se till att bilden fyller hela utrymmet den tar upp (t.ex. 600 px bred för bilder i full bredd).
  

• Använd text där det är möjligt, i stället för att använda bilder som innehåller text. Detta möjliggör full färginvertering (och det är bättre för tillgängligheten).

Anpassad kod för mörkt och ljust läge

Om du har ett utvecklingsteam som kan specialkoda dina HTML-e-postmeddelanden från grunden kan du tillhandahålla CSS som upptäcker om en läsare använder mörkt eller ljust läge och anpassa designen därefter. Det kan åsidosätta vissa standardinställningar för mörkt läge i vissa inkorgar, så att du får mer kontroll.

Du kan använda @media (prefers-color-scheme: dark) och [data-ogsc] för att rikta in dig på användare av mörkt läge specifikt i koden i ditt e-postmeddelande. Läs mer om vilka e-postklienter som stöder dessa etiketter och vilken kod du ska använda i dina egna designer.

Undvik e-postmeddelanden med enbart bilder

Vi rekommenderar inte att använda e-postmeddelanden med enbart bilder av flera skäl:

• Utan alt-text kan ditt e-postmeddelande se misstänkt ut för inkorgar och hamna i skräppostmappen.
• E-postmeddelanden med endast bilder är inte en bästa praxis för tillgänglighet, eftersom de är svåra för många personer och skärmläsare att läsa.
• Att använda e-postmeddelanden med endast bilder för att tvinga fram ett utseende i ljust läge är att kringgå dina prenumeranters preferenser.

Många varumärken använder e-postmeddelanden som bara innehåller bilder, eftersom bildfiler bevarar färgerna och typsnitten som är inbyggda i bilden. Men även e-postmeddelanden med enbart bilder förlitar sig fortfarande på HTML för layout, mellanrum och omgivande bakgrunder. En inkorg kan ändra de omgivande färgerna i mörkt läge, så den här metoden garanterar inte att hela e-postmeddelandet matchar din ursprungliga design.

Testa ditt e-postmeddelande i ljust och mörkt läge

Kontrollera innan du skickar att dina logotyper, din text och dina länkar är läsbara i båda lägena. Inkorgstestning är tillgängligt för betalda Klaviyo-konton och inkluderar 100 tester per användare och månad. Varje inkorgsförhandsvisning som du genererar räknas som 1 test.

1. I dra-och-släpp-redigeraren för e-post klickar du på Förhandsgranska och väljer sedan Inkorgstestning.
2. Välj en profil att förhandsgranska med. För ett e-postmeddelande som använder händelsedata väljer du den relevanta händelsen så att du kan kontrollera det personanpassade innehållet.
3. Under Välj inkorgstester expanderar du Mörkt läge och väljer inkorgar som används av dina prenumeranter. Välj versioner i ljust läge för jämförelse och ta bort eventuella förvalda inkorgar som du inte behöver.
4. Klicka på Kör test. När förhandsgranskningarna är klara klickar du på varje ruta för att granska den.
5. Klicka på Klar för att återgå till redigeraren. Gör eventuella designändringar och kör sedan nya tester för att kontrollera det uppdaterade e-postmeddelandet.

Läs mer om hur du använder inkorgstestning. Du kan också skicka ett testmejl till inkorgar som du har åtkomst till och jämföra det i ljust och mörkt läge.

Ytterligare resurser