Ограничения при использовании пользовательских HTML-шаблонов в Mailchimp

0

В этой статье мы расскажем о типах контента, которых следует избегать в дизайне письма электронной почты, и о том, что использовать вместо этого.

Большинство почтовых клиентов не поддерживают все типы HTML-контента, которые можно встретить в Интернете. Веб-браузеры могут отображать особые скрипты, анимацию и сложные навигационные меню, в то время как типичный почтовый ящик не предназначен для работы с этим типом контента.

Технология просмотра писем почтового клиента не так современна, как просмотр веб-страниц браузера. Браузеры часто обновляются и зачастую они отображают интерактивный, динамический контент. Но интерактивные элементы, такие как Flash, JavaScript или HTML-формы, не будут работать в большинстве почтовых ящиков.

В таблице ниже приведены примеры поддерживаемого и не рекомендованного контента.

Безопасный тип контента Используйте с осторожностью Не используйте в рассылке
  • статические макеты на основе таблиц
  • HTML-таблицы и вложенные таблицы
  • ширина шаблона 600px – 800px
  • простой встроенный CSS
  • безопасные веб-шрифты
  • фоновые изображения
  • пользовательские веб-шрифты
  • широкие макеты
  • карты изображений
  • встроенный CSS
  • JavaScript
  • <IFRAME>
  • Flash
  • встроенные аудио и видео
  • формы
  • <div> слои

Используйте с осторожностью

Вы можете включить определенные элементы, такие как фоновые изображения и пользовательские шрифты, в свои шаблоны Mailchimp. Не все почтовые клиенты поддерживают эти элементы, поэтому тщательно просмотрите и протестируйте свои кампании, прежде чем отправлять их всей аудитории.

  • Анимированные картинки

Некоторые почтовые клиенты не поддерживают анимированные GIF-файлы, но если вы хотите включить GIF-файл в свою кампанию, вы можете вставить его непосредственно из Giphy.

Если вы загружаете GIF сразу в Mailchimp, то лучше сначала отредактировать анимационный контент. Встроенный редактор фотографий Mailchimp изменяет файлы изображения, чтобы была возможность редактировать их потом. Этот процесс создан не для анимированного контента, поэтому может привести к искажению и порче GIF-файлов.

  • Фоновые изображения

Mailchimp в своих шаблонах поддерживает фоновые изображения в разделах preheader, header, body, column и footer. Если используется собственный HTML-шаблон, в него можно добавить фоновое изображение, используя компоновщик шаблонов Mailchimp. Фоновые изображения поддерживаются не всеми почтовыми клиентами и ​​могут отображаться по-разному на мобильных устройствах. Поэтому важно внимательно просмотреть и протестировать свои кампании, прежде чем отправлять их общей аудитории.

  • Веб-шрифты

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

В таблице ниже показано, какие почтовые клиенты поддерживают и не поддерживают веб-шрифты.

Поддерживают веб-шрифты Не поддерживают веб-шрифты
  • Apple Mail
  • Lotus Notes 8
  • Outlook 2011 for Mac
  • iOS Mail
  • Outlook 2016
  • Android App
  • Android Mail 2.3, 4.2, 4.4
  • Lotus Notes 7, 8.5
  • Gmail
  • Yahoo!
  • Outlook.com, 2003, 2007, 2010, 2013
  • Thunderbird
  • AOL
  • Blackberry
  • Alto
  • IBM Notes 9

 

  • Широкие шаблоны

Подписчики часто открывают письма на мобильных устройствах или на панели предварительного просмотра почтового клиента. Панели просмотра электронной почты узкие, поэтому они обрезают сообщение, если оно шире 600-800 пикселей.

Не используйте в рассылке

Следующие элементы, о которых мы расскажем, заблокированы почти всеми основными почтовыми клиентами. Поддержка либо крайне ограничена, либо отсутствует.

  • JavaScript

JavaScript – это язык программирования, который делает веб-контент интерактивным. Он часто присутствует на веб-сайтах, но подавляющее большинство почтовых клиентов блокируют скрипты, поскольку они могут скрывать вредоносный контент. Избегайте всего JavaScript.

Попробуйте заменить его картинками, чтобы сделать контент более привлекательным.

  • Элементы iframe

<iframe> (встроенный фрейм) – это элемент HTML, который встраивает контент с одного веб-сайта в другой. Встроенные фреймы часто используются для вставки рекламы, видео, аудио или форм в другие веб-сайты. Iframes часто содержат собственные скрипты, поэтому большинство почтовых клиентов блокируют их.

Вместо использования этого элемента, сделайте ссылку на сайт с информацией, которую вы хотите отобразить в своей кампании.

  • Flash анимация

Flash отображает анимацию и графику на веб-сайтах, но большинство почтовых клиентов блокируют такую информацию.

Вместо Flash анимации можно использовать GIF-файлы, чтобы разнообразить содержимое письма.

  • HTML формы

Текстовые поля, переключатели и флажки являются простыми элементами формы HTML, но для кнопки отправки часто требуется JavaScript. Некоторые почтовые клиенты будут отображать формы, но, к сожалению, подписчики не смогут их отправить. Избегайте HTML-форм и рассмотрите альтернативу.

Вместо этого попробуйте выполнить простой опрос или интегрированные опросы Mailchimp. Также в письмо можно добавить ссылку на отдельную форму вне письма.

  • Встроенный аудио- и видео контент

Автозапуск и воспроизведение по клику не будут работать во входящих, если почтовый клиент вашего подписчика не поддерживает HTML5 теги <video> и <audio>. Только один крупный почтовый клиент, Apple Mail, поддерживает эти теги, поэтому лучше избегать встроенных аудио и видео файлов и искать альтернативу.

Вместо встроенного контента, поделитесь ссылкой на видеоплеер с мерж тегами Mailchimp или видеохостинг.


Обратите внимание!

Если вы знакомы с кодированием или сотрудничаете с разработчиком, тогда можете создавать собственные пользовательские шаблоны. Эти шаблоны могут содержать HTML-элементы, которые не всегда поддерживаются почтовыми клиентами. Поэтому так делать не рекомендуется. Имейте в виду, что служба поддержки Mailchimp не сможет помочь решить проблемы, связанные с пользовательским кодом.

Если в письме используется неподдерживаемый элемент, тогда нужно сегментировать свою аудиторию по почтовому клиенту и разрабатывать дизайн для конкретной программы. Например, можно использовать фоновое изображение для подписчиков AOL Mail, поскольку AOL Mail поддерживает фоновое изображение CSS.

Перед отправкой письма перепроверьте, какие HTML-элементы поддерживает тот или иной почтовый клиент. Тогда вероятность того, что ваша кампания будет отображаться и работать корректно будет выше.


Если у вас есть вопросы по стратегии email-маркетинга и работе с mailchimp, воспользуйтесь консультацией.

Банан Вениаминович, главный в блоге Mailchimplovers. Пишет статьи, любит Mailchimp, делает жизнь талантливых гуманитариев проще в мире сервисов и программ.