Kysy minulta mitä tahansa: Sähköpostikehittäjämme jakaa vinkkejä Outlookiin, mobiilikoodaukseen ja pimeään tilaan


Tänään on erityinen päivä: annamme sinulle ainutlaatuisen katsauksen Litmusin oman sähköpostikehittäjän mieleen, Carin Slater!

Carin on yksi teknologisista päämiehistä kaiken takana Lakmus uutiskirjeet ja melkein kaikki mitä lähetämme. Kuten hän sanoo, hän on “sähköpostinörtti, joka taisteli viimeiset 9 vuotta Outlookin kanssa”.


Äskettäisessä virtuaalitapahtumassamme “
Kysy minulta mitä tahansa: koodaus Carinin kanssa”, hän jakoi parhaat sähköpostikehitysvinkkinsä vastaamalla joihinkin yleisimpiin koodauskysymyksiin ja vianetsintäsähköposteihin (sähköpostin nörtien lähettämänä) reaaliajassa.

Lue hänen vinkit aiheesta:

Yleiset Outlook-ongelmat

Sähköpostimarkkinoijat tietävät hyvin: kanssa Näkymät voi olla aika… monimutkaista. Mutta omituisuuksistaan ​​​​huolimatta niiden korjaamisen tietäminen voi todella terävöittää sähköpostin kehittämistaitojasi. Carin pohtii: “Minun piti opetella korjaamaan Outlookissa asioita, jotka ihmiset yleensä vain jättävät huomiotta.”

Tässä on yhteenveto joistakin Carinin yleisimmistä Outlookin ongelmista.

Valkoisten viivojen korjaaminen Outlookissa

Yksi yleisimmistä omituisuuksista, joita näet ja joista kuulet, ovat valkoiset viivat Outlookissa. Tässä on joitain korjauksia, joilla pääset eroon näistä ärsyttävistä valkoisista viivoista.

Heitä pöytä sen ympärille

Yksi Carinin suosikkikorjauksista valkoisille viivoille on yksinkertaisesti sijoittaa kaikki elementit sisäkkäiseen taulukkoon. “Joskus sinun tarvitsee tehdä vain tämä, ja sitten valkoiset viivat katoavat”, Carin selittää.

Jos esimerkiksi sähköpostin taulukon solussa on painike, jonka alareunassa näkyy valkoinen viiva, Carin kääri painikkeen toiseen taulukkoon.

Käytä parillisia numeroita täytteissä, kirjasinkooissa, leveyksissä jne.

Outlookilla on tapana lisätä välilyöntejä ja muuttaa pikseleitä pisteiksi. Tämä voi aiheuttaa epätasaisia ​​välilyöntejä ja aiheuttaa valkoisia viivoja sähköpostiisi. Kuitenkin pitämällä numerot tasaisina voit vähentää näiden väliongelmien todennäköisyyttä ja välttää valkoisten viivojen ilmestymisen.

Poista dir=”rtl”

Joskus suunta on yhtä suuri oikealta vasemmalle (tai dir=”rtl”) aiheuttaa valkoisia viivoja – joita Carin tekee reaaliajassa alla.

Reaaliaikainen vianetsintä: Valkoiset viivat Outlookissa

Tässä tapauksessa Carin poisti ylimääräisen koodin ja voilà – valkoiset viivat poissa!

Joskus tarvitset sitä dir=”rtl” taulukon soluissa pinoamista varten. Courtney Fantinato on löytänyt ratkaisun tähän hän on osakas Litmus-yhteisössä.

Muita omituisuuksia kannattaa varoa

Mainitsimme, että Outlook oli… omituinen. Valkoisten viivojen lisäksi muista:

  • Pöytien leveyden on oltava pikseleinä. Jos sinulla on ne prosentteina, se räjäyttää sähköpostisi. Pöytien leveydet toimivat parhaiten tyylimääritteissä.
  • Varmista, että asetat kuvan leveydet width-attribuutilla. Outlook jättää huomioimatta kuvien tyylimääritteissä asetetut leveydet ja näyttää kuvan tiedostokoossa, jos et lisää leveysmääritettä.
  • Älä käytä reunuksia taulukoissa/taulukon soluissa. Jos laitat sen johonkin, mutta se ei näy, yritä laittaa se taulukon soluun varsinaisen taulukon sijaan.
  • Pyöristetyt kulmat vaativat VML- ja VML-muodot. Kuten Carin sanoo: pyöristetyt kulmat ärsyttävät. Anna periksi neliömäisille kulmille (ellet todella pysty).

Koodaus mobiililaitteille

Toinen yleinen aihe on koodaus mobiililaitteille – erityisesti asioiden pinoaminen.

Tässä on kurkistus siitä, miten toimimme Litmuksessa.

Käyttää @media eri näyttökokoihin kohdistettavia kyselyitä

Litmusilla käytämme @media kyselyt, joiden enimmäisleveys on 600 pikseliä. Kaikki, mikä on tämän alueen yli, on työpöytäkonetta, ja kaikki alle jäävä näkyy, kun näyttö saa alle 600 pikseliä.

@media screen and (max-width:600px)

Jotkut HTML-elementit ovat luonnollisesti responsiivisia, kuten <div>s. Koska mobiililaitteita voi olla useita erikokoisia, tiettyjen keskeytyskohtien tunnistaminen ja seuraaminen voi olla työlästä. Yhden keskeytyskohdan käyttäminen ja HTML:n luonnolliseen reagointikykyyn luottaminen helpottaa sähköpostien koodaamista. Lisäksi vain yhden keskeytyskohdan ansiosta virheet on helpompi löytää ja korjata.

Pinoa asioita helposti (ilman kellukkeita)

Toinen vinkki: käytä display: inline-block pinoamisen luomiseen <div>s—ilman kellukkeita.

“Käytän display: inline-block kahdessa vierekkäisessä pöydässä, jotka pinoutuvat päällekkäin”, Carin sanoo. “Se pinoutuu hyvin ilman, että sinne tarvitse laittaa mitään uutta.”

Jos ne eivät pinoa – tai jos taulukoiden välillä on liikaa tilaa – käytä ehdollista koodia varmistaaksesi, että ne toimivat oikein Outlookissa. “Ehdollista koodia varten laitan ne Outlookissa kahteen taulukkosoluun niin, että ne ovat vierekkäin, ja sitten ne pinoutuvat kauniisti joka paikkaan.”

Reaaliaikainen vianetsintä: Mobiilikuvat eivät näy

Tässä esimerkissä sähköposti hahmonnettiin niin kuin sen pitäisi – paitsi Outlook Mobilessa. Tässä on mitä Carin löysi, kun hän kävi koodin läpi.

Tumman tilan käytön aloittaminen

Siirrytään nyt fanien suosikkiaiheeseen: Tumma tila.

Varmista, että sisällönkuvauskentät ovat mukana

Sääntö numero yksi: muista sisällyttää sisällönkuvauskentät alusta alkaen. Sisällönkuvauskenttien avulla sähköpostiohjelmat tunnistavat, että sähköposti on suunniteltu pimeässä tilassa.

Vaikka mediakyselyt ja data-ogsc ja data-ogsb -tunnisteet ovat välttämättömiä tiettyjen elementtien kohdistamiseen, niillä ei ole mitään vaikutusta, jos näitä sisällönkuvauskenttiä ei sisällytetä alussa.

Kuvanvaihto toimii, mutta vain tietyissä sähköpostiohjelmissa

Voit vaihtaa vaalean tilan kuvat tumman tilan kuviin, mutta vain tietyillä sähköpostiohjelmilla. Apple-asiakkaat (iOS Mail, macOS Mail ja iPadOS Mail) tukevat suurimmaksi osaksi kuvanvaihtoa.

Kuvanvaihto toimii myös Outlook.comissa, mutta vain jos linkität kuvat. “Jos et halua, että kuviasi linkitetään, varmista, että teet kuvia, jotka toimivat sekä vaaleassa että tummassa tilassa. Jos et halua linkittää kuviasi, voit vaihtaa ne myös Outlookissa”, Carin sanoo.

Tumman tilan katkelmia

Merkitse tämä: olemme koonneet yhdeksän koodinpätkää sähköpostiyhteisöltä auttaaksemme ratkaisemaan suurimmat Dark Mode -haasteet.

Reaaliaikainen vianetsintä: Tumma tila

Tumma tila ei toiminut niin kuin pitäisi tässä sähköpostissa. Carin huomaa heti, että sisällönkuvauskenttiä ei ollut mukana, ja tekee siitä ystävällisemmän Dark Moden kanssa.

Haluta lisää?

Sukella syvälle Carin Slaterin mieleen koko toistossa Kysy minulta mitä tahansa: koodaus Carinin kanssa.

Onko sinulla kysymyksiä? Pudota ne sisään lakmusyhteisö tai ota yhteyttä meihin [email protected]. 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.