Užitečné nástroje, které ušetří vaší firmě čas a energii při tvorbě newsletteru

Jednoduše řečeno máte dvě možnosti: pořídit si komplexní nástroj na tvorbu responzivních newsletterů a nebo trávit hodiny ručním kódováním s mrazivým pocitem, že vaše konkurence je o několik kroků vpřed. My pro Vás máme řešení pro oba scénáře: komplexní nástroj VIVgenerátor, díky kterému stylem “Drag and drop” tvoříte váš e-mail, načítáte produkty z “Heureka Feed” a máte hotovo do 30 minut. A také manuál, potažmo seznam zajímavých nástrojů, které ocení nejen každý kodér, ale laik či třeba manager při ruční tvorbě a testování newsletteru. A vezmeme to hezky popořadě, tak jak taková šablona vzniká:

CSS Suport Guide

Přehled CSS parametrů v kontextu jejich podpory v jednotlivých e-mailových klientech. Jednoduše řečeno, pokud nevíte, zda některý z použitých CSS parametrů bude nebo nebude fungovat v tom či jiném e-mailovém klientu, tato tabulka vám odpoví (obsahuje kategorizovaný seznam CSS parametrů, po rozkliknutí záložky se vám zobrozaný podporbný seznam jednotlivých e-mailových klientů) .
www.campaignmonitor.com/css

Emmet

Velmi užitečné rozšíření pro editor kódu, které dokáže ušetřit spousty času. Už nikdy totiž nebudete muset zdlouhavě psát opakující se HTML kód. Ukážeme si na příkladu. Pokud chcete vytvořit tabulku o 2 řádcích a 3 buňkách, zápis pro Emmet bude vypadat takto:

table>(tr>td*3)*2. Pak jen stačí stisknout klávesu TAB a dostane se vám očekávaného výsledku:

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</table>

A pokud byste chtěli přidat všem buňkám stejné parametry, pak by zápis v Emmetu vypadal nějak tak:

table>(tr>td[style=“padding:20px;font-size:14px;color:#000;font-family:Arial,sans-serif;“]*3)*5

Možná to na první pohled může vypadat složitě, ale jakmile si tento způsob práce osvojíte, a věřte, že to nebude trvat dlouho, stane se vaším nejlepším přítelem při kódování šablony.

emmet.io

Buttons.cm

Jde o velmi jednoduchý generátor, kde si na základě pár kliknutí vytvoříte tlačítko, které bude optimalizované pro všechny e-mailové klienty.
buttons.cm

DummyImage

Nástroj pro generování “slepých” obrázků. Je to v podstatě takový “Lorem Ipsum” generátor grafiky. Pokud pracujete na šabloně a chcete ji otestovat například v Litmusu, tak musíte veškeré obrázky nahrát někam na FTP a pak si je nalinkovat do šablony. Díky tomuto pomocníku nebudete muset tento proces zas a znovu absolvovat, ale jednoduše si necháte vygenerovat URL obrázku o jedné barvě, vámi definovaném textu a hlavně přesné velikosti a vložíte ho do kódu. Takto si odladíte přesný rozměr a strukturu šablony bez toho, abyste s každou novou verzí složitě nahrávali na FTP nové obrázky.

dummyimage.com

TextFixer

Určitě jste se už setkali s tím, že se vám v Gmailu šablona o nějakou tu část “uřízla”. Bylo to způsobeno velikostí kódu vašeho newsletteru, který přesahoval 100 kB. Co s tím? Odpovědí je v nadpisu zmíněný nástroj pro minifikaci HTML kódu, který dokáže snížit velikost e-mailu i o desítky kB. Samozřejmě záleží jak moc je kód velký. Pokud budete mít například šablonu, kde neminifiková verze má velikost okolo 200 kB, tak se díky tomuto nástroji můžete reálně dostat až k 70 kB. Což pro váš newsletter v Gmailu znamená palec nahoru.

www.textfixer.com/html/compress-html-compression.php


Putsmail

Velmi jednoduchý nástroj pro případy, kdy potřebujete rychle otestovat vaší šablonu. Stačí zadat kontakt, na který ji chcete poslat, vložit HTML kód a odeslat. Malé upozornění: při úplně prvním použití je potřeba potvrdit, že chcete dostávat testované šablony z tohoto nástroje. Takže nejdřív obdržíte výzvu k potvrzení a až potom váš test. Logicky jde jen o to, aby vám někdo neznámý nezačal zasílat e-maily jen tak.

putsmail.com

Litmus

Pokud hledáte dokonalý nástroj na testování zobrazení šablon v jednotlivých e-mailových klientech, tak si tímto dovolujeme vašeho hledání ukončit. Naprostou špičkou v tomto oboru je webová aplikace Litmus, která disponuje jednoduchým, přehledným a intuitivním rozhraním. Ve výsledku stačí vložit HTML kód šablony a kliknout na tlačítko “Spustit test”. Během minuty máte vygenerovaný náhled šablony ve všech dostupných e-mailových klientech, přesně tak, jak by se na fyzických zařízeních váš newsletter zobrazil. Nic lepšího jednoduše nenajdete.

litmus.com

Inbox Inspector

Výše zmíněný Litmus má ale bohužel jednu malou vadu na kráse, a to, že si za něj musíme překvapivě zaplatit. Alternativou, která je zdarma a umožňuje testovaní vaší šablony na několika zásadních e-mailových klientech pak je Inbox Inspector – v mnoha případech může dostatečně postačit.

www.inboxinspector.com

 

Ještě se sluší přidat pár tipů na zajímavé zdroje, pokud zrovna hledáte…

…fotky zdarma…

picjumbo.com – český projekt, fotky zdarma
pixabay.com – fotografie, ilustrace, vektory

unsplash.com – tematicky zaměřená fotobanka

foodiesfeed.com – gastronomický ráj

…nebo ikonky a loga.
www.flaticon.com – galerie ikonek v různých formátech (png, svg, eps atp.)

www.iconfinder.com – další zajímavá galerie

fontastic.me – generátor ikonkových fontů

instantlogosearch.com – galerie log světových společností volně ke stažení

brandcolors.net – rejstřík světových brandů a barev, které používají

Co dodat závěrem?

Trochu té motivace: v předchozích dílech našeho blogu jsme se primárně zaměřili na velmi podstatnou část e-mail marketingu, a to “jak na obsah vašich kampaní.” Přesněji řečeno, jak pracovat s předmětem a preheaderem, aby byly pokud možno co nejvíc “sexy,” spolupracovaly spolu a tím se zvýšila pravděpodobnost konverze. Ovšem…

Sebelepší obsah nemůže mít adekvátní výsledek, pokud se k očím vašich zákazníků nedostane tak, jak by měl. Jde to ruku v ruce, bez plně responzivní šablony se v této době kvalitní e-mailing dělat nedá a každý má dvě možnosti: vydat se jednoduchou a elegantní cestou v podobě komplexního řešení a nebo ušetřit nějaký ten čas a energii výše nastíněnými nástroji při ručním kódování.

A na vás je teď rozhodnutí, jakou cestu si vyberete.

Lukáš Balek za tým VIVmail.cz.

Další články, které by vás mohli zajímat

Responzivní UI Targita, které otevírá nové možnosti

Kromě moderního vzhledu, intuitivní navigace a responzivity jsme vše vyvíjeli tak, aby šlo o komplexní řešení, které nám umožní všechny naše plány rychle realizovat. Do konce roku 2018 se například…

2 minuty

Lze dopředu odhadnout úspěch e-mail marketingové kampaně? Targito to umí!

Na tuto otázku jsme dlouho hledali odpověď a nakonec ji našli ve statistickém výpočtu míry otevření a prokliku (tedy jakési predikce) vámi vybraného seznamu kontaktů. Představujeme vám funkcionalitu, která zásadně ovlivní…

3 minuty