Калі вы адкрыеце сістэму кіравання кантэнтам для стварэння вэб-старонак, гэта даволі просты працэс. Сучасныя вэб-браўзеры падтрымліваюць HTML, CSS і JavaScript строгі набор вэб-стандартаў. І гэта насамрэч толькі некалькі браўзераў, аб якіх дызайнерам трэба паклапаціцца. Ёсць выключэнні, вядома... і некаторыя простыя абыходныя шляхі або функцыі, характэрныя для гэтых браўзераў.
З-за агульных стандартаў распрацоўваць канструктары старонак у сістэмах кіравання кантэнтам вельмі проста. Браўзеры адпавядаюць HTML5, CSS і JavaScript... і распрацоўшчыкі могуць ствараць неверагодна надзейныя рашэнні для стварэння вэб-старонак, якія рэагуюць на прылады і ўзгоднены ў розных браўзерах. Два дзесяцігоддзі таму практычна кожны вэб-дызайнер выкарыстоўваў настольнае праграмнае забеспячэнне для распрацоўкі вэб-старонак. Цяпер вэб-дызайнер даволі рэдка распрацоўвае вэб-старонку - часцей за ўсё яны распрацоўваюць шаблоны і выкарыстоўваюць рэдактары ў сістэмах кантэнту для запаўнення кантэнту. Рэдактары вэб-сайтаў фантастычныя.
Але рэдактары электроннай пошты моцна адстаюць. Вось чаму…
Дызайн HTML-паведамленняў значна складаней, чым для вэб-сайта
Калі ваша кампанія хоча стварыць прыгожы HTML-электронны ліст, гэты працэс значна складаней, чым стварэнне вэб-старонкі па шэрагу прычын:
- Няма стандартаў – Ніякага строгага прытрымлівання ніякай сеткі няма стандартаў з дапамогай паштовых кліентаў, якія адлюстроўваюць электронную пошту HTML. Фактычна, віртуальна кожны паштовы кліент і кожная версія кожнага паштовага кліента дзейнічае інакш. Некаторыя будуць шанаваць CSS, знешнія шрыфты і сучасны HTML. Іншыя ўшаноўваюць некаторыя ўбудаваныя стылі, будуць адлюстроўваць толькі калекцыю шрыфтоў і ігнаруюць усё, акрамя таблічных структур. Насамрэч вельмі смешна ў гэты момант, што ніхто не працуе над гэтым пытаннем. У выніку распрацоўка шаблонаў, якія пастаянна адлюстроўваюць на кліентах і прыладах, стала вялікім бізнесам і можа быць даволі дарагім.
- Бяспека паштовага кліента – Толькі на гэтым тыдні Apple Mail абноўлены, каб заблакаваць усе выявы ў электронных лістах HTML па змаўчанні, якія не ўбудаваныя ў электронную пошту. Вы альбо даяце дазвол на загрузку ім электроннага ліста за раз, альбо павінны ўключыць налады, каб адключыць гэтую наладу. Разам з наладамі бяспекі паштовага кліента існуюць і карпаратыўныя налады.
- ІТ-бяспека – Ваша ІТ-каманда можа разгарнуць строгія наборы правілаў адносна таго, якія аб’екты на самай справе могуць быць адлюстраваны ў электроннай пошце. Калі вашы выявы, напрыклад, паходзяць з пэўнага дамена, які не ў белым спісе карпаратыўнага брандмаўэра, выявы проста не будуць адлюстроўвацца ў вашай электроннай пошце. Часам нам даводзілася распрацоўваць электронныя лісты і размяшчаць усе выявы на серверы карпарацыі, каб іх уласныя супрацоўнікі маглі бачыць выявы.
- Пастаўшчыкі паслуг электроннай пошты – Што яшчэ горш, распрацоўшчыкі электроннай пошты, якія пастаўшчыкі паслуг электроннай пошты (ESPs) фактычна стварае праблемы, а не абмяжоўвае іх. Пакуль яны прасоўваюць свайго рэдактара Тое, што вы бачыце, тое і атрымліваеце (WYSIWYG), з дызайнам электроннай пошты часта адбываецца наадварот. Вы будзеце праглядаць электроннае паведамленне на іх платформе, тады атрымальнік электроннай пошты бачыць усе віды праблем з дызайнам. Кампаніі часта несвядома выбіраюць шматфункцыянальны рэдактар замест закрытага рэдактара, думаючы, што адзін мае больш функцый, чым іншы. Усё наадварот... калі вы хочаце, каб электронныя лісты аднаўляліся ва ўсіх паштовых кліентах, чым прасцей, тым лепш, таму што менш можа пайсці не так.
- Рэндэрынг паштовага кліента – Існуюць сотні паштовых кліентаў, кожны з якіх па-рознаму адлюстроўвае HTML для настольных ПК, праграм, мабільных і вэб-поштовых кліентаў. У той час як ваш выдатны тэкставы рэдактар у вашым пастаўшчыке паслуг электроннай пошты можа мець настройку для размяшчэння загалоўка ў вашай электроннай пошце ... запаўненне, палі, вышыня радка і памер шрыфта могуць адрознівацца для кожнага кліента электроннай пошты. У выніку вам давядзецца прыглушаць HTML і кодаваць кожны асобны элемент па-рознаму (гл. прыклад ніжэй) - і часта пісаць выключэння, якія з'яўляюцца спецыфічнымі для паштовага кліента - каб атрымаць электроннае паведамленне для паслядоўнага адлюстравання. Не існуе простых тыпаў блокаў, вы павінны рабіць макеты на аснове табліц, якія з'яўляюцца эквівалентам пабудовы для вэб трыццаць гадоў таму. Вось чаму любы новы макет патрабуе як распрацоўкі, так і крос-паштовага кліента і тэставання прылад. Тое, што вы бачыце ў сваёй паштовай скрыні, можа зусім адрознівацца ад таго, што я бачу ў сваёй паштовай скрыні. Вось чаму інструменты візуалізацыі, як Электронная пошта па кіслаце or Лакмус з'яўляюцца абавязковымі, каб гарантаваць, што вашы новыя дызайны працуюць ва ўсіх паштовых кліентах. Вось кароткі спіс папулярных паштовых кліентаў і іх механізмаў рэндэрынгу:
- Apple Mail, Outlook для Mac, Android Mail і iOS Mail WebKit.
- Outlook 2000, 2002 і 2003 выкарыстоўваць інтэрнэт эксплорер.
- Outlook 2007, 2010 і 2013 выкарыстоўваць Microsoft Word (так, Слова!).
- Кліенты вэб-пошты выкарыстоўваюць адпаведны механізм свайго браўзера (напрыклад, Safari выкарыстоўвае WebKit, а Chrome — Blink).
Прыклад HTML для вэб-супраць. Электронная пошта
Калі вы хочаце прыклад, які ілюструе складанасць праектавання ў электроннай пошце і ў Інтэрнэце, вось ідэальны прыклад з артыкула Mailbakery 19 вялікіх адрозненняў паміж электроннай поштай і вэб-HTML:
Мы павінны стварыць шэраг табліц, якія ўключаюць у сябе ўсе ўбудаваныя стылі, неабходныя для правільнага размяшчэння кнопкі і забеспячэння добрага выгляду ў паштовых кліентах. Уверсе гэтага ліста таксама будзе суправаджальны тэг стылю, каб уключыць класы.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>Web
Мы можам выкарыстоўваць знешнюю табліцу стыляў з класамі, каб вызначыць рэгістр, выраўноўванне, колер і памер анкернага тэга, які з'яўляецца кнопкай.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>Як пазбегнуць праблем з дызайнам электроннай пошты
Праблем з дызайнам электроннай пошты можна пазбегнуць, выконваючы прыстойны працэс:
- Дызайн шаблонаў – Стварыце шаблон з рознымі макетамі і блокамі кантэнту, якія ахопліваюць кожны стыль, які вы калі-небудзь захочаце стварыць у дызайне электроннай пошты. Калі мы ўкараняем кліента, мы заўсёды падштурхоўваем да яго дызайн электроннай пошты для будучыні – не толькі наступная рассылаемая кампанія па электроннай пошце. Такім чынам, мы можам цалкам спраектаваць, распрацаваць, праверыць і ўкараніць неабходныя абыходныя шляхі да яны калі-небудзь адпраўляюць гэты першы ліст.
- Тэставанне шаблонаў – Разуменне паштовых кліентаў, якімі карыстаюцца вашы абаненты, і перакананне, што ваша электронная пошта HTML цалкам праверана на мабільным і настольным кампутары, вельмі важна перад разгортваннем любога шаблону. Мы можам распрацаваць электронную пошту літаральна з макета Photoshop... але нарэзка і нарэзка яго на табліцы крос-паштовага кліента вельмі важная для разгортвання аптымальных і паслядоўных дызайнаў электроннай пошты.
- Унутранае тэсціраванне – Пасля таго, як ваш шаблон распрацаваны і пратэставаны, ён павінен быць адпраўлены ва ўнутраны спіс пачатковых элементаў у арганізацыі для разгляду і зацвярджэння. Магчыма, вы нават захочаце пачаць з вельмі абмежаванай групы асобаў, каб спачатку пераканацца, што няма праблем з брандмаўэрам або бяспекай, звязаных з унутранай апрацоўкай электроннай пошты. Калі гэта стварае асобнік для новага пастаўшчыка паслуг электроннай пошты, вы нават можаце выявіць некаторыя праблемы фільтрацыі або блакіроўкі, звязаныя нават з атрыманнем вашай электроннай пошты ў паштовую скрыню.
- Версіі шаблонаў – Не змяняйце свае макеты або дызайн, не працуючы над новай версіяй шаблону, які можна распрацаваць, правільна пратэставаць і разгарнуць. Многія прадпрыемствы любяць аднаразовыя дызайны для кожнай кампаніі... але для гэтага неабходна распрацаваць, распрацаваць і разгарнуць кожны ліст для кожнай кампаніі. Гэта дадае масу часу ўнутранаму працэсу маркетынгу па электроннай пошце. І вы рызыкуеце не зразумець, якія элементы ў вашай электроннай пошце працуюць добра, чым элементы не. Паслядоўнасць - гэта не толькі спосаб палегчыць працэс, гэта таксама важна для паводзін вашых падпісчыкаў.
- Выключэнні для пастаўшчыка паслуг электроннай пошты – Практычна ў кожнага пастаўшчыка паслуг электроннай пошты ёсць сродкі для абыходу праблем, якія ўводзіць іх канструктар электроннай пошты. Мы часта можам дадаваць сырой CSS да ўліковага запісу - або нават мець блок кантэнту, які павінен быць уключаны ў кожны ліст - для таго, каб кампанія выкарыстоўвала ўбудаваны рэдактар электроннай пошты і не парушала дызайн вашай электроннай пошты. Вядома, гэта можа запатрабаваць некаторай падрыхтоўкі і кантролю працэсу для разгортвання гэтых крокаў, каб гарантаваць, што яны выконваюцца. Або - вы можаце літаральна проста распрацаваць дызайн электроннай пошты ў рашэнні, якое даказана, што працуе на ўсіх кліентах і прыладах, а затым уставіць яго назад у пастаўшчык паслуг электроннай пошты.
Платформы для дызайну электроннай пошты
Паколькі платформы сэрвісаў электроннай пошты дрэнна спраўляюцца з стварэннем і падтрымкай канструктараў, якія паслядоўна аказваюцца паміж кліентамі і прыладамі, на рынак выйшла шэраг выдатных платформаў. Адзін, які мы шырока выкарыстоўвалі Stripo.
Stripo - гэта не толькі канструктар электроннай пошты, у іх таксама ёсць бібліятэка з больш чым 900 шаблонаў, якія можна лёгка імпартаваць. Пасля таго, як вы распрацуеце электронную пошту, вы можаце адправіць электронную пошту больш чым для 60 ESP і паштовых кліентаў, у тым ліку Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook і Gmail. Лепш за ўсё шаблоны Stripo пастаўляюцца з уключанымі тэстамі візуалізацыі электроннай пошты, так што вы можаце пераканацца, што яны прайшлі праверку і паслядоўна працуюць у больш чым 40 паштовых кліентах.
Увайдзіце ў дэма-версію рэдактара Stripo
Раскрыццё інфармацыі: я даю спасылку на сваю кансалтынгавая фірма па маркетынгу які распрацоўвае і разгортвае міжкліенцкія электронныя лісты для вядучых брэндаў практычна ў любым пастаўшчыке паслуг электроннай пошты. Я таксама з'яўляюся філіялам Stripo і я выкарыстоўваю сваю спасылку ў гэтым артыкуле.
