Často sa nás pýtate, ako vytvoriť HTML šablónu pre e-mail tak, aby bola čitateľná pre čo najväčší počet e-mail klientov. Preto sme pre vás vytvorili tento návod.
Úvod do problematiky HTML e-mailov a e-mailových klientov
Vo svete je používané množstvo e-mailových klientov. Podobne ako pri internetových prehliadačoch sa líši miera ich rozšírenia. Je potrebné zaistiť, aby e-maily boli čitateľné pre čo najväčší počet príjemcov, teda v čo najväčšom počte e-mailových klientov.
To, že je niektorý e-mailový klient rozšírenejší než druhý, ešte neznamená, že môžeme tých menej rozšírených ignorovať. Pamätajte, že aj v malom percente oslovených príjemcov sa môže ukrývať množstvo nových zákazníkov. Preto odporúčame snažiť sa vždy výjsť v ústrety maximálnemu počtu príjemcov, a to ako informačnou hodnotou e-mailu, tak technickým spracovaním e-mailu.
Čo ľudia najčastejšie používajú
Medzi najrozšírenejších e-mailových klientov patria desktopové aplikácie Outlook, Thunderbird, Eudora a Lotus Notes. Na poli web mailov vládne Google Mail (GMail), Yahoo, Hotmail, Seznam.cz a Centrum.cz.
Pokiaľ ste v minulosti kódovali XHTML šablóny a preklínali nedodržovanie štandardov, potom sa pripravte na úplne novú výzvu. Vytvoriť HTML e-mail tak, aby sa zobrazoval u všetkých e-mailových klientoch rovnako, je často o nervy.
Zatiaľ čo na poli internetových prehliadačov sa situácia ohľadom štandardov pomaly zlepšuje, na poli e-mailových klientov je situácia stále zlá.
Základy kódovania pre HTML e-maily
- Pre layout e-mailu nepoužívajte CSS pozicovanie (floating), ale staré dobré tabuľky. Jedine tak budete mať istotu, že e-mail sa bude korektne zobrazovať aj ľudom s prehistorickými e-mailovými klientmi alebo s e-mailovými klientmi, ktorých autori ignorujú vývoj doby a CSS nepodporujú.
- Pre nastavenie farieb a fontov používajte len inline CSS. Pozor na umiestnenie štýlov prostredníctvom tagu <style></style>. Bežne sa tento tag umiestňuje do hlavičky dokumentu <head></head>, pri HTML e-mailoch tomu tak ale nie je. Pýtate (Práte) sa prečo? Webmaily totiž používajú svoju hlavičku, takže často z e-mailu odrežú všetko, čo je od tagu <body> hore. Týmto spôsobom z e-mailu často vyseknú i CSS štýly, ktoré sú uložené v časti <head></head>.
- Nepoužívajte skrátené tvary pri CSS štýloch. Miesto padding: 0; použite radšej tvar padding: 0 0 0 0;. Miesto font: 11px/14px Verdana, Arial; použite radšej samostatne font-family, font-size a line-height;
- Nepoužívajte CSS štýly odkazované z externého súboru, webmaily vám ich odstránia, desktopové aplikácie ich ignorujú. Využívajte CSS1 a nie vyšší, množstvo klientov CSS podporuje len vo veľmi jednoduchej a obmedzenej verzii.
- Snažte sa minimalizovať použitie tagov SPAN a DIV pre štýlovanie blokov. Ak sa dajú tieto tagy nahradiť celou tabuľkou TABLE, preferujte tabuľky.
- Viacstĺpcové layouty riešte pomocou vnorených tabuliek.
- U tabuliek pre layout využite atribúty cellpadding="0" cellspacing="0" border="0".
- Pre pozicovanie tabuliek využite atribút align. Pre vertikálne pozicovanie v bunke využite atribút valign.
- Aby hlavná tabuľka s obsahom mala zachovaný priestor okolo okrajov, nastavte jej šírku na 95% alebo menej. Nikdy nedávajte šírku vonkajšej tabuľky na celých 100%. Yahoo má so stopercentnou šírkou problémy.
- Informácie o štýle vložte do bunky <td>. Aj keď to bude mať za následok duplikovanie štýlov, neexistuje iná možnosť. Množstvo e-mailových klientov totiž pri prechode do inej bunky tabuľky nastavenie štýlov zabúda.
- Pokiaľ je to potrebné, vložte informácie o štýle tiež do tagov <h1>, <h2>, ..., <h8>, <p> a <a>. To, či je potrebné informácie o štýle vložiť alebo nie, spoznáte pri testovaní e-mailu.
Ďalšie dôležité postupy
To, že e-mail vytvoríte podľa základných rád, vám síce zjednoduší prácu, ale nikdy nezaistí, že e-mail je nakódovaný skutočne korektne. Preto si pred rozosielaním novej šablóny osvojte pravidelné testovanie na čo najväčšom počte e-mailových klientov.
- Novú HTML šablónu otestujte v prvom rade v internetových prehliadačoch. Pokiaľ sa HTML šablóna zobrazuje správne, ste na dobrej ceste. Pokiaľ sa však zobrazuje nesprávne v internetovom prehliadači, je takmer isté, že sa bude zobrazovať nesprávne aj v e-mailovom klientovi. Pretože staršie verzie Microsoft Outlooku využívajú staršie renderovacie jadro Internet Explorer, odporúčame pre testovanie využiť IE6.
- HTML šablóna je mnohokrát rozbitá len vďaka drobnostiam. Skúste, či nepomôže miesto percentuálnej šírky využiť šírku pevnú.
- Pokiaľ sa tabuľky zobrazujú s odsadením, preverte nastavenia atribútov cellpadding a cellspacing na 0.
- Pozícia obrázkov môže byť zlá, pokiaľ je obrázok vložený na konci bunky pred ukončovacím tagom </td>. Aby sa pozícia spravila, umiestnite ukončovací tag </td> ihneď za obrázok bez akýchkoľvek medzier.
- Nepoužívajte javascript, e-mailoví klienti ho blokujú.
- Ak umiestňujete obrázky e-mailu na webový server, nechajte ich na servere uložené dostatočne dlhú dobu. Niektorí príjemcovia e-mail otvoria napríklad aj po pol roku.
- Overte, že e-mail bude čitateľný aj pri vypnutých obrázkoch. Veľa e-mailových klientov sťahovanie obrázkov vo východiskovom nastavení blokuje. Veľa príjemcov tak e-mail síce prečíta, ale nikdy nepozrú grafiku v e-mailu.
- Pred odoslaním e-mailu overte, či e-mail nebude vyhodnocovaný ako spam. Pokiaľ je e-mail vyhodnotený ako spam, bude potrebné zmeniť jeho texty a veľakrát tiež HTML kódovanie (zmeniť pozície, veľkosť, počet obrázkov apod.).
Slovo záverom
Stále viac ľudí preferuje príjem HTML e-mailov pred nevzhľadnými textovými e-mailami. Výroba HTML e-mailu ale nie je jednoduchá a je potrebné jej venovať určitý čas. Pokiaľ navrhnete krásny e-mail, ale príjemcovi sa zobrazí zle, získate len mínusové body.
Snažte sa mať vždy na mysli, aby HTML e-mail bol čo najjednoduchší (nejjendodušší). Len tak zaistíte, že sa zobrazí korektne najväčšiemu počtu príjemcov.
Nenašli ste, čo ste hľadali?
Nenašli ste, čo ste hľadali v našom výukovom centre, ani v našich video nápovedách?
Pokiaľ potrebujete pomôcť, napíšte nám na e-mail alebo zavolajte na 541 212 143.