Ako vytvoriť HTML e-mail: 7 zásad, aby sa nerozpadol

HTML e-mail je e-mail, ktorého rozloženie, farby, písmo, obrázky a tlačidlá sú zapísané v kóde HTML. Aby sa nerozpadol v Outlooku ani v Gmaile, musí sa písať inak ako webová stránka: rozloženie na tabuľkách širokých okolo 600 pixelov, štýly priamo pri prvkoch, obrázky s alt textom, bezpečné písma, kód do 102 kB, tlačidlá kódom a vždy testovací e-mail. V Quande vlastné HTML vložíte tlačidlom Vytvoriť e-mail pomocou HTML a vpravo hneď vidíte náhľad. Kto kód písať nechce, opíše e-mail AI asistentovi prepojenému s Quandou cez Quanda MCP server a za pár minút má hotový koncept kampane. Nájdete tu 7 zásad, ukážku kódu a oba postupy.

V skratke

1. Klasický Outlook pre Windows vykresľuje e-maily jadrom Wordu a Microsoft ho podporuje najmenej do roku 2029, preto sa v e-maile nepoužíva flexbox ani grid.
2. Rozloženie stavajte na tabuľkách širokých okolo 600 pixelov a štýly píšte priamo k prvkom.
3. Počítajte s blokovanými obrázkami: alt text, rozmery a tlačidlá kódom, nie obrázkom.
4. Gmail oreže e-mail s kódom nad 102 kB, aj s pätičkou a odkazom na odhlásenie.
5. E-mail od AI alebo z iného nástroja vždy otestujte v niekoľkých schránkach.
6. Bez skúseností s kódom vytvoríte HTML e-mail v priebehu niekoľkých minút s AI asistentom cez Quanda MCP server. Opíšete obsah, pridáte obrázky a asistent urobí zvyšok.

Stručne: čo je HTML e-mail, kedy sa hodí, na čo si dať pozor a ako ho dostať do Quandy

• Čo to je: e-mail, ktorého obsah a vzhľad sú zapísané v jazyku HTML.
• Kedy sa hodí: keď kód píšete sami, prenášate hotovú šablónu z iného nástroja alebo ho pre vás napíše AI.
• Na čo si dať pozor: Outlook, Gmail a ďalšie schránky kód upravujú, preto platia pravidlá staršie ako moderný web.
• Ako ho dostať do Quandy: pri zakladaní kampane zvoľte Vytvoriť e-mail pomocou HTML a vložte kód. Pre časť e-mailu použite v editore komponentu Obsah pomocou HTML.

Čo je HTML e-mail

HTML e-mail je e-mail, ktorého obsah aj vzhľad sú zapísané v jazyku HTML, rovnakom, akým sa píšu webové stránky. Vďaka tomu môže mať logo, farby, obrázky, viac stĺpcov a tlačidlá. Opakom je čisto textový e-mail, ktorý obsahuje len písmená bez formátovania.

Väčšina newsletterov a marketingových e-mailov je HTML. Rozdiel je len v tom, kto kód napíše. V e-mail editore Quandy ho za vás vytvorí editor, keď e-mail skladáte z blokov. Ak však kód píšete sami alebo ho máte odinakiaľ, vložíte ho do Quandy priamo.

Kedy sa hodí vlastný HTML kód

Vlastný HTML kód sa hodí hlavne v troch prípadoch:

• HTML e-maily viete písať sami a chcete mať každý detail pod kontrolou.
• Máte hotovú šablónu z iného nástroja, napríklad z Canvy alebo z predchádzajúcej e-mailingovej služby, a chcete ju len preniesť do Quandy.
• Kód si necháte vytvoriť pomocou AI, napríklad v ChatGPT alebo Claude. Najpohodlnejšie cez Quanda MCP server, keď asistent e-mail rovno založí v Quande.

Vo všetkých prípadoch stačí kód vložiť a hneď vidíte výsledok. Keď potrebujete vlastný kód len pre časť e-mailu, napríklad pre tabuľku, nemusíte písať celý e-mail. E-mail editor Quandy má obsahovú komponentu Obsah pomocou HTML, ktorú vložíte medzi ostatné bloky.

Ako vložiť HTML kód do Quandy

Okrem klasického editora, v ktorom e-mail skladáte z jednotlivých blokov, si ho môžete vytvoriť aj pomocou HTML kódu:

1. Založte novú e-mailovú kampaň a pokračujte do kroku s e-mailom.
2. Na stránke s výberom šablóny zvoľte tlačidlo Vytvoriť e-mail pomocou HTML.
3. Do ľavej časti obrazovky vložte kód e-mailu. Vpravo hneď vidíte náhľad, ako bude e-mail vyzerať, ešte predtým, ako ho pošlete.
4. Nad kódom vyplňte predmet e-mailu.
5. Do pätičky vložte odkaz na odhlásenie so značkou {{ unsubscribe_link }}. Bez nej nie je HTML e-mail v Quande kompletný.
6. V kroku Odoslanie si pošlite testovací e-mail do niekoľkých schránok.

Postup odoslania testu opisuje pomoc Nastavenie odoslania v jednoduchej kampani. Do kódu môžete vložiť aj značky personalizácie, napríklad oslovenie. Zapisujú sa v dvoch zložených zátvorkách s medzerami vnútri, Quanda za ne pri odoslaní dosadí údaje každého príjemcu.

Prečo HTML e-mail nevyzerá rovnako ako webová stránka

Tu sa treba na chvíľu zastaviť, pretože práve toto je najčastejší zdroj sklamania. Kód, ktorý na webe alebo v prehliadači vyzerá perfektne, sa v poštovej schránke často rozsype. Gmail, Outlook, Azet a ďalšie si totiž kód vykladajú každý trochu inak a klasický Outlook pre Windows dokonca e-maily zobrazuje pomocou technológie, ktorú inak používa Word na písanie dokumentov. Preto sa pri e-mailoch stále používajú postupy, ktoré sa na bežných webových stránkach už dávno nepoužívajú.

Zdroje: Can I email (podpora HTML a CSS v e-mailových programoch); Microsoft, New Outlook for Windows: A Guide to Product Availability (2024); Litmus, Email Client Market Share: Trends & Statistics 2026 (dáta za júl 2026); sprievodca HTML e-mailami Quandy. Stav k októbru 2026.

Microsoft podľa svojho oznámenia podporuje klasický Outlook v Microsoft 365 najmenej do roku 2029, nový Outlook už vykresľuje e-maily ako webový prehliadač. Firemní príjemcovia však klasický Outlook používajú ďalej, takže e-mail musí fungovať v oboch.

7 zásad, ako napísať HTML e-mail

1. Rozloženie stavajte na tabuľkách

Znie to staromódne, ale práve tabuľky (kód <table>) sú jediný spôsob rozloženia, ktorý spoľahlivo zobrazia úplne všetky e-mailové schránky. S modernejšími postupmi, ktoré sa bežne používajú na webe, si e-mail často vôbec neporadí, hlavne v staršom Outlooku. Šírku e-mailu držte okolo 600 pixelov, najviac 700 pixelov. To je bezpečná veľkosť, ktorá sa zmestí do náhľadu vo všetkých schránkach.

Tabuľkám pre rozloženie pridajte atribút role="presentation". Čítačky obrazovky potom tabuľku preskočia a nečítajú ju ako dáta.

2. Štýly píšte priamo k prvkom

Štýl, teda farby, veľkosť písma a odsadenie, píšte priamo k danému textu alebo obrázku. Ak štýl napíšete len raz hore v kóde a potom sa naň v texte odkazujete, časť schránok to buď úplne ignoruje, alebo to rešpektuje len napoly. Bezpečnejšie je zapísať štýl atribútom style priamo tam, kde sa používa, pri konkrétnom texte alebo tlačidle. Hovorí sa tomu inline štýly alebo inline CSS. Do hlavičky patrí len to, čo sa inak zapísať nedá, napríklad pravidlá pre mobil (responzívne zobrazenie) a tmavý režim.

3. Počítajte s tým, že sa obrázky nemusia zobraziť

Množstvo poštových schránok obrázky v predvolenom nastavení blokuje. Ku každému obrázku preto vždy pridajte popis (alt text) a vopred zadajte jeho rozmery, aby sa vám pri načítaní nerozhodil vzhľad e-mailu. Text by mal dávať zmysel, aj keby sa žiadny obrázok nezobrazil. Ako z alt textu urobiť výrazný nadpis, opisuje článok Nevidíte obrázky v e-maile? Štýlovaný alt text ukáže nadpis.

Na fotky používajte JPG, na logá a ikony PNG a na jednoduché animácie GIF. Formáty WebP a SVG klasický Outlook nezobrazí, rozdiely medzi formátmi vysvetľuje článok JPG, PNG alebo GIF? Aký typ súboru obrázkov použiť pre e-mailing.

4. Používajte bežné, bezpečné fonty

Ozdobné fonty stiahnuté odinakiaľ sa v Outlooku a Gmaile vôbec nezobrazia. Do kódu vždy uvádzajte aj náhradné fonty, napríklad Arial alebo Helvetica, aby sa e-mail zobrazil pekne, aj keď sa hlavný font nenačíta. Zápis potom vyzerá takto: font-family: Arial, Helvetica, sans-serif.

5. Nerobte e-mail zbytočne ťažký

Ak je kód e-mailu príliš dlhý (veľkosť nad 102 kB), Gmail ho oreže a príjemca uvidí len odkaz na zobrazenie celej správy. Môže sa tak stať, že vaše hlavné posolstvo alebo tlačidlo vôbec neuvidí. Za orezaním zostane aj pätička s odkazom na odhlásenie. Kód by preto mal byť čo najjednoduchší a bez zbytočne opakovaných štýlov. Do limitu sa počíta len kód, obrázky nie, tie sa načítavajú zvlášť. Google hranicu oficiálne nezverejňuje, 102 kB uvádzajú na základe merania nástroje na testovanie e-mailov a e-mailingové služby. Rovnaký limit stráži aj SPAM test v Quande.

6. Tlačidlá robte ako text s farbou pozadia, nie ako obrázok

Tlačidlo vytvorené ako obrázok sa nemusí zobraziť vôbec, keď sú obrázky blokované. Bezpečnejšie je urobiť tlačidlo ako obyčajný odkaz s farebným pozadím priamo v kóde. Na mobile má byť dosť veľké na prst, aspoň 44 × 44 pixelov. Túto veľkosť odporúčajú pravidlá prístupnosti WCAG 2.2 (kritérium 2.5.5) aj sprievodca HTML e-mailami Quandy.

7. Pred odoslaním si e-mail vždy pošlite na skúšku

Náhľad v editore je dobrý prvý krok, ale nenahradí to, keď si e-mail pošlete sami sebe do Gmailu, Outlooku alebo napríklad Azetu a skontrolujete, ako vyzerá. Pozrite sa aj na to, ako vyzerá na mobile a v tmavom režime. Podľa Litmusu (Email Client Market Share: Trends & Statistics 2026, vyše 1 miliardy otvorení v júli 2026) používa tmavý režim viac ako štvrtina používateľov.

Tip: Testovací e-mail si pošlite aspoň na tri adresy: do Gmailu, do firemného Outlooku a do Azetu. Otvorte ho na počítači aj na telefóne a raz prepnite telefón do tmavého režimu. Odhalíte tak väčšinu chýb skôr, než ich uvidia príjemcovia.

Ukážka kostry HTML e-mailu

Takto vyzerá jednoduchá kostra, ktorá dodržiava zásady vyššie: tabuľka pre rozloženie, šírka 600 pixelov, štýly priamo pri prvkoch, bezpečné písmo, tlačidlo kódom a odkaz na odhlásenie.

<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átky text, ktorý povie, prečo e-mail otvoriť.</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;">Zistiť viac</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 16px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #777777;">
            Nechcete dostávať ďalšie e-maily? <a href="{{ unsubscribe_link }}" style="color: #777777;">Odhlásiť sa</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Ukážka je zjednodušená. Plnohodnotný e-mail má navyše hlavičku s kódovaním a nastavením pre Outlook, pravidlá pre mobil a tmavý režim a tlačidlá upravené tak, aby si v Outlooku zachovali odsadenie.

Prenášate HTML z iných nástrojov alebo tvoríte pomocou AI?

Aj keď si e-mail necháte vytvoriť pomocou AI alebo ho prenášate z iného nástroja, napríklad z Canvy, výsledok často nie je na prvýkrát stopercentný. Aj pri snahe dodržať spomenuté zásady sa stáva, že sa v niektorom e-mailovom klientovi niečo rozhodí, pretože ustrážiť všetky výnimky ručne je náročné aj pre skúsených kóderov.

Ak si teda HTML kód necháte vytvoriť inde a následne ho vložíte do Quandy, vždy si pošlite testovacie e-maily do niekoľkých schránok a skontrolujte, či sa zobrazuje tak, ako má.

Keď kód píše AI, pomôže konkrétne zadanie. Napíšte doň, že ide o HTML e-mail, nie webovú stránku, a vymenujte zásady: rozloženie na tabuľkách širokých 600 pixelov, štýly priamo pri prvkoch, žiadny flexbox ani JavaScript, bezpečné písma s náhradou, obrázky JPG alebo PNG s alt textom, tlačidlá kódom a odkaz na odhlásenie so značkou {{ unsubscribe_link }} v pätičke.

Toto všetko za vás postráži AI asistent prepojený s Quandou, ako ukazuje ďalšia časť.

Ako vytvoriť HTML e-mail s AI cez Quanda MCP server

Quanda MCP server je prepojenie, cez ktoré AI asistent ako Claude, ChatGPT alebo Copilot pracuje priamo s vaším účtom v Quande. Pre HTML e-maily to znamená, že asistent kód nielen napíše, ale píše ho podľa sprievodcu HTML e-mailami Quandy, kampaň sám založí a pošle vám testovací e-mail. Bezpečne a spoľahlivo tak pripravíte vlastný HTML e-mail v priebehu niekoľkých minút, bez akýchkoľvek skúseností s kódom.

1. Prepojte svojho AI asistenta s Quandou cez Quanda MCP server. Nastavenie zaberie okolo 5 minút a urobíte ho len raz.
2. Do chatu opíšte, čo má kampaň obsahovať: o čom e-mail je, komu je určený, aké je hlavné posolstvo a kam má viesť tlačidlo.
3. Pripojte odkazy na obrázky (napríklad z vášho webu) alebo obrázky priložte priamo k zadaniu. Keď pridáte adresu webu, asistent z neho prevezme aj farby a logo.
4. Asistent napíše HTML, založí kampaň ako koncept a pošle vám testovací e-mail.
5. Zmeny opíšte obyčajnou vetou, napríklad „skráť úvod a zväčši tlačidlo“, a príde nový test.
6. Príjemcov vyberiete a kampaň odošlete vy v Quande.

Zadanie môže vyzerať napríklad takto: „Priprav e-mail pre našich zákazníkov o jarnom servise bicyklov. Zľava 20 % do konca apríla, tlačidlo Objednať servis povedie na našu stránku servisu. Použi farby a logo z nášho webu a tieto dve fotky.“ Viac netreba.

O obrázky sa nemusíte starať. Quanda ich hosťuje sama. Obrázky z odkazov si pri uložení kampane stiahne z webu a uloží u seba, obrázky priložené k zadaniu nahrá asistent do knižnice obrázkov. Ak to váš asistent nevie, nahráte ich na stránke Obrázky v aplikácii Quanda MCP a adresu mu pošlete.

Spoľahlivé je to preto, že asistent dodržiava rovnaké zásady ako v tomto článku: tabuľky, tlačidlá, ktoré fungujú aj v Outlooku, mobilné zobrazenie, tmavý režim, obrázky s alt textom, značky personalizácie a povinný odkaz na odhlásenie. Bezpečné preto, že kampaň vzniká len ako koncept, odosielanie zostáva na vás a prístup asistentovi kedykoľvek odoberiete.

Vytvoriť pekný a funkčný HTML e-mail s AI je zábava a zvládne to naozaj každý. Namiesto kódu premýšľate len o tom, čo chcete zákazníkom povedať.

Tip: Ako asistenta prepojiť, ktorých AI asistentov Quanda MCP server podporuje a čo ďalšie vie, napríklad analýzy kampaní a reporty, nájdete na stránke Quanda MCP server.

E-mail editor, vlastný HTML kód alebo AI asistent

E-mail editor aj asistent cez Quanda MCP server sa riadia pravidlami Quandy, takže výsledný e-mail funguje spoľahlivo naprieč Gmailom, Outlookom, Azetom aj ďalšími klientmi. Pri kóde zo všeobecného AI chatu alebo iného nástroja sa naopak spoliehate na to, že práve trafí všetky detaily správne. Prácu v editore opisuje pomoc E-mail editor jednoduchej e-mailovej kampane.

Kontrolný zoznam pred odoslaním HTML e-mailu

Skôr než kampaň s vlastným HTML kódom odošlete, prejdite si tento zoznam:

• Rozloženie stojí na tabuľkách s atribútom role="presentation", nie na flexboxe alebo gride.
• E-mail je široký okolo 600 pixelov, najviac 700 pixelov.
• Štýly sú zapísané priamo pri prvkoch.
• Každý obrázok má alt text a rozmery a je vo formáte JPG, PNG alebo GIF.
• Písmo má náhradu, napríklad Arial, Helvetica, sans-serif.
• Kód má menej ako 102 kB.
• Tlačidlá sú kódom, nie obrázkom.
• Pätička obsahuje odkaz na odhlásenie so značkou {{ unsubscribe_link }}, bez nej nie je e-mail kompletný.
• Testovací e-mail ste si prezreli v Gmaile, Outlooku a Azete, na mobile aj v tmavom režime.

Na záver

Vlastný HTML kód vám dá voľnosť, ale aj zodpovednosť za to, ako e-mail uvidia príjemcovia v desiatkach rôznych programov. Držte sa siedmich zásad, kód udržiavajte jednoduchý a každý e-mail otestujte. Kto kód písať nechce, nechá si HTML e-mail za pár minút pripraviť AI asistentom cez Quanda MCP server. A kto chce každý blok poskladať sám, siahne po e-mail editore Quandy a vlastný kód vloží len tam, kde je naozaj potrebný.

Ak sa chcete dizajnu e-mailov venovať do hĺbky, prejdite si online kurz zdarma Copywriting a dizajn e-mailov, ktoré sa čítajú. A ak si nie ste istí, či váš HTML e-mail obstojí vo všetkých schránkach, ozvite sa nám. Prejdeme ho s vami a povieme vám, čo upraviť.