Ako vyrobiť firemný emailový newsletter

Vo firemnom prostredí často nemáte priveľa možností ako nasadiť rozsiahlejší software a tak si pomáhate prostriedkami, ktoré pritiahnuté skrutky policy na klientskej stanici dovolia. V opozícií sú požiadavky na výrobu rôznych nástrojov uľahčujúcich prípravu pekne vyzerajúcich dát. Jednou z úloh bolo vizuálne vylepšenie firemného newslettru.

Firemný newsletter obsahuje zhrnutie týždňa a je to akoby alternatívna úvodná stránka veľmi podobná úvodným stránkam webzinov. Nadpis, perex, ilustračný obrázok a odkaz do intranetu na celý dokument.
Východzí stav spočíval v príprave takého mailu vo Worde. Základom newsletteru je kolekcia a formulácia informácií. V tomto stave sa však neustále vymýšľa koleso. Okrem pridávania textu sa totiž nanovo vyrába vizuál newslettru, čo určite zdržuje úkonmi ako „zmena fontu“, jeho farby. Nakoniec je každý newsletter „originál“ plný farieb a časom je z neho pestrý cirkus.
V takom stave je najlepší spôsob zahodiť pôvodný proces výroby a snažiť sa vyrobiť jednotnú šablónu, kde sa výrazne oddelí vzhľad a jeho výroba sa obmedzí na vkladanie obsahu.
Aj keď nemáte možnosť použiť klientsky software či intranetovú aplikáciu, tak aj v zviazanom prostredí zostáva pár možností.
Ja som vybral to, čo sa nedalo obmedziť. Spomenul som si na XML a XSL. Súbor s obsahom newslettra v XML a jeho transformácia pomocou predpisu v XSL. Prostriedky ku príprave sú na každej klientskej stanici. Nejaký editor na dáta v XML súbore a možnosť priebežného prezerania v prehliadači.
Pre mňa je na XML najlepší obyčajný Notepad (Poznámkový blok) a aj keď som hľadal možnosti komfortnejšej prípravy dát s výstupom do XML, nakoniec sa stal aj oficiálnym nástrojom na prípravu newslettra.
Stačilo, aby som samotnú štruktúru XML zjednodušil na úplné minimum. Overil som si, že „zobáčikovými“ technológiami nezasiahnutí ľudia sa dokážu extrémne rýchlo zapracovať a aj v Notepade bezproblémovo vytvárajú dáta. Tým odpadla obrovská časť problému s vývojom editora dát, ktorý by odclonil samotné XML od dát. Mal som samozrejme pripravenú možnosť vytvorenia webovej stránky s formulárom, ktorý by toto XML generoval. Nakoniec to nebolo nutné.
Vývoj som teda zameral na odladenie predpisu v XSL. V skutočnosti sa to len veľmi málo líši od odlaďovania HTML/CSS kódu webovej stránky.
Významný rozdiel je však konečné určenie vygenerovaného vzhľadu kódu. Miesto webovej stránky ide o email. Tam stačí použiť všetky dostupné pravidlá na emailové newslettre. Layout sa konštruuje pomocou tabuliek, nedajú sa použiť všetky najmodernejšie techniky avšak vývojár má k tomu všetko nevyhnutné. Aj bez praxe si viete overiť vygenerovaný kód priamo vo firemnom maili.

Vyjednávanie pred začiatkom

Pri tvorbe sa stretla redakcia newslettra a ja (HTML, CSS a blablaguru). Pribudol grafik, ktorý dostal požiadavky vo forme špecifikácie pre vzhľad newslettra. Schválili sme si konečný vzhľad, a aj orientačnú štruktúru dát.
Odlaďovanie teda prebiehalo nasledovne:

Štruktúra XML

* navrhol som štruktúru XML dát, tu je dobre čo najlepšie odhadnúť všetky potreby redakcie newslettra aby sa v priebehu vývoja nemusela meniť (každá zmena priamo ovplyvňuje už napísaný kód v XSL),
* prejdite si teda čo najpodrobnejšie všetky požiadavky na štruktúru obsahu a až potom navrhujte.
Výsledkom toho u mňa bola položka (item) obsahujúca nadpis, text (perex), url a obrázok.
Pri ladení som prišiel na niektoré detaily ako zaradenie CDATA do položiek obsahujúcich zložitejšie značky a diakritiku. Dokonca sa mi ukázalo, že niektoré musí byť aj v položke pre url.
Jednotlivé položky som v XML uzavrel do značky items.
Doplnkovou požiadavkou bol však aj postranný stĺpec (na webe veľmi známy sidebar). Ten nakoniec mal obsahovať prakticky identické položky ako hlavná časť (items).
V sidebare nakoniec mali byť dve takéto časti: prvá mala obsahovať plochou menší zoznam nadpisov (s odkazmi). Takže som položky hlavnej časti zredukoval na url a nadpis. Položky som nazval „odkaz“ a uzavrel v sekcií značkou intranet.
Pod nimi mala byť ešte „lifestyle“ položka. U nej sú položky identické ako u hlavných správ: nadpis, obrazok, text, url. Pôvodná požiadavka bol jeden kus, avšak je to len formálna požiadavka, takže nič nebráni vytvoriť v XML viacej položiek v tejto sekcií. Položku som nazval „slovo“ a celá sekcia sa stala „slova“.
Posledná požiadavka bolo vizuálne zvýraznenie jednej z hlavných položiek. Orámovanie červenou. Podmienka bola VOLITEĽNOSŤ. Nie každý newsletter takúto položku bude obsahovať. Ovplyvňuje to návrh XML aj XSL. Položka teda mala o jednu značku viac: nadpis, important, text (perex), url a obrázok.
Značka important je boolean obsahujúci true alebo false. Chcel som to redaktorom uľahčiť a táto značka sa stala nepovinnou. XSL muselo počítať s tým, že v XML nebude uvedená.

Grafický návrh

Musí počítať s prostredím adresátov. Viete veľmi dobre, že MS Outlook sa vizuálne menil. Kým vo verziách zo začiatku tisícročia je okno pre obsah široké, tie novšie už majú užšie. Neoplatí sa modelovať HTML mail do šírky.
My sme zvolili ťažší variant: HTML mail s premenlivou šírkou. Je to realizovateľné a vyzerá to dobre.
Keď grafik vie spolupracovať, tak získa od kódera dosť dôležitých informácií, aby nemaľoval nerealizovateľné veci.
Nakoniec sme dospeli ku grafickej konštrukcií kompatibilnej s možnosťami stavby layoutu HTML mailu. Dokonca tak, že jednotlivé grafické prvky pomáhajú HTML layoutu držať sa pokope aj v menej priaznivej situácií.

Návrh XSL

Po navrhnutí štruktúry XML je konečne možné písať XSL. Znovu musím pripomenúť, že všetky vydania používajú jeden XSL predpis. Ten sa aplikuje na všetky minulé a aj na budúce vydania. Zmena v štruktúre XML môže znefunkčniť použitie XSL, čo našťastie redaktor pripravujúci XML hneď vidí pri priebežnom zobrazovaní newslettra.
Avšak aj zmena v XSL má svoje dôsledky: zmením ho a všetky doteraz pripravené XML použijú toto novšie XSL.
Nemôžem vás teraz naučiť písať XSL ani upozorniť na všetky úskalia písania kódu pre HTML maily.
V stručnosti však pripomeniem, že XSL nie je len akési CSS pre XML. Je to takmer programovací jazyk. Zčasti sa podobá na PHP, pretože prepletáte HTML kód s konštrukciami známymi práve zo skriptovania.
Môžete teda používať podmienky, cykly…
Základom v mojom XSL bolo vloženie šablóny newslettra. Napísanie a odladenie layoutu som najskôr urobil v čistom HTML a odladil si vizuálny základ v prehliadači.
Tento kód som použil ako „statický“ základ do budúceho XSL. Aby som rozhýbal „vkladanie“ dát z položiek v XML súbore, tu už som musel na jednotlivé body v šablóne vložiť programovaciu logiku.
Poslednú požiadavku so značkou important som realizoval tým, že som pri spracúvaní položiek zaradil podmienku zisťujúcu, či existuje táto značka a akú má hodnotu. Ak som ju našiel, tak do kódu sa pridávali HTML značky zvýrazňujúce danú položku. Mimochodom vytvoriť v tabuľkovom layoute orámovanie ma stálo dosť času.
Na prebehnutie zoznamu položiek sa v XSL použije cyklus for-each a je to snáď najjednoduchšia konštrukcia.
V skutočnosti sú tieto dve konštrukcie aj jediné dôležité, ktoré som na odladenie XSL naozaj potreboval.

Ladenie

Ideálne je použiť hotové dáta, ktoré bude redakcia newslettrov naozaj používať. Nevymýšľajte si len svoje Lorem ipsum. Pri ladení prídete na veci, ktoré sa vymykajú „testovaciemu stavu“. Až tu som totiž prišiel na to, že v značke pre URL musím použiť CDATA, aby mi prehliadač negeneroval chybu spracovania XML dát.
V tejto fáze som nakoniec dopĺňal do kódu aj testovanie, či existujú značky pre obrázok a zároveň som v kóde radšej vynútil pevné rozmery pre tieto obrázky. Grafický návrh totiž počítal s jednotnou veľkosťou, no v praxi vieme, že sa im nemusí podariť uložiť práve ten 100×100 obrázok a zbytočne si rozbíjú výsledok.
Nemenej podstatné je poznať aké prostredie majú adresáti newslettra. Iba MS Outlook? Radšej si overte vzhľad testami v jeho rôznych verziách.

Generovanie newslettra

Dôležité je však vedieť, že po finalizácií prípravy dát a vygenerovaní stránky v prehliadači je ďalší úkon prekopírovanie newslettra do tela mailu. Tu som použil z núdze cnosť.
Redaktor píše XML v notepade a priebežne si XML súbor prezerá v prehliadači. Bez jeho priamej účasti prehliadač použije prítomné XSL a zobrazí newsletter v konečnej forme. Tým pádom sa vychytá akákoľvek chyba pri písaní XML (garantujem, že redaktor sa zacvičí po dvoch troch vydaniach).
Po dokončení písania dát sa prepne na prehliadač. Stlačí Ctrl-A, Ctrl-C a stránku s newslettrom si skopíruje do schránky. Primitívne? Áno.
Otvorí si nový mail v MS Outlook a v tele mailu stlačí Ctrl-V. Stránka sa prekopíruje aj s formátovaním. Dôjde však k významnej zmene. V skutočnosti je v maili už VYGENEROVANÝ HTML kód. Ten už „netuší“ nič o XML či XSL. Keďže všetky vložené obrázky sú URL odkazmi na súbory uložené na intranete, tak v rámci firmy je newsletter len zhlukom písmen bez príloh.
Poznámka: pri kopírovaní stránky do mailu sa neprenáša pozadie. Ak ho pri návrhu použijete, musíte využiť funkciu MS Outlook na jeho dodatočné vloženie. V maili je možné použiť len jedno jediné veľké pozadie a to ako „dlaždicu“. Takže pokiaľ sa dá, vyhnite sa pozadiu.
Menej podstatné pre tento článok je už len to, že nakoniec sa XML súbory jednotlivých vydaní ukladajú do zložky dostupnej z webu intranetu. Tým pádom máme aj celkom elegantný archív vydaní. Bez akejkoľvek dodatočnej práce. Stačí kliknúť na XML súbor a zobrazí sa celý newsletter. Samozrejme predsa len je dobre využiť schopnosti systému intranetu a zoznam vydaní „poľudštiť“. Redaktor však „archivuje“ púhym prekopírovaním súboru, čo je dôležité.

Nerealizované myšlienky

Príprava newslettra je práca mimo počítač. Hľadá sa, čo do neho dať, opakovane sa posiela na schválenie, dodatočne pridávajú alebo prepisujú oznamy. Preto musím mať možnosť súbor s dátami opakovane otvárať, meniť, prezerať priebežný stav (ako to vyzerá) bez toho, aby som musel robiť až príliš zložité úkony.
Keby sa mi ukázalo, že priame editovanie XML je neprekonateľný problém, musel by som napísať v nejakom webovom skriptovacom jazyku jednoduchý formulár, ktorý by po submitnutí generoval web stránku s newsletterom (a zároveň si dáta ukladal trebárs v tom XML).
K tomuto som nakoniec nemusel pristúpiť a viem dobre, že nakoniec by to nebolo až také operatívne. Predsa len by to bola skoro provizórna intranetová aplikácia. Nenašiel som totiž nič prijateľné ale hlavne reálne použiteľné (nemám PHP server).
Ďalšia možnosť bol XML Notepad ale ten sa mi zdal neprehľadný až nepoužiteľný.
Samozrejme je tu možnosť vytvoriť binárku pre Windows, ktorá by bola špecializovaným editorom, tu si už netrúfam odhadnúť jej možnosti.

Prax

Skutočnosť je taká, že od dokončenia vývoja sa vydalo niekoľko desiatok newslettrov. Každé jedno vydanie je výborné a sebecky priznávam, že veci, ktoré som chcel, aby v ňom fungovali, aby bol príjemný na čítanie, sa mi opakovane ukazujú ako dobrá voľba.
Zároveň je newsletter „jednotný“, ľahko si ho zapamätá každý adresát, dobre sa v ňom orientuje, všetky prvky sú „tak akurát“.
Pre kóderský, grafický svet je takáto vec prkotina, no v našom prípade má masový dopad. Je na očiach tísícov ľudí a dosť často na to, aby to nakoniec mal svoj efekt.