Kódování HTML emailu je velmi složité, někdy dokonce až nemožné. Naštěstí existuje mnoho emailových předloh které Vám dokáží usnadnit začátek tohoto ne zrovna lehkého úkolu. Předlohy jsou dobré pro rychlý začátek ale mnohé z nich Vás nechrání před určitými nástrahami různých e-mailových klientů. Pokud se tedy chystáte nakódovat HTML email, zde je několik tipů pro usnadnění tohoto poměrně složitého úkolu.
HTML doctype určí prohlížečům a emailovým klientům v jakém typu HTML jazyka je dokument napsán. Jako například HTML, XHTML, HTML5, atd. Pro HTML email se doporučuje se použít XHTML 1.0 Strict DOCTYPE, je totiž prokázáno že mnoho emailových klientů zobrazí HTML email přesněji než v jiných HTML doctype.
Pamatujte si, že každý emailový klient blokuje JavaScript jako bezpečnostní opatření před viry. Proto se prosím ujistěte, že Váš kód neobsahuje žádný JavaScript jako například tlačítko na odeslání formuláře, pop-up okno s odkazy, widgety, atd.
Použijte pouze inline CSS styl pro formátování. V součastnosti existuje mnoho webových aplikací které Vám zdarma pomohou převést embeded CSS do inline CSS, jako například Zurb inliner, Premailer a nebo Emailology.
Při kódování HTML emailu budete muset všechny obrázky načíst na Vámi zvolený server a následně použít absolutní cestu, která odkazuje zpět na Váš server jak je uvedeno níže HTML kód pro vložení obrázku:
<img src="http://www.mysite.com/email/images/photo.gif" alt="Fotografie Josefa Žáčka"/>
HTML kód pro vložení odkazu:
<a href="http://www.mysite.com/index.html" title="www.mysite.com">Clikněte zde</a>
Tip: Nahrajte všechny obrázky a jiné grafické prvky které jsou součástí HTML emailu na Vámi zvolený server hned na samém začátku projektu. Tímto způsobem budete muset použít absolutní cestu hned od začátku.
Většina emailových klientů ignoruje margin na table cells. Tyto prvky jsou však základními kameny při tvorbě HTML emailů. Pro kontrolu prostoru mezi table strukturou a textem/obsahem použijte pouze CSS cellpadding a CSS padding. Je naprosto v pořádku použít margin na text. Dále je možno použít hspace a vspace atribut pro obrázky a jiné grafické prvky.
Gmail nejnověji zobrazuje obrázky ve výchozím nastavení, neboli okamžitě. Všichni ostatní uživatelé jiních emailových klientů vidí prázdné místo a alt text který poskytnete. Tento alt text by měl popsat co obrázek obsahuje což může uživatele přinutit aby zobrazil obrázky ve svém emailovém prohlížeči.
<img src="#" alt="Fotografie mobilního telefonu značky Samsung" />
Ne každý emailový klient akceptuje zkratky jako #CCC nebo názvy barev jako “červená” nebo “žlutá”. Pro nejlepší výsledky se proto doporučuje používat šestimístné hex kódy jako například #007D9A které jsou plně podporovány ve všech emailových prohlížečích.
Zurb developeři vytvořili Ink, kompletní email framework jenž dokáže zhotovit HTML emaily fungující v každém email klientovi a to dokonce i Outlook. Html Email Boilerplate je další užitečný zdroj poskytující několik užitečných příkladů a triků pro tvorbu HTML emailu. Putsmail umožňuje odzkoušet HTML email před jeho odesláním. Litmus nabízí náhled (screenshot) HTML emailu ve více než 30 emailových klientech a zařízeních. Náhled HTML emailu je s možností skrytí obrázků. Emailology poskytuje šablonu s příklady pro tvorbu HTML emailů.
