Všechny články

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

Nevíte, jak si sami připravit krásnou e-mailovou šablonu? Neumíte kódovat v HTML jazyce? Právě pro Vás jsme připravili tento návod, který je zaměřený na základní tvorbu šablony.

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ěď:

Ukázka hotové e-mail šablony

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.

Šablona srovnání

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ů.

Outlook

 

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ě.

Seznam

 

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é.

Srovnání klientů

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. 

Jak na kódování HTML e-mailů

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

Sdílejte tento článek:

Okomentujte tento článek

Nejnovější články

  • Příprava e-mailové šablony v MJML - 2. díl – Responzivní e-maily snadno a rychle

    Nejste zdatní v HTML kódování, ale zároveň byste raději rozesílali e-maily v HTML kódu? V tomto díle zjistíte, jak je snadné vytvořit kódovanou šablonu takřka bez jakýchkoliv znalostí o HTML kódování.

  • Webhooks aneb zahákněte si všechny Vaše akce

    Webhooks, co to je a k čemu se Vám bude hodit? Webhooky se hodí mít, pokud chcete, aby Vám z Mail Kompletu bylo posíláno oznámení na Vaši URL adresu hned, jakmile dojde k nějaké akci, kterou v rámci Mail Kompletu chcete sledovat.

  • Jak na kódování HTML e-mailů

    Jak vytvořit HTML šablonu pro e-mail, tak, aby byla čitelná v co největším počtu e-mailových klientů?

  • Věčné téma – jak zamezit tomu, aby e-maily nekončily v nevyžádané poště?

    Odpověď na tuto otázku Vás asi překvapí, ale přesný recept neexistuje. Antispamové filtry poskytovatelů e-mailových schránek se stále vyvíjí, stejně jako celý online svět. Stejně tak jako se stále více řeší bezpečné doručení e-mailu do schránky příjemce.

  • Segmentace

    Možná si pamatujete na minulý článek, ve kterém jsme řešili téma týkající se kvalitní databáze ve spojitosti se zákonem EU o ochraně osobních údajů. Pokud Vám tento článek utekl, tak se k němu můžete vrátit zde. Dnes si totiž toto téma ještě trochu rozšíříme. Podíváme se na problematiku segmentací.

Zpět
nahoru