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 enhetsinställning som vissa användare slår på för att göra skärmarna mörkare. Den här inställningen påverkar hur e-postmeddelanden visas. Mörkt läge är en slutanvändarinställning som väljs på enhetsnivå, och Klaviyo har inte direkt kontroll över hur mörkt läge implementeras på varje enhet.
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.
Enheter och operativsystem som erbjuder mörkt läge
De exakta ändringarna i mörkt läge varierar mellan olika enheter och operativsystem. Litmus erbjuder en resurs om vilka enheter som har 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 dator, gör inte ändringar i ditt e-postinnehåll direkt (om du inte inkluderar metataggar för mörkt läge). I den här inkorgen är den enda ändringen du ser mellan ett meddelande i mörkt eller ljust läge färgen bakom din avsändarinformation.
Färginvertering
Andra inkorgar, som Outlook på dator, inverterar dina färger delvis. Det innebär att vissa ljusare färger byts ut mot mörkare nyanser och att vissa mörkare färger byts mot ljusare (t.ex. mörk text som tidigare låg på en ljus bakgrund). Slutresultatet är ett e-postmeddelande som är märkbart mörkare än originalet.
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.
Varje inkorg, enhet och operativsystem är olika, så du behöver ta hänsyn till en stor variation av e-postmottagare när du utformar versioner av ett e-postmeddelande för mörkt och ljust läge.
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.
Använd 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.
Men många varumärken använder den här strategin, så det är värt att nämna här. E-postmeddelanden med endast bilder är inte beroende av HTML för färger, teckensnitt, mellanrum med mera. Det innebär att de inte kan inverteras, så inkorgar kommer att visa ett e-postmeddelande som i allmänhet stämmer överens med din ursprungliga design.