← Všechny článkyDesign e-mailů

Vlastní HTML bloky v e-mailu: vytvořte jednoduchou a spolehlivou součást

Čtení na 4 min

Vlastní HTML blok v e-mailu má řešit konkrétní potřebu, kterou běžné komponenty nepokrývají. Zároveň musí zůstat použitelný, když se prodlouží název produktu, chybí obrázek nebo zákazník otevře e-mail v telefonu. Vytvořte co nejmenší potřebnou komponentu, otestujte ji mimo editor a znovu používejte verzi, která obstojí v těchto situacích.

Vymezte nejmenší potřebnou změnu

Sepište, co má blok sdělit a proč to stávající rozvržení neumí dobře. Kód zaměřte na tento úkol. Nepřenášejte do e-mailu celý návrh webové stránky včetně skriptů, interaktivních závislostí nebo stylů, které e-mailové aplikace nemusí podporovat.

Sendvio podporuje HTML bloky pro e-mail. Vlastní kód napište tak, aby mu rozuměl i člověk, který bude příští měsíc šablonu upravovat. Používejte přehlednou strukturu, smysluplný text a vhodné alternativní popisy obrázků; hlavní sdělení neschovávejte do dekorativního kódu.

Popište, jak má komponenta fungovat

Zaznamenejte její účel, povinný a volitelný obsah, realistickou délku textu, odkazy, práci s obrázky a pořadí na mobilu. Srovnávací blok dvou možností může například vyžadovat název produktu, jeden rozdíl, informaci o ceně a akci pro každou variantu. Popis by měl uvést, co musí zůstat pohromadě při skládání rozvržení.

Nejprve ověřte, zda stejnou potřebu nesplní jednodušší sestavení běžných bloků. Vlastní HTML má smysl, když řeší konkrétní komunikační problém, ne jen proto, že umožňuje složitější kompozici. Každé další pravidlo musí příští editor pochopit a otestovat.

Vlastní blok ponechte samostatný. Vyhněte se širokým stylům, které nečekaně změní sousední části šablony, a hlavní sdělení nestavte na skriptech ani interakcích typických pro web. Pokud je potřeba složitý výběr nebo výpočet, vysvětlete úkol v e-mailu a odkažte na stránku, která ho umí zpracovat.

Ověřte chování mimo editor

Zobrazení e-mailu se liší od běžné webové stránky. Otestujte skutečně odeslanou zprávu v relevantních aplikacích, včetně úzké obrazovky a situace, kdy nejsou dostupné obrázky. Zkontrolujte odkazy, pořadí čtení, změnu velikosti textu i soužití bloku s běžnými komponentami šablony.

Vyhněte se pevné výšce u proměnlivého obsahu a dlouhým řetězcům, které nelze zalomit. Jméno zákazníka nebo delší přeložený nadpis může odhalit chybu, kterou krátký ukázkový text skryje. Pokud vlastní blok nefunguje spolehlivě, mějte připravenou jednodušší náhradní podobu.

Testujte změny obsahu, ne jen původní ukázku

Nahraďte nejkratší název produktu nejdelším realistickým. Odeberte volitelný obrázek, vložte přeložený nadpis a delší cenu či popisek tlačítka. Sledujte, zda se blok přirozeně zvětší, nebo zda se text ořízne a vzniknou prázdná místa po pevné výšce. Tak poznáte, zda je komponenta znovupoužitelná, nebo jen přizpůsobená jediné ukázce.

Odeslanou zprávu si prohlédněte v relevantních e-mailových prostředích. Ověřte smysluplné pořadí čtení, vhodnost alternativních popisů obrázků v kontextu a funkčnost všech cílů odkazů. Používáte-li tabulky k rozvržení, dbejte na to, aby asistivním technologiím nezkreslovaly sémantickou strukturu obsahu.

Znovu používejte jen otestovanou verzi

Schválený blok uložte s krátkou poznámkou o jeho účelu a omezeních. Při úpravě obsahu rozlišujte běžnou změnu textu od změny struktury, která vyžaduje novou kontrolu zobrazení.

Nepřidávejte sledovací skripty ani spustitelný kód, aby se e-mail choval jako web. Pokud akce přesahuje možnosti spolehlivého e-mailu, odkažte na vhodnou cílovou stránku. Malý a spolehlivý blok zákazníkovi poslouží lépe než propracovaná komponenta, která funguje jen v náhledu autora.

Schválenou komponentu veďte v poznámkách k verzované šabloně: uveďte odpovědnou osobu, podporované použití i známá omezení. Běžná úprava textu může být málo riziková, zatímco změna sloupců nebo nový podmíněný obsah si zaslouží další kontrolu vykreslení. Pravidla popište tak, aby tým zbytečně neopakoval všechny testy, ale zároveň nepovažoval přepracování za rutinní změnu textu.

Pokud komponenta nefunguje spolehlivě, připravte jednodušší náhradní variantu. Jednosloupcové srovnání, které se dá přečíst, je užitečnější než složité rozvržení, jež selže v běžném prostředí. Praktickým měřítkem jsou přesné informace, zachované souvislosti, čitelný text, přístupné akce a udržovatelná struktura, kterou může bezpečně použít další správce kampaně.