Електронний маркетинг і автоматизаціяВідео з маркетингу та продажів

Розуміння проблем (та розчарувань) HTML-дизайну електронної пошти

Якщо ви відкриваєте систему керування вмістом для створення веб-сторінок, це досить простий процес. Підтримка сучасних веб-браузерів 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 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>

Web 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, монітор кампанії, AWeber, eSputnik, прогноз та Gmail. Найкраще, що шаблони Stripo постачаються з тестами візуалізації електронної пошти, тож ви можете переконатися, що вони перевірені та стабільно працюють у понад 40 клієнтах електронної пошти.

Увійдіть до демо-версії редактора Stripo

Douglas Karr

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

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

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