Jak vytvořit HTML e-mail: krok za krokem průvodce

Mailové konference jsou důležitou součástí marketingových kampaní. Vytvoření e-maily pro ně v mnoha ohledech podobá vývoj jednoduchých webových stránek. Zároveň je třeba vzít v úvahu některé důležité rozdíly. Zejména odesílání HTML e-mailů bude účinná pouze tehdy, pokud jsou tvořeny správně v technickém smyslu, a jejich obsah a styl splnit své cíle. V tomto případě, je představa, že laik nemůže vyrovnat se s tímto úkolem. Tento článek obsahuje podrobné instrukce krok za krokem, jak psát a jak poslat HTML e-mail.

Rysy tvorby

Moderní člověk přijímá denně v průměru 5-6, a někdy až 10 e-mailů. To znamená, že máte jen méně než jednu sekundu, aby měli čas čerpat pozornost příjemce, než dojde k přečtení následujícího korespondence. Jinak vaše odesílání HTML e-mailů bude zcela neúčinné, a vy jen promarněný čas.

Jedním z nuance, které zvyšují své šance na upoutat pozornost potenciálních zákazníků, nebo jiné cílové skupiny je vytvoření korespondence, který je přizpůsoben pro mobilní zařízení. Koneckonců, většina z těch, jimž je určeno k prohlížení e-mailu, pravděpodobně budou používat častěji než stolních počítačů a notebooků.

Pro tento účel může být použit, například, „reaguje design“ se snadno přizpůsobí velikosti obrazovky.

Jaká by měla být šablona dopisu

Když je rozložení dokumentu, které jsou určeny k odeslání zpravodaje, by měli dodržovat následující požadavky:

• Mělo by být poměrně úzká, tj. E. Ve velikosti nesmí překročit rozsah 500-600 pixelů, které zajišťují správné zobrazení textu a dalšího obsahu na zařízeních všech typů.
• Je třeba použít dostatečně velké písmo pro všechny textové informace, jakož i iOS zařízeními HTML-mailu bude nepříjemné přečíst v případě, že velikost písma nejméně 13 bodů.
• Prvky, na které můžete kliknout k tomu, by měla být dostatečně velká a oddělen od nejbližších spojů. V takovém případě může příjemce snadno aktivovat je na první pokus.

výcvik

Před vývojem HTML dopisu, měli byste vytvořit jeden z disků novou složku a název, například „Zprávy“. Kromě toho je nutné stáhnout a nainstalovat software Dreamweaver CS3. Tento produkt od společnosti Adobe je poměrně jednoduchý nástroj designu webových stránek a je vhodný i pro rozvoj poštovní dopisy ve formátu HTML.

Vytvořit a uložit dokument

Než začnete psát text dopisu, je třeba:

• otevřít docela populární program, značkové HTML e-maily, Dreamweaver CS3 (DW);
• vytvoření dokumentu výběrem typu „Transition HTML 4.01»;
• uložte soubor s příponou «.html»;
• V horní nabídce najít příkaz pro úpravy;
• odstranit klíště z check-box „Použít CSS namísto značky HTML».

Podrobný průvodce

Nyní se podívejme, jak vytvořit HTML e-mail. Postupujte takto:

• Důsledně otevře záložku menu „Vložit“ a „Tabulka“ a vystavit potřebné parametry tabulky. Například linka - 2 sloupce - 1, Šířka - 700, hlavička - vrchol. Hranice může být nastavena, a můžete to udělat i bez nich, s uvedením 0.
• Tvoří záhlaví zprávy. Vzhledem k tomu, HTML dopisu určeny pro větší počet příjemců, tak použijte operátor [FIRST_NAME] nahradit název požadovaného příjemce.
• V dolním okně „Vlastnosti“ smířit potřebné parametry pro písma, velikost a barvu nadpisu textu a barvu pozadí.
• „Exit“ z pole záhlaví. V dolní části obrazovky se pohybovat volby kurzorových dal „na střed“ a „Ve středu“.
• Vložte připravené textové zprávy nebo „write“ ji přímo v programu DW výběrem typu a velikosti písma, a zarovnání textu na stránce.

Vytvoření hypertextových odkazů

Budeme se snažit, aby HTML-dopis více profesionální a pokročilé. S tímto cílem na skrýt obsah hypertextové odkazy. Chcete-li to provést, vyberte místo v textu, který byl vybrán jako hypertextový odkaz. V levém rohu by měla být „otevřený“ příslušná ikona a vložit odkaz z rozevíracího seznamu v horní části obrazovky. V takovém případě nezapomeňte dát klíště v check-box «_blank», aby otevřít odkaz v novém okně, a příjemce po přehlídce neztratil přístup k hlavnímu dopisu.

Jak vkládat obrázky

Obvykle dopis ve formátu HTML dokončí kontaktní údaje, nejlépe s fotografií autora nebo příslušným tematickým obrázkem. Lze jej stáhnout z Internetu nebo ke stažení na internetu, jak budete potřebovat adresu URL obrázku. To se nejlépe provádí jedním z bezplatných služeb.

Vydat takový krásný konec:

• vložen do dolní části zprávy, do jiné základní tabulky 3 a sloupce 0 parametrů pro okrajové pixely;
• umístěte kurzor v tabulce, kde chtějí viz obrázek;
• Značka ve spodním okně, „střední“ a „horní hrany“ pro každou sekci;
• vybrat z horní záložce menu „Vložit“;
• to kliknutím na nápis „Image“ v pop-up menu, vložte zkopírovaný kontaktní adresu;
• stiskněte tlačítko «Ok» 2 krát.

přezkoumání

Nyní, když víte, jak to udělat HTML-dopis, měli byste se ujistit, že příjemce bude vidět ve správném tvaru. Za tímto účelem se před podáním, že chcete vidět svou práci v Dreamweaver CS3 prohlížeči. Chcete-li to provést, klepněte na ikonku s obrázkem zeměkoule v prostředním horním menu. Pokud místo písmen objevila na obrazovce, abracadabra, měli byste si dát ve svém prohlížeči nastavení avtokodirovku.

kódování

Ze sekce „Projekt“ a jít do kódu část - dále jen „kód“. V okně, které se oddělí a kopírovat vše, co leží mezi značkami a . Uložení souboru. Dále vložte HTML kód.

Odesílání HTML e-maily

Chcete-li poštu open "Smartresponder" (SR). pak:

• zvolit nebo vytvořit nový e-mail vyplněním řetězec „jméno“ a „adresa odesílatele.“
• vyplnit řádek „téma písmenem“;
• Značka v horním levém menu HTML kódu;
• embed kód zkopíruje do programu DW-kódu ve velkém poli „Source“;
• zkontrolovat správnost zobrazení pomocí nástroje „Preview“;
• Odstraní textovou verzi dopisu;
• otestovat spam pomocí příslušného tlačítka vedle tlačítka „Odeslat“.

Několik populárních šablon

Použití rámce pomáhá výrazně urychlit proces psaní a dělat to více přístupný pro vývojáře, který zná jen základy tvorby webových-dokumentů. Nejoblíbenější vzory:

• Cerberus. Tato sada tzv reagujících šablon vytvářet dopisy, obvykle vidět v mobilní aplikaci Gmail a Outlook. To vám umožní používat HTML kódu bloků, a to buď samostatně, nebo jejich kombinací.
• Ink - je sklizni e-maily, maily, které jsou téměř univerzální a je kompatibilní se všemi zařízeními a klienty.
• Opravdu jednoduché HTML e-mail šablony. Šablona vám umožní vytvořit e-mailové dopisy jsou velmi snadné a rychlé. Však bude mít velmi jednoduchou konstrukci ve tvaru kolony, která vstoupila v výzvu k akci.

Jak vložit do HTML

Uvažujme nyní trochu jiný problém. Chcete-li vložit kód HTML v e-mailu, jako je například Gmail používat, jak v, prohlížeč Google Chrome, měli byste následujícím příkladu:

• Kliknutím na tlačítko «F12», nebo vyberte příslušnou posloupnost příkazů v nabídce;
• V otevřeném okně do aktuální stránky kód gmail zákazníka najít místo, kde má být vložen do HTML dopisu, a pravým tlačítkem a zvolte «Upravit jako HTML».
• vložit kód HTML;
• stiskněte kombinaci dvou kláves Ctrl «» a «Enter».

Za stejným účelem si můžete stáhnout snadno ispolzovnii thunderbird programu Mozilla. Pomocí něj můžete vytvořit dopis, tak se nejprve vyberte „Vložit“ a pak „HTML“ a vložte do svého mailing kódu.

nástroje

Vordpressovsky e-Newsletter plugin vám umožní profesionálně řídit zpravodaje a předplatitelů. A i pak, a další se provádí přímo přes admin panel WordPress. Tato okolnost umožňuje úplnou kontrolu a zcela zdarma, což ale nemůže radovat.

Další jednoduchý nástroj - Neprůstřelné obrázky na pozadí, což je jednoduchý nástroj, který vám umožní získat kód pro obrázek na pozadí vytvořeném písmeny. To vám může pomoci, aby korespondence krásnější. Pro registraci dopisu by měla stačí zadat adresu URL obrázku na pozadí se vám líbil a rezervovat barvu, a zda jsou tyto parametry jsou aplikovány do celého těla HTML-maily nebo jsou určeny pouze pro jednu z buněk tabulky. Výsledkem je ready-made kód, který chcete zkopírovat a vložit do šablony.

Nyní, když víte, jak poslat HTML e-mail. Jeho tvorba není nijak zvlášť obtížné, zejména pokud používáte předpřipravené šablony, ve kterém web není nouze. Z tohoto důvodu, a to i těch, kteří nemají zvláštní znalosti, mohou snadno vyrovnat se s tímto úkolem.