Маркетынг і аўтаматызацыя электроннай поштыВідэа па маркетынгу і продажах

Разуменне праблем (і расчараванняў) дызайну электроннай пошты HTML

Калі вы адкрываеце сістэму кіравання кантэнтам для стварэння вэб-старонак, гэта даволі просты працэс. Падтрымка сучасных вэб-браўзераў HTML, CSSі JavaScript у адпаведнасці са строгімі вэб-стандартамі. І гэта толькі нешматлікія браўзеры, пра якія трэба клапаціцца дызайнерам. Вядома, ёсць выключэнні... і некаторыя простыя абыходныя шляхі або функцыі, характэрныя для гэтых браўзераў.

З-за агульных стандартаў распрацоўваць канструктары старонак у сістэмах кіравання кантэнтам проста. Браўзеры адпавядаюць HTML5, CSS і JavaScript… і распрацоўшчыкі могуць ствараць неверагодна надзейныя рашэнні для стварэння вэб-старонак, якія рэагуюць на прылады і аднастайныя ў розных браўзерах. Два дзесяцігоддзі таму практычна кожны вэб-дызайнер выкарыстоўваў настольнае праграмнае забеспячэнне для распрацоўкі вэб-старонак. Зараз даволі рэдка для вэб-дызайнера распрацоўваць вэб-старонку - часцей за ўсё яны распрацоўваюць шаблоны і выкарыстоўваюць рэдактары ў сістэмах кантэнту для запаўнення кантэнту. Рэдактары сайтаў фантастычныя.

Але рэдактары электроннай пошты моцна адстаюць. Вось чаму…

Дызайн HTML-паведамленняў значна складаней, чым для вэб-сайта

Калі вашай кампаніі патрэбны прыгожы электронны ліст у фармаце HTML, працэс экспанентна больш складаны, чым стварэнне вэб-старонкі па некалькіх прычынах:

  • Няма стандартаў – Паштовыя кліенты, якія адлюстроўваюць электронную пошту ў фармаце HTML, НЕ прытрымліваюцца вэб-стандартаў. Практычна кожны паштовы кліент і кожная версія кожнага паштовага кліента дзейнічае па-рознаму. Некаторыя будуць ушаноўваць CSS, знешнія шрыфты і сучасны HTML. Іншыя шануюць некаторыя ўбудаваныя стылі, адлюстроўваюць толькі калекцыю шрыфтоў і ігнаруюць усё, акрамя таблічных структур. Вельмі смешна, што гэтым пытаннем ніхто не займаецца. У выніку распрацоўка шаблонаў, якія пастаянна адлюстроўваюцца на розных кліентах і прыладах, стала вялікім бізнесам і можа каштаваць даволі дорага.
  • Бяспека паштовага кліента – Нядаўна Apple Mail абнавілася, каб па змаўчанні блакіраваць усе выявы ў электронных лістах HTML, якія не ўбудаваны ў электронны ліст. Вы альбо даяце дазвол на загрузку ім электроннай пошты за раз, альбо павінны ўключыць налады, каб адключыць гэты параметр. Разам з наладамі бяспекі паштовага кліента існуюць і карпаратыўныя налады.
  • ІТ-бяспека – Ваша ІТ-каманда можа разгарнуць строгія наборы правілаў адносна таго, якія аб’екты на самай справе могуць быць адлюстраваны ў электроннай пошце. Калі вашы выявы, напрыклад, паходзяць з пэўнага дамена, які не ў белым спісе карпаратыўнага брандмаўэра, выявы проста не будуць адлюстроўвацца ў вашай электроннай пошце. Часам нам даводзілася распрацоўваць электронныя лісты і размяшчаць усе выявы на серверы карпарацыі, каб іх уласныя супрацоўнікі маглі бачыць выявы.
  • Пастаўшчыкі паслуг электроннай пошты – Што яшчэ горш, распрацоўшчыкі электроннай пошты, якія пастаўшчыкі паслуг электроннай пошты (ESPs) фактычна ствараюць праблемы, а не стрымліваюць іх. Нягледзячы на ​​тое, што яны прасоўваюць свой рэдактар ​​​​What You See Is What You Get (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:

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>

Вэб HTML

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

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Як пазбегнуць праблем з дызайнам электроннай пошты

Праблем з дызайнам электроннай пошты можна пазбегнуць, выконваючы прыстойны працэс:

  1. Тэставанне шаблонаў – Разуменне паштовых кліентаў, якімі карыстаюцца вашы падпісчыкі, і перакананне, што ваша электронная пошта ў фармаце HTML поўнасцю пратэставана на мабільных прыладах і працоўных сталах, мае вырашальнае значэнне перад разгортваннем любога шаблону. Мы можам распрацаваць электронны ліст літаральна з макета Photoshop... але нарэзка яго на кіраваны табліцай кліент перакрыжаванай электроннай пошты вельмі важны для разгортвання дызайну электроннай пошты, які будзе аптымальным і паслядоўным.
  2. Унутранае тэсціраванне – Пасля таго, як ваш шаблон распрацаваны і пратэставаны, ён павінен быць адпраўлены ва ўнутраны спіс пачатковых элементаў у арганізацыі для разгляду і зацвярджэння. Магчыма, вы нават захочаце пачаць з вельмі абмежаванай групы асобаў, каб спачатку пераканацца, што няма праблем з брандмаўэрам або бяспекай, звязаных з унутранай апрацоўкай электроннай пошты. Калі гэта стварае асобнік для новага пастаўшчыка паслуг электроннай пошты, вы нават можаце выявіць некаторыя праблемы фільтрацыі або блакіроўкі, звязаныя нават з атрыманнем вашай электроннай пошты ў паштовую скрыню.
  3. Версіі шаблонаў – Не змяняйце свае макеты або дызайн, не працуючы над новай версіяй шаблону, які можна распрацаваць, правільна пратэставаць і разгарнуць. Многія прадпрыемствы любяць аднаразовыя дызайны для кожнай кампаніі... але для гэтага неабходна распрацаваць, распрацаваць і разгарнуць кожны ліст для кожнай кампаніі. Гэта дадае масу часу ўнутранаму працэсу маркетынгу па электроннай пошце. І вы рызыкуеце не зразумець, якія элементы ў вашай электроннай пошце працуюць добра, чым элементы не. Паслядоўнасць - гэта не толькі спосаб палегчыць працэс, гэта таксама важна для паводзін вашых падпісчыкаў.
  4. Выключэнні для пастаўшчыка паслуг электроннай пошты – Практычна ў кожнага пастаўшчыка паслуг электроннай пошты ёсць сродкі для абыходу праблем, якія ўводзіць іх канструктар электроннай пошты. Мы часта можам дадаваць сырой CSS да ўліковага запісу - або нават мець блок кантэнту, які павінен быць уключаны ў кожны ліст - для таго, каб кампанія выкарыстоўвала ўбудаваны рэдактар ​​электроннай пошты і не парушала дызайн вашай электроннай пошты. Вядома, гэта можа запатрабаваць некаторай падрыхтоўкі і кантролю працэсу для разгортвання гэтых крокаў, каб гарантаваць, што яны выконваюцца. Або - вы можаце літаральна проста распрацаваць дызайн электроннай пошты ў рашэнні, якое даказана, што працуе на ўсіх кліентах і прыладах, а затым уставіць яго назад у пастаўшчык паслуг электроннай пошты.

Платформы для дызайну электроннай пошты

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

Stripo - гэта не толькі канструктар электроннай пошты, у іх таксама ёсць бібліятэка з больш чым 900 шаблонаў, якія можна лёгка імпартаваць. Пасля таго, як вы распрацуеце электронную пошту, вы можаце адправіць электронную пошту больш чым для 60 ESP і паштовых кліентаў, у тым ліку Intuit Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Прагноз, і Gmail. Самае лепшае, што шаблоны Stripo пастаўляюцца з уключанымі тэстамі візуалізацыі электроннай пошты, так што вы можаце пераканацца, што яны прайшлі праверку і стабільна працуюць у больш чым 40 паштовых кліентах.

Увайдзіце ў дэма-версію рэдактара Stripo

Douglas Karr

Douglas Karr з'яўляецца CMO кампаніі OpenINSIGHTS і заснавальнік ст Martech Zone. Дуглас дапамог дзясяткам паспяховых стартапаў MarTech, аказаў дапамогу ў належнай абачлівасці больш чым на 5 мільярдаў долараў у набыцці і інвестыцыях Martech і працягвае дапамагаць кампаніям у рэалізацыі і аўтаматызацыі іх продажаў і маркетынгавых стратэгій. Дуглас - міжнародна прызнаны эксперт і дакладчык па лічбавай трансфармацыі і MarTech. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.