Ako kódovať e-mailový leták/newsletter

Ako správne vytvoriť newsletter, čomu sa vyvarovať pri jeho tvorbe ? Článok je dobrým štartom hlavne pre HTML/CSS kóderov, ktorí s tvorbou e-mailových letákov nemajú ešte skúsenosti.

Ako nakódovať e-mailový leták ? Tak túto otázku som si prednedávnom kládol aj ja, keďže som dostal za úlohu nakódovať e-mailový leták pre nemenovanú spoločnosť. Tento druh propagácie je stále veľmi populárny vďaka tomu, že e-mailový leták môže svojim zákazníkom v podstate okamžite poskytovať dôležité informácie o svojich nových produktoch, službách, môže byť vizuálne atraktívny.

E-mailové letáky (takisto ako aj webové stránky) by mali byť nakódované tak, aby sa zobrazovali rovnako vo všetkých bežne používaných e-mailových (Outlook, Thunderbird, Lotus notes, Mail atď.) a webmailových klientoch (Google mail, Yahoo!, Zoznam, Azet atď.). V súčasnej dobe je to už lepšie s podporou HTML/CSS pre e-mailové aj webmailové klienty, no stále môžu byť e-mailové letáky dosť veľkým utrpením pre HTML/CSS kóderov. Musíme priznať, že každý e-mailový a webmailový klient môže váš leták zobraziť odlišne. Dôležité pri tvorbe e-mailového letáku je fakt, že nekódujeme webovú stránku, preto sa pri kódovaní letáku musia dodržiavať iné pravidlá ako pri kodovaní webovej stránky. Uviediem príklad. Možno vás to prekvapí, možno nie ale ak ste si mysleli, že tabuľkového layoutu sme sa už nadobro zbavili, nieje to pravda. Aspoň u e-mailových letákov nie. Taktiež budeme musieť začať vypisovať niektoré atribúty (ktoré sú už dávno nahradené css štýlmi) napr. atribúty background alebo bgcolor. Zdrojový kód sa stane viacej neprehľadým vďaka vloženým inline štýlom. Preto vrelo odporúčam písanie komentárov do HTML kódu aby sme sa v šablóne aj po nejakom čase vyznali.

Aby sme sa vyhli nežiadúcemu efektu odlišného zobrazovania sa a nekompatibilite v rôznych webmailových a e-mailových klientoch, spísal som niekoľko pravidiel ktorými by sme sa mali riadiť pri tvorbe e-mailového letáku.

Niekoľko základných pravidiel kódovania emailového letáku:

1.	Vyhnite sa používaniu WYSIWYG editorov (môžete na to nepríjemne doplatiť, je dobré mať svoj kód pod kontrolou)
2.	Nevyhnutnosťou je používať tabuľkový layout, pre určenie pozície svojich textov či obrázkov. (css pozície sa vo veľa prípadoch nezobrazí dobre, vzniká "rozsypanie layoutu")
3.	Šírka e-mailového letáku by nemala presahovať 600px. (e-mailový klient nieje browser preto počítame s menším priestorom pre zobrazenie správy)
4.	Použitie inline CSS štýlov (inline CSS štýl vypisujeme do atribútu style)
5.	Vyvarovať sa používaniu skrátených zápisov CSS (všetko treba rozpísať font-family, font-size, line-height atď.)
6.	Akékoľvek značky <link> odkazujúce na nejaký externý súbor, napr. na css nepoužívajte. Taktiež neodporúčam vypisovať štýly v hlavičke <head> (webmailové klienty často vynechávajú značku <head> v kóde)
7.	Pre obrázky na pozadí používajte atribút background, miesto použitia css štýlu background-image
8.	Pre farbu pozadia alebo farbu pozadia bunky tabuľky používajte atribút bgcolor miesto použitia css štýlu
9.	Vyhýbajte sa používaniu javascriptu (väčšinna webmailových a e-mailových klientov ich blokuje)
10.	Používajte atribút značky target="_blank" (ľuďom, ktorí čítajú z webmail klienta sa môže odkaz otvoriť v rovnakom okne, čo je nepraktické)
11.	Pre obrázky používajte width a height atribúty (zachováva váš vzhľad neporušený, pokiaľ má užívateľ vypnuté obrázky)
12.	Vo width a height atribútoch, nepoužívajte hodnotu v % ale v px.

Nevyhnutnou súčasťou tvorby e-mailového letáku je jeho testovanie. Preto odporúčam zaregistrovať sa na všetky bežne používané freemailové hostingy a nainštalovať si všetky bežné e-mailové klienty. Potom už len zostáva neustále testovať a porovnávať, či všetko sedí tak, ako má. Odporúčam tiež testovať e-mailový leták s vypnutými obrázkami. Testovanie je síce nudné no veľmi dôležité. Kúpili by ste si nejaký produkt alebo službu z rozsypaného e-mailového letáku ? Jednoducho to nevyzerá dobre a nerobí to ani dobrú reklamu.

Pre začiatok je tiež vhodné pozrieť si zdrojový kód nejakých HTML/CSS šablón. Prajem veľa zdaru pri tvorbe e-mailového letáku/newsletteru !

Michal Gašparík

Nemá rád neaktivitu a kontraproduktivitu.

Hodnoť článok:
1 0

14 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:

0 0 Ernest Sawyer 5.10.2011 04:35:35
z vlastných skúseností a z toho ako k newsletteru pristupujú veľké svetové spoločnosti musím povedať, že najlepšie (a najefektívnejsěi) je robiť newsletter na biele pozadie, t.j. bez definície farby pozadia. I tak idú do módy clean designy vďaka Applu. A obrázky pripájať do mailu, hlavne žiadne externé volania na obrázky.

0 0 Miloš 30.9.2011 19:04:24
-> yablko

Je to tak, pozadie ide iba na body. S pozadím v elementoch som mal problém v niektorom z Outlookov (Express, 2003, 2007 už neviem). Najhoršie sa robí pre 2007, tam mi fungovalo minimum možností. Najlepší je asi Thunderbird, ale ani tam nefunguje toho veľa. A to som bol prekvapený, že Gecko tam bolo tuším rovnaké ako vo Firefoxe, v ktorom mi to išlo.

0 0 Miloš 30.9.2011 19:00:33
Čo sa pozadia týka, tak moja skúsenosť je taká, že ak prejdete všetko od Outlook Express XP cez Outlook 2003, 2007 a Thunderbird, tak skončíte tak, že newsletter budete nenávidieť ako ja. Vždy sa nájde nejaký klient, kde niečo nefunguje. Osobne si myslím, že to aj tak nemá zmysel, pretože máloktorému emailu povoľujem vzdialené dáta a teda je to vždy rozbité. Ide o to, že "potvrdenie o prečítaní" môže byť "zakódované" práve do obrázkov a takto si v podstate potvrdíte zasielanie ďalších blbostí. Ale čo ma vie vytočiť viac je spam v kamennej schránke, hlavne adresovaný.

0 0 František "yderf" Haško 29.9.2011 00:29:53
background je klasicky atribut pre tabulku (nie td, iba table). Pozor, je to vzdy ekvivalent background-repeat:repeat; takze pre istotu nastavovat velkosti atd. td by naopak background podporovat nemalo. Takze, nielenze tabulkovy dizajn, ale aj vnarat tabulky (!) ako v minulosti za divokeho zapadu, ked webu vladol >90% ie6.

Ako dat pozadie na celu sirku, tak prva vec je, ze by si vobec takto nemal uvazovat - ako bolo povedane, 600px, max. 650px.

Ako dat nejaku farbu okolo obsahu na plnu sirku - jednoduche: div s width na 100% (nezabudnut dat aj min-width na tvoju sirku, niekde to pomoze, nikde neuskodi) a jemu style s background-color a do neho dat obsah.

0 0 Lukáš Andel 28.9.2011 21:14:28
cele body akceptuju postove klienty, aspon niektore, inak mozes bg nastavit aj cez nich, ked vkladas html tak si mozes cez klienta nastavit aj zarovnavanie aj farbu pozadia, ale prehliadace ju neakceptuju, dalsi for je napriklad pouzit div, s nejakym paddingom alebo s min-width a tymito atributmi a nejako sa s tym vyhrat, ja som sice robil len jeden newsletter, ale fungovalo to, na pozadie sa osvedcilo to divko s backgroundom, smola vsak je, ze sa neroztiahne na cely mail

0 0 Matúš Jančík 28.9.2011 15:49:47
@Matus ja bezne background pouzivam v TD a funguje mi to. Vlastne iba v body a td. Inde asi bez sance.

0 0 Matúš Koprda 28.9.2011 14:56:54
Atribút "background" vraj funguje len na body. Máš to aj nejak otestované? Zatiaľ som si vždy musel vystačiť s bgcolor. Ach, newslettery. To muselo prísť zo samotných hlbín pekiel, jak sa s tým debilne robí :)

Ešte jeden pro tip - Keď je len samotný obrázok v <td>čku, je dobre mu nastaviť style="vertical-align:bottom;", aby sa na spodku nerobili diery.

0 0 Jakub Senko 28.9.2011 13:49:48
Super článok! Veľmi sa zíde, akurát sa mi už pomaly blíži ku kódovaniu prvých newsettlerov a rozmýšľal som nad tým, ako sa to asi vykresľuje, či sa tam dá používať % a podobne. Ďakujem :).

0 0 viťo 28.9.2011 12:20:50
uf, s mailovaymi letakmi som sa prebavil kedysi :)

0 0 Jaroslav Hamrak 28.9.2011 10:47:40
Má niekto skúsenosti s "prebitím" štýlu pre <a> tag v gmaily? Čo je najpraktickejšie?

0 0 Lukáš Andel 28.9.2011 09:28:16
@Matus ma pravdu, vytvorit a skusat

0 0 Matúš Jančík 28.9.2011 09:06:43
Myslim si ze je to dostatocne zhrnute a tutorial tu moc nepomoze. Treba jedine testovat a testovat :( .

Na www.email-standards.org je prehlad, co ktory email klient nepodporuje a na zaklade toho vzniklo aj kopec roznych online testov.

0 0 Michal Gašparík 28.9.2011 08:46:20
Myslím že pre človeka ktorý sa venuje kódovaniu HTML/CSS už najaký ten rok a pozná trochu históriu (tabuľkový layout, atribúty miesto využitia css) by to nemal byť taky problém. V podstate ide akoby o kódovanie stránky z pred niekoľkých rokov :)