Понимание проблем (и разочарований) HTML-дизайна электронной почты

Если вы откроете систему управления контентом для создания веб-страниц, это довольно простой процесс. Современные веб-браузеры поддерживают HTML, CSS и JavaScript. строгий набор веб-стандартов. И на самом деле это всего лишь несколько браузеров, о которых дизайнерам нужно беспокоиться. Конечно, есть исключения… и некоторые простые обходные пути или функции, специфичные для этих браузеров.

Из-за общих стандартов действительно легко разрабатывать компоновщики страниц в системах управления контентом. Браузеры соответствуют HTML5, CSS и JavaScript… и разработчики могут создавать невероятно надежные решения для создания веб-страниц, которые реагируют на устройства и согласуются между браузерами. Два десятилетия назад практически каждый веб-дизайнер использовал настольное программное обеспечение для разработки веб-страниц. Теперь веб-дизайнеру довольно редко приходится разрабатывать веб-страницу — чаще всего они разрабатывают шаблоны и используют редакторы в системах контента для заполнения контента. Редакторы веб-сайтов великолепны.

Но редакторы электронной почты безнадежно отстают. Вот почему…

Разработка электронной почты в формате HTML намного сложнее, чем для веб-сайта

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

• Нет стандартов – НЕТ строгого соблюдения какой-либо сети стандартов почтовыми клиентами, которые отображают электронную почту в формате HTML. На самом деле практически каждый почтовый клиент и каждая версия каждого почтового клиента действует иначе. Некоторые будут уважать CSS, внешние шрифты и современный HTML. Другие учитывают некоторые встроенные стили, отображают только набор шрифтов и игнорируют все, кроме структур, управляемых таблицами. На самом деле сейчас довольно смешно, что никто не работает над этой проблемой. В результате разработка шаблонов, которые последовательно отображаются на клиентах и ​​устройствах, стала крупным бизнесом и может быть довольно дорогостоящей.
• Безопасность почтового клиента — Буквально на этой неделе Apple Mail была обновлена, чтобы по умолчанию блокировать все изображения в электронных письмах в формате HTML, которые не встроены в электронное письмо. Вы либо даете разрешение загружать их по электронной почте за раз, либо должны включить настройки, чтобы отключить этот параметр. Наряду с настройками безопасности почтового клиента есть и корпоративные настройки.
• IT Security – Ваша ИТ-команда может ввести строгие правила в отношении того, какие объекты на самом деле могут отображаться в электронном письме. Если ваши изображения, например, поступают из определенного домена, который не занесен в белый список корпоративного брандмауэра, изображения просто не будут отображаться в вашей электронной почте. Время от времени нам приходилось разрабатывать электронные письма и размещать все изображения на сервере корпорации, чтобы их собственные сотрудники могли видеть изображения.
• Поставщики услуг электронной почты – Что еще хуже, разработчики электронной почты, которые поставщики услуг электронной почты (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 для Интернета Vs. Эл. адрес

Если вам нужен пример, иллюстрирующий сложность дизайна электронной почты по сравнению с веб-сайтом, вот прекрасный пример из статьи Mailbakery. 19 больших различий между электронной почтой и веб-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>

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

Как избежать проблем с дизайном электронной почты

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

1. Дизайн шаблона – Создайте шаблон с различными макетами и блоками контента, которые охватывают все стили, которые вы когда-либо хотели использовать в своих электронных письмах. Когда мы внедряем клиента, мы всегда подталкиваем его к создать письмо на будущее – не только следующая кампания по электронной почте, которая разослана. Таким образом, мы можем полностью спроектировать, разработать, протестировать и внедрить необходимые обходные пути. до они когда-либо отправляли первое электронное письмо.
2. Тестирование шаблона – Понимание того, какие почтовые клиенты используют ваши подписчики, и обеспечение того, чтобы ваша электронная почта в формате HTML была полностью протестирована на мобильных и настольных устройствах, имеет решающее значение перед развертыванием любого шаблона. Мы можем разработать электронное письмо буквально из макета фотошопа… но его нарезка и нарезка в управляемый таблицей кросс-почтовый клиент необходимы для развертывания оптимальных и последовательных дизайнов электронной почты.
3. Внутреннее тестирование – После того, как ваш шаблон разработан и протестирован, его следует отправить во внутренний исходный список внутри организации для проверки и утверждения. Вы даже можете начать с очень ограниченного подмножества людей, чтобы сначала убедиться, что нет проблем с брандмауэром или безопасностью, связанных с внутренней визуализацией электронной почты. Если это создание экземпляра для нового поставщика услуг электронной почты, вы даже можете обнаружить некоторые проблемы с фильтрацией или блокировкой, связанные даже с получением вашей электронной почты в папку «Входящие».
4. Управление версиями шаблона – Не меняйте свои макеты или проекты, пока не поработаете над новой версией вашего шаблона, которую можно спроектировать, должным образом протестировать и развернуть. Многие компании любят уникальные дизайны для каждой кампании… но для этого необходимо, чтобы каждое электронное письмо было спроектировано, разработано и развернуто для каждой кампании. Это добавляет массу времени к внутреннему процессу электронного маркетинга. И вы рискуете не понять, какие элементы в вашем электронном письме работают лучше, чем какие-то нет. Последовательность — это не только способ упростить процесс, она также важна для поведения ваших подписчиков.
5. Исключения для поставщиков услуг электронной почты – Практически у каждого поставщика услуг электронной почты есть средства для решения проблем, возникающих в их конструкторе электронной почты. Мы часто можем добавить необработанный CSS в учетную запись — или даже иметь блок контента, который должен быть включен в каждое электронное письмо — для того, чтобы компания могла использовать встроенный редактор электронной почты и не нарушать дизайн вашего электронного письма. Конечно, это может потребовать некоторого обучения и контроля процесса для развертывания этих шагов, чтобы гарантировать их соблюдение. Или — вы можете буквально просто захотеть разработать свой дизайн электронной почты в решении, которое доказало свою работоспособность на разных клиентах и ​​устройствах, а затем вставить его обратно в ваш поставщик услуг электронной почты.

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

Поскольку платформы почтовых сервисов плохо справились с созданием и поддержкой кросс-клиентских и кросс-девайсных компоновщиков, на рынке появилось несколько отличных платформ. Один из них, который мы широко использовали, это Полоска.

Stripo — это не просто конструктор электронной почты, у них также есть библиотека из более чем 900 шаблонов, которые можно легко импортировать. После того, как вы создадите электронное письмо, вы можете отправить электронное письмо более чем 60 ESP и почтовым клиентам, включая Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook и Gmail. Лучше всего шаблоны Stripo поставляются с включенными тестами рендеринга электронной почты, поэтому вы можете убедиться, что они протестированы и работают стабильно в более чем 40 почтовых клиентах.

Вход в демоверсию редактора Stripo

Раскрытие информации: я ссылаюсь на свой маркетинговая консалтинговая компания который разрабатывает и развертывает кросс-клиентские электронные письма для ведущих брендов практически любого поставщика услуг электронной почты. Я также являюсь партнером Полоска и я использую свою ссылку в этой статье.