Як стварыць HTML-ліст: пакрокавая інструкцыя

Паштовыя рассылкі з'яўляюцца важнай часткай маркетынгавых кампаній. Стварэнне лістоў для іх шмат у чым нагадвае распрацоўку простых вэб-старонак. У той жа час варта ўлічваць і пэўныя важныя адрозненні. У прыватнасці, рассыланне HTML-лістоў будзе эфектыўнай, толькі калі яны самі складзеныя карэктна ў тэхнічных адносінах, а іх змест і стыль адпавядаюць вашым мэтам. Пры гэтым існуе меркаванне, што неадмысловец не можа справіцца з гэтай задачай. У гэтым артыкуле прадстаўлена падрабязная пакрокавая інструкцыя, як напісаць і як адправіць HTML-ліст.

асаблівасці стварэння

Сучасны чалавек штодня атрымлівае ў сярэднім 5-6, а часам і да 10 электронных лістоў. Гэта значыць, што ў вас ёсць усяго менш секунды, каб паспець прыцягнуць увагу адрасата, да таго як ён пяройдзе да прачытання наступнай карэспандэнцыі. У адваротным выпадку ваша рассыланне HTML-лістоў будзе абсалютна неэфектыўнай, і вы проста выдаткуеце час дарма.

Адным з нюансаў, якія павялічваюць вашы шанцы на прыцягненне ўвагі патэнцыйных кліентаў або іншай мэтавай аўдыторыі, з'яўляецца стварэнне карэспандэнцыі, якая адаптаваная да мабільных прылад. Бо большасць тых, каму яна адрасаваная для прагляду пошты, напэўна выкарыстоўваюць іх нашмат часцей, чым настольныя компютере і наўтбукі.

З гэтай мэтай можна ўжываць, напрыклад, «спагадны дызайн», лёгка адаптуецца да памеру экрана.

Якім павінен быць шаблон лісты

Пры вёрстцы дакумента, прызначанага для адпраўкі карэспандэнтам, варта прытрымлівацца наступных патрабаванняў:

• Яго варта зрабіць дастаткова вузкім, т. Е. Па памерах яно павінна не перавышаць дыяпазон 500-600 пікселяў, што забяспечыць карэктнае адлюстраванне тэксту і іншага кантэнту на прыладах любога тыпу.
• Трэба выкарыстоўваць досыць буйны шрыфт для ўсёй тэкставай інфармацыі, так як на iOS-прыладах HTML-ліст будзе нязручна чытаць, калі памер шрыфта менш за 13 пікселяў.
• Элементы, па якіх можна зрабіць клік, павінны быць досыць буйнымі і ізаляванымі ад бліжэйшых спасылак. У такім выпадку адрасат зможа лёгка актывізаваць іх з першай жа спробы.

падрыхтоўка

Перш чым распрацаваць HTML-ліст, варта стварыць на адным з дыскаў новую тэчку і назваць яе, напрыклад, «Рассыланні». Акрамя таго, неабходна спампаваць і ўсталяваць праграму Dreamweaver CS3. Гэты прадукт ад Adobe з'яўляецца адным з досыць простых інструментаў канструявання вэб-сайтаў і добра падыходзіць для распрацоўкі рассылочного лісты ў фармаце HTML.

Стварэнне і захаванне дакумента

Перад тым як напісаць тэкставую частку ліста, трэба:

• адкрыць даволі папулярную праграму-канструктар HTML-лістоў Dreamweaver CS3 (DW);
• стварыць дакумент, выбраўшы ў якасці тыпу «Пераходны HTML 4.01»;
• захаваць файл з пашырэннем «.html»;
• ў верхнім меню знайсці каманду рэдагавання;
• прыбіраць галачку з чэк-бокса «Выкарыстаць CSS замест тэгаў HTML».

пакрокавая інструкцыя

Цяпер, разгледзім, як стварыць HTML-ліст. Для гэтага:

• Паслядоўна адкрываюць у меню ўкладкі «Уставіць» і «Табліца» і выстаўляюць патрэбныя параметры табліцы. Напрыклад, радкі - 2, слупкі - 1, шырыня - 700, загаловак - зверху. Межы можна выстаўляць, а можна абысціся без іх, паказаўшы 0.
• Фармуюць загаловак лісты. Так як HTML-ліст прызначана для большай колькасці атрымальнікаў, таму выкарыстоўваюць аператар [first_name], падстаўлялі патрэбнае імя атрымальніка.
• У ніжнім акне «Уласцівасці» выстаўляюць патрэбныя параметры для шрыфта, памеру і колеру тэксту загалоўка і колер фону.
• «Выходзяць» з вобласці загалоўка. У ніжняй частцы экрана выстаўляюць параметры для курсора «Па цэнтры» і «Па сярэдзіне».
• Вставляем гатовы тэкст ліста або «пішам» яго прама ў праграме DW, выбраўшы патрэбны тып і памер шрыфта, а таксама размяшчэнне тэксту на старонцы.

Стварэнне гіпертэкставых спасылак

Пастараемся зрабіць HTML-ліст больш прафесійным і прасунутым. З гэтай мэта схаваем у кантэнце гіпертэкставыя спасылкі. Для гэтага трэба вылучыць тое месца ў тэксце, якое выбралі ў якасці гіпертэкставай спасылкі. У левым куце ў верхняй частцы экрана варта «адкрыць» адпаведную абразок і ўставіць сваю спасылку ў якое выпала акно. Пры гэтым трэба не забыцца выставіць галачку ў чэк-боксе «_blank», каб спасылка адкрывалася ў новым акне, і адрасат пасля яе прагляду ня страціў доступ да асноўнага ліста.

Як ўставіць карцінкі

Звычайна ліст у фармаце HTML завяршаецца кантактнай інфармацыяй, пажадана з фота аўтара або з падыходнай тэматычнай малюначкам. Яе можна загрузіць з інтэрнэту або папярэдне загрузіўшы ў Інтэрнэт, так як вам патрэбен будзе URL гэтага малюнка. Лепш за ўсё гэта зрабіць з дапамогай аднаго з бясплатных сэрвісаў.

Для таго каб аформіць такі сімпатычны фінал:

• ўстаўляюць у ніжняй частцы лісты, ўнутр асноўнай табліцы яшчэ адну з 3 слупкамі і параметрам для межы 0 пікселяў;
• выстаўляюць курсор у тым месцы табліцы, дзе хочуць бачыць карцінку;
• адзначаюць у ніжнім акне «Пасярэдзіне» і «Па верхнім боку» для кожнай секцыі;
• выбіраюць у верхнім меню ўкладку «Устаўка»;
• робім клік па надпісе «Малюнак» і ў які выпаў меню вставляем скапіяваны намі адрас;
• націскаем «Ok» 2 разы.

прагляд

Зараз, калі вы ведаеце, як зрабіць HTML-ліст, варта пераканацца, што адрасат яго ўбачыць ў карэктным выглядзе. Для гэтага перад адпраўкай трэба прагледзець ваш твор у браўзэры Dreamweaver CS3. Для гэтага трэба націснуць на абразок з зямным шарам ў сярэднім верхнім меню. Калі замест літар на экране з'явілася абракадабра, то варта выставіць у наладах вашага браўзэра автокодировку.

кадоўка

З падзелу «Праект» і пераходзяць у кодавую частка - «Код». У якое адкрылася акне вылучаюць і капіююць усё, што заключана паміж тэгамі і . Захоўваем файл. Далей вставляем HTML-код.

Адпраўка HTML-лісты

Для таго каб зрабіць рассылку адкрываюць "Смартреспондер" (SR). затым:

• выбіраюць альбо ствараем новы ліст, запоўніўшы радкі «Імя» і «Адрас адпраўшчыка».
• запаўняюць радок «Тэма ліста»;
• адзначаюць у верхнім левым меню HTML-код;
• ўстаўляюць код, скапіяваны ў праграме DW-код у вялікае поле «Крыніца»;
• правяраюць карэктнасць адлюстравання з дапамогай інструмента "Прадпрагляд";
• выдаляюць тэкставую версію лісты;
• тэстуюць яго на спам, з дапамогай аднайменнай кнопкі, размешчанай побач з кнопкай «Адправіць».

Некалькі папулярных шаблонаў

Выкарыстанне фреймворка дапамагае значна паскорыць працэс стварэння ліста і зрабіць яго больш даступным для распрацоўніка, які толькі яшчэ спасцігае асновы стварэння вэб-дакументаў. Найбольш папулярнымі шаблонамі з'яўляюцца:

• Cerberus. Гэты набор так званых спагадных шаблонаў дазваляе ствараць лісты, нармальна адлюстроўваныя як у мабільным дадатку Gmail, так і ў Outlook. Ён дазваляе выкарыстоўваць блокі HTML-кода альбо паасобку, альбо аб'ядноўваючы іх.
• Ink - гэта нарыхтоўка лістоў, рассылання якіх практычна ўніверсальныя і сумяшчальныя з любымі прыладамі і кліентамі.
• Really simple HTML email template. Шаблон дазваляе ствараць рассылочные лісты вельмі проста і хутка. Праўда, у іх будзе вельмі просты дызайн у выглядзе аднаго слупка, у якім заключаны заклік да дзеяння.

Як ўставіць HTML у ліст

Разгледзім зараз некалькі іншую задачу. Каб ўставіць код HTML ў электронны ліст, напрыклад, gmail выкарыстоўваючы, як у прыведзеным ніжэй прыкладзе браўзэр Google Chrome, варта:

• націснуць на кнопку «F12» або выбраць адпаведную паслядоўнасць каманд у меню;
• у якое адкрылася акне з кодам бягучай старонкі кліента gmail знайсці тое месца, куды павінна быць зроблена HTML-ліст, зрабіць правы клік і выбраць «Edit as HTML».
• ўставіць скапіяваны HTML код;
• націснуць камбінацыю двух клавіш «Ctrl» і «Enter».

Для той жа мэты можна спампаваць простую ў использовнии праграму Mozilla thunderbird. З яе дапамогай можна стварыць ліст, а потым спачатку выбраць пункт «Уставіць», а затым «HTML», і ўставіць туды код сваёй рассылання.

інструменты

Вордпрессовский убудова e-Newsletter дазваляе прафесійна кіраваць рассылкамі і абанентамі. Прычым і тое, і іншае робіцца прама праз панэль адміністратара WordPress. Гэтая акалічнасць забяспечвае поўны кантроль і цалкам бясплатна, што не можа не радаваць.

Яшчэ адзін просты інструмент - Bulletproof background images, які ўяўляе сабой просты інструмент, які дазваляе атрымаць код для фонавага малюнка ствараюцца лістоў. З яго дапамогай можна зрабіць карэспандэнцыю нашмат прыгажэй. Для афармлення лісты проста варта паказаць URL, які спадабаўся фонавага малюнка і яго рэзервовы колер, а таксама павінны Ці гэтыя параметры прымяняцца да ўсяго целе HTML-лісты або яны прызначаны толькі для адной з вочка табліцы. У выніку будзе атрыманы гатовы код, які патрабуецца скапіяваць і ўставіць у свой шаблон.

Цяпер вы ведаеце, як адправіць HTML-ліст. Яго стварэнне не ўяўляе асаблівай складанасці, асабліва калі карыстацца гатовымі шаблонамі, у якіх у Сеткі няма недахопу. Таму нават тыя, хто не мае асаблівых ведаў, змогуць лёгка справіцца з гэтай задачай.