Ako vytvoriť HTML e-mail: krok za krokom sprievodcu

Mailovej konferencie sú dôležitou súčasťou marketingových kampaní. Vytvorenie e-maily pre nich v mnohých ohľadoch podobá vývoj jednoduchých webových stránok. Zároveň je potrebné vziať do úvahy niektoré dôležité rozdiely. Najmä odosielanie HTML e-mailov bude účinná len vtedy, ak sú tvorené správne v technickom zmysle, a ich obsah a štýl splniť svoje ciele. V tomto prípade, je predstava, že laik nemôže vyrovnať sa s touto úlohou. Tento článok obsahuje podrobné inštrukcie krok za krokom, ako písať a ako poslať HTML e-mail.

rysy tvorby

Moderný človek prijíma denne v priemere 5-6, a niekedy až 10 e-mailov. To znamená, že máte len menej ako jednu sekundu, aby mali čas čerpať pozornosť príjemcu, než dôjde k prečítaní nasledujúceho korešpondencie. Inak vaše odosielanie HTML e-mailov bude úplne neúčinné, a vy len premárnený čas.

Jedným z nuansy, ktoré zvyšujú svoje šance na upútať pozornosť potenciálnych zákazníkov, alebo iné cieľové skupiny je vytvorenie korešpondencie, ktorý je prispôsobený pre mobilné zariadenia. Koniec koncov, väčšina z tých, ktorým je určené na prezeranie e-mailu, pravdepodobne budú používať častejšie ako stolových počítačov a notebookov.

Pre tento účel môže byť použitý, napríklad, "reaguje design" sa ľahko prispôsobí veľkosti obrazovky.

Aká by mala byť šablóna listu

Keď je rozloženie dokumentu, ktoré sú určené na odoslanie spravodajcu, by mali dodržiavať nasledujúce požiadavky:

• Malo by byť pomerne úzka, tj. E. Vo veľkosti nesmie prekročiť rozsah 500-600 pixelov, ktoré zaisťujú správne zobrazenie textu a ďalšieho obsahu na zariadeniach všetkých typov.
• Je potrebné použiť dostatočne veľké písmo pre všetky textové informácie, ako aj iOS zariadeniami HTML-mailu bude nepríjemné prečítať v prípade, že veľkosť písma najmenej 13 bodov.
• Prvky, na ktoré môžete kliknúť na to, by mala byť dostatočne veľká a oddelený od najbližších spojov. V takom prípade môže príjemca ľahko aktivovať je na prvý pokus.

výcvik

Pred vývojom HTML listu, mali by ste vytvoriť jeden z diskov novú zložku a názov, napríklad "Správy". Okrem toho je potrebné stiahnuť a nainštalovať softvér Dreamweaver CS3. Tento produkt od spoločnosti Adobe je pomerne jednoduchý nástroj dizajnu webových stránok a je vhodný aj pre rozvoj poštové listy vo formáte HTML.

Vytvoriť a uložiť dokument

Než začnete písať text listu, je potrebné:

• otvoriť celkom populárne program, značkové HTML e-maily, Dreamweaver CS3 (DW);
• vytvorenie dokumentu výberom typu "Transition HTML 4.01»;
• uložte súbor s príponou «.html»;
• V hornej ponuke nájsť príkaz pre úpravy;
• odstrániť kliešť z check-box "Použiť CSS namiesto značky HTML».

podrobný sprievodca

Teraz sa pozrime, ako vytvoriť HTML e-mail. Postupujte nasledovne:

• Dôsledne otvorí záložku menu "Vložiť" a "Tabuľka" a vystaviť potrebné parametre tabuľky. Napríklad linka - 2 stĺpce - 1, Šírka - 700, hlavička - vrchol. Hranice môže byť nastavená, a môžete to urobiť aj bez nich, s uvedením 0.
• Tvorí hlavičky správy. Vzhľadom k tomu, HTML listu určené pre väčší počet príjemcov, tak použite operátor [FIRST_NAME] nahradiť názov požadovaného príjemcu.
• V dolnom okne "Vlastnosti" zmieriť potrebné parametre pre písma, veľkosť a farbu nadpisu textu a farbu pozadia.
• "Exit" z poľa hlavičky. V dolnej časti obrazovky sa pohybovať voľby kurzorových dal "na stred" a "V stredu".
• Vložte pripravené textové správy alebo "write" ju priamo v programe DW výberom typu a veľkosti písma, a zarovnanie textu na stránke.

Vytvorenie hypertextových odkazov

Budeme sa snažiť, aby HTML-list viac profesionálne a pokročilých. S týmto cieľom na skryť obsah hypertextové odkazy. Ak to chcete urobiť, vyberte miesto v texte, ktorý bol vybraný ako hypertextový odkaz. V ľavom rohu by mala byť "otvorený" príslušná ikona a vložiť odkaz z rozbaľovacieho zoznamu v hornej časti obrazovky. V takom prípade nezabudnite dať kliešť v check-box «_blank», aby otvoriť odkaz v novom okne, a príjemca po prehliadke nestratil prístup k hlavnému listu.

Ako vkladať obrázky

Obvykle list vo formáte HTML dokončí kontaktné údaje, najlepšie s fotografiou autora alebo príslušným tematickým obrázkom. Možno ho stiahnuť z internetu alebo stiahnutie na internete, ako budete potrebovať adresu URL obrázka. To sa najlepšie vykonáva jedným z bezplatných služieb.

Vydať taký krásny koniec:

• vložený do dolnej časti správy, do inej základnej tabuľky 3 a stĺpce 0 parametrov pre okrajové pixely;
• umiestnite kurzor v tabuľke, kde chcú pozri obrázok;
• Značka v spodnom okne, "stredné" a "hornej hrany" pre každú sekciu;
• vybrať z hornej záložke menu "Vložiť";
• to kliknutím na nápis "Image" v pop-up menu, vložte skopírovaný kontaktnú adresu;
• stlačte tlačidlo «Ok» 2 krát.

preskúmanie

Teraz, keď viete, ako to urobiť HTML-list, mali by ste sa uistiť, že príjemca bude vidieť v správnom tvare. Za týmto účelom sa pred podaním, že chcete vidieť svoju prácu v Dreamweaver CS3 prehliadači. Ak chcete urobiť, kliknite na ikonku s obrázkom zemegule v prostrednom hornom menu. Ak namiesto písmen objavila na obrazovke, Abracadabra, mali by ste si dať vo svojom prehliadači nastavenia avtokodirovku.

kódovanie

Zo sekcie "Projekt" a ísť do kódu časť - ďalej len "kód". V okne, ktoré sa oddelia a kopírovať všetko, čo leží medzi značkami a . Uloženie súboru. Ďalej vložte HTML kód.

Odosielanie HTML e-maily

Ak chcete poštu open "Smartresponder" (SR). potom:

• zvoliť alebo vytvoriť nový e-mail vyplnením reťazec "meno" a "adresa odosielateľa."
• vyplniť riadok "téma písmenom";
• Značka v hornom ľavom menu HTML kódu;
• embed kód skopíruje do programu DW-kódu vo veľkom poli "Source";
• skontrolovať správnosť zobrazenia pomocou nástroja "Preview";
• Odstráni textovú verziu listu;
• otestovať spam pomocou príslušného tlačidla vedľa tlačidla "Odoslať".

Niekoľko populárnych šablón

Použitie rámca pomáha výrazne urýchliť proces písania a robiť to viac prístupný pre vývojárov, ktorý pozná len základy tvorby webových-dokumentov. Najobľúbenejšie vzory:

• Cerberus. Táto sada tzv reagujúcich šablón vytvárať listy, zvyčajne vidieť v mobilnej aplikácii Gmail a Outlook. To vám umožní používať HTML kódu blokov, a to buď samostatne, alebo ich kombináciou.
• Ink - je žatve e-maily, maily, ktoré sú takmer univerzálne a je kompatibilný so všetkými zariadeniami a klientmi.
• Naozaj jednoduché HTML e-mail šablóny. Šablóna vám umožní vytvoriť e-mailové listy sú veľmi jednoduché a rýchle. Však bude mať veľmi jednoduchú konštrukciu v tvare kolóny, ktorá nadobudla výzvu k akcii.

Ako vložiť do HTML

Uvažujme teraz trochu iný problém. Ak chcete vložiť kód HTML v e-maile, ako je napríklad Gmail používať, ako v, prehliadač Google Chrome, mali by ste nasledujúcom príklade:

• Kliknutím na tlačidlo «F12», alebo vyberte príslušnú postupnosť príkazov v ponuke;
• V otvorenom okne do aktuálnej stránky kód gmail zákazníka nájsť miesto, kde má byť vložený do HTML listu, a pravým tlačidlom a zvoľte «Upraviť ako HTML».
• vložiť kód HTML;
• stlačte kombináciu dvoch klávesov Ctrl «» a «Enter».

Na rovnaký účel si môžete stiahnuť ľahko ispolzovnii thunderbird programu Mozilla. Pomocou neho môžete vytvoriť list, tak sa najprv vyberte "Vložiť" a potom "HTML" a vložte do svojho mailing kódu.

nástroje

Vordpressovsky e-Newsletter plugin vám umožní profesionálne riadiť spravodajcu a predplatiteľov. A aj potom, a ďalšie sa vykonáva priamo cez admin panel WordPress. Táto okolnosť umožňuje úplnú kontrolu a úplne zadarmo, čo ale nemôže radovať.

Ďalšie jednoduchý nástroj - Nepriestrelné obrázky na pozadí, čo je jednoduchý nástroj, ktorý vám umožní získať kód pre obrázok na pozadí vytvorenom písmenami. To vám môže pomôcť, aby korešpondencia krajšie. Pre registráciu listu by mala stačí zadať adresu URL obrázka na pozadí sa vám páčil a rezervovať farbu, a či sú tieto parametre sú aplikované do celého tela HTML-maily alebo sú určené len pre jednu z buniek tabuľky. Výsledkom je ready-made kód, ktorý chcete skopírovať a vložiť do šablóny.

Teraz, keď viete, ako poslať HTML e-mail. Jeho tvorba nie je nijak zvlášť ťažké, najmä ak používate predpripravené šablóny, v ktorom web nie je núdza. Z tohto dôvodu, a to aj tých, ktorí nemajú zvláštne znalosti, môžu ľahko vyrovnať sa s touto úlohou.