Ako vytvoriť krásny aktívny list. Ako vytvoriť HTML e-mail: pokyny krok za krokom

1. Najťažšie je vytvoriť HTML šablónu listu pre váš e-mailový newsletter.
2. Problém spočíva v tom, že váš list by mal vyzerať rovnako dobre (zobraziť) vo všetkých najbežnejších prehliadačoch a e-mailových klientoch.

Aký je rozdiel medzi písaním v HTML a písaním v obyčajnom texte?
Bežný text email môže obsahovať iba znaky ASCII.
To znamená, že text listu nebude mať prvky formátovania textu: tučné písmo, kurzíva, farba atď.

Ukazuje sa, že používanie HTML šablón v e-mailovom marketingu má množstvo výhod:

• Pomocou grafických prvkov sa môžete zamerať na konkrétne miesto.
• List bude vyrobený vo vašom firemnom štýle.
• Môžete jasnejšie zobraziť tovary a služby (opäť vďaka obrázkom).

1. Prijmite a uvedomte si, že HTML šablóny zoznamu adresátov nie je webová stránka. Nie je potrebné strčiť flash disky, obrovské obrázky, anamashki a tak ďalej.
2. Šírka stĺpikov by mala byť 620 - 800 pixelov. V opačnom prípade budú musieť niektorí príjemcovia na prečítanie vášho e-mailu použiť vodorovné posúvanie.
3. Vytvorte písmená ručne. Nie je potrebné používať všetky editory WYSIWYG (What You See Is What You Get). Takmer všetky vkladajú dodatočný html kód, ktorý sa potom môže v rôznych e-mailových programoch zobraziť inak. Odporúčam použiť http://bluegriffon.org/
4. Na označenie nepoužívajte DIV, ale tabuľky.
5. Nelepte dôležitá informácia obrázky, pretože v predvolenom nastavení ich mnohé poštové služby a klienti nemusia zobrazovať.
6. Vždy špecifikujte šírku a výšku obrázkov.
7. Zadajte alternatívny text pre všetky obrázky. Ak je používateľovi zablokované zobrazovanie obrázkov v e-mailoch, zobrazí sa mu alternatívny text.
8. Nevkladajte stoly.
9. Nepoužívajte obrázky na pozadí, zvyčajne sa nezobrazujú.
10. Uverejnite obrázky na serveri, nemusíte ich pridávať do listu. Zadajte odkazy na obrázky v šablóne e-mailu.
11. Malá veľkosť správy je žiaduca (40 - 100 kb viac).
12. V e-mailoch nepoužívajte skripty. Nebudú fungovať.
13. Do e-mailu môžete zahrnúť odkaz plná verzia správy. Ak príjemca list neotvorí, vždy si ho môže pozrieť na vašom serveri.
14. Vytvorte si list na základe toho, že najdôležitejšia časť informácie by mala spadať do prvých 7 - 10 cm.
15. Nebojte sa odkazovať na vašu stránku.
16. Pridajte možnosť „Odoslať priateľovi“.
17. Nezabudnite do tela e-mailu pridať možnosť spravovania odberu.

A možno to najdôležitejšie – ak máte vo firme dizajnéra, požiadajte ho, aby vám urobil šablónu vo vašom obľúbenom grafický editor a hľadajte HTML kódera, ktorý tomu všetkému rozumie

Najdôležitejšou súčasťou marketingových kampaní sú zoznamy adries. Vytváranie e-mailov pre nich je trochu ako vytváranie jednoduchých webových stránok. Je však potrebné zvážiť aj niekoľko dôležitých rozdielov. Takže napríklad odosielanie HTML e-mailov bude efektívne len vtedy, ak sú e-maily samotné technicky správne a ich štýl a obsah zodpovedajú vašim cieľom. Zároveň sa všeobecne verí, že nešpecialista sa s takouto úlohou nedokáže vyrovnať. Tento článok poskytne podrobné informácie návod krok za krokom ako napísať a odoslať HTML e-mail.

Funkcie tvorby

Denne moderný človek dostane v priemere 5-6 a dokonca 10 e-mailov. To znamená, že odosielateľ má menej ako sekundu na to, aby upútal pozornosť príjemcu, než prejde na ďalší e-mail. V opačnom prípade bude odosielanie HTML e-mailov úplne neefektívna strata času. Jedna z funkcií, ktorá zvyšuje vaše šance na upútanie cieľové publikum a potenciálnych klientov, je vytvárať korešpondenciu prispôsobenú mobilným zariadeniam. Väčšina používateľov, ktorým je takáto pošta určená, pravdepodobne používa oveľa častejšie mobilné zariadenia namiesto stolných počítačov alebo notebookov. Preto je lepšie aplikovať „responzívny dizajn“, ktorý sa ľahko prispôsobí veľkosti obrazovky.

Šablóna listu: čo by to malo byť

Pri vytváraní dokumentu určeného na odoslanie korešpondentom je potrebné dodržať niekoľko požiadaviek. Najprv musí byť doklad dostatočne úzky, t.j. veľkosťou by nemala presiahnuť rozsah 500-600 pixelov, čo zabezpečí správne zobrazenie textu či iného obsahu na zariadeniach iný typ. Pre všetky textové informácie je potrebné použiť dostatočne veľké písmo. Na zariadeniach so systémom IOS nebude čítanie e-mailu HTML veľmi pohodlné, ak je veľkosť písma menšia ako 13 pixelov. Prvky, na ktoré sa dá kliknúť, by mali byť pomerne veľké a izolované od blízkych odkazov. V takom prípade si ich bude môcť príjemca jednoducho aktivovať na prvý pokus.

Prípravná fáza

Pred začatím vývoja písmena HTML je potrebné vytvoriť nový priečinok na jednom z diskov a pomenovať ho, napríklad „Zoznamy adries“. Do počítača si tiež musíte stiahnuť a nainštalovať program Dream weaver CS3. Tento produkt od Adobe je jedným z pomerne jednoduchých nástrojov na vytváranie webových stránok. Je to skvelé pre vývoj HTML mailing listu.

Vytvárajte a ukladajte dokumenty

Skôr než začnete písať telo e-mailu, musíte otvoriť populárny návrhár HTML e-mailov, ako je napríklad DreamweaverCS3 (DW), vytvoriť v ňom dokument, vybrať typ Transitional HTML 4.01 a potom dokument uložiť s príponou .html . V hornom menu musíte nájsť príkaz upraviť. Potom musíte zrušiť začiarknutie políčka „Použiť CSS namiesto značiek HTML“.

Inštrukcia

Prejdime k otázke, ako vytvoriť písmeno HTML. Ak to chcete urobiť, musíte postupne otvoriť ponuky "Tabulky" a "Tabuľka" a nastaviť požadované parametre tabuľky. Takže napríklad riadky - 2, stĺpce - 1, šírka - 700, nadpis navrchu. Hranice môžete nastaviť alebo sa bez nich zaobísť zadaním nulovej hodnoty. Ďalej vytvorte hlavičku listu. Pretože HTML e-mail je určený pre veľký počet príjemcov, operátor sa často používa na nahradenie požadovaného mena príjemcu. V spodnom okne s názvom „Vlastnosti“ sa nastavuje požadovaný font, farba a veľkosť nadpisu, ako aj farba pozadia. Možnosti kurzora „Centered“ a „Middle“ sú nastavené v spodnej časti obrazovky. Ďalej musíte vložiť hotový text písmena alebo ho zadať priamo v programe DW, vybrať požadovanú veľkosť a typ písma, ako aj umiestnenie textu na stránke.

Proces vytvárania hypertextových odkazov

Teraz sa pokúsme, aby HTML e-mail vyzeral pokročilejšie a profesionálne. Na tento účel je potrebné v obsahu skryť hypertextové odkazy. K tomu je potrebné v texte zvýrazniť miesto, ktoré bolo zvolené ako hypertextový odkaz. V hornej časti obrazovky v ľavom rohu musíte „otvoriť“ príslušnú ikonu a vložiť odkaz do rozbaľovacieho okna. Zároveň nezabudnite zaškrtnúť políčko „_blank“, aby sa odkaz otvoril v novom okne a po jeho prezretí adresát nestratil prístup k hlavnému listu.

Vložte obrázky

HTML e-mail zvyčajne končí na kontaktné informácie, najlepšie s fotografiou autora alebo vhodným obrázkom. Môžete si ho stiahnuť z internetu. Budete potrebovať adresu URL tohto obrázka. Najlepší spôsob, ako to urobiť, je s bezplatné služby. Pozrime sa, ako môžete naformátovať poslednú časť listu:

- v spodnej časti písmena je vo vnútri hlavnej tabuľky vložená ďalšia tabuľka s tromi stĺpcami a parametrami pre hranicu 0 pixelov;

- kurzor musí byť umiestnený na mieste tabuľky, kde chcú vidieť obrázok;

- v dolnom okne označte pre každú sekciu "V strede" a "Pozdĺž horného okraja";

- vyberte kartu "Vložiť" v hornom menu;

- na nápis "Obrázok" kliknite. V rozbaľovacej ponuke musíte vložiť adresu, ktorú sme skopírovali, a dvakrát kliknúť na tlačidlo "OK".

vyhliadka

Teraz, keď viete, ako vytvoriť HTML e-mail, musíte sa uistiť, že príjemca ho vidí v správnej forme. Ak to chcete urobiť, pred odoslaním musíte zobraziť výsledok svojej práce v prehliadači Dream weaver CS3. Ak to chcete urobiť, kliknite na ikonu zelenej gule v hornom strednom menu. Ak sa na obrazovke namiesto písmen objaví abrakadabra, potom je potrebné nastaviť automatické kódovanie v nastaveniach prehliadača.

Kódovanie

Zo sekcie "Projekt" musíte prejsť do časti kódu - "Kód". V okne, ktoré sa otvorí, musíte vybrať a skopírovať všetko, čo bolo uzavreté medzi značkami, a uložiť súbor. Potom musíte vložiť HTML kód.

Odoslanie HTML e-mailu

- zvoľte vytvorenie nového listu vyplnením riadkov "Meno" a "Adresa odosielateľa" a vyplňte riadok "Predmet listu";

- v ľavom hornom menu označte HTML kód;

- vložte DW kód skopírovaný v programe do poľa "Zdroj";

- skontrolujte správnosť zobrazenia pomocou nástroja "Náhľad";

- vymazať textová verzia;

- testujú list na spam pomocou rovnomenného tlačidla, ktoré sa nachádza vedľa tlačidla "Odoslať".

Populárne šablóny rámcov môžu výrazne urýchliť proces vytvárania e-mailu a urobiť ho dostupnejším pre vývojárov, ktorí robia prvé kroky v procese vytvárania webových dokumentov. Tu je zoznam najpopulárnejších šablón:

- Cerberus je sada responzívnych šablón, ktoré vám umožňujú vytvárať e-maily, ktoré sa normálne zobrazujú v programe Outlook aj mobilná aplikácia gmail. Umožňuje vám používať bloky HTML kódu buď jednotlivo alebo kombinované.

- Naozaj jednoduchá HTML šablóna emailu - šablóna vám umožňuje jednoducho a rýchlo vytvárať newslettery. Stojí za zmienku, že tieto listy majú mimoriadne jednoduchý dizajn vo forme jedného stĺpca, ktorý obsahuje výzvu na akciu.

Ako vložiť HTML do listu

Teraz zvážte trochu iný problém. Ak chcete vložiť HTML kód do e-mailu, ako je gmail, pomocou prehliadača GoogleChrome, musíte stlačiť tlačidlo "F12" alebo vybrať príslušnú postupnosť príkazov z ponuky. V okne, ktoré sa otvorí s kódom aktuálnej stránky klienta gmail, musíte nájsť miesto, kam chcete vložiť písmeno HTML, kliknite pravým tlačidlom myši a vyberte možnosť „EditasHTML“. Potom musíte vložiť skopírovaný kód HTML a použiť kombináciu klávesov Ctrl a Enter. Na rovnaký účel si môžete stiahnuť program Mozilla Thunderbird, pomocou ktorého môžete tiež vytvoriť list a potom vybrať položku "Vložiť", HTML a vložiť tam poštový kód.

Nástroje

S doplnkom WordPress pre e-Newsletter môžete profesionálne spravovať odberateľov a bulletiny. Stojí za zmienku, že obe sa vykonávajú pomocou administračného panela WordPress. Toto zaisťuje plnú kontrolu, a úplne zadarmo, čo sa nemôže len tešiť. Ďalším jednoduchým nástrojom je Bulletproof back groun dimages. Je to nástroj, ktorý vám umožní získať kód pre obrázok na pozadí písmen, ktoré vytvoríte. S ním môže byť korešpondencia oveľa krajšia. Ak chcete navrhnúť písmeno, stačí zadať adresu URL obrázka na pozadí, ktorý sa vám páči, a vybrať jeho záložnú farbu. Tu môžete tiež definovať, či sa tieto parametre majú aplikovať na celé telo HTML správy alebo či sú určené len pre jednotlivé bunky tabuľky. V dôsledku toho by ste mali získať hotový kód, ktorý je potrebné skopírovať a vložiť do šablóny. Teraz presne viete, ako poslať HTML newsletter. Vytváranie HTML e-mailov nie je ťažké, najmä ak viete, ako ich používať hotové šablóny, ktorých sa dá nájsť na internete veľa. Preto aj používatelia, ktorí nemajú špeciálne znalosti, môžu túto úlohu ľahko zvládnuť.

Všetky spoločnosti (najmä ich riaditelia) sa chcú odlíšiť od ostatných svojim jedinečným štýlom. A e-maily nie sú výnimkou. Mnoho e-mailových klientov a služieb však poskytuje možnosť zmeniť iba podpis v liste. Každý to robí, ale čo ak potrebujete napísať takýto list:

Za predpokladu, že je firemná pošta nasadená na bezplatnej platforme Yandex alebo Mail.ru (neberieme do úvahy Gmail pre podnikanie, pretože už dlho nie je zadarmo), úloha sa stáva dosť namáhavou, ale môže byť vyriešené!

takže, najprv musíte nakresliť dizajn budúci list. Je dôležité poznamenať, že dizajn by nemal byť širší ako 640 pixelov a mal by brať do úvahy „natiahnutie“ tela e-mailu. Toto pravidlo vám umožní zobraziť vaše písmená na obrazovkách aj tých najmenších osobných zariadení bez horizontálneho rolovania (nehovoríme o mobilných prehliadačoch).

Potom musíte napísať list. O pravidlách rozloženia e-mailových listov bolo napísaných veľa článkov a nebude ťažké ich nájsť. Po rozložení vám odporúčame, aby ste sa uistili, že väčšina poštových služieb a klienti primerane vnímajú šablónu listu. V prvom rade by ste mali skontrolovať:

• Yandex - pošta;
• mail.ru mail;
• Gmail mail;
• Mozilla Thunderbird;
• Netopier;
• Microsoft Outlook.

Všetko je v poriadku s rozložením listu, takže pristúpime k magickým rituálom.

Zo všetkých poštových služieb a programov v súčasnosti iba Mozilla Thunderbird a Microsoft Outlook podpora vkladania písmen vo formáte HTML. Všetci používatelia vo vašej spoločnosti však „kategoricky dôverujú“ Yandex - mail (alebo mail.ru) a samotný riaditeľ odmieta prejsť na nepochopiteľné programy, keď posiela listy so svojím obľúbeným predmetom viac ako rok “ hviezdne vojny". A Yandex nepodporuje vkladanie písmen vo formáte HTML. Ako byť?

Idem na trik.

Inštalácia a konfigurácia Mozilla Thunderbird na účtu zamestnanca, ktorého chceme.

Nezabudnite zadať prenos dát cez IMAP - protokol pre prichádzajúcu poštu, pre odchádzajúce SMTP - protokol. Táto manipulácia vám umožní sťahovať poštu v Mozilla Thunderbird bez jej odstránenia na serveroch Yandex a automaticky aktualizovať odoslané listy z Mozilla Thunderbird na serveroch Yandex.

Táto funkcia nám pomôže vytvoriť šablónu listu v Mozilla Thunderbird vo formáte HTML a automaticky ju nahrať do jedného z priečinkov v pošte Yandex.

Vložte HTML kód do e-mailu a uložte ho ako šablónu v Thunderbirde:

Po 1-2 minútach sa v Yandex zobrazí priečinok, ktorý potrebujeme šablóna, ktorý obsahuje písmeno, ktoré sme si vymysleli. Túto šablónu je možné opraviť a uložiť vo forme, ktorú potrebujeme v samotnej pošte Yandex:

Pri vytváraní nového listu nie je volanie šablóny ťažké - kliknite na zelený odkaz "vzorka" a načítajte požadovanú možnosť. Všetky šablóny, ktoré sme vytvorili, si môžete pozrieť v priečinku s rovnakým názvom, ktorý je vnorený v priečinku "Koncepty".

Problém: obrázky sa nezobrazujú v šablóne listu na prijímacej strane.

Áno, je tu taký problém. Ak nahráte obrázky zo stránky tretej strany (napríklad zo stránky vašej spoločnosti), potom sa obrázky nezobrazia u adresáta. Tento problém možno vyriešiť dvoma spôsobmi:

• Nahrajte obrázky použité v rozložení listov na disk Yandex (ak posielate poštu z Yandexu alebo do cloudu Mail.ru, ak posielate poštu z mail.ru). Ďalej zadajte priame odkazy na tieto obrázky v službách. Upozorňujeme, že odkaz, ktorý ste zadali, by mal otvoriť obrázok a nič viac.
• Do tela samotného listu je možné načítať obrázok jeho prekódovaním na základnú 64. Ďalej do značiek vložte kód obrázka vo formáte základná 64

Najlepšou možnosťou je previesť obrázok na základný kód 64 - menej pohybov myšou, väčšia spoľahlivosť (obrázok nebude odstránený z disku Yandex, je už pripojený k samotnému listu).

Misia splnená. Thunderbird je možné odstrániť. Riaditeľ a zamestnanci sa tešia - teraz ich listy vôbec nie sú rovnaké ako listy všetkých ostatných.

Možno ste si už položili túto otázku a nenašli ste jednoznačnú odpoveď. Pokúsim sa vás nesklamať a dať jasný návod na trávenie. odosielanie HTML e-mailov prostredníctvom pošty Mail.ru.

Registrácia poštovej schránky

Zriadenie poštovej schránky na Mile popisujem len ako pomocnú časť k článku „“. Prečítajte si o HTML e-mailoch po tomto odseku.

3. Vyplňte požadované údaje

4. Potom sa zobrazí výzva na nahranie fotografie a vytvorenie odberu (predplatné sa zobrazuje na konci každej odoslanej správy).

Dokončili sme vytváranie poštovej schránky

Ako poslať HTML e-mail

Metóda, ktorú vám navrhujem, je veľmi jednoduchá, ale jej jednoduchosť je obmedzená jej schopnosťami. V liste môžete posielať napríklad videá z YouTube a pod.

Odosielanie videa

Na odoslanie video e-mailu potrebujeme službu YouTube a najlepšie Google Chrome, môžete si stiahnuť.

1. Prejdite na svoj Mail.ru a kliknite

2. Nájdite akékoľvek video na YouTube a kliknite naň pravým tlačidlom myši a potom na položku „Kopírovať kód HTML“

Za obrázkom
Váš bonus!
Rozložte to!
Kliknite tu!

3. Na stránke Mail.ru kliknite pravým tlačidlom myši na pole pod textom a potom na položku „Zobraziť kód prvku“

4. Prehliadač nám zobrazí nasledujúce okno

5. Na vybranú oblasť v okne HTML kliknite pravým tlačidlom myši a potom na položku "Upraviť ako HTML"

6. Malo by sa zobraziť nasledujúce okno. Upraviť okno

7. Do zobrazeného okna prilepte náš skopírovaný kód HTML video. Musíte vložiť do textového poľa. Textové pole je vždy čiernymi písmenami, ak žiadne nie je, do písmena napíšeme 111 a v kóde zmeníme 111 na HTML kód naše video. Vizuálne znázornené nižšie

8. Po vložení kódu kliknite na ľubovoľnú prázdnu oblasť Webová stránka Mail.ru a video by sa malo objaviť v správe.

9. Veľkosť videa je príliš veľká na zmenu veľkosti, preto urobte to isté až po bod 6 a zmeňte jeho veľkosť. width="854" je šírka a height="480" je výška. Zmeníme iba čísla, hneď ako sa zmenia, klikneme aj na ľubovoľnú prázdnu oblasť webu Mile.

Tu je taký jednoduchý ako pridať html do e-mailov. To isté možno urobiť s bannermi a ďalšími.

Dúfam, že článok bol pre vás užitočný.

Prajem vám úspech!

E-mailový marketing je stále efektívnym marketingovým nástrojom. Podľa štatistík moderný človek dostane denne asi 10 e-mailov, z ktorých mnohé sú bežným spamom. Vzhľadom na to, že používateľ sa o dôležitosti informácie rozhodne v priebehu niekoľkých sekúnd, je v liste dôležité všetko: od rozloženia newsletterov a vonkajšej atraktivity až po štruktúru predajného textu.

Aby ste zaujali používateľa za 5-6 sekúnd, váš list musí byť dokonalý vo všetkých plánoch, pre ktoré je dôležité starostlivo pristupovať k vytvoreniu a rozmiestneniu listu na odoslanie. Ale skôr, než začnete pracovať na kóde, zoznámte sa s problémami, ktoré vás budú čakať.

Ako sa vyvarovať chýb a nerobiť hlúposti

Ak ste layoutový guru a poznáte všetky moderné triky, sklameme vás – toto všetko tu nefunguje. Poštové služby jednoducho nemajú jednotný formát na zobrazovanie e-mailov, takže použitie rovnakého float a margin a padding zarážok nebude fungovať. Áno, teoreticky ste dostali krásny list z niekoľkých stĺpcov, ale príjemca pomieša všetky tieto stĺpce a dostane neporiadok, ktorý rýchlo prejde do spamu.

A mnohé ďalšie služby jednoducho vypli podporu pre štýly s odôvodnením, že v liste je dôležitý text a nie jeho obal. Áno, niekde majú pravdu, ale ukážte mi človeka, ktorý celý deň číta dlhé „hárky“ z textu ....

A najzaujímavejšie je, že stále existujú poštoví klienti, ktorí nepodporujú zobrazovanie obrázkov v listoch. To sa samozrejme dá jednoducho opraviť jedným zaškrtnutím v parametroch, no nie každý uhádne, že je to všetko o predvolených nastaveniach.

Preto pri navrhovaní obrázkov v písmenách nezabudnite uviesť alt. V tomto prípade príjemca uvidí v rámčeku aspoň váš text a nie niečo prázdne a strašidelné.

• Vytvorte šablónu HTML pomocou bežného poznámkového bloku (musíte zmeniť formát súboru na html) alebo pomocou špeciálneho softvéru, napríklad Dreamweaver od spoločnosti Adobe;

• Na vytvorenie štruktúry písmen použite štandardné html značky, ako už bolo spomenuté, vytvoríme tabuľku a do každej bunky napíšeme vlastné atribúty.

• Nezabudnite na všeobecné pravidlá: šírka písmena by nemala presiahnuť 600 px, obrázky musia byť skomprimované (napríklad použite TinyPNG), aby sa písmeno načítalo rýchlo a písmo by malo byť väčšie ako 13, pretože na technológii Apple môžu nastať problémy so zobrazením.
• Bunky vypĺňame textom, pričom formátujeme každý blok.
• Nezabudnite na rozloženie responzívnych e-mailov.

Testovanie rozloženia písmen

Po navrhnutí html šablóny je čas otestovať náš výtvor. Na to môžete použiť špeciálne služby, napríklad PutsMail alebo bežná pošta Yandex. V prvom prípade je všetko jasné – prečítame si návod a uvidíme, ako sme newsletter vymysleli.

• uistite sa, že tlačidlo „no design“ nesvieti;
• kliknite pravým tlačidlom myši na pole pre zadávanie textu a vyberte "preskúmať prvok", potom sa zobrazí okno s kódom, kde sa zobrazí riadok s
  ;
• Stlačte tlačidlo
  a kliknite na "upraviť";
• pridajte svoj kód a odošlite e-mail.

Nebojte sa, v samotnom editore to môže vyzerať strašidelne, ale príjemcovi to príde v takej forme, akú ste zamýšľali.