Vytváříme HTML šablonu - 1. díl – Úvod a příprava

Kapitoly článku

• Proč se HTML šablonou zabývat
• Rozdíl mezi HTML šablonou, Drag and Drop editorem a čistým textem
• E-mailoví klienti vs. webové aplikace
• Co nás čeká příště

Proč se HTML šablonou zabývat

Jednoduchá otázka, na kterou existuje jednoduchá odpověď:

Ano, i takto může ve výsledku vypadat hotová HTML šablona, která se umí přizpůsobit mobilním zařízením a většina obsahu se příjemcům zobrazí i bez stažených obrázků.

Ukážeme Vám, jak jednu takovou šablonu připravit, co by měla obsahovat a na co si dát při její tvorbě pozor.

Hlavním důvodem vytváření správné HTML šablony je její zobrazení bez samotných obrázků v co nejvěrnější podobě.

Rozdíl mezi HTML, Drag and Drop editorem a čistým textem

V HTML e-mailu můžeme použít strukturovaný text, jak jej známe z Wordu. Nadpisy, bloky, odrážkové seznamy apod. Můžeme do něj přidat obrázky, tabulky apod. HTML e-mail je vlastně jednoduchá webová stránka. I zprávy psané v Outlooku jsou standardně ve formátu HTML, pokud si nezvolíme jiné nastavení.

Drag and Drop editor je jednoduchý editor pro sestavení e-mailu. Výhoda je, že zde není potřeba mít jakékoli znalosti kódování. Vše je rozděleno do jednotlivých bloků a práce se šablonou je velmi intuitivní. Během pár minut jste schopni vytvořit krásnou šablonu, která je responzivní pro všechna zařízení. Odpadá Vám tak i práce s testováním, aby se e-mail zobrazoval u všech e-mailových klientů a webových aplikací stejně. Nevýhodou jsou samozřejmě určitá omezení, se kterými se nesetkáte při sestavování HTML e-mailu.

To čistý text je nejjednodušší forma e-mailu. Je nenaformátovaný, nelze nastavit výšku textu, zvýraznit některé bloky a ani do něj nelze vkládat obrázky.

E-mailoví klienti vs. webové aplikace

Ve světě i u nás existuje množství různých e-mailových klientů. Pro představu, co to e-mailový klient vlastně je, si jich několik představíme.

Microsoft Outlook – nejznámější program pro správu e-mailových zpráv, kontaktů i kalendáře.
Jako součást balíčku Microsoft Office se používá jak ve firmách, tak i u soukromých uživatelů.

Mozilla Thunderbird – hojně rozšířený e-mailový klient, který je zcela zdarma od tvůrců oblíbeného internetového prohlížeče Mozzila Firefox.

Apple Mail – e-mailový program předinstalovaný na operačních systémech Mac OS X a iOS. I proto jej používá většina uživatelů Macu a mobilních zařízení od Apple.

Android Mail (neoficiální název) – aplikace, kterou obsahuje samotný operační systém Android. Je před instalována na všech zařízeních s tímto operačním systémem, a tudíž hojně používána.

Webové aplikace

Webové aplikace pro správu e-mailové schránky se také nazývají zkratkou webmail. Jelikož jich je opravdu hodně, ukážeme si jen několik z nich, které se nejčastěji používají v prostředí českého internetu.

Seznam Email – v tuzemsku nejpoužívanější webmail od společnosti Seznam.cz, a.s. Jde o jeden z prvních českých webmailů a i proto se stále těší velké popularitě.

Gmail – webová aplikace od gigantu Google. Dnes velmi používaný, především pro jeho propojení s ostatními službami Googlu.

To, že je některý e-mailový klient rozšířenější než druhý, ještě neznamená, že můžeme ty méně rozšířené ignorovat. Pamatujte, že i v malém procentu oslovených příjemců se může ukrývat množství nových zákazníků.

Proto doporučujeme snažit se vždy vyjít vstříc maximálnímu počtu příjemců, a to jak informační hodnotou e-mailu, tak jeho kvalitou technického zpracování.

Hlavní rozdíl mezi e-mailovým klientem a webmailem je už patrný ze samotného názvu. Na webmail se dá dostat přes běžný internetový prohlížeč, zatímco e-mailový klient vyžaduje nainstalovaný vlastního software na Vašem počítači.

Rozdíly v zobrazování e-mailu

Odlišností v zobrazování HTML e-mailů napříč klienty a webmaily je opravdu mnoho a jelikož se vše vyvíjí, udržet si přehled o tom, co použít pro konkrétní e-mail, není jednoduché.

Jak je vidět z obrázku, měli bychom si být vědomi, že použijeme-li např. kulaté rohy, ne všude budou opravdu kulaté. Pozornější z Vás si mohou všimnout i rozdílného vyhlazování textu u každého z klientů.

Základy kódování pro HTML e-maily 

Základy kódování a jak na kódování HTML e-mailů jsme se zaměřili v minulém článku. Pokud by Vás zajímalo, jak vytvořit HTML šablonu pro e-mail, tak aby byla čitelná v co největším počtu e-mailových klientů, klikněte na odkaz níže. 

Co nás čeká příště?

V dalším díle si představíme MJML šablonovací systém, díky kterému můžeme relativně snadno a rychle připravit responzivní e-mail. Ukážeme si základní layout šablony a definujeme si jednotlivé bloky e-mailu.

Doufáme, že se Vám článek líbil a pokud na nás máte jakékoliv otázky, tak neváhejte a ozvěte se nám.

Jsme tu pro Vás!

Váš Mail Komplet