Uutiskirjeiden optimointi dark modelle, eli tummalle tilalle

Uutiskirjeiden optimointi dark modelle, eli tummalle tilalle

27.03.2020 uutiskirje, viestintä, tumma tila, dark mode

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:

Creamailer uutiskirje - Light mode

Työpöytäsovellukset

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

Viestin yläosa:

Tumma tila - Apple mail vs Outlook 2019

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:

Tumma tila alaosa - Apple Mail vs Outlook 2019

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.

Tumma tila - iPhone - Apple Mail, Outlook & 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

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: Tumma vs vaalea -tila - Logojen vertailu

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 64px
  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:

Päivitetyt somekuvakkeet tummassa tilassa

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.

Apple Mail -mobiilisovellus - Korjatut taustavärit

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äivitetyt versiot

Perustila

Uutiskirje - perustila - p

Tumma tila

Työpöytä: Tumma tila - työpöytä - lopullinen

Mobiili: Tumma tila - mobiilisovelluset - lopullinen

Selain:

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

Tumma tila - Selainversio Outlook

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.

Kirjoittaja: Creamailer Oy