Разумевање изазова (и фрустрација) ХТМЛ дизајна е-поште

Ако отворите систем за управљање садржајем да бисте направили веб странице, то је прилично једноставан процес. Модерни веб претраживачи подржавају ХТМЛ, ЦСС и ЈаваСцрипт за а строг скуп веб стандарда. И, они су заправо само неколико претраживача о којима дизајнери треба да брину. Постоје изузеци, наравно... и нека једноставна решења или функције специфичне за те претраживаче.

Због општих стандарда, заиста је лако развити креаторе страница у системима за управљање садржајем. Претраживачи су у складу са ХТМЛ5, ЦСС и ЈаваСцрипт-ом... и програмери могу да направе невероватно робусна решења за прављење веб страница које реагују на уређаје и конзистентне у свим прегледачима. Пре две деценије, скоро сваки веб дизајнер је користио десктоп софтвер за развој веб страница. Сада је прилично неуобичајено да веб дизајнер развија веб страницу – чешће него не, они развијају шаблоне и користе уреднике у системима садржаја да попуне садржај. Уредници веб страница су фантастични.

Али уредници е-поште су страшно заостали. Ево зашто…

Дизајнирање ХТМЛ е-порука је далеко сложеније него за веб локацију

Ако ваша компанија жели дизајнирану прелепу ХТМЛ е-пошту, процес је експоненцијално сложенији од прављења веб странице из више разлога:

• Без стандарда – НЕМА стриктно придржавање било које мреже стандарди клијентима е-поште који приказују ХТМЛ е-пошту. У ствари, виртуелно сваки клијент е-поште и свака верзија сваког клијента е-поште делује другачије. Неки ће поштовати ЦСС, спољне фонтове и модерни ХТМЛ. Други поштују неки уграђени стил, приказаће само колекцију фонтова и игнорисати све осим структура вођених табелама. Заправо је прилично смешно у овом тренутку да нико не ради на овом питању. Као резултат тога, дизајнирање шаблона који се стално приказују на клијентима и уређајима постало је велики посао и може бити прилично скупо.
• Сигурност клијента е-поште – Само ове недеље, Аппле Маил је ажуриран тако да подразумевано блокира све слике у ХТМЛ имејловима које нису уграђене у е-пошту. Или дате дозволу да им учитате е-пошту одједном, или морате да омогућите подешавања да бисте онемогућили ово подешавање. Поред безбедносних подешавања клијента е-поште, ту су и корпоративна подешавања.
• ИТ сигурност – Ваш ИТ тим може применити строге скупове правила о томе који објекти се заиста могу приказати у е-поруци. Ако ваше слике, на пример, потичу са одређеног домена који није на белој листи у корпоративном заштитном зиду, слике се једноставно неће појавити у вашој е-пошти. Понекад смо морали да развијемо мејлове и да угостимо све слике на серверу корпорације како би њихови запослени могли да виде слике.
• Добављачи услуга е-поште – Да ствари буду још горе, креатори е-поште који провајдери услуга е-поште (ЕСПс) заправо уводе проблеме, а не ограничавају их. Док промовишу њихов уредник је Оно што видите је оно што добијете (ВИСИВИГ), супротно је често тачно са дизајном е-поште. Прегледаћете е-пошту на њиховој платформи, а онда прималац е-поште види све врсте проблема са дизајном. Компаније се често несвесно одлучују за уређивач богат функцијама уместо закључаног уредника мислећи да један има више функција од другог. Истина је управо супротно… ако желите е-поруке које се доследно приказују у свим клијентима е-поште, што једноставније то боље јер мање може поћи по злу.
• Рендеринг клијента е-поште – Постоје стотине клијената е-поште, од којих сваки различито приказује ХТМЛ на рачунарима, апликацијама, мобилним уређајима и клијентима за веб пошту. Док ваш сјајни уређивач текста на вашем добављачу услуга е-поште може имати поставку за постављање заглавља у вашу е-пошту… допуна, маргине, висина реда и величина фонта могу се разликовати на сваком појединачном клијенту е-поште. Као резултат тога, морате да заглупите ХТМЛ и кодирате сваки појединачни елемент на другачији начин (погледајте пример у наставку) – и често пишете изузетке који су специфични за клијента е-поште – да бисте добили е-пошту која се доследно приказује. Не постоје једноставни типови блокова, морате да радите распореде вођене табелама који су еквивалентни изградњи за веб пре тридесет година. Зато сваки нови изглед захтева и развој и тестирање клијента и уређаја унакрсне е-поште. Оно што видите у пријемном сандучету може бити потпуно другачије од онога што ја видим у пријемном сандучету. Зато алати за рендеровање као што су Е-пошта о киселини or Лакмус су неопходни да би се осигурало да ваши нови дизајни функционишу на свим клијентима е-поште. Ево кратке листе популарних клијената е-поште и њихових механизама за приказивање:
  • Користи Аппле Маил, Оутлоок за Мац, Андроид Маил и иОС Маил ВебКит.
  • Користите Оутлоок 2000, 2002 и 2003 Интернет екплорер.
  • Користите Оутлоок 2007, 2010 и 2013 Мицрософт Ворд (да, Реч!).
  • Клијенти веб поште користе одговарајући механизам свог претраживача (на пример, Сафари користи ВебКит, а Цхроме користи Блинк).

Пример ХТМЛ-а за веб против. Емаил

Ако желите пример који илуструје сложеност дизајна у имејлу у односу на веб, ево савршеног примера из чланка Маилбакери-а 19 великих разлика између е-поште и веб ХТМЛ-а:

<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>

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

Како избећи проблеме са дизајном е-поште

Проблеми са дизајном е-поште могу се избећи праћењем пристојног процеса:

1. Dizajn šablona – Направите шаблон са различитим изгледима и блоковима садржаја који обухватају сваки стил који бисте икада желели да направите у дизајну е-поште. Када имплементирамо клијента, увек га гурамо дизајнирајте е-пошту за будућност – не само следећа кампања е-поште која је послата. На тај начин можемо у потпуности да дизајнирамо, развијемо, тестирамо и применимо неопходна решења пре они икад пошаљу ту прву е-пошту.
2. Тестирање шаблона – Разумевање клијената е-поште које ваши претплатници користе и обезбеђивање да је ваша ХТМЛ е-пошта у потпуности тестирана на мобилним и десктоп рачунарима је кључна пре него што примените било који шаблон. Можемо да дизајнирамо е-пошту буквално из изгледа Пхотосхоп-а... али њено исецкање и исецкање у клијент за унакрсну е-пошту засновано на табели је од суштинског значаја за примену дизајна е-поште који је оптималан и конзистентан.
3. Интерно тестирање – Када је ваш шаблон дизајниран и тестиран, треба га послати на интерну почетну листу унутар организације да прегледа и одобри. Можда бисте чак желели да почнете са веома ограниченом подгрупом појединаца да бисте прво осигурали да нема заштитних зидова или безбедносних проблема повезаних са интерним приказивањем е-поште. Ако ово ствара инстанцу на новом провајдеру услуге е-поште, можда ћете чак пронаћи неке проблеме са филтрирањем или блокирањем који су повезани чак и са слањем ваше е-поште у пријемно сандуче.
4. Версионинг шаблона – Немојте мењати своје изгледе или дизајне без рада на новој верзији шаблона која се може дизајнирати, правилно тестирати и применити. Многа предузећа воле једнократне дизајне за сваку кампању... али то захтева да свака е-пошта буде дизајнирана, развијена и примењена за сваку кампању. Ово додаје тону времена интерном процесу маркетинга путем е-поште. И ризикујете да не разумете који елементи у вашој е-пошти имају добар учинак у односу на елементе који нису. Доследност није само начин да олакшате процес, већ је важна и за понашање ваших претплатника.
5. Изузеци добављача услуга е-поште – Практично сваки провајдер услуга е-поште има средства да заобиђе проблеме које уводи њихов креатор е-поште. Често можемо да додамо сирови ЦСС на налог – или чак да имамо блок садржаја који мора да буде укључен у сваку е-пошту – како би компанија користила уграђени уређивач е-поште и да не би оштетила дизајн ваше е-поште. Наравно, то може захтевати извесну обуку и контролу процеса да би се ти кораци применили како би се осигурало да се поштују. Или – можда ћете буквално само желети да развијете свој дизајн е-поште у решењу за које је доказано да функционише на свим клијентима и уређајима, а затим га налепите назад у свог добављача услуга е-поште.

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

Пошто су платформе за услуге е-поште лоше обавиле посао у изградњи и одржавању конзистентно приказаних градитеља међу клијентима и различитим уређајима, на тржиште су изашле бројне одличне платформе. Један који смо интензивно користили је Стрипо.

Стрипо није само креатор е-поште, они такође имају библиотеку од преко 900 шаблона који се лако могу увести. Када дизајнирате е-пошту, можете да пошаљете е-пошту на 60+ ЕСП-ова и клијената е-поште, укључујући МаилЦхимп, ХубСпот, Цампаигн Монитор, АВебер, еСпутник, Оутлоок и Гмаил. Најбољи од свих Стрипо шаблона долазе са укљученим тестовима приказивања е-поште тако да можете бити сигурни да су тестирани и да раде доследно на преко 40 клијената е-поште.

Пријавите се на демонстрацију Стрипо Едитор-а

Откривање: повезујем се са својим фирма за маркетиншко саветовање који дизајнира и примењује е-поруке за више клијената за водеће брендове у практично сваком провајдеру услуга е-поште. Такође сам члан Стрипо и користим своју везу у овом чланку.