E-kirja kodeerimine vs veebikodeerimine: milles seisneb erinevus?

Suur osa tööst pärineb andekate e-kirja arendajate sulest, kes loovad e-kirjade malle HTML-i ja CSS-i abil. Ka veebidisainerid ja -arendajad kasutavad oma projektides HTML-i ja CSS-i, mistõttu arvatakse sageli, et e-kirjade ja veebi kodeerimine on sisuliselt sama tegevus. Kas see on aga tõsi?

Seekord räägib Smaily turundusjuht Tanel Rand sellest, mille poolest e-kirja kodeerimine (ja seega ka e-kirja turunduse disain) ei ole sama, mis veebikodeerimine ja -disain. Anname mõningaid häid näpunäiteid, millest e-kirjade kodeerimise ja tõrkeotsingu korral abi võiks leida.

Veebikodeerimist nimetatakse enamasti brauserite kodeerimiseks ja veebiarendajad teevad seda tavaliselt:

• semantilist HTML-i ja CSS-i kasutades (näiteks päise, jaluse ja lõigu sildid);

• rakendades stiili ja struktuuri jaoks CSS-i, selleks enamasti väliseid stiililehti kasutades (selliste võimaluste ja elementidega nagu fondid, kuva, asukoht, veeris vms);

• kasutades JavaScripti dünaamiliste elementide jaoks.

Veebikodeerimisel on universaalselt aktsepteeritud standard, mida võimaldavad kaasaegsed veebibrauserid. Tänu sellele saavad arendajad luua ilusaid ja interaktiivseid veebilehti.

Mis puudutab aga e-kirjade HTML malle, saab öelda vaid üht - e-kirjade arendus on erinev. Kui veebiarendus vajab mõningate veebibrauserite jaoks kodeerimist, siis e-kirju võib avada lõputul hulgal seadmetel ja rakendustes.

Seega ei toimu kodeerimine nüüd enam lihtsalt arvuti, telefoni või tahvelarvuti jaoks, vaid ka kõigile muudele rakendustele, millel sinu adressaadid e-kirja avada võivad. Näiteks võib meili avada arvutis Windows Mail rakenduses, aga ka iPhone 11 e-posti rakenduses. Ja paraku ei ole kõigile rakendustele ühest universaalset standardit.

Erinevad meilirakendused toetavad erinevaid HTML-i ja CSS-i alamhulki. Need toetused võivad teinekord paraku täiesti spektri erinevates otstes olla. Meiliturunduse inimestega rääkides saab üsna hea pildi sellest, millised mured kaasnevad Outlookis või Lotus Notesis e-kirja renderdamisega.

Siin on mõned head nipid e-kirja jaoks kodeerimiseks.

• Ettevalmistus - e-kirja kodeerimisega kipuvad kaasnema ebastabiilsed tulemused ja vead on vältimatud. Ära sea oma sihiks piksli täpsusega HTML-i. Pea meeles, et sinu loodud disain ei näe erinevatel seadmetel ja meiliklientide puhul täpselt samasugune välja. Püsi rohukapi läheduses, kuna üks levinumaid lõpptulemusi on peavalu.

• Tihti keelavad meilikliendid vaikimisi piltide kuvamise. Seetõttu ei tasu panustada sellele, et pildid sinu sõnumi edasi annavad. Pea ka meeles, et liigselt piltidega ülekoormatud e-kirjad kipuvad spämmikaustas lõpetama.

• Kõik meilikliendid ei toeta näiteks GIFe.

• Väike nipp e-kirja visuaalide jaoks: kui e-kirju kodeerid, lisa piltidele pikkus ja laius, et potentsiaalseid piltide renderdamise probleeme vältida.

• Meilikliendid/rakendused (ja mõnel juhul isegi sinu meiliteenuse pakkuja) võivad pärast HTML e-kirja malli importimist lisada oma koodi või olemasolevat muuta.

• Ära kasuta eraldiseisvaid CSS-faile. Kogu kood peab sisalduma e-kirja mallis endas.

• CSS, mis pole kirjapõhja sisse kirjutatud, tõenäoliselt eemaldatakse.

• E-kirja kodeerimisel ei tohi unustada, et kõiki fonte ei toetata. Seega on klassikalised fondid kõige kindlam valik.

•E-kirja koostamisel on hea tava kõik CSS-id eraldi kirjutada, kuna väidetavalt eelistavad meilikliendid sellist varianti.

• Paljusid CSS-i atribuute ei toetata erinevate seadmete ja meiliklientide puhul. Isegi miski nii lihtne nagu CTA-nupu ümmargused nurgad võivad mõnedes seadmetes ja rakendustes oma kuju kaotada. Võta seda järgmise uudiskirja kujunduse loomisel kindlasti arvesse.

• Ka display:none CSS atribuuti ei toetata kõigil juhtudel.

• Kasuta tabeleid! Veebiarendajad on nüüdseks enamuses tabelitest edasi liikunud, aga need on vaieldamatult kindlaim viis, mille abil e-kirjade kujundust luua. CSS-i ja DIV-i põhised kujundused garanteerivad vaid peavalu, kui asi kirja testimiseni jõuab.

• Linkide tekst kipub tihti saama kuvatud oma tavapärasel sinisel kujul. Veebibrauserid võivad küll sinu seatud reeglitest lähtuda, aga meilikliendid ennast neist liigselt kõigutada ei lase. Selle vältimiseks lisa lingi siltidele span style.

•Värvikoodid: mõned meilikliendid toetavad 3-tähemärgilisi HEX koode, teised mitte. Meie soe soovitus on kasutada 6-tähemärgilisi HEX koode.

Meiliturunduse jaoks kodeerimine ei ole just lihtne. Paljud veebiarendajad, kes püüavad e-kirju luua, lehvitaksid veatu kirjapõhja loomise asemel ilmselt meeleldi valget lippu. Meiliklientide ja rakenduste erinevate nüansside mõistmine nõuab palju aega ja testimist.

Loo mitmeid kontosid, saada palju testmeile ja analüüsi, kuidas nad renderduvad. Uuri ka teistelt meiliturundusega tegelejatelt, milliseid nippe kasutatakse.

Nagu näha, on e-kirja ja veebi arendamise vahel mitmeid erinevusi. Kuigi HTML e-kirja mallide kodeerimine on paras väljakutse, kaasnevad sellega ka suured võidud. Ilusate e-kirjade avamine erinevates seadmetes pakub suurepärast kasutajakogemust ja tõstab suure tõenäosusega ka ettevõtte müügitulemusi.

Seega tasub nüüd oma e-kirja arendaja kaabu kuklasse visata ja koodi sukeldudes veidi imesid korda saata. Meiliturunduse platvorm Smaily pakub muide HTML-i ja CSS-i kogemusteta turundajatele suurepärast lohista-ja-aseta redaktorit. Nii et muretsemiseks pole põhjust, kui sul ei ole parajasti huvi oma e-kirja jaoks nullist ise koodi looma hakata.