Jak vytvořit HTML e-mail: 7 zásad, aby se nerozpadl

HTML e-mail je e-mail, jehož rozvržení, barvy, písmo, obrázky a tlačítka jsou zapsané v kódu HTML. Aby se nerozpadl v Outlooku ani v Gmailu, musí se psát jinak než webová stránka: rozvržení na tabulkách široké kolem 600 pixelů, styly přímo u prvků, obrázky s alt textem, bezpečná písma, kód do 102 kB, tlačítka kódem a vždy testovací e-mail. V Quandě vlastní HTML vložíte tlačítkem Vytvořit e-mail pomocí HTML a vpravo hned vidíte náhled. Kdo kód psát nechce, popíše e-mail AI asistentovi propojenému s Quandou přes Quanda MCP server a za pár minut má hotový koncept kampaně. Tady najdete 7 zásad, ukázku kódu a oba postupy.

V kostce

1. Klasický Outlook pro Windows vykresluje e-maily jádrem Wordu a Microsoft ho podporuje nejméně do roku 2029, proto se v e-mailu nepoužívá flexbox ani grid.
2. Rozvržení stavte na tabulkách široké kolem 600 pixelů a styly pište přímo k prvkům.
3. Počítejte s blokovanými obrázky: alt text, rozměry a tlačítka kódem, ne obrázkem.
4. Gmail ořízne e-mail s kódem nad 102 kB, i s patičkou a odkazem na odhlášení.
5. E-mail od AI nebo z jiného nástroje vždy otestujte v několika schránkách.
6. Bez zkušeností s kódem vytvoříte HTML e-mail během několika minut s AI asistentem přes Quanda MCP server. Popíšete obsah, přidáte obrázky a asistent udělá zbytek.

Stručně: co HTML e-mail je, kdy se hodí, na co si dát pozor a jak ho dostat do Quandy

• Co to je: e-mail, jehož obsah a vzhled jsou zapsané v jazyce HTML.
• Kdy se hodí: když kód píšete sami, přenášíte hotovou šablonu z jiného nástroje nebo ho pro vás napíše AI.
• Na co si dát pozor: Outlook, Gmail a další schránky kód upravují, proto platí pravidla starší než moderní web.
• Jak ho dostat do Quandy: při zakládání kampaně zvolte Vytvořit e-mail pomocí HTML a vložte kód. Pro část e-mailu použijte v editoru komponentu Obsah pomocí HTML.

Co je HTML e-mail

HTML e-mail je e-mail, jehož obsah i vzhled jsou zapsané v jazyce HTML, stejném, jakým se píšou webové stránky. Díky tomu může mít logo, barvy, obrázky, více sloupců a tlačítka. Opakem je čistě textový e-mail, který obsahuje jen písmena bez formátování.

Většina newsletterů a marketingových e-mailů je HTML. Rozdíl je jen v tom, kdo kód napíše. V e-mail editoru Quandy ho za vás vytvoří editor, když e-mail skládáte z bloků. Pokud ale kód píšete sami nebo ho máte odjinud, vložíte ho do Quandy přímo.

Kdy se hodí vlastní HTML kód

Vlastní HTML kód se hodí hlavně ve třech případech:

• HTML e-maily umíte psát sami a chcete mít každý detail pod kontrolou.
• Máte hotovou šablonu z jiného nástroje, například z Canvy nebo z dřívější e-mailingové služby, a chcete ji jen přenést do Quandy.
• Kód si necháváte vytvořit pomocí AI, například v ChatGPT nebo Claude. Nejpohodlněji přes Quanda MCP server, kdy asistent e-mail rovnou založí v Quandě.

Ve všech případech stačí kód vložit a rovnou vidíte výsledek. Když potřebujete vlastní kód jen pro část e-mailu, třeba pro tabulku, nemusíte psát celý e-mail. E-mail editor Quandy má obsahovou komponentu Obsah pomocí HTML, kterou vložíte mezi ostatní bloky.

Jak vložit HTML kód do Quandy

Kromě klasického editoru, kde e-mail skládáte z jednotlivých bloků, si ho můžete vytvořit i pomocí HTML kódu:

1. Založte novou e-mailovou kampaň a pokračujte do kroku s e-mailem.
2. Na stránce Vyberte si šablonu, která se Vám líbí zvolte tlačítko Vytvořit e-mail pomocí HTML.
3. Do levé části obrazovky vložte kód e-mailu. Vpravo hned vidíte náhled, jak bude e-mail vypadat, ještě než ho pošlete.
4. Nad kódem vyplňte předmět e-mailu.
5. Do patičky vložte odkaz na odhlášení se značkou {{ unsubscribe_link }}. Bez ní není HTML e-mail v Quandě kompletní.
6. V kroku Odeslání si pošlete testovací e-mail do několika schránek.

Postup odeslání testu popisuje nápověda Nastavení odeslání v jednoduché kampani. Do kódu můžete vložit i značky personalizace, například oslovení. Zapisují se ve dvou složených závorkách s mezerami uvnitř, Quanda za ně při odeslání dosadí údaje každého příjemce.

Proč HTML e-mail nevypadá stejně jako webová stránka

Tady je potřeba se na chvíli zastavit, protože právě tohle je nejčastější zdroj zklamání. Kód, který na webu nebo v prohlížeči vypadá perfektně, se v poštovní schránce často rozsype. Gmail, Outlook, Seznam a další si totiž kód vykládají každý trochu jinak a klasický Outlook pro Windows dokonce e-maily zobrazuje pomocí technologie, kterou jinak používá Word na psaní dokumentů. Proto se u e-mailů stále používají postupy, které se na běžných webových stránkách už dávno nepoužívají.

Zdroje: Can I email (podpora HTML a CSS v e-mailových programech); Microsoft, New Outlook for Windows: A Guide to Product Availability (2024); Litmus, Email Client Market Share: Trends & Statistics 2026 (data za červenec 2026); průvodce HTML e-maily Quandy. Stav k říjnu 2026.

Microsoft podle svého oznámení podporuje klasický Outlook v Microsoft 365 nejméně do roku 2029, nový Outlook už vykresluje e-maily jako webový prohlížeč. Firemní příjemci ale klasický Outlook používají dál, takže e-mail musí fungovat v obou.

7 zásad, jak napsat HTML e-mail

1. Rozvržení stavte na tabulkách

Zní to staromódně, ale právě tabulky (kód <table>) jsou jediný způsob rozvržení, který zobrazí spolehlivě úplně všechny e-mailové schránky. Modernější postupy, které se běžně používají na webu, si v e-mailu často vůbec neporadí, hlavně ve starším Outlooku. Šířku e-mailu držte kolem 600 pixelů, nejvýš 700 pixelů. To je bezpečná velikost, která se vejde do náhledu ve všech schránkách.

Tabulkám pro rozvržení přidejte atribut role="presentation". Čtečky obrazovky pak tabulku přeskočí a nepředčítají ji jako data.

2. Styly pište přímo k prvkům

Styl, tedy barvy, velikost písma a odsazení, pište přímo k danému textu nebo obrázku. Pokud styl napíšete jen jednou nahoře v kódu a pak se na něj v textu odkazujete, část schránek to buď zcela ignoruje nebo to respektuje jen napůl. Bezpečnější je zapsat styl atributem style přímo tam, kde se používá, u konkrétního textu nebo tlačítka. Říká se tomu inline styly neboli inline CSS. Do hlavičky patří jen to, co jinak zapsat nejde, například pravidla pro mobil (responzivní zobrazení) a tmavý režim.

3. Počítejte s tím, že se obrázky nemusí zobrazit

Spousta poštovních schránek obrázky ve výchozím nastavení blokuje. Ke každému obrázku proto vždy přidejte popisek (alt text) a předem zadejte jeho rozměry, ať se vám při načítání nerozjede vzhled e-mailu. Text by měl dávat smysl, i kdyby se žádný obrázek nezobrazil. Jak z alt textu udělat výrazný nadpis, popisuje článek Nevidíte obrázky? Nevadí. Přečtěte si nadpis.

Pro fotky používejte JPG, pro loga a ikony PNG a pro jednoduché animace GIF. Formáty WebP a SVG klasický Outlook nezobrazí, rozdíly mezi formáty vysvětluje článek JPG, PNG nebo GIF?

4. Používejte běžné, bezpečné fonty

Ozdobné fonty stažené odjinud se v Outlooku a Gmailu vůbec nezobrazí. Do kódu vždy uvádějte i náhradní fonty, třeba Arial nebo Helvetica, aby se e-mail zobrazil hezky, i když se ten hlavní font nenačte. Zápis pak vypadá takto: font-family: Arial, Helvetica, sans-serif.

5. Nedělejte e-mail zbytečně těžký

Pokud je kód e-mailu příliš dlouhý (velikost nad 102 kB), Gmail ho ořízne a příjemce uvidí jen odkaz na zobrazení celé zprávy. Může se tak stát, že vaše hlavní sdělení nebo tlačítko vůbec neuvidí. Za oříznutím zůstane i patička s odkazem na odhlášení. Kód by proto měl být co nejjednodušší a bez zbytečně opakovaných stylů. Do limitu se počítá jen kód, obrázky ne, ty se načítají zvlášť. Google hranici oficiálně nezveřejňuje, 102 kB uvádějí na základě měření nástroje pro testování e-mailů a e-mailingové služby. Stejný limit hlídá i SPAM test v Quandě.

6. Tlačítka dělejte jako text s barvou pozadí, ne jako obrázek

Tlačítko vytvořené jako obrázek se nemusí zobrazit vůbec, když jsou obrázky blokované. Bezpečnější je udělat tlačítko jako obyčejný odkaz s barevným pozadím přímo v kódu. Na mobilu má být dost velké na prst, alespoň 44 × 44 pixelů. Tuto velikost doporučují pravidla přístupnosti WCAG 2.2 (kritérium 2.5.5) i průvodce HTML e-maily Quandy.

7. Před odesláním si e-mail vždy pošlete na zkoušku

Náhled v editoru je dobrý první krok, ale nenahradí to, když si e-mail pošlete sami sobě do Gmailu, Outlooku nebo třeba Seznamu a zkontrolujete, jak vypadá. Podívejte se i na to, jak vypadá na mobilu a v tmavém režimu. Podle Litmusu (Email Client Market Share: Trends & Statistics 2026, přes 1 miliardu otevření v červenci 2026) používá tmavý režim víc než čtvrtina uživatelů.

Tip: Testovací e-mail si pošlete aspoň na tři adresy: do Gmailu, do firemního Outlooku a do Seznamu. Otevřete ho na počítači i na telefonu a jednou přepněte telefon do tmavého režimu. Odhalíte tak většinu chyb dřív, než je uvidí příjemci.

Ukázka kostry HTML e-mailu

Takhle vypadá jednoduchá kostra, která drží zásady výše: tabulka pro rozvržení, šířka 600 pixelů, styly přímo u prvků, bezpečné písmo, tlačítko kódem a odkaz na odhlášení.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
  <tr>
    <td align="center" style="padding: 24px 0;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
        <tr>
          <td style="padding: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 26px; color: #333333;">
            <h1 style="margin: 0 0 16px; font-size: 28px; line-height: 34px;">Novinky</h1>
            <p style="margin: 0 0 24px;">Krátký text, který řekne, proč e-mail otevřít.</p>
            <a href="https://www.example.com" style="display: inline-block; padding: 14px 28px; background-color: #0b5cad; color: #ffffff; text-decoration: none; border-radius: 4px;">Zjistit víc</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 16px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #777777;">
            Nechcete dostávat další e-maily? <a href="{{ unsubscribe_link }}" style="color: #777777;">Odhlásit se</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Ukázka je zjednodušená. Plnohodnotný e-mail má navíc hlavičku s kódováním a nastavením pro Outlook, pravidla pro mobil a tmavý režim a tlačítka upravená tak, aby v Outlooku zachovala odsazení.

Přenášíte HTML z jiných nástrojů nebo tvoříte pomocí AI?

I když si e-mail necháte vytvořit pomocí AI nebo ho přenášíte z jiného nástroje, například z Canvy, výsledek často není na první dobrou stoprocentní. I při snaze dodržet výše zmíněné zásady se stává, že se v nějakém e-mailovém klientovi něco rozjede, protože uhlídat všechny výjimky ručně je náročné i pro zkušené kodéry.

Pokud si tedy HTML kód necháváte vytvořit odjinud a následně vložíte kód do Quandy, vždy si pošlete testovací e-maily do několika schránek a zkontrolujte, jestli se zobrazuje tak, jak má.

Když kód píše AI, pomůže konkrétní zadání. Napište do něj, že jde o HTML e-mail, ne webovou stránku, a vyjmenujte zásady: rozvržení na tabulkách široké 600 pixelů, styly přímo u prvků, žádný flexbox ani JavaScript, bezpečná písma s náhradou, obrázky JPG nebo PNG s alt textem, tlačítka kódem a odkaz na odhlášení se značkou {{ unsubscribe_link }} v patičce.

Tohle všechno za vás pohlídá AI asistent propojený s Quandou, jak ukazuje další část.

Jak vytvořit HTML e-mail s AI přes Quanda MCP server

Quanda MCP server je propojení, přes které AI asistent jako Claude, ChatGPT nebo Copilot pracuje přímo s vaším účtem v Quandě. Pro HTML e-maily to znamená, že asistent kód nejen napíše, ale píše ho podle průvodce HTML e-maily Quandy, kampaň sám založí a pošle vám testovací e-mail. Bezpečně a spolehlivě tak připravíte vlastní HTML e-mail během několika minut, bez jakýchkoli zkušeností s kódem.

1. Propojte svého AI asistenta s Quandou přes Quanda MCP server. Nastavení zabere kolem 5 minut a uděláte ho jen jednou.
2. Do chatu popište, co má kampaň obsahovat: o čem e-mail je, komu je určený, co je hlavní sdělení a kam má vést tlačítko.
3. Připojte odkazy na obrázky (například z vašeho webu) nebo obrázky přiložte přímo k zadání. Když přidáte adresu webu, asistent z něj převezme i barvy a logo.
4. Asistent napíše HTML, založí kampaň jako koncept a pošle vám testovací e-mail.
5. Změny popište obyčejnou větou, například „zkrať úvod a zvětši tlačítko“, a přijde nový test.
6. Příjemce vyberete a kampaň odešlete vy v Quandě.

Zadání může vypadat třeba takto: „Připrav e-mail pro naše zákazníky o jarním servisu kol. Sleva 20 % do konce dubna, tlačítko Objednat servis povede na naši stránku servisu. Použij barvy a logo z našeho webu a tyto dvě fotky.“ Víc není potřeba.

O obrázky se nemusíte starat. Quanda je hostuje sama. Obrázky z odkazů si při uložení kampaně stáhne z webu a uloží u sebe, obrázky přiložené k zadání nahraje asistent do knihovny obrázků. Pokud to váš asistent neumí, nahrajete je na stránce Obrázky v aplikaci Quanda MCP a adresu mu pošlete.

Spolehlivé je to proto, že asistent dodržuje stejné zásady jako v tomto článku: tabulky, tlačítka, která fungují i v Outlooku, mobilní zobrazení, tmavý režim, obrázky s alt textem, značky personalizace a povinný odkaz na odhlášení. Bezpečné proto, že kampaň vzniká jen jako koncept, odesílání zůstává na vás a přístup asistentovi kdykoli odeberete.

Vytvořit krásný a funkční HTML e-mail s AI je zábava a zvládne to opravdu každý. Místo kódu přemýšlíte jen o tom, co chcete zákazníkům říct.

Tip: Jak asistenta propojit, které AI asistenty Quanda MCP server podporuje a co dalšího umí, třeba analýzy kampaní a reporty, najdete na stránce Quanda MCP server.

E-mail editor, vlastní HTML kód nebo AI asistent

E-mail editor i asistent přes Quanda MCP server se řídí pravidly Quandy, takže výsledný e-mail funguje spolehlivě napříč Gmailem, Outlookem, Seznamem i dalšími klienty. U kódu z obecného AI chatu nebo jiného nástroje se naopak spoléháte na to, že zrovna trefí všechny detaily správně. Práci v editoru popisuje nápověda E-mail editor jednoduché e-mailové kampaně.

Kontrolní seznam před odesláním HTML e-mailu

Než kampaň s vlastním HTML kódem odešlete, projděte si tento seznam:

• Rozvržení stojí na tabulkách s atributem role="presentation", ne na flexboxu nebo gridu.
• E-mail je široký kolem 600 pixelů, nejvýš 700 pixelů.
• Styly jsou zapsané přímo u prvků.
• Každý obrázek má alt text a rozměry a je ve formátu JPG, PNG nebo GIF.
• Písmo má náhradu, například Arial, Helvetica, sans-serif.
• Kód má méně než 102 kB.
• Tlačítka jsou kódem, ne obrázkem.
• Patička obsahuje odkaz na odhlášení se značkou {{ unsubscribe_link }}, bez ní není e-mail kompletní.
• Testovací e-mail jste si prohlédli v Gmailu, Outlooku a Seznamu, na mobilu i v tmavém režimu.

Závěrem

Vlastní HTML kód vám dá volnost, ale i odpovědnost za to, jak e-mail uvidí příjemci v desítkách různých programů. Držte se sedmi zásad, kód udržujte jednoduchý a každý e-mail otestujte. Kdo kód psát nechce, nechá si HTML e-mail za pár minut připravit AI asistentem přes Quanda MCP server. A kdo chce každý blok poskládat sám, sáhne po e-mail editoru Quandy a vlastní kód vloží jen tam, kde je opravdu potřeba.

Pokud se chcete designu e-mailů věnovat do hloubky, projděte si online kurz zdarma Copywriting a design e-mailů, které se čtou. A pokud si nejste jistí, jestli váš HTML e-mail obstojí ve všech schránkách, ozvěte se nám. Projdeme ho s vámi a řekneme vám, co upravit.