Dark mode, eli tumma tila on ollut jo pitkään kovassa nosteessa ja sen suosio jatkaa kasvuaan myös sähköpostiohjelmissa. Tummaa tilaa tukeva ohjelma muuttaa tekstin kirkkaaksi ja taustan tummaksi. Tästä johtuen se myös parantaa viestin saavutettavuutta, sillä näkörajoitteisille valkoisen tekstin lukeminen tummalla pohjalla on monesti helpompaa.
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.
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ä näyttävät viestit 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:
- Logo ja sen tausta
- Some-kuvakkeiden tausta
- 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:
- tekstikehys (stroke)
- 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.
- Etsi haluamasi kuvake
- Valitse formaatiksi PNG
- Valitse kuvan kooksi 64px
- Aseta haluamasi värikoodi (Creamailerin pohjassa käytössä #d4d4d4)
- Hyväksy ehdot ja klikkaa download
- Päivitä kuvake Creamaileriin
Esimerkki päivitetyistä some-kuvakkeista:
Sisällön taustaväri
Applen Mail -sovellus muuttaa 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.
- Lisäsimme logoon hehkun, jotta se erottuu tummalla taustalla.
- Lisäsimme sisältöalueiden valkoiseen taustaan sävyn, jotta se ei katoa Applen Mail -mobiilisovelluksella.
- Vaihdoimme hillitymmän taustavärin, jotta viesti näyttää paremmalta Apple Mail -sovelluksilla.
- Päivitimme some-kuvakkeiden taustat läpinäkyviksi.
Päivitetyt versiot
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?
Mobiili
- Apple Mail (iOS)
- Gmail (Android, iOS tulossa)
- Outlook (Android & iOS)
Työpöytä
- Apple Mail
- Outlook 2019
Web
- Outlook.com
Vuonna 2019 Apple toi tumman tilan Mail-ohjelmaansa niin tietokoneissa kuin puhelimissakin. Muita tummaa tilaa tukevia ohjelmia ovat mm. Outlook, Twitter, Slack, WhatsApp ja Facebook Messenger. Vaikka monet ohjelmat ovat lisänneet tuen tummalle tilalle, on jokaisella siihen oma toteutustapansa. Apple Mail -ohjelma on tällä hetkellä ainut, jossa voi teknisesti vaikuttaa tumman tilan ulkoasuun. Muut ohjelmat eivät ulkoasun muokkausta vielä tue.
Apple Mail -ohjelmissa voi vaikuttaa tumman tilan ulkoasuun. On hyvä huomioida, että Applen mobiilisovelluksessa ulkoasu poikkeaa huomattavasti työpöytäsovelluksesta.
Gmail on tuomassa tummaa tilaa sovelluksiinsa, ja se löytyykin jo osasta Android laitteita.
Outlook toimii lähes identtisesti niin mobiilissa kuin työpöytäsovelluksessakin.