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

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

If you open up a content management system to build web pages, it’s a pretty simple process. Modern web browsers support ХТМЛ-, ЦСС, and JavaScript to strict web standards. And they’re just a handful of browsers that designers need to worry about. There are exceptions, of course… and some simple workarounds or functions specific to those browsers.

Because of the overall standards, it’s straightforward to develop page builders in content management systems. Browsers comply with HTML5, CSS, and JavaScript… and developers can build incredibly robust solutions to create web pages that are responsive to devices and consistent across browsers. Two decades ago, virtually every web designer used desktop software to develop web pages. Now, it’s pretty uncommon for a web designer to develop a web page – more often than not, they’re developing templates and using editors in content systems to fill in the content. Website editors are fantastic.

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

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

If your company wants a beautiful HTML email designed, the process is exponentially more complex than building out a web page for several reasons:

  • Без стандарда – There is NO strict adherence to web standards by email clients that display HTML email. Virtually every email client and every version of every email client acts differently. Some will honor CSS, external fonts, and modern HTML. Others honor some inline styling, only display a collection of fonts, and ignore everything but table-driven structures. It’s quite ridiculous that no one is working on this issue. As a result, designing templates that render across clients and devices consistently has become big business and can be quite expensive.
  • Сигурност клијента е-поште – Recently, Apple Mail updated to block all images in HTML emails by default that are not embedded in the email. You either give permission to load them an email at a time or have to enable the settings to disable this setting. Along with email client security settings, there are also corporate settings.
  • ИТ сигурност – Ваш ИТ тим може применити строге скупове правила о томе који објекти се заиста могу приказати у е-поруци. Ако ваше слике, на пример, потичу са одређеног домена који није на белој листи у корпоративном заштитном зиду, слике се једноставно неће појавити у вашој е-пошти. Понекад смо морали да развијемо мејлове и да угостимо све слике на серверу корпорације како би њихови запослени могли да виде слике.
  • Добављачи услуга е-поште – Да ствари буду још горе, креатори е-поште који провајдери услуга е-поште (ЕСПs) actually introduce problems rather than constrain them. While they promote their editor is What You See Is What You Get (WYSIWYG), the opposite is often true with email design. You’ll preview the email in their platform, and the recipient will see all the design problems. Companies often unknowingly opt for a feature-rich editor instead of a locked-down one, thinking one has more features. The opposite is true… if you want emails that render consistently across all email clients, the simpler, the better, because less can go wrong.
  • Рендеринг клијента е-поште – Hundreds of email clients render HTML differently across desktops, apps, mobile devices, and webmail clients. While your nifty text editor on your email service provider may have a setting to put a heading in your email, the padding, margins, line height, and font size may differ for every email client. As a result, you have to dumb down the HTML and code every single element differently (see the example below) – and often write in exceptions that are email client-specific – to get an email to render consistently. There’s no simple block types, you have to do table-driven layouts that are the equivalent of building for the web thirty years ago. It’s why any new layout requires both development and cross-email client and device testing. What you see in your inbox may be totally different what I see in my inbox. That’s why rendering tools like Е-пошта о киселини or Лакмус су неопходни да би се осигурало да ваши нови дизајни функционишу на свим клијентима е-поште. Ево кратке листе популарних клијената е-поште и њихових механизама за приказивање:
    • Користи Аппле Маил, Оутлоок за Мац, Андроид Маил и иОС Маил ВебКит.
    • Користите Оутлоок 2000, 2002 и 2003 Интернет екплорер.
    • Користите Оутлоок 2007, 2010 и 2013 Мицрософт Ворд (да, Реч!).
    • Клијенти веб поште користе одговарајући механизам свог претраживача (на пример, Сафари користи ВебКит, а Цхроме користи Блинк).

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

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

Email HTML

We must build a series of tables incorporating all the inline styling necessary to place the button properly and ensure it looks good across email clients. An accompanying style tag will also be at the top of this email to incorporate the classes.

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

Можемо да користимо екстерну листу стилова са класама да дефинишемо мала слова, поравнање, боју и величину ознаке сидра која се појављује као дугме.

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

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

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

  1. Тестирање шаблона – Understanding the email clients your subscribers utilize and ensuring that your HTML email is fully tested across mobile and desktop is critical before deploying any template. We can design an email literally from a Photoshop layout… but slicing and dicing it into a table-driven, cross-email client is essential to deploying email designs that are optimal and consistent.
  2. Интерно тестирање – Када је ваш шаблон дизајниран и тестиран, треба га послати на интерну почетну листу унутар организације да прегледа и одобри. Можда бисте чак желели да почнете са веома ограниченом подгрупом појединаца да бисте прво осигурали да нема заштитних зидова или безбедносних проблема повезаних са интерним приказивањем е-поште. Ако ово ствара инстанцу на новом провајдеру услуге е-поште, можда ћете чак пронаћи неке проблеме са филтрирањем или блокирањем који су повезани чак и са слањем ваше е-поште у пријемно сандуче.
  3. Версионинг шаблона – Немојте мењати своје изгледе или дизајне без рада на новој верзији шаблона која се може дизајнирати, правилно тестирати и применити. Многа предузећа воле једнократне дизајне за сваку кампању... али то захтева да свака е-пошта буде дизајнирана, развијена и примењена за сваку кампању. Ово додаје тону времена интерном процесу маркетинга путем е-поште. И ризикујете да не разумете који елементи у вашој е-пошти имају добар учинак у односу на елементе који нису. Доследност није само начин да олакшате процес, већ је важна и за понашање ваших претплатника.
  4. Изузеци добављача услуга е-поште – Практично сваки провајдер услуга е-поште има средства да заобиђе проблеме које уводи њихов креатор е-поште. Често можемо да додамо сирови ЦСС на налог – или чак да имамо блок садржаја који мора да буде укључен у сваку е-пошту – како би компанија користила уграђени уређивач е-поште и да не би оштетила дизајн ваше е-поште. Наравно, то може захтевати извесну обуку и контролу процеса да би се ти кораци применили како би се осигурало да се поштују. Или – можда ћете буквално само желети да развијете свој дизајн е-поште у решењу за које је доказано да функционише на свим клијентима и уређајима, а затим га налепите назад у свог добављача услуга е-поште.

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

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

Стрипо није само креатор е-поште, они такође имају библиотеку од преко 900 шаблона који се лако могу увести. Када дизајнирате е-пошту, можете да пошаљете е-пошту на 60+ ЕСП-ова и клијената е-поште, укључујући Интуит Маилцхимп, ХубСпот, Кампања Монитор, АВебер, eSputnik, Outlook, и гмаил. Best of all Stripo templates come with the email rendering tests included so you can ensure they’ve been tested and work consistently across over 40 email clients.

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

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

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