Jak vytvořit html e-mail od základu

Máme za sebou 10 000 kampaní a víme jednu věc: HTML e-mail není „mini web“. Je to specifický formát, který musí projít filtry, zobrazit se v Gmailu i Outlooku a fungovat na mobilu. Pokud řešíte jak vytvořit html email, nejrychleji uspějete, když si ujasníte cíl (prodej vs. informace), zvolíte správnou cestu (kód vs. editor) a ohlídáte pár technických detailů. Níže najdete konkrétní postupy, časté chyby i praktické šablony pro e-mail marketing HTML v roce 2026.

Co je HTML e-mail a kdy dává smysl

HTML e-mail je zpráva, která používá HTML a inline styly, aby zobrazila design, tlačítka, obrázky a rozvržení napříč e-mailovými klienty. Dává smysl vždy, když chcete řídit pozornost čtenáře a měřit prokliky.

HTML v e-mailu se chová jinak než na webu. Některé klienty odstraní část CSS, jiné ignorují moderní prvky. Proto se v praxi používá „konzervativní“ HTML, často postavené na tabulkách a s inline CSS.

Kdy je HTML e-mail nejlepší volba:

• když posíláte newsletter s více bloky (novinky, akce, články),
• když potřebujete tlačítko CTA a jasnou hierarchii,
• když chcete konzistentní branding (barvy, fonty, hlavička),
• když měříte výkon kampaně (kliknutí, konverze).

Kdy naopak zvažte čistě textovou variantu:

• u velmi osobních obchodních e-mailů,
• při první „zahřívací“ komunikaci na studenější publikum,
• když testujete doručitelnost a chcete minimalizovat rizika.

Tip z praxe: U důležitých kampaní doporučujeme posílat vždy i textovou alternativu (plain-text). Pomáhá to čitelnosti, některým filtrům i uživatelům s omezeným zobrazením.

Chcete-li to vzít systematicky, začněte od databáze. Bez kvalitních kontaktů je i perfektní HTML jen hezký obrázek ve spamu. Pomůže návod na vytvoření seznamu s kontakty a následně práce se segmenty v seznamu odběratelů.

Jak vytvořit HTML e-mail: 2 cesty (kód vs. editor)

Pokud řešíte jak vytvořit html email, máte v praxi dvě rozumné cesty: ruční kódování, nebo editor šablon. Volba záleží na čase, rozpočtu a požadavcích na přesnost.

Ruční kódování: kontrola, ale více rizik

Ruční kódování je fajn, když potřebujete velmi specifický layout, nebo máte vývojáře. Počítejte ale s tím, že:

• budete řešit Outlook quirks (Word rendering),
• budete ladit responzivitu bez moderního CSS,
• budete testovat více kombinací zařízení a klientů.

Drag&Drop editor: rychlost a méně technických dluhů

Editor je ideální, pokud chcete posílat pravidelně a nechcete řešit každý pixel. V ngemailing.cz se v praxi opíráme o šablony a bloky, které už počítají s běžnými omezeními klientů.

Co typicky získáte:

• hotové HTML email šablony,
• bloky pro tlačítka, obrázky, sloupce,
• jednodušší úpravy bez zásahu do kódu,
• rychlé iterace (A/B varianty obsahu).

Pokud posíláte 2–4 kampaně měsíčně a nemáte vývojáře, editor šetří typicky 2–6 hodin práce na jednu kampaň (kódování + ladění + testy).

Rychlé srovnání

Pokud chcete vidět, jak vypadá práce se šablonami v praxi, mrkněte na šablony seznamu a obecně na naše funkce.

Na co si dát pozor při tvorbě HTML e-mailu (2026 checklist)

Aby HTML e-mail fungoval, musí být čitelný, rychlý a kompatibilní. Největší problémy nevznikají v designu, ale v detailech: obrázky bez altů, příliš těžké soubory, špatné kontrasty v dark mode nebo rozbitý layout v Outlooku.

Kompatibilita klientů: Gmail vs. Outlook vs. Seznam

E-mailoví klienti se liší v tom, co dovolí. Proto:

• používejte inline CSS (ne spoléhat na <style> všude),
• vyhněte se složitým pozicím a moderním CSS vlastnostem,
• stavte layout konzervativně (tabulky jsou pořád standard).

Responzivita: mobil je default

Většina otevření je na mobilu, takže:

• cílujte šířku e-mailu kolem 600 px (desktop),
• text držte minimálně 14–16 px,
• tlačítka dělejte „palcově“: výška cca 44 px.

Dark mode: barvy se mohou přepočítat

Dark mode umí přebarvit pozadí i text. Doporučujeme:

• nepoužívat čistě černé texty na čistě bílé,
• hlídat kontrast (ideálně test),
• u loga mít variantu s průhledným pozadím.

Obrázky a výkon

E-mail, který se načítá dlouho, ztrácí pozornost i důvěru. Prakticky:

• optimalizujte obrázky (typicky 80–200 kB na kus),
• nepřehánějte to s počtem obrázků,
• vždy doplňte alt text (i kvůli blokovaným obrázkům).

Poměr textu a obrázků

E-mail složený jen z obrázků vypadá podezřele. Držte se:

• jasného textového nadpisu,
• krátkých odstavců,
• 1–3 hlavních CTA odkazů.

Mini-checklist před odesláním:

• Předmět do ~45–60 znaků a smysluplný preheader
• 1 hlavní CTA (tlačítko) a 1–2 vedlejší odkazy
• Odhlášení viditelné a funkční (GDPR + zákon 480/2004)
• Alt texty u všech klíčových obrázků
• Test v mobilu + Outlooku (alespoň základní kontrola)

Jak vytvořit newsletter (a jak udělat newsletter, který vydělává)

Jak vytvořit newsletter je hlavně o struktuře: jedna hlavní myšlenka, jasná nabídka a měřitelný cíl. HTML je až druhý krok.

Začněte tím, že si odpovíte na dvě otázky:

• Co má příjemce udělat do 30 sekund po otevření?
• Jak poznáme úspěch? (proklik, odpověď, objednávka, registrace)

Doporučená struktura newsletteru (funguje v ČR)

• Hlavička: logo + krátký kontext (kdo píše a proč)
• Hero blok: 1 téma, 1 vizuál, 1 CTA
• Obsah: 2–4 krátké bloky (novinka, tip, reference)
• Důvěryhodnost: recenze, čísla, garance, kontakty
• Patička: odhlášení, adresa, preference

Vytváření newsletterů: co zvedá výkon

V našich datech napříč účty (aktuálně 320 zákazníků, 1 794 183 odběratelů v systémech) se dlouhodobě osvědčuje:

• personalizace alespoň jménem nebo segmentem,
• posílat na relevantní skupiny (ne všem všechno),
• opakovat jednu klíčovou nabídku ve 2 místech (tlačítko + textový odkaz).

Konkrétní tip: pokud máte více typů zákazníků, nastavte si segmenty. Pomůže článek o pokročilých technikách segmentace a také přehled 10 nejdůležitějších metrik v e-mailingu, abyste věděli, co hlídat.

Jak vytvořit newsletter zdarma: co je „zdarma“ a kde jsou limity

Vytvořit newsletter zdarma jde dvěma způsoby: buď použijete bezplatný tarif e-mailingového nástroje, nebo si newsletter vytvoříte v HTML a odešlete z běžné schránky. Druhá varianta často končí problémem s doručitelností a reputací domény.

U bezplatného tarifu dává smysl hlídat tři věci: limit kontaktů, limit odeslání a doručitelnost (autentizace domény). U ngemailing.cz je zdarma tarif postavený tak, aby šel reálně používat: 100 kontaktů a 200 e-mailů/měsíc.

Co typicky zdarma získáte (a co ne)

• získáte: editor, základní šablony, statistiky, odhlášení
• nezískáte: nadstandardní automatizace, pokročilé integrace, vyšší limity

Proč „poslat to z Gmailu“ není totéž

Hromadné odesílání z běžné schránky:

• nemá robustní správu odhlášení,
• neumí čistit databázi a pracovat s bouncy,
• může poškodit reputaci domény (a tím i běžnou firemní poštu).

Pokud chcete porovnat náklady, podívejte se na náš ceník. U malých databází je rozdíl často v jednotkách stokorun, ale rozdíl v doručitelnosti bývá zásadní.

Praktické pravidlo: Jakmile posíláte pravidelně na víc než 100–200 příjemců, vyplatí se přejít na nástroj určený pro e-mailing (kvůli odhlášení, statistikám a reputaci).

Jak vytvořit HTML e-mail tak, aby se nezlomil v Outlooku

Jak vytvořit html pro e-mail znamená psát „starším stylem“ než pro web. Outlook (desktop) používá renderovací jádro podobné Wordu, a to je důvod, proč se moderní layouty rozpadají.

Minimální technické zásady pro HTML mail

• layout stavte přes tabulky (<table>), ne přes flex/grid,
• styly dávejte inline (style=""),
• používejte jednoduché fonty (Arial, Verdana, Georgia),
• šířky nastavujte pevně i procenty (kombinace podle bloku).

Doporučená kostra

1. Obalovací tabulka na 100 % šířky pozadí
2. Vnitřní tabulka 600 px pro obsah
3. Bloky: hlavička, hero, obsah, patička
4. CTA jako „bulletproof button“ (tlačítko, které funguje i bez obrázků)

Časté chyby, které vidíme při ručním kódování

• příliš velké obrázky bez definované šířky → rozbije mobil
• chybějící alt → prázdné bloky při blokování obrázků
• text v obrázku → filtrům se to nelíbí a uživatel nic nevidí
• jeden obří soubor → Gmail může zprávu oříznout

Pokud nechcete řešit kompatibilitu ručně, držte se ověřených HTML e-mail šablon. V praxi vám ušetří nejvíc času právě konzistence napříč klienty.

Jak poslat HTML e-mail a nepokazit doručitelnost

Jak poslat HTML e-mail správně znamená odesílat přes nástroj, který řeší autentizaci, odhlášení, bouncy a reputaci. Nestačí mít hezký kód; rozhoduje i to, „kdo“ a „jak“ odesílá.

Technické minimum: SPF, DKIM, DMARC

Bez těchto záznamů budete mít horší doručitelnost, hlavně na freemailech. V ngemailing.cz standardně řešíme:

• SPF (kdo smí posílat za doménu),
• DKIM (podpis zprávy),
• DMARC (politika a reporting).

K tomu se hodí i vlastní tracking doména, aby odkazy a měření působily důvěryhodněji.

Obsahové signály pro filtry

• nepřehánějte vykřičníky a „spam slovník“
• mějte reálnou adresu firmy v patičce
• odhlášení jedním klikem (ne schované)

Provozní hygiena databáze

Doručitelnost není jednorázová akce. Je to rutina:

• odstraňovat tvrdé bouncy,
• pracovat s neaktivními kontakty,
• segmentovat podle aktivity.

Tady pomůže i článek o černé listině a seznamu potlačených a pro importy návod na hromadný import adres krok za krokem.

Rychlý postup odeslání kampaně (prakticky):

1. Připravte šablonu a zkontrolujte alt texty a odkazy.
2. Vyberte seznam a případně segment (např. „otevřeli za 60 dní“).
3. Pošlete test sobě do Gmailu, Outlooku a na Seznam.
4. Zkontrolujte předmět, preheader, zobrazení na mobilu.
5. Odešlete a sledujte metriky po 2, 6 a 24 hodinách.

V rámci e-mail marketingu doporučujeme po každé kampani vyhodnotit aspoň open rate, CTR a odhlášení. Když se něco zhorší, většinou je problém v cílení nebo frekvenci, ne v barvě tlačítka.

Shrnutí

Pokud si máte odnést jediné: jak vytvořit html e-mail není o „hezkém designu“, ale o kombinaci kompatibility, rychlosti a doručitelnosti. Nejrychlejší cesta je šablona + editor, nejjistější cesta je testování.

• HTML e-mail stavte konzervativně: inline CSS, šířka kolem 600 px, čitelné fonty.
• Pro newsletter funguje jasná struktura: 1 téma, 1 hlavní CTA, krátké bloky.
• Newsletter zdarma je ideální vytvořit přes free tarif nástroje, ne přes běžnou schránku.
• U „mail HTML“ hlídejte Outlook: tabulkový layout, jednoduché styly, alt texty.
• Pro odesílání řešte SPF/DKIM/DMARC a hygienu databáze (bouncy, neaktivní kontakty).
• Pokud chcete rychlý start: Vyzkoušejte ngemailing.cz zdarma a porovnejte si limity v našem ceníku.