Маркетинг и автоматизација на е-поштаВидеа за маркетинг и продажба

Разбирање на предизвиците (и фрустрациите) на HTML дизајнот на е-пошта

Ако отворите систем за управување со содржина за да изградите веб-страници, тоа е прилично едноставен процес. Поддршка за модерни веб-прелистувачи HTML, CSS, и JavaScript според строги веб-стандарди. И тие се само неколку прелистувачи за кои дизајнерите треба да се грижат. Има исклучоци, се разбира... и некои едноставни решенија или функции специфични за тие прелистувачи.

Поради севкупните стандарди, лесно е да се развијат создавачи на страници во системите за управување со содржина. Прелистувачите се усогласени со HTML5, CSS и JavaScript... и програмерите можат да изградат неверојатно робусни решенија за создавање веб-страници кои одговараат на уредите и конзистентни низ прелистувачите. Пред две децении, буквално секој веб-дизајнер користеше десктоп софтвер за развој на веб-страници. Сега, прилично невообичаено е веб-дизајнер да развие веб-страница - почесто отколку не, тие развиваат шаблони и користат уредници во системите за содржина за да ја пополнат содржината. Уредниците на веб-страниците се фантастични.

Но, уредниците на е-поштата очајно заостануваат. Еве зошто…

Дизајнирањето на HTML е-пошта е многу покомплексно отколку за веб-страница

Ако вашата компанија сака дизајнирана убава HTML е-пошта, процесот е експоненцијално покомплексен од изградбата на веб-страница поради неколку причини:

  • Нема стандарди – НЕМА строго придржување до веб-стандардите од страна на клиентите за е-пошта кои прикажуваат HTML е-пошта. Практично секој клиент за е-пошта и секоја верзија на секој клиент за е-пошта делува поинаку. Некои ќе ги почитуваат CSS, надворешните фонтови и модерниот HTML. Други почитуваат некои вградени стилови, прикажуваат само збирка фонтови и игнорираат сè освен структурите управувани од табелата. Сосема е смешно што никој не работи на ова прашање. Како резултат на тоа, дизајнирањето шаблони што постојано се прикажуваат на клиенти и уреди стана голем бизнис и може да биде прилично скапо.
  • Безбедност на клиентот за е-пошта – Неодамна, Apple Mail се ажурираше за да ги блокира сите слики во HTML е-пошта стандардно што не се вградени во е-поштата. Или давате дозвола да им вчитате е-пошта во исто време или треба да ги овозможите поставките за да ја оневозможите оваа поставка. Заедно со безбедносните поставки на клиентот за е-пошта, има и корпоративни поставки.
  • Безбедност на ИТ – Вашиот ИТ тим може да распореди строги правила за тоа кои предмети всушност може да се прикажат во е-пошта. Ако вашите слики, на пример, доаѓаат од одреден домен кој не е на белата листа во корпоративниот заштитен ѕид, сликите едноставно нема да се појават во вашата е-пошта. Понекогаш моравме да развиваме е-пошта и да ги хостираме сите слики на серверот на корпорацијата за да можат нивните вработени да ги видат сликите.
  • Даватели на услуги по е-пошта – Да бидат работите уште полоши, создавачите на е-пошта што давателите на услуги за е-пошта (ESPс) всушност воведуваат проблеми наместо да ги ограничуваат. Додека тие го промовираат нивниот уредник е она што го гледате е она што го добивате (WYSIWYG), спротивното често е точно со дизајнот на е-пошта. Ќе ја прегледате е-поштата во нивната платформа, а примачот ќе ги види сите проблеми со дизајнот. Компаниите честопати несвесно се одлучуваат за уредник богат со функции наместо заклучен, мислејќи дека некој има повеќе функции. Спротивното е точно... ако сакате е-пошта што постојано се прикажува кај сите клиенти за е-пошта, толку е поедноставно, толку подобро, бидејќи помалку може да тргне наопаку.
  • Рендерирање на клиентот за е-пошта – Стотици клиенти за е-пошта го прикажуваат HTML различно на десктоп компјутерите, апликациите, мобилните уреди и клиентите за веб-пошта. Додека вашиот убав уредувач на текст на вашиот давател на услуги за е-пошта може да има поставка за ставање наслов во вашата е-пошта, полнењето, маргините, висината на линијата и големината на фонтот може да се разликуваат за секој клиент за е-пошта. Како резултат на тоа, мора да го занемарите HTML-от и да го кодирате секој елемент различно (видете го примерот подолу) - и честопати пишувате во исклучоци кои се специфични за клиентот за е-пошта - за да добиете е-пошта што постојано ќе се прикажува. Нема едноставни типови блокови, треба да направите распоред на табели кои се еквивалентни на градење за веб пред триесет години. Затоа секој нов распоред бара развој и тестирање на клиентот и уредот преку е-пошта. Она што го гледате во вашето сандаче може да биде сосема поинакво од она што го гледам во моето сандаче. Затоа алатките за рендерирање како Е-пошта за киселина or Литмус се неопходни за да се осигурате дека вашите нови дизајни функционираат кај сите клиенти за е-пошта. Еве краток список на популарни клиенти за е-пошта и нивните мотори за рендерирање:
    • Apple Mail, Outlook за Mac, Android Mail и iOS Mail користат WebKit.
    • Употреба на Outlook 2000, 2002 и 2003 година Internet Explorer.
    • Употреба на 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 е-пошта е целосно тестирана на мобилниот и на десктопот е од суштинско значење пред да распоредите кој било шаблон. Можеме да дизајнираме е-пошта буквално од распоред на Фотошоп... но пресекот и пресечете ја во табела, вкрстен клиент за е-пошта е од суштинско значење за распоредување на дизајни за е-пошта кои се оптимални и конзистентни.
  2. Внатрешно тестирање – Штом вашиот шаблон ќе биде дизајниран и тестиран, треба да се испрати до внатрешната листа на серии во организацијата за да се прегледа и одобри. Можеби ќе сакате да започнете со многу ограничена подгрупа на поединци за прво да се осигурате дека нема заштитниот ѕид или безбедносни проблеми поврзани со внатрешно прикажување на е-поштата. Ако ова создава пример за нов давател на услуги за е-пошта, може дури да најдете некои проблеми со филтрирање или блокирање поврзани дури и со испраќање на вашата е-пошта до сандачето.
  3. Верзија на шаблон – Не менувајте ги вашите распореди или дизајни без да работите на нова верзија на вашиот шаблон што може да се дизајнира, правилно да се тестира и да се примени. Многу бизниси сакаат еднократни дизајни за секоја кампања... но тоа бара секоја е-пошта да биде дизајнирана, развиена и распоредена за секоја кампања. Ова додава еден тон време на внатрешниот процес на маркетинг преку е-пошта. И, ризикувате да не разберете кои елементи во вашата е-пошта функционираат добро отколку кои елементи не се. Доследноста не е само начин да се олесни процесот, таа е важна и за однесувањето на вашите претплатници.
  4. Исклучоци на давателот на услуги за е-пошта – Практично секој давател на услуги за е-пошта има начин да работи околу проблемите што ги воведува нивниот градител на е-пошта. Честопати можеме да додадеме необработен CSS на сметката - или дури и да имаме блок на содржина што треба да биде вклучена во секоја е-пошта - со цел компанијата да го користи вградениот уредувач на е-пошта и да не го наруши дизајнот на вашата е-пошта. Се разбира, тоа може да бара одредена обука и контрола на процесот за да се применат тие чекори за да се осигура дека се усогласени. Или - можеби само сакате да го развиете дизајнот на вашата е-пошта во решение за кое е докажано дека функционира на клиенти и уреди, а потоа повторно залепете го во вашиот давател на услуги за е-пошта.

Платформи за дизајн на е-пошта

Бидејќи платформите за услуги за е-пошта завршија лоша работа во создавањето и одржувањето на градители кои постојано се прикажуваат меѓу клиентите и преку уредите, голем број одлични платформи се појавија на пазарот. Она што го користевме опширно е Стрипо.

Stripo не е само градител на е-пошта, тие исто така имаат библиотека од над 900 шаблони кои лесно може да се увезат. Откако ќе ја дизајнирате е-поштата, можете да испраќате е-пошта до 60+ ESP-и, вклучувајќи и клиенти за е-пошта Intuit Mailchimp, Hubspot, Кампања монитор, AWeber, еСпутник, Outlook, и Gmail. Најдобро од сè, шаблоните на Stripo доаѓаат со вклучени тестови за рендерирање на е-пошта за да можете да се уверите дека се тестирани и дека работат постојано на преку 40 клиенти за е-пошта.

Пријавете се во демото на уредникот на Stripo

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основачот на Martech Zone. Даглас им помогна на десетици успешни стартапи на MarTech, помогна во длабинската анализа од над 5 милијарди американски долари за аквизиции и инвестиции на Martech и продолжува да им помага на компаниите во имплементацијата и автоматизирањето на нивните стратегии за продажба и маркетинг. Даглас е меѓународно признат експерт и говорник за дигитална трансформација и MarTech. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

поврзани написи

Вратете се на почетокот копче
Затвори

Откриен е блок за рекламирање

Martech Zone може да ви ја обезбеди оваа содржина без трошоци бидејќи ја монетизираме нашата страница преку приходи од реклами, врски со партнери и спонзорства. Ќе ни биде благодарно ако го отстраните вашиот блокатор на реклами додека ја гледате нашата страница.