Mörkt läge e-post design bästa praxis
Du kommer att lära dig
Lär dig mer om mörkt läge, en enhetsinställning som vissa användare aktiverar för att göra sina skärmar mörkare. Denna inställning 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 mängd fördelar. Användare kan välja mörkt läge för att:
- Minimera ansträngningen för ögonen.
- stödja hälsosammare sömnvanor.
- Förläng enhetens batteritid.
- Förbättra tillgängligheten.
Enligt Litmus ökade antalet personer som tittar på e-post i mörkt läge från 28% 2021 till 34% 2022.
Mörkt läge och din varumärkesutveckling
Dark mode påverkar din e-post varumärkesutveckling genom att justera den HTML som används för att återge den i inkorgen. Dessa justeringar kan vara så små som att invertera färger i en e-post med enbart text (medan HTML-e-post lämnas oförändrad), eller så omfattande som att justera alla färger i din fullt designade e-postmallar.
Om du inte tar hänsyn till mörkt läge när du utformar din e-post kan det resultera i svårläst text, färger som inte överensstämmer med ditt varumärkes stilar och mycket mer.
Tänk på SWAK Cosmetics logotyp. På en vit bakgrund ser det bra ut.
Men när den visas på en enhet med mörkt läge är den omöjlig att läsa.
Observera ändringarna i e-postrubriken mellan ljust och mörkt läge. E-postens bakgrundsfärg, textfärg och färg på länkfältet var alla inverterade.
Enheter och operativsystem som erbjuder mörkt läge
Detaljerna för ändringar i mörkt läge varierar mellan olika enheter och operativsystem. Litmus erbjuder en resurs om de enheter som erbjuder mörkt läge och hur de behandlar HTML-e-post.
I allmänhet kan inkorgar delas in i två kategorier: de som gör minimala eller inga ändringar och de som inverterar e-postens färger.
Minimala förändringar
Vissa inkorgar, som Apple Mail för datorer, gör inte ändringar i e-postinnehållet direkt (om du inte inkluderar metataggar för mörkt läge). I den här inkorgen är den enda förändringen mellan ett meddelande i mörkt eller ljust läge färgen bakom avsändarinformationen.
Invertering av färg
Andra inkorgar, som Outlook på skrivbordet, inverterar delvis dina färger. Detta innebär att vissa ljusare färger byts ut mot mörkare nyanser och att vissa mörkare färger byts ut mot ljusare (t.ex. mörk text som tidigare hade en ljus bakgrund). Slutresultatet är en e-post som är betydligt mörkare än originalet.
Strategier för begränsning
Det finns flera strategier för att behålla din varumärkesutveckling samtidigt som du optimerar för ljus- och mörkerläge. Välj den som bäst passar ditt teams kapacitet och behov av varumärkesutveckling.
Utveckla design med ljusa och mörka lägen i åtanke
Om du använder Klaviyo:s drag-and-drop-redigerare för att skicka din e-post är denna strategi bäst. Utveckla dina e-postmallar med tanke på vilka förändringar de kommer att genomgå på enheter med 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 ljus skugga på en mörk logotyp med transparent bakgrund, så att den sticker ut 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 ut hela det utrymme den tar upp (t.ex. 600 pixlar bred för bilder i full bredd).
- Använd text när det är möjligt, hellre än att använda bilder som innehåller text. Detta möjliggör invertering i fullfärg (och är dessutom bättre för tillgängligheten).
Anpassad kod för mörka och ljusa versioner
Om du har ett utvecklarteam som kan skräddarsy din HTML-e-post från grunden kan du tillhandahålla CSS som känner av om en tittare använder mörkt eller ljust läge och anpassar designen därefter. Detta kan åsidosätta vissa standardinställningar för mörkt läge i vissa inkorgar, så att du har mer kontroll.
Alla inkorgar, enheter och operativsystem är olika, så du måste ta hänsyn till en mängd olika e-postmottagare när du utformar versioner i mörkt och ljust läge av en e-post.
Du kan använda @media (prefers-color-scheme: dark) och [data -ogsc ] för att rikta in dig specifikt på dark mode-användare i din e-postkod. Läs mer om vilka e-postklienter som finns support dessa etikett och vilken kod du kan använda i din egen design.
Använd e-post med endast bilder
Vi rekommenderar inte att du använder e-post med enbart bilder av flera olika skäl:
- Utan alt-text kan din e-post se misstänkt ut i inkorgen och hamna i skräppostmappen.
- E-postmeddelanden med enbart bilder är inte en bästa praxis för tillgänglighet, eftersom de är svåra att läsa för många människor och skärmläsare.
- Att använda e-post med endast bilder för att tvinga fram ett ljusläge är att kringgå dina prenumerantpreferenser.
Många varumärken använder dock denna strategi, så det är värt att nämna här. E-postmeddelanden med enbart bilder förlitar sig inte på HTML för färger, teckensnitt, avstånd med mera. Det betyder att de inte kan inverteras, så inkorgen kommer att visa ett e-postmeddelande som i stort sett överensstämmer med din ursprungliga design.
Ytterligare resurser
- Guide till redigeraren för e-postmallar
Läs mer om Klaviyos dra- och släppredigerare för e-postmallar, inklusive hur du använder mallstilar och konfigurerar varje blocktyp.
- Bästa praxis-referens för tillgänglighet i e-postmeddelanden och formulär
Lär dig hur du gör din e-post och ditt registreringsformulär mer tillgängliga. När du utformar din e-post och registreringsformulär vill du se till att dina mönster är tillgängliga för alla dina mottagare.
- Kom igång med e-postdesign