Dark mode, eli tumma tila

Moni sähköpostiohjelma tarjoaa nykyään tumman tilan, jossa käyttöliittymä sekä myös sähköpostiviestien taustaväri ja tekstit voivat muuttua tummasävyisiksi. Tämä asetus on käyttäjän päätettävissä, eikä siihen voi lähettäjä vaikuttaa. Tumma tila on yleistynyt erityisesti mobiililaitteissa.

Useimmissa tapauksissa viestit toimivat tummassa tilassa hyvin ilman erillisiä toimenpiteitä. On kuitenkin muutamia asioita, joita kannattaa ottaa huomioon viestin suunnittelussa, jotta sisältö säilyy selkeänä kaikissa katseluympäristöissä.

Tummassa tilassa teksti on silmille kevyempää lukea, ja sen käyttö on järkevää myös iltaisin, jolloin kirkkaan ruudun katselu ei ole unen saannin kannalta optimaalista. Lisäksi tumma tila säästää laitteiden akkua.

Tumma tila aktivoidaan puhelimen tai tietokoneen yleisistä asetuksista, mutta joskus valinta on mahdollista tehdä myös ohjelmakohtaisesti.

Mitä tämä tarkoittaa uutiskirjeviestijälle?

Jokainen ohjelma tekee muutoksen tummaan tilaan eri tavoin, eikä yhtenäistä tapaa vaikuttaa ulkoasuun löydy. Vaikka ohjelmat onnistuvat muutoksessa yleensä hyvin, kannattaa muutamia asioita ottaa huomioon viestipohjien suunnittelussa.

Miltä viestit näyttävät eri ohjelmissa tummassa tilassa?

Miten sähköpostiohjelmat käsittelevät värejä?

Useimmat ohjelmat pyrkivät säilyttämään viestin alkuperäisen ulkoasun, mutta voivat tehdä automaattisia muutoksia:

• Apple Mail: Poistaa valkoisen taustavärin ja säilyttää muut värit. Tämä voi johtaa heikkoon kontrastiin, jos käytössä on vaalea teksti valkoisella taustalla.

• Gmail: Säilyttää usein värit, mutta voi muuttaa vaaleita taustoja tummemmiksi tumma tila -asetusten mukaan.

• Outlook: Vaihtelee hieman version mukaan, mutta pääsääntöisesti vaihtaa taustan tummaksi ja tekstin vaaleaksi automaattisesti, säilyttäen muun rakenteen.

Väittämät kuten “valkoinen muuttuu mustaksi, musta valkoiseksi” eivät päde kaikkiin ohjelmiin, vaan värimuutokset ovat ohjelmakohtaisia ja vaihtelevia.

Mitä kannattaa huomioida suunnittelussa?

1. Käytä taustavärejä
   Aseta sähköpostipohjaan selkeä taustaväri (esim. #ffffff), jotta värit eivät jää sähköpostiohjelman päätettäväksi. Tämä estää mm. Apple Mailia tekemästä taustasta läpinäkyvää.

2. Vältä yksiväristä, kontrastitonta sisältöä
   Esimerkiksi harmaa teksti valkoisella pohjalla voi kadota tummassa tilassa.

3. Suosi SVG-kuvakkeita
   Käytä esimerkiksi Iconmonstr.com -sivuston mustia SVG-kuvakkeita some-ikoneissa – ne toimivat hyvin sekä vaalealla että tummalla taustalla.

4. Lisää glow- tai stroke-efekti logoon
   Jos logosi on tumma ja näkyy huonosti tummalla taustalla, lisää siihen kevyt hehku (glow) tai reunaviiva (stroke), jotta se säilyy luettavana.

Tumma tila ja Creamailerin uutiskirje

Seuraavaksi tarkastelemme Creamailerin edellistä uutiskirjettä tummassa tilassa. Katsotaan ensin miltä viesti näyttää normaalisti.

Viestin yläosa normaalitilassa:

Työpöytäsovellukset

Tarkastellaan seuraavaksi miltä viestit näyttävät tummassa tilassa työpöytäsovelluksilla.

Viestin yläosa:

Työpöytäsovelluksissa, niin Apple Mailissa kuin Outlook 2019 -versiossakin, viesti näyttää selkeältä, mutta logo voisi olla tyylikkäämpi. Outlook onnistuu paremmin tekemällä kirkkaasta taustaväristä hillitymmän.

Viestin alaosa:

Viestin alalaidassa tilanne on hyvin samankaltainen. Tosin some-kuvakkeet voisivat olla selkeämpiä.

Mobiilisovellukset tummassa tilassa

Miltä viestit näyttävät eri ohjelmissa mobiililaitteella? Vertailussa Apple Mail, Outlook ja Gmail.

Apple Mail muuttaa viestin lukukelvottomaksi. Kirkkaiden värien oletetaan olevan huomiovärejä ja näin ollen niitä ei muuteta. Ongelma korostuu erityisesti siksi, että ohjelma muuttaa täysin valkoiset taustavärit läpinäkyväksi. Jos viestissä olisi ollut maltillisempi taustaväri, olisi se näyttänyt hyvältä myös tässä ohjelmassa.

Outlookissa viesti näyttää hyvältä ja on kutakuinkin identtinen niin työpöytäversion kuin selainversionkin kanssa.

Gmailissa kirkkaiden värien oletetaan olevan huomiovärejä, jolloin niitä ei muuteta. Mainittakoon, että Gmail on ainoa sovellus, joka ei tue responsiivisuutta (skaalusta mobiililaitteille), joten ohjelma näyttää viestin työpöytäversion.

Mitä voimme tehdä paremmin?

Yhteenvetona voimme todeta, että tumma tila toimii Apple Mail -mobiilisovellusta lukuunottamatta kiitettävästi, vaikka muutoksia viestipohjaan ei tehtäisi.

Seuraavaksi tarkastelemme miten alla listattujen asioiden ulkoasua voidaan parantaa:

1. Logo ja sen tausta
2. Some-kuvakkeiden tausta
3. Sisällön taustaväri Apple Mail -mobiilisovelluksessa

Logo

Creamailerin logon tausta on valkoinen. Päivitämme logon PNG-kuvaformaattiin, jonka avulla sen taustasta voidaan tehdä läpinäkyvä. Mutta koska logon tumma teksti voi hukkua tummaan taustaan, kokeilemme kahta eri tehostetta, jotta teksti erottuisi paremmin:

1. tekstikehys (stroke)
2. tekstihehku (glow)

Eri logoversiot vertailussa tummassa ja normaalissa tilassa:

Efektin lisäämällä voimme edelleen käyttää logossa mustaa tekstiä, sillä se erottuu tummasta pohjasta. Normaalitilassa efekti ei erotu, koska se sulautuu valkoiseen taustaan. Omaan viestipohjaamme valitsimme logon valkoisella hehkulla (glow).

Some-kuvakkeiden ulkoasu

Erilaisia tummaan tilaan sopivia kuvakkeita voit luoda helposti esimerkiksi Iconmonstr.com-palvelussa.

1. Etsi haluamasi kuvake
2. Valitse formaatiksi PNG
3. Valitse kuvan kooksi 32px
4. Aseta haluamasi värikoodi (Creamailerin pohjassa käytössä #d4d4d4)
5. Hyväksy ehdot ja klikkaa download
6. Päivitä kuvake Creamaileriin

Esimerkki päivitetyistä some-kuvakkeista:

Sisällön taustaväri

Applen Mail -sovellus muuttaa sisältöalueen valkoisen taustan läpinäkyväksi. Lisäämällä valkoiseen sävyä, näin ei enää tapahdu. Muutimme sisältöalueiden taustan väriksi #fcfcfc, joka on hyvin lähellä valkoista.

Vältämme jatkossa kirkkaiden värien käyttöä taustassa, koska ne jäävät osassa ohjelmia näkyviin tehosteväreinä. Viestin taustan väriksi vaihdoimme hillitymmän harmaasävyisen värin #d1d1d1.

Yhteenveto

Monet viestit ovat selkeitä ja näyttävät hyvältä ilman, että niille tarvitse tehdä mitään. Alla listattujen toimenpiteiden avulla saimme kuitenkin tehtyä uutiskirjeestämme entistä hienomman.

1. Lisäsimme logoon hehkun, jotta se erottuu tummalla taustalla.
2. Lisäsimme sisältöalueiden valkoiseen taustaan sävyn, jotta se ei katoa Applen Mail -mobiilisovelluksella.
3. Vaihdoimme hillitymmän taustavärin, jotta viesti näyttää paremmalta Apple Mail -sovelluksilla.
4. Päivitimme some-kuvakkeiden taustat läpinäkyviksi.

Päivitetty versio

Perustila

Tumma tila

Työpöytä:

Mobiili:

Selain:

Outlook on ainut ohjelmisto, joka on tuonut tumman tilan myös selainversioon.

Vinkit

• Vältä kirkkaita värejä suurilla alueilla, kuten taustoissa.
• Käytä läpinäkyviä kuvia.
• Käytä läpinäkyvien kuvien, kuten logojen, tummissa pinnoissa tarvittaessa hehkua tai kehystä.
• Jos haluat, että sisältöalueen tausta ei katoa Apple Mail -mobiilisovelluksessa, käytä tehostesävyjä valkoisen sijaan.

Mitkä ohjelmat tukevat tumma tilaa?

Useimmat sähköpostiohjelmat tukevat nykyään tummaa tilaa, mutta tapa, jolla ne käsittelevät viestin ulkoasua, vaihtelee ohjelmittain. Alla on kooste yleisimmistä ohjelmista:

Mobiililaitteet

• Apple Mail (iOS) – Tumma tila käytettävissä, vaikuttaa sekä käyttöliittymään että viestin taustaan.

• Gmail (Android ja iOS) – Tumma tila saatavilla, sähköpostin sisältö voi mukautua automaattisesti.

• Outlook (Android & iOS) – Tumma tila käytössä ja viestin värit voivat vaihtua automaattisesti.

Työpöytäsovellukset

• Apple Mail (macOS) – Tumma tila vaikuttaa käyttöliittymään ja viestin taustaan.

• Outlook 2019 / Outlook for Windows & Mac – Tukee tummaa tilaa, viestin värit voivat muuttua automaattisesti.

Verkkoselaimessa

• Outlook.com

• Gmail (gmail.com) – Tumma teema saatavilla selaimen asetuksista.