Jak na vložení HTML kódu v Quandě
Kromě klasického editoru, kde e-mail skládáte z jednotlivých bloků, si ho můžete také vytvořit i pomocí HTML kódu. Při zakládání nové kampaně si vyberete, jestli chcete vytvořit vlastní e-mail v našem editoru nebo ho vytvořit pomocí HTML.
Ve druhé variantě se vám otevře jednoduchá obrazovka, kde vlevo vložíte kód a vpravo hned vidíte náhled, jak bude e-mail vypadat, ještě než ho pošlete.
Tahle možnost se hodí hlavně ve třech případech. Buď si HTML e-maily umíte psát sami, máte hotovou šablonu z jiného nástroje a chcete ji jen přenést do Quandy, nebo si kód necháváte vytvořit pomocí AI nástrojů jako ChatGPT či Claude. Ve všech případech stačí kód vložit a rovnou vidíte výsledek.
Proč e-mail v HTML 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 Outlook 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í.
Pokud si tedy e-mail píšete sami nebo necháváte generovat pomocí AI, doporučujeme se držet těchto zásad.
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 na 600 až 700 pixelech, to je bezpečná velikost, která se vejde do náhledu ve všech schránkách.
2. Styl (barvy, velikost písma, 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 přímo tam, kde se používá, u konkrétního textu nebo tlačítka.
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.
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.
5. Nedělejte e-mail zbytečně těžký
Pokud je kód e-mailu příliš dlouhý (zhruba nad 100 kB), Gmail ho ořízne a příjemce uvidí jen odkaz „Zobrazit celou zprávu". Může se tak stát, že vaše hlavní sdělení nebo tlačítko vůbec neuvidí. Kód by proto měl být co nejjednodušší a bez zbytečně opakovaných stylů.
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ý text s barevným pozadím a zaoblenými rohy přímo v kódu.
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, protože přes mobil se dnes otevírá většina e-mailů.
Posílejte své e-maily chytřeji. Vyzkoušejte Quandu na 14 dní zdarma.
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 na pošlete testovací e-maily do několika schránek a zkontrolujte, jestli se zobrazuje tak, jak má.
Nejjistější cestou zůstává náš vlastní editor. Ten je navržený přesně tak, aby výsledný e-mail fungoval spolehlivě napříč Gmailem, Outlookem, Seznamem i dalšími klienty a nemusíte se tak spoléhat na to, že AI nebo jiný nástroj zrovna trefí všechny detaily správně.
Držím vám palce!
Štěpán Sedláček
P.S.
Zlepšete otevíratelnost vašich e-mailů. Nastudujte si náš online kurz: Jak skokově zvýšit otevíratelnost e-mailů a zaujmout více lidí, aby si je přečetli