Mörkt läge för e-postinnehåll dark-mode
Mörkt läge gör att en e-postklient eller app som stöder det kan visa e-postmeddelanden med mörkare bakgrund och ljusare färger för text, knappar och andra visuella element. Den här typen av bildskärm kan minska ögonbelastningen, spara batteritid och förbättra läsbarheten i miljöer med svag belysning för en mer bekväm visningsupplevelse. Som en allt större trend för större operativsystem och appar är det nu en viktig faktor i den moderna e-postdesignen för att säkerställa att innehållet förblir läsbart och visuellt tilltalande för alla användare.
När du skapar ditt e-postinnehåll i den visuella designrymden Journey Optimizer B2B Edition kan du växla till Dark mode -vyn. I den här vyn kan du även definiera specifika anpassade inställningar för stöd av e-postklienter när deras mörka läge är aktiverat.
Ta hänsyn till e-postklienter
Det finns stora skillnader i hur olika e-postklienter och appar använder mörkt läge. Därför bör du ta hänsyn till förväntningarna på återgivning i mörkt läge med försiktighet. Innan du använder mörkt läge i e-postdesignområdet bör du överväga följande användningsfall för e-postklienter:
Vissa e-postklienter stöder inte den här funktionen alls, till exempel:
- Yahoo! Mail
- AOL
Om du definierar anpassade inställningar för mörkt läge i e-postdesignen kan dessa e-postklienter inte visa någon återgivning i mörkt läge.
Vissa e-postklienter tillämpar systematiskt sitt eget mörka standardläge på alla mottagna e-postmeddelanden. Färger, bakgrunder, bilder och andra element justeras automatiskt efter deras inställningar för mörkt läge och externa inställningar går inte att göra. Bland dessa klienter finns:
- Gmail (Desktop Webmail, iOS, Android™, Mobile Webmail)
- Outlook Windows
- Outlook Windows Mail
I det här fallet åsidosätter klientens inställningar för mörkt läge de anpassade inställningarna för mörkt läge som du definierar i Journey Optimizer B2B Edition
Många av de populäraste e-postklienterna erbjuder alternativet att återge anpassat mörkt läge med frågan @media (prefers-color-scheme: dark), som är den metod som används av e-postformaten i Journey Optimizer B2B Edition. Listan över klienter innehåller:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
I det här fallet återges de specifika inställningar som du har definierat i Journey Optimizer B2B Edition. Vissa begränsningar kan dock gälla för varje e-postklient. Vissa klienter (till exempel Apple Mail 16 (macOS 13)) genererar inte något mörkt läge om det finns bilder i e-postinnehållet.
Testa innehållet med de e-postklienter som ni riktar in er på för att få optimala resultat. Om du vill se en simulering som ligger så nära det slutliga resultatet för varje klient som möjligt använder du LIMUS-e-postteståtergivningsintegrationen i e-postdesignområdet.
Design för mörkt läge
När du formaterar ditt e-postinnehåll för mörkt läge i Journey Optimizer B2B Edition innehåller den visuella designmodellen två typer av verktyg:
Förhandsvisa standardläget för mörk preview-dark-mode
-
Öppna e-postinnehållet i e-postdesignområdet.
I det övre högra hörnet av arbetsytan finns det en ljusmörk väljare som växlar visningen av innehållet mellan ljust (standard) och mörkt läge.
-
Ändra väljaren till mörkt läge (
Innehållet visas på arbetsytan med standardförhandsvisningen i mörkt läge.x
Som standard används färgschemat
full color inverti förhandsvisningen i mörkt läge på alla element utom bilder och ikoner. Det här färgschemat identifierar områden med ljusa och mörka element och inverterar dem. Ljusa bakgrunder blir mörk och mörk text blir ljus, eller mörka bakgrunder blir ljusa och ljusa text blir mörka.
Definiera anpassade inställningar för mörkt läge custom-dark-mode
När du har växlat till mörkt läge kan du välja att redigera specifika formatelement för innehållet som bara visas när mörkt läge är aktiverat i mottagarens e-postklient (förutsatt att det har stöd för den funktionen).
Det anpassade formatet för mörkt läge i e-postdesignområdet använder @media (prefers-color-scheme: dark) CSS-fråga som identifierar om e-postklienten är inställd på mörkt läge och använder den design med mörka teman som definieras i e-postmeddelandet.
Definiera anpassade mörkt läge :
-
Flytta väljaren till mörkt läge (
-
Redigera eventuella formatfärgattribut, till exempel text, bakgrunder eller knappar.
-
För bilder och ikoner definierar du specifika resurser endast för mörkt läge.
Du kan inte ändra färgerna på bilder och ikoner, men du kan definiera alternativa resurser som ska användas i mörkt läge. Du kan experimentera med olika färgkombinationer för dina ikoner eller justera färg och mättnad för fotografiska bilder.
Markera en bild och växla till Dark mode med den dedikerade växlingsknappen i rutan Settings. Välj sedan en annan bildresurs.
Mer information om hur du väljer en bildresurs finns i Lägg till bildresurser.
-
När som helst under designändringarna väljer du Switch to live view för att kontrollera hur innehållet kan återges på olika enhetsstorlekar.
I den här vyn ändrar du väljaren till Mörkt läge (
note caution CAUTION Live-vyn är en allmän förhandsvisning som är utformad för att jämföra hur återgivningen kan se ut på olika enhetsstorlekar. Den slutliga återgivningen kan variera beroende på mottagarens e-postklient. -
När ändringarna av det mörka läget är klara klickar du på Simulate Content.
Använd verktygen för förhandsgranskning och korrektur för att testa din e-postdesign. Mer information finns i Förhandsgranska och testa ditt e-postinnehåll.
-
Om du har ett Litmus Enterprise-konto väljer du Render email för att se den slutliga återgivningen i mörkt läge för olika e-postklienter i Litmus.
Mer information finns i Testa e-poståtergivning med Litmus.
note caution CAUTION Simuleringen simulerar noga hur e-post visas i mörkt läge, men den faktiska återgivningen kan variera beroende på variationer i e-postleverantörer eller inställningar på enhetsnivå.
Bästa praxis best-practices
Efterhand som användningen av mörkt läge ökar för alla större e-postklienter är det viktigt att tänka på hur dina e-postmeddelanden återges i både ljusa och mörka miljöer, oavsett om du använder anpassat mörkt läge eller inte.
Mörkt läge kan ändra färger, bakgrunder och bilder - ibland åsidosätta designalternativ. Följ dessa standarder för att säkerställa visuell enhetlighet, tillgänglighet och varumärkesintegritet:
Checklista:
- Spara logotyper och ikoner som PNG-filer med genomskinliga bakgrunder för att undvika synliga vita rutor i mörkt läge.
- Undvik bilder med hårdkodade vita eller ljusa bakgrunder.
- Om genomskinlighet inte är ett alternativ kan du placera bilder på en solid bakgrund i designen för att förhindra otydliga färgförändringar.
Checklista:
- Se till att det finns tillräcklig kontrast mellan text och bakgrundsfärger för läsbarhet i både ljust och mörkt läge.
- Undvik att använda enbart bakgrundsfärger för viktigt innehåll. Vissa klienter åsidosätter bakgrundsfärger i mörkt läge, så se till att viktig information fortfarande visas.
Checklista:
- Använd färgkombinationer som är enkla att skilja på för färgblinda.
- Använd en mellantonspalett för att säkerställa kontrast mot både ljusa och mörka bakgrunder.
- Använd tillgängliga färgkombinationer med hög kontrast för att förbättra läsbarheten och uppfylla Web Content Accessibility Guidelines (WCAG)-standarder. Använd verktyg som WebAIM Contrast Checker för att verifiera färgkontrast.
- Undvik tunna teckensnitt eftersom det kan påverka läsbarheten. Om ert varumärke kräver ett tunt teckensnitt kan du fet stil i mörkt läge.
- Hoppa över rent vitt på rent svart, vilket kan orsaka ögonproblem och kan inverteras automatiskt i vissa e-postklienter.
- Ange hjälpmedelsanpassad grundformatering om mörkt läge inte stöds.
Checklista:
- Använd förhandsvisningen i mörkt läge i e-postdesignområdet, där inverterade färgscheman används för att upptäcka problem tidigt.
- Använd ett Litmus Enterprise-konto med alternativet Render email om du vill simulera dina designer för vanliga e-postklienter (som Apple Mail, Gmail och Outlook) och se hur färger och bilder fungerar i mörkt läge.