Mainos

HTML-sähköpostiviestien rajoitukset - muista nämä asiat

15.5.2023 16:44
MarkkinointiUutiset
Yksi tapa tehdä edukseen erottuvia markkinointisähköpostiviestejä on oman uniikin tyylin ja jopa interaktiivisuuden lisääminen viesteihin. Erilaiset visuaaliset elementit kiinnittävät tehokkaasti vastaanottajien huomion.

MAINOS: Smaily

On kuitenkin hyvä muistaa, että monenlaiset asiat vaikuttavat näiden elementtien käyttöön - ongelmia voi syntyä esimerkiksi erilaisten sähköpostiohjelmistojen erojen ja sähköpostiviestien HTML-koodin kanssa. Tässä artikkelissa käsitellään sitä, mitä kannattaa välttää ja kuinka käyttää erilaisia sähköpostimarkkinoinnin mahdollisuuksia tavalla, joka aidosti toimii. 

Mikä on HTML-sähköpostiviesti?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email Title</title>
<style type="text/css">
    a:link {
    color: #0000EE;
    text-decoration: none;
    }
    a:visited {
    color: #551A8B;
    }
</style>
</head>

Ei, yllä oleva teksti ei ole vahingossa syntynyt copy-paste -teksti, eikä kissakaan kävellyt näppäimistön yli tällä kertaa. Se on esimerkki siitä, millaista tekstiä sähköpostiviestin HTML-koodi sisältää (ja tarkemmin sanottuna se on katkelma ensimmäisistä koodinpätkistä sähköpostiviestissä). Ennen kuin sukellamme syvemmälle mahdollisiin ongelmiin, joita voi syntyä sähköpostiviestien koodauksessa, kerron itse aiheesta tarkemmin. HTML on lyhenne sanoista HyperText Markup Language (hypertekstin merkintäkieli) ja HTML-sähköpostiviesti on viesti, joka on luotu kustomoidun muotoilun eli koodauksen avulla. Se sisältää enemmän sisältövaihtoehtoja kuin tavallinen tekstiä sisältävä sähköpostiviesti.

On syytä korostaa, etteivät sähköpostiviestien ja nettisivujen koodaus ole sama asia - vaikka nämä molemmat usein sotketaankin toistensa kanssa. Nettisivujen koodaus on alisteista verkon standardeille, joita kaikki modernit selaimet tukevat. Sähköpostiviestien koodaus ei ole ainoastaan tietokoneille, puhelimille tai tableteille - sen lisäksi on olemassa myös laaja kirjo erilaisia sovelluksia, joita viestiesi vastaanottajat käyttävät niiden avaamiseen. Ei ole olemassa siis yhtä standardoitua tapaa koodin kirjoittamiseen kaikkiin näihin erilaisten laitteiden ja sovellusten valikoimaan. Toisin sanoen, mikä toimii yhdessä tapauksessa, ei välttämättä toimi toisessa. 

HTML-koodin tarjoamat mahdollisuudet sähköpostimarkkinoinnille

On selvää, että HTML-sähköpostiviestit antavat enemmän mahdollisuuksia vaikuttaa viestien ulkoasuun, ja voit luoda sähköpostiviestejä, joiden visuaalisuus sopii yhteen brändisi kanssa. Käyttämällä erilaisia HTML-tageja kirjoittamassasi koodissa voit esimerkiksi kustomoida värin, viestien taustan, erilaisia kuvia ja paljon muuta. HTML-tagia ei tule sotkea tageihin tai tunnisteisiin, joita voit käyttää työsi helpottamiseen uutiskirjepalvelussasi, kuten erilaisten kampanjoiden ja sähköpostiviestien erottamiseen toisistaan. Mutta tässä on lista parhaimmista eduista, joita saat käyttämällä HTML-koodia sähköpostiviesteissäsi:

  • Voit lisätä kustomoituja kuvia, värisävyjä, tilastoja, linkkejä, kyselyjä yms. sähköpostiviesteihisi
  • Oikein käytettynä HTML-sähköpostiviesti on visuaalisesti kiinnostavampi ja miellyttävämpi kuin tavallinen viesti
  • Voit optimoida jokaisen viestin muotoilun oman brändisi mukaiseksi
  • Voit lisätä kustomoituja kenttiä ja piilotettuja parametreja kustomoituihin HTML-lomakkeisiin
  • Verrattuna tavallisiin tekstiä sisältäviin sähköpostiviesteihin, voit tarkkailla viestiesi onnistumista koodin avulla, joka tarkkailee ladattujen kuvien määrää silloin, kun sähköpostiviestisi on avattu
  • Responsiivinen muotoilu varmistaa, että HTML-sähköpostiviestit avautuvat oikein myös mobiililaitteilla
  • Vaikka uutiskirjepalveluntarjoajat tarjoavatkin toimivia visuaalisia editoreita, joskus on tarpeen lisätä erityisiä osia viestisi mallipohjaan, joita ei ole saatavilla drag-and-drop -editoreissa (pudota ja raahaa -editori). HTML:n avulla on helppo muokata tai lisätä uutta koodia ja toteuttaa toivotut muutokset. Tämä on erittäin tärkeää silloin, kun yrität ratkaista jotain ärsyttävää renderöintiongelmaa (renderöinti, eli digitaalisen tiedon muuntaminen näytölle sopivaan muotoon)!
Email marketer working behind a desk creating HTML email

Kuvalähde: Freepik

HTML-koodin käyttöön liittyvät mahdolliset ongelmat

HTML-koodin avulla voit saada sähköpostiviestisi monin tavoin brändisi mukaisiksi. Mutta se ei anna kuitenkaan mahdollisuuksia tehdä ihan mitä tahansa. Monet sähköpostiohjelmat eivät tue kaikkia HTML-sisältöjen mahdollisuuksia, joita näkee nettisivuilla, koska ne eivät ole yhtä ajan tasalla kuin nettiselaimet ovat.

  • Kaikki sähköpostiohjelmat eivät tue kaikkia kustomoituja fontteja ja videoita (käsittelemme niitä tarkemmin myöhemmin tässä artikkelissa)
  • Monet sähköpostiohjelmat eivät tue kunnolla kaikkia taustakuvia ja GIF-animaatioita
  • Jos viesti täytyy ajoittaa lähtemään juuri tiettynä aikana, voi olla vaikeaa saada HTML-sähköposti lähtemään juuri silloin sen teknisten ominaisuuksien vuoksi
  • HTML-sähköpostiviestit voivat olla “raskaita” ja “kömpelöitä”, minkä vuoksi ne eivät välttämättä mahdu kaikkiin sähköpostikansioihin
  • HTML-virheet voivat olla hankalia ratkaista - esimerkiksi puuttuva sulkemistunniste voi aiheuttaa lukuisia sähköpostiviestien renderöintiongelmia, ja voi viedä aikaa löytää virhe koodista!

Kun luot HTML-sähköpostiviestiä, on hyvä olla tietoinen niistä HTML-elementeistä, jotka eivät toimi lähes missään sähköpostiohjelmissa. Niitä ovat:

  • JavaScript. Tätä koodikieltä käytetään verkkosivujen ohjelmoinnissa, mutta markkinointisähköpostiviesteissä se on yleensä estetty turvallisuussyistä.
  • iFrame. Lyhenne sanoista “inline frames”. Vaikka se onkin yksi vanhimmista HTML-tunnisteista, se ei ole luotettava sähköpostiviesteissä, koska se sisältää kryptausta ja sen vuoksi suurin osa sähköpostiohjelmista estää sen käytön.
  • Upotettu media. Vaikka videoita tuetaan sähköpostiviesteissä enemmän kuin ennen, ne eivät toimi läheskään yhtä hyvin kuin verkkosivuilla. Joten vaikka yrittäisit upottaa mediatiedostoja sähköpostiviestin koodiisi, se ei todennäköisesti toimi suurimmassa osassa sähköpostiohjelmista. Sen lisäksi kannattaa aina ajatella viestiesi lähetettävyyttä ja testata, aiheuttaako upotettu mediatiedosto sen, että viestisi merkitään roskapostiksi.
  • HTML-lomakkeet.  Varmistathan, että kyselysi varmasti toimii. Jos tilaajasi käyttävät monia erilaisia sähköpostiohjelmia, voi se aiheuttaa hämmennystä, jos kyselysi esim. näkyy oikein, mutta vastauksia ei pysty lisäämään lomakkeeseen. Sen sijaan että käyttäisit HTML-lomaketta, pyri houkuttelemaan tilaajasi vastaamaan erillisellä laskeutumissivulla tai nettisivulla olevaan kyselyyn.

Ongelmat videoiden kanssa

Koska tämä on varsin ajankohtainen aihe markkinointimaailmassa, keskitymme tarkemmin videoiden käyttämisen mahdollisuuksiin (ja mielekkyyteen) sähköpostimarkkinoinnissa.

Alla olevasta kuvasta näet, mitkä sähköpostiohjelmat tukevat upotettujen videoiden käyttämistä sähköpostiviesteissä:

Different email client support for videos in emails

Lähde: Litmus

Meitäkin ahdistaa katsoa tätä kuvaa. Ikävä kyllä, nämä punaiset ruksit ovat kuitenkin nykypäivän todellisuutta, joka sinun tulee ottaa huomioon haaveillessasi täydellisestä sähköpostiviestistä ja videosta, joilla parantaa sähköpostimarkkinointikampanjoitasi.

Upotettu video

Sähköpostimarkkinoinnissa upotettu video tarkoittaa videota, joka on lisätty markkinointisähköpostiviestiin HTML-koodin avulla. Kuten näet yllä olevasta taulukosta, suurin osa tilaajistasi ei pysty näkemään sitä johtuen heidän sähköpostiohjelmiensa asetuksista.

Suurin osa sähköpostiohjelmista poistaa sen osan koodista, johon upotettu video on lisätty (koska ohjelmat pitävät sitä pahamaineisena kryptauksena, “<embed>” ei toimi useammissa sähköpostiohjelmissa).

Vertaillaan erilaisia uutiskirjepalveluita, kuten esimerkiksi Smailya ja Mailchimpiä. On totta, että Mailchimp ja jotkut muut alustat tarjoavat vaihtoehtoisen ratkaisun heidän mallipohjaeditorissaan (jonka voi tällä hetkellä toteuttaa Smaily-alustalla manuaalisesti). Sen avulla voi lisätä videolinkin uutiskirjeeseen, jossa luodaan kuvankaappaus, ja linkki videoon on lisätty sen taakse. Mailchimp ei anna lisätä HTML-koodin upotettua koodia ollenkaan vaan poistaa sen automaattisesti. Videon upotus ei toimi Smaily-alustalla, koska Smailyn mallipohjat eivät tue sitä (eli videoelementtiä ei ole). HTML-koodin avulla voit lisätä mielivaltaista koodia tekstipohjaan. Smaily ja muut uutiskirjepalvelut poistavat sen turvallisuussyistä, kuten aiemmin mainittiin.

Kuinka tylsältä tämä voikaan vaikuttaa, videon lisääminen suoraan sähköpostiviestiin ei kuitenkaan ole niin näppärää kuin aluksi voisi luulla, vaan siinä on omat huonot puolensa.

Miksi upotettuja videoita kannattaa välttää

Videon lisääminen sähköpostiviestiin on huono idea sen vuoksi, että mikäli sähköpostiviestistä löytyy video, se ei mahdollista syvempää käyttäjien sitoutuneisuutta. Tämä meinaa sitä, että jos tilaaja on kiinnostunut näkemään videon, hänen ei tarvitse mennä laskeutumissivulle tai sosiaalisen median sivulle. Jos lisäät videon sen sijaan esim. laskeutumissivulle, voit innostaa tilaajia myös muuhun toimintaan, kuten kirjautumaan kampanjasivulle tai seuraamaan sinua sosiaalisessa mediassa. Videon paikasta riippuen voi käydä myös niin, että vaikka video näkyisikin oikein vastaanottajan sähköpostissa, se voi viedä huomion viestisi ensisijaisesta sanomasta, muista kuvista ja CTA-kehotteestasi.

Typografia: käytä tuettuja fontteja

Myös fonttiin kannattaa kiinnittää huomiota. Fontteja voi käyttää ikävä kyllä rajatummin sähköpostiviesteissä kuin verkkosivuilla. Sähköpostiohjelmilla, kuten Gmaililla ja Outlookilla, on rajattu määrä tuettuja fontteja. On syytä siis käyttää ainoastaan tavallisia, järjestelmästä riippumattomia fontteja uutiskirjeissä.

Tässä on lista fonteista, joita on turvallista käyttää:
  • Sans-serif -fontit: Arial, Helvetica, Verdana, Geneva, Lucida. 
  • Serif-fontit: Times New Roman, Georgia.
  • Monospace-fontit: Courier, Courier New.

Näitä fontteja voit käyttää myös Smaily-alustalla.

Different letters symbolizing email fonts

Kuvalähde: Freepik

Uudelleen lähettäminen voi “rikkoa koodin”

Tutkimme aiempien aiheiden lisäksi erikseen myös viestien uudelleen lähetystä Outlookista- ja muista sähköpostiohjelmista. Eri sähköpostiohjelmat renderöivät sähköpostiviestit eri tavoin. Kun uutiskirjeen tilaaja lähettää viestisi eteenpäin, osa sähköpostiohjelmista muuttaa uudelleen lähetetyn viestin koodin prosessissa. 

Koodin muuttuminen voi tarkoittaa:
  • Osa HTML-elementeistä katoaa
  • HTML-koodi pakataan HTML-lohkokoodiksi
  • Koodiin voidaan lisätä ylimääräisiä luokkia

Koodin muuttumiselle uudelleen lähetyksen yhteydessä ei ikävä kyllä voi tehdä juuri mitään. Ei ole olemassa tapaa, jolla tarkastaa, muuttaako käytetty sähköpostiohjelma koodiasi vai ei.

Miten siis luoda onnistunut HTML-sähköpostiviesti?

Käsittelimme useita asioita, jotka voivat mennä pieleen HTML-sähköpostiviestissä. Mutta miten tehdä HTML-viestistä toimiva niin, että se näkyy oikein jokaisen tilaajan jokaisessa erilaisessa sähköpostiohjelmissa? Tässä on muutamia suosituksiamme:

  • Kuvat viesteissä. Muista lisätä kuvien leveydet ja pituudet viestiisi, jotta vältyt mahdollisilta renderöintiongelmilta 
  • Kuvien ja tekstin suhde. Muista, ettet täytä viestiä kuvilla ja samankaltaisella sisällöllä. Se ei ainoastaan rasita vastaanottajan silmiä, vaan lisää myös teknisten ongelmien todennäköisyyttä, ja viesti voi päätyä roskapostikansioon. Joten muistathan noudattaa viestissä suosituksia kuvien ja tekstin oikeaoppisesta suhteesta.
  • Sähköpostin koodi. Pidä HTML-sähköpostiviestin koodi yksinkertaisena. Käytä sisäisiä CSS-tyylitiedostoja sen sijaan, että käyttäisit ulkoisia tyyliohjeita tai upotettuja tyylitunnisteita, koska osa sähköpostiohjelmista saattaa poistaa ne. Käytä lisäksi taulukoita ulkoasussa, jotta varmistat samanlaisen renderöinnin eri sähköpostiohjelmissa. Varmista, että HTML-koodisi on virheetöntä ja noudattaa ohjelmoinnin parhaita käytäntöjä.
  • Videot sähköpostiviesteissä. Älä upota videoita suoraan sähköpostiviestiisi, koska ne eivät välttämättä näy oikein eri sähköpostiohjelmissa. Käytä sen sijaan esikatselukuvia, jotka on linkitetty videopalveluihin, kuten YouTubeen tai Vimeoon. Tällä tavoin tilaajasi voivat klikata esikatselukuvaa ja katsoa videon selaimellaan, välttäen mahdolliset renderöintiongelmat. Voit lisätä linkin myös videoon Facebook-sivullasi - tällä tavoin saatat saada myös lisää seuraajia sometileillesi. 
  • Fontit. Pysyttele turvallisissa fonteissa, jotta tekstisi näkyy oikein kaikissa sähköpostiohjelmissa. Jos haluat silti käyttää kustomoitua fonttia, lisää varalle tuettu fontti sisäiseen CSS-tiedostoosi, jotta sähköpostiviestisi on luettavissa, vaikka kustomoitu fontti ei toimisikaan.
  • Pidä varavaihtoehto valmiina. Lisää aina viestiisi myös pelkkää tekstiä sisältävä versio, jotta myös ne vastaanottajat voivat lukea viestisi, jotka eivät voi avata HTML-viestejä tai lukevat mieluummin tekstiversion. Varmista myös viestisi responsiivisuus ja mobiiliystävällisyys, koska iso osa vastaanottajista lukee sähköpostinsa mobiililaitteilla.
  • Valitse oikea alusta. Sähköpostimarkkinointiohjelmia on olemassa lukuisia, ja jokainen tarjoaa erilaisen rakenteen viestille. Vaikka jonkun palvelun sähköpostiviestit näyttäisivät hyvältä, he ovat voineet joutua tekemään kompromisseja saavuttaakseen sen - esimerkiksi niin, että he tarjoavat vain rajallisen mahdollisuuden muokata mallipohjia, rajatun asiakaspalvelun käytön tai fonttien “keveyden”. Smaily pyrkii olemaan niin joustava kuin vain mahdollista, ja samalla toimimaan moitteettomasti mahdollisimman monilla eri alustoilla ja laitteilla (myös vanhemmilla sellaisilla)
  • Testaa! Muista aina testata sähköpostiviestiäsi eri sähköpostiohjelmissa ja laitteissa ennen sen lähettämistä tilaajillesi, jotta huomaat mahdolliset ongelmat ja voit tehdä tarvittavat muutokset.
Email marketer writing an HTML email

Kuvalähde: Freepik

Lopuksi

Onnistuneen HTML-sähköpostiviestin luominen vaatii tarkkuutta monissa asioissa, kuten grafiikassa, kuvissa, koodissa, videoissa, fonteissa ja muissa elementeissä. Parhaiden käytäntöjen noudattaminen, sähköpostiviestien optimointi eri laitteille ja sähköpostiohjelmille sekä oikean alustan valinta varmistavat, että onnistut tehtävässä hyvin, tarjoat positiivisen käyttäjäkokemuksen ja parannat sähköpostikampanjasi onnistumisen mahdollisuuksia. Hauskaa koodausta!

MAINOS (TEKSTI JATKUU ALLA)