Sähköpostien tumman tilan (Dark Mode) huomioiminen LianaMailerissa

Sähköpostien ulkoasu voi muuttua vastaanottajan sähköpostiohjelman tumman tilan (Dark Mode) asetusten mukaan. Tämä koskee myös LianaMailerilla luotuja uutiskirjeitä ja sähköpostipohjia.

Eri sähköpostiohjelmat käsittelevät tummaa tilaa eri tavoin. Osa ei muuta sähköpostin värejä lainkaan, osa muuttaa vain tiettyjä värejä ja osa kääntää sekä taustavärit että tekstivärit kokonaan tai osittain päinvastaisiksi.

Tämän vuoksi vaaleaan tilaan suunniteltu sähköposti ei välttämättä näytä tummassa tilassa samalta kuin lähettäjän suunnittelema. Esimerkiksi teksti voi muuttua näkymättömäksi, logo voi kadota taustaan tai yrityksen brändivärit voivat muuttua.

Sähköpostin ulkoasua suunniteltaessa on hyvä huomioida seuraavat asiat, jotta viesti näkyy mahdollisimman hyvin sekä vaaleassa että tummassa tilassa.

1. Huomioi tumma tila jo suunnitteluvaiheessa

Tumma tila kannattaa ottaa huomioon heti sähköpostipohjan suunnittelun alussa, eikä vasta valmiin pohjan jälkikäteisenä korjauksena.

Suunnittele värit ja elementit siten, että sähköpostin sisältö säilyy luettavana myös silloin, kun vastaanottajan sähköpostiohjelma muuttaa viestin värejä automaattisesti.

2. Valitse värit huolellisesti

Käytä riittävän selkeitä kontrasteja tekstin ja taustan välillä. Hyvä kontrasti auttaa varmistamaan, että sähköpostiohjelmien tekemät värimuutokset eivät heikennä luettavuutta liikaa.

Suositeltavat kontrastisuhteet ovat:

• Tavalliselle tekstille vähintään 4,5:1.

• Suurelle tekstille vähintään 3:1.

Äärimmäisen mustia (#000000) taustoja ja täysin valkoista (#FFFFFF) tekstiä kannattaa välttää, sillä niiden värien kääntyminen voi aiheuttaa voimakkaita ja epätoivottuja muutoksia.

Myös taustavärien ja tekstivärien välisen kontrastin on hyvä olla riittävän suuri. Selkeä kontrasti auttaa sähköpostiohjelmia muodostamaan luettavamman väriyhdistelmän tummassa tilassa.

3. Huomioi kuvien ja logojen näkyvyys

Kuvat ja logot voivat käyttäytyä eri tavoin tummassa tilassa.

• Logot: Logon taustalla voi olla oma taustaväri ja riittävästi marginaalia logotiedoston sisällä. Näin logo erottuu taustastaan myös silloin, kun sähköpostiohjelma muuttaa viestin taustaväriä.

• Läpinäkyvät kuvat: Vältä toistaiseksi läpinäkyviä taustakuvia. Erityisesti Outlook 365 Windows -ympäristössä ja vanhemmissa Outlook-versioissa läpinäkyvät taustakuvat eivät välttämättä toimi odotetusti. Outlook voi sisällyttää taustavärin itse taustakuvaan, jolloin sähköpostiohjelman tekemät värimuutokset eivät toimi suunnitellusti.

• Tuotekuvat: Valkoisella taustalla olevat tuotekuvat voivat näyttää tummassa tilassa irrallisilta valkoisilta laatikoilta. Huomioi tämä kuvien sijoittelussa ja taustaväreissä.

• Alt-tekstit: Lisää kuville kuvaavat vaihtoehtoiset tekstit, jotta niiden sisältö välittyy myös silloin, kun kuvat eivät lataudu.

Erillisen tumman tilan logoversion käyttäminen ei ole suositeltavaa. Kaikki sähköpostiohjelmat eivät tue tumman tilan CSS-määrityksiä, joten erillinen logo ei välttämättä tule käyttöön vastaanottajan sähköpostiohjelmassa.

4. Huomioi tekstien ja painikkeiden luettavuus

• Käytä otsikoissa, hinnoissa ja painikkeissa oikeaa tekstisisältöä kuvien sijaan. Näin sisältö pysyy paremmin luettavana eri näyttötiloissa.

• Valitse painikkeisiin värit, jotka erottuvat selkeästi sekä vaaleasta että tummasta taustasta.

• Varmista, että painikkeiden tekstin ja taustavärin välillä on riittävä kontrasti.

• Käytä riittävän suuria fonttikokoja ja vältä liian ohuita fontteja, sillä ne voivat olla vaikeammin luettavia tummassa tilassa.

5. Vältä monimutkaisia liukuvärejä ja varjoja

Liukuvärit ja varjot voivat muuttua tai kadota kokonaan, kun sähköpostiohjelma käsittelee viestin värejä uudelleen.

Pidä sähköpostin ulkoasu mahdollisimman selkeänä ja vältä monimutkaisia visuaalisia efektejä, joiden toiminta riippuu tarkasti määritellyistä väreistä.

6. Huomioi HTML-sähköpostipohjien tumman tilan tyylit

HTML-sähköpostipohjissa voidaan määritellä erillisiä tyylejä tummaa tilaa varten CSS-mediakyselyillä.

Esimerkiksi:

@media (prefers-color-scheme: dark) {
    /* Dark mode styles */
}

Tämä mahdollistaa erillisten värimääritysten tekemisen sähköpostiohjelmille, jotka tukevat kyseistä ominaisuutta. Esimerkiksi Apple Mail tukee tätä, ja Outlook-sovelluksissa tuki on osittainen.

Huomioi kuitenkin, että kaikki sähköpostiohjelmat eivät tue näitä määrityksiä. Niiden toimintaan ei siksi kannata luottaa ainoana keinona sähköpostin ulkoasun hallinnassa.

7. Testaa sähköpostin ulkoasu eri ympäristöissä

Sähköpostin ulkoasu kannattaa aina testata sekä vaaleassa että tummassa tilassa ennen varsinaista lähetystä.

Testaa mahdollisuuksien mukaan ainakin seuraavissa sähköpostiohjelmissa:

• Gmail

• Outlook (Windows ja mobiili)

• Apple Mail

Tarkista erityisesti:

• Näkyvätkö tekstit ja otsikot selkeästi?

• Erottuvatko logot ja kuvat taustastaan?

• Ovatko painikkeet edelleen helposti havaittavissa?

• Ovatko värit ja kontrastit riittävät?

• Onko sähköpostin yleisilme edelleen yrityksen brändin mukainen?

8. Lisää linkki selaimessa katseluun

Sähköpostiin kannattaa mahdollisuuksien mukaan lisätä Lue selaimessa -linkki. Sen avulla vastaanottaja voi avata viestin verkkoselaimessa, jos sähköpostiohjelman tekemät värimuutokset vaikuttavat viestin ulkoasuun.