Design

Den ultimative guide til e-mails i mørk tilstand

Kristina Lauren

13. juni 2022

Mørk tilstand er meget populært i disse dage, og med god grund – med blot et par tryk kan du ændre din enheds overordnede udseende til et mørkere farveskema, der er mere behageligt for øjnene og mere behageligt at se på i svagt lys. Denne interesse har også spredt sig til e-mailmarkedsføringens verden og opfordret flere e-mailudviklere og -designere til at vælge den mørke side.

I dette indlæg vil vi tale om fordelene ved mørk tilstand, hvordan du kan designe dine egne e-mails i mørk tilstand, og nogle tips til håndtering af e-mailklienter.

Hvad er mørk tilstand?

Mørk tilstand er en designtrend, der vender skriften om på den traditionelle hvid-på-sort farveskema. I mørk tilstand vises tekst og andre grænsefladeelementer i mørke farver mod en lys baggrund. Dette giver en visuelt tiltalende og mere behagelig oplevelse, når man læser eller bruger en app eller et websted i et miljø med svagt lys.

Mørk tilstand er perfekt til folk, der bruger meget tid på at stirre på skærme, da det kan hjælpe med at reducere øjentræthed. Det har også vist sig at forbedre batterilevetiden på enheder med OLED-skærme.

Hvad er fordelene ved e-mails i mørk tilstand?

Selvom mørk tilstand bestemt er æstetisk tiltalende og trendy, tilbyder den også nogle gode fordele for brugerne.

Lindrer øjentræthed

Det blå lys, som de fleste skærme fra vores hverdagsenheder udsender, kan desværre belaste det menneskelige øje meget. Da så mange af os arbejder lange timer og stirrer på skærme det meste af dagen, er det vigtigere end nogensinde at sørge for at passe på vores øjne. Mørk tilstand er en fantastisk måde at gøre det på, fordi mørkere farver er meget lettere at se på, hvilket forbedrer læsbarheden og fokus.

Reducerer skærmgenskin

Når en e-mail vises i lys tilstand, kan den lyse baggrund forårsage et genskin, der gør den vanskelig at læse. Dette gælder især, hvis du prøver at læse din e-mail på din telefon, mens du er udenfor i direkte sollys. Mørk tilstand eliminerer dette problem ved at vende farverne, så teksten er hvid og baggrunden er sort. Dette gør det nemmere at læse din e-mail, uanset hvor du er.

Hjælper med at spare på din enheds batteri

Mørk tilstand har vist sig at spare batterilevetid på enheder, fordi din enhed ikke behøver at arbejde så hårdt eller bruge så meget strøm for at vise en mørk farve sammenlignet med en lys. Dette er især fordelagtigt på mobile enheder, hvor batterilevetiden ofte er kortere end på bærbare eller stationære computere.

Hvilke e-mailklienter understøtter mørk tilstand?

Et stigende antal større e-mailklienter understøtter mørk tilstand op til et vist punkt, men her er en oversigt over, hvilke muligheder der er tilgængelige for mobilapps, desktopapps og internettet.

Mobil

Skrivebord

Web

Hvordan påvirker mørk tilstand præcist e-maildesign?

Selvom mørk tilstand varierer med hensyn til tilgængelighed på bestemte platforme, varierer den også med hensyn til, hvordan den vises på forskellige klienter. Den bedste måde at kategorisere disse forskelle på er ved, hvordan klienterne påvirker elementer i et e-maildesign. Nogle påvirker slet ikke designet, nogle påvirker det kun en lille smule, og andre ændrer tingene dramatisk. Lad os tage et kig.

Ingen ændringer

Disse klienter foretager ikke automatiske ændringer i dine e-mails. Det betyder, at alle elementer i dit design, herunder billeder, skriftfarver og knapper, vises på samme måde i både lys og mørk tilstand.

Apple Mail
iPad Mail
Hey.com

Delvis invertering

Nogle klienter vil kun delvist påvirke udseendet af dine e-mails ved at invertere områder med lys baggrund. Områder, der allerede ser mørke ud, vil for det meste ikke blive påvirket.

Outlook.com
Outlook (Mac OS)
Outlook-appen (iOS og Android)
Gmail-appen (Android)

Fuld invertering

Klienter til invertering af farver i fuld farve påvirker både lyse og mørke baggrunde. Det betyder, at lyse områder inverteres for at vises som mørkere farver, men det samme vil ske med mørke farver.

Outlook (Windows)
Gmail-appen (iOS)

Hvad er nogle tips til design af e-mails i mørk tilstand?

Gør billedbaggrunde gennemsigtige

Når det er muligt, så sørg for at baggrundene på dine grafikker er gennemsigtige, især logoer og ikoner på sociale medier. Ideen bag dette er at undgå, at billeder vises mærkeligt, hvis modtagerens e-mailklient er indstillet til mørk tilstand. Nogle gange, hvis baggrundsfarverne på dine billeder er inverterede, kan du ende med en blok omkring billedet, der muligvis ikke matcher resten af e-mailen. Men når baggrunden er gennemsigtig, vil billedet se ens ud, uanset om det vises i mørk eller lys tilstand, hvilket giver det et renere og mere sammenhængende udseende.

Tilføj en hvid kontur til mørke billeder og tekst

På den anden side kan det at tilføje en lys kontur til bestemte billeder hjælpe dem med at skille sig mere ud. Du bør sandsynligvis overveje dette med et logo eller ikon, især et, der typisk har en mørkere farve. I lys tilstand vil konturen ikke vises, men i mørk tilstand vil det hjælpe med at forme billedet og forbedre dets synlighed.

Vær dog opmærksom på, at dette muligvis ikke er ideelt med al grafik, inklusive logoer. Hvis tilføjelse af en kontur gør et logo uigenkendeligt eller strider mod brandingstandarder, er det nok bedst at udelade det og bruge et andet alternativ.

Brug medieforespørgsler

Medieforespørgsler giver dig mulighed for at ændre design og layout af din e-mail baseret på klientens muligheder. Dette er sandsynligvis den mest almindelige måde at gøre e-mails kompatible med forskellige e-mailklienter.

For eksempel kan du registrere, om modtagere har indstillet deres brugerflade til lys eller mørk tilstand, og vise specifikke elementer for hvert tema. Brug følgende CSS-blok til at gøre dette:

@media ( foretrækker-farveskema : mørk ) {
  .mørk { baggrund : #000 ; farve : hvid ; }


@media ( foretrækker-farveskema : lys ) {
  .lys { baggrund : #bbb ; farve : sort ; }
}

Eksemplet ovenfor påvirker kun baggrundsfarven og skriftfarverne i e-mailen, men du kan også bruge disse medieforespørgsler til at ændre billeder, knapper eller andre elementer med CSS.

Brug præfikset [data-ogsc] til Outlook

Desværre virker medieforespørgsler alene muligvis ikke for modtagere, der bruger Outlook-appen, men den gode nyhed er, at hvis du blot indsætter præfikset [data-ogsc], kan du stadig sikre mørk tilstand. Din kode ville se nogenlunde sådan ud:

@media ( foretrækker-farveskema : mørk ) {
[ data-ogsc ] .dark-bg { baggrundsfarve : #fff ; }

Er der nogen ulemper ved at bruge e-mails i mørk tilstand?

Selvom e-mails i mørk tilstand tilbyder en række fordele, er der et par ting at overveje.

For det første understøtter ikke alle e-mailklienter det endnu. Hvis dine modtagere bruger en e-mailklient, der ikke understøtter mørk tilstand, vil de i stedet se din e-mail i dens normale lyse tilstand. Dette kan føre til en vis inkonsistens i din branding.

En anden ulempe er, at e-mails i mørk tilstand kan være svære at læse, hvis de ikke er designet godt. Du skal sørge for, at din tekst er letlæselig mod den mørkere baggrund, og at dine CTA-knapper og andre elementer stadig er let synlige.

Er der noget andet, jeg skal huske på, når jeg designer e-mails i mørk tilstand?

Sørg for, at alle dine links er synlige og nemme at klikke på. Kontrast er nøglen, når det kommer til links i mørk tilstand, da du ønsker, at de skal være lette at få øje på mod en mørk baggrund.
Undgå at bruge tekstfarver, der kan virke forstyrrende mod en mørk baggrund. For eksempel kan farver som rød eller grøn fungere fint i en lys e-mail, men i mørk tilstand kan disse farver være svære at læse eller simpelthen ubehagelige for øjet. Det er bedst at holde sig til hvid, lysegrå eller mere neutrale farver.
Vær opmærksom på dine skrifttypevalg. Nogle skrifttyper ser bedre ud i mørk tilstand end andre. Sans-serif-skrifttyper fungerer typisk godt, ligesom tynde skrifttyper med høj kontrast.

Mørk tilstand er måske ikke en ny funktion på e-mailmarkedet, men den vokser hurtigt i popularitet blandt e-mailklienter og udviklere. Selvom der er nogle udfordringer forbundet med det, er implementering af mørk tilstand-kompatibilitet i dine e-maildesigns en god måde at vise dit publikum, at du bekymrer dig om deres præferencer, og det kan endda forbedre engagementet.

Leder du stadig efter vejledning i design af e-mails i mørk tilstand? Scalero kan hjælpe! Vores ekspert-e-mailudviklere kan designe og kode brugerdefinerede skabeloner, der ser godt ud i både lys og mørk tilstand.

Kontakt os for at komme i gang !