Sähköpostien koodaus tummaa tilaa varten: opas sähköpostin kehittäjille


Olemme siis todenneet sen Dark Mode on asia. (Melko merkittävä asia, jopa.) Mutta olemme myös todenneet, että monet ihmiset eivät vieläkään suunnittele tai kehitä Dark Modea varten. Vaikka tämä on totta useista syistä, kun kysyimme rakkailta sähköpostinörteiltämme, miksi tämä saattaa olla totta, yleisin vastaus on, että sähköpostien koodaaminen Dark Modelle on usein pelkkää kovaa.

Mutta sen ei tarvitse olla. Tästä haasteesta kiinnostuneena keskustelimme Litmusin oman sähköpostikehittäjän kanssa ja saimme sisäpiirin Dark Modesta ja sen kanssa työskentelyn aiheuttamista haasteista. (Ja kyllä, jaamme täysin.)

Tänään kerromme, miten valloittaa koodaussähköpostit Dark Modea varten tarkastelemalla sähköpostikehittäjämme periaatteita menestyksekkääseen työskentelyyn Dark Moden kanssa. Tämän jälkeen tutustumme muutamaan yleisimpiin haasteisiin, joita olemme nähneet kehittäjien kohtaaman tämän prosessin aikana – ja kuinka voit voittaa ne.

Ei ole yhtä tummaa tilaa

Tumman tilan ensimmäinen sääntö on, että Dark Modesta ei ole yhtä versiota. On kolme eri tapaa että Dark Mode voidaan renderöidä. Tämä… monimutkaistaa asioita nopeasti. Se ei ole yksikokoinen asetus tai liukusäädin, joka vaihtaa päälle ja pois ja jonka voit ratkaista nopeasti.

Tästä syystä on mahdollista, että sinulla on ongelmia Dark Moden koodaamisessa. Loit kauniin sähköpostin yhdelle Dark Moden versiolle, mutta siellä on useita versioita, ja lähettämääsi sähköpostia ei yksinkertaisesti ole suunniteltu kyseiselle versiolle.

Joten koska Dark Modesta on useita eri versioita, turvallisin vaihtoehto on yksinkertaisesti olettaa, että et voi hallita Dark Modea.

“Hienoa”, saatat ajatella. “Se ei auta ollenkaan.” Älä koskaan pelkää! Emme ole valmiita.

Näin työskentelet näiden haastavien parametrien kanssa.

Progressiivisen parantamisen periaate

Kun työskentelemme Dark Moden kanssa – tai usein sähköpostin kanssa ollenkaan – haluamme käyttää periaatetta progressiivinen parannus.

Mitä tuo tarkoittaa? Progressiivinen parantaminen tarkoittaa sitä, että aloitat siitä, mitä voit hallita, ja harjoittelet sieltä ulospäin. Pohjimmiltaan se on koodausta ja suunnittelua pienimmän yhteisen nimittäjän mukaan, jotta sähköpostisi näkyvät edelleen toimivalla ja miellyttävällä tavalla vanhemmissa asiakaskoneissa, pöytäkoneissa ja selaimissa.

“Progressiivinen parannus on välttämätöntä Dark Moden kanssa työskentelyssä, koska et voi hallita sitä, miten ihmiset näkevät sähköpostisi.” Carin Slater, sähköpostimarkkinoinnin asiantuntija, Litmus

Tämä lähestymistapa sähköpostin kehittämiseen on käytännössä melko yksinkertainen. Määritä vain sähköpostisi tarkastelemiseen tarvittava toiminnallisuuden ehdoton perustaso ja lisää sieltä kehittyneempiä ominaisuuksia. Monet muuttujat voivat vaikuttaa siihen, kuinka paljon lisäät tähän; kaksi suurinta on se, missä tilaajasi avaavat sähköpostisi ja kuinka paljon aikaa sinulla on kehitykseen. Lisää edistyneitä ominaisuuksia vain, jos olet varma, että asiakas tukee niitä. (Ja ottaa loistava sähköpostityökalu joka näyttää muutokset sekä vaaleassa että pimeässä tilassa, auttaa ehdottomasti. 😀)

TLDR; Nämä kaksi periaatetta muodostavat kaiken Dark Mode -työsi selkärangan:

  1. Et voi hallita kaikkia tummia tiloja
  2. Progressiivinen parantaminen on ystäväsi

Nyt kun olemme luoneet kaksi periaatetta koodaamiseen Dark Modessa, siirrytään kahteen yleisimpiin Dark Mode -haastealueisiin.

Haaste #1: Kuvan optimointi

Ensimmäinen haaste, jonka näemme sähköpostin kehittäjien kohtaamassa – molemmat meidän yhteisömme ja luonnossa – on kuvan optimointi. Tiedätkö, kun avaat sähköpostin tummassa tilassa ja puolet kuvista ja kuvakkeista ovat näkymättömiä, koska ne ovat nyt tummia tummalla taustalla? Joo, tuo. Haluamme välttää sen.

Todellinen taistelu tässä on tietysti varmistaa, että kuvasi näyttävät hyviltä sekä vaaleassa että tummassa tilassa. Koska et voi vain vaihtaa vaaleisiin väreihin ja kutsua sitä päiväksi. Entä toinen puoli tilaajistasi?

Korjaus:

Ensimmäinen askel

Ensimmäinen askel on ohittaa selkeät taustat kokonaan ja lisätä ympyrä tai kontrastivärinen hehku kuvakkeiden ja logojen taakse. Tällä tavalla hallitset sähköpostisi jokaisessa versiossa näkyvää väriä riippumatta siitä, avaavatko tilaajasi sen pimeässä tilassa vai eivät.

Esimerkki logosta, jonka takana on valkoinen hehku. Litmusin Ultimate Guidesta pimeään tilaan

Vaihe kaksi

Vaihe kaksi on luoda vaihtoehtoisia versioita kuvistasi asiakkaille, jotka tehdä tukee kuvanvaihtoa. Mikset aloittaisi tästä? Koska jotkut sähköpostiohjelmat tukevat tummaa tilaa, kun taas toiset eivät, emme voi olettaa, että pystymme poistamaan kuvia jokaisesta sähköpostista. Mutta kun voimme, meidän pitäisi!

Tässä on esimerkki siitä, miltä tämä näyttäisi käytännössä:

Katsotaanpa ensin kuvan Light Mode -versiota. Tämä on alkuperäinen, jota käytämme kaikissa tapauksissa, joissa Light Mode on määritetty.

Light Mode -versio:

lakmus live light mode -versio

Seuraavaksi kuvan Dark Mode -versio, jossa kuvan vaihtoa EI tueta. Tätä käytämme, kun emme voi hallita pimeässä tilassa tapahtuvaa. (Huomaa: pyrimme lisäämään ympyröitä kuvakkeiden taakse!)

Tumma tila, jossa kuvanvaihtoa ei tueta:

lakmus-live-dark-mode-no-image-swap

Ja lopuksi, tässä on kuvan Dark Mode -versio, jossa kuvanvaihtoa tuetaan. Tätä käytämme, kun voimme hallita pimeässä tilassa tapahtuvaa. Huomaa vaaleammat kuvakkeet tummalla taustalla!

Tumma tila, jossa kuvanvaihto on tuettu:

lakmus-live-dark-mode-image-swap-tuki

Tämä iteratiivinen lähestymistapa kuvan optimointiin varmistaa, että kaikki mahdollisuudet otetaan huomioon, mutta ei yritä saada asioita tapahtumaan sähköpostiohjelmissa, joissa se ei onnistu. Kyse on joustavuudesta!

Haaste 2: Värikontrastit (tai niiden puute)

Toinen haaste, jonka näemme koodattaessa sähköposteja Dark Modelle, ovat värikontrastit… tai niiden puute. Dark Mode muuttaa tapaa, jolla sähköpostisi näyttävät huolella valitsemasi kauniit värit, ja tapa, jolla nämä värit muuttuvat, voi vaihdella asiakaskohtaisesti. Tekstistä voi tulla vaikeasti luettavaa, painikkeet katoavat tai välit menevät sekaisin. Jep!

Korjaus: suunnittele sähköpostisi niin, että vaikka asiakas ei sallisi sinun muokata värejä tummassa tilassa, sähköposti toimii silti. Se on tehokkaampaa ajankäyttöä kuin jokaisen mahdollisuuden huomioon ottaminen.

Katsotaanpa esimerkkiä hyvästä kontrastista

Tässä on sähköposti, jota varten loimme Litmus Livevarten asiakkaita missä me voi tyyliin Dark Mode.

Dark Mode -värit, kun voimme muokata Dark Modea:

lakmus-live-dark-mode-image-swap-tuki

Tässä on sama sähköposti asiakkaille, joissa meillä ei voi tyyliin Dark Mode.

Tumman tilan värit, kun emme voi muotoilla Dark Modea:

lakmus-elävät-värit-esimerkkivalo

Tämä toinen kuva ei ole kovin “tumma”, mutta kontrasti säilyy ja kaikki on silti helppolukuista. Tätä etsimme hyvästä Dark Mode -sähköpostisuunnittelusta – jotain, joka toimii myös silloin, kun asiakas ei ole ihanteellinen.

Tarkastellaanpa esimerkkiä vähemmän hyvästä kontrastista, jotta se vie pisteen kotiin.

Katsotaanpa esimerkkiä huonosta kontrastista

Vaikka emme nimeä yhtään nimeä, tämä on hyvin tavallinen esimerkki siitä, miten ei käyttääksesi Dark Modea.

Tässä on Light Mode -sähköposti, joka näyttää täydellisen ihanalta ja sähköpostin kehittäjä unelmoi sen olevan:

Valotila:

bad-coding-emails-for-dark-mode-1

Aaaaaja tässä on sähköposti pimeässä tilassa.

Tumma tila:

bad-coding-emails-for-dark-mode-2

Taustaväri on muuttunut, ja vaikka leipätekstin väri vaihtui, painike ei tehnyt harppausta kovin hyvin. “Lisätietoja” on vaikea lukea toimintakehotus (CTA) vähemmän toimivia. Tämä on sellainen asia, jonka voimme välttää luomalla tietoisesti sähköposteistamme versioita Dark Modelle, jotka säilyttävät tämän kontrastin.

Provinkki: Yksi parhaista tavoistamme käsitellä Dark Moden käänteisiä värejä on luoda Builder-tiedosto, jossa on tuotemerkkimme värejä, ja suorittaa se sitten Litmusin läpi nähdäksesi, kuinka Dark Moden eri versiot näyttävät nämä värit. Niin kuin:

Light Mode merkkivärit

Tumman tilan merkkivärit käänteisinä

Kun olemme tehneet tämän, voimme suunnitella oikeilla käänteisillä väreillä varmistaaksemme, että värikontrasti on olemassa.

Kuinka valloittaa koodaussähköpostit tummaa tilaa varten…

Pohjimmiltaan, kun kyse on sähköpostien koodaamisesta tummaa tilaa varten, vähemmän on enemmän. Muista tämä progressiivisen parantamisen periaate ja ihastu vain, kun tiedät, että voit. Peruskorjaukset, kuten kuvan optimointi ja värikontrastit, vievät sinut pitkälle.

Jos sinulla on lisää kysymyksiä, muista tutustua täydelliseen tarjontaamme Dark Mode Toolkit, johon olemme koonneet täydellisen esittelyvideon Dark Mode -sähköpostin koodaamiseen sekä koodinpätkät, joita tarvitset monien tässä mainittujen ongelmien korjaamiseen. Ja jos se ei auta – olemme aina tavoitettavissa osoitteessa [email protected] Ja tietenkin, lintujen nettisivuilla. Ota yhteyttä; autamme mielellämme!





Source link

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like these

This error message is only visible to WordPress admins

Error: No feed found.

Please go to the Instagram Feed settings page to create a feed.