Несмотря на то, что отраслевая статистика показывает, что более 50% писем открывается с мобильных устройств, желание бренда обеспечить оптимальное качество обслуживания клиентов не всегда достаточно сильно, чтобы убедить его перейти на адаптивный дизайн электронных писем.
По данным BlueHornet, 70% потребителей немедленно удаляют электронные письма, которые плохо отображаются на мобильных устройствах. Если эта статистика недостаточно убедительна, чтобы изменить внутреннее мышление вашей компании, подумайте вот о чем: быстрее создать электронное письмо на основе адаптивного шаблона электронной почты, чем на основе традиционного HTML-шаблона.
Эффективность - это ключ к успеху. Руководство прислушивается, когда есть более быстрый способ отправить электронное письмо. Эффективность - основная причина, по которой многие розничные электронные письма часто содержат только изображения без какой-либо оптимизации для HTML-текста, даже несмотря на то, что большинство почтовых клиентов по умолчанию блокируют изображения.
Первоначальный переход к адаптивному дизайну электронной почты может потребовать инвестиций в ресурсы для дизайна и кодирования, но как только новый шаблон будет готов, спроектировать и создать электронное письмо станет быстрее.
Что делает это быстрее?
Почему создать адаптивное письмо быстрее, чем письмо на основе традиционного шаблона?
- Для создания адаптивного электронного письма требуется всего лишь отредактировать несколько строк кода, а не создавать каждый раз таблицы или новые макеты дизайна.
- В адаптивных электронных письмах используется больше текста HTML, что упрощает внесение изменений после создания электронного письма.
- Отзывчивые электронные письма основаны на одном предопределенном шаблоне для всех размеров экрана, поэтому вы можете избежать создания уникальной версии для каждого устройства.
- Адаптивные электронные письма с сохраненными макетами области содержимого используют существующий HTML, поэтому он позволяет редактировать только несколько строк сценария. Это оптимизирует процесс контроля качества, поскольку исключает определенный HTML-код, который обычно проверяется при использовании традиционного шаблона.
- Адаптивные электронные письма имеют более структурированный шаблон и более предопределены, чем традиционный шаблон, что экономит время как при проектировании, так и при создании.
Дизайн
Последнее преимущество, упомянутое выше, заключается в том, что мы часто сталкиваемся с сопротивлением со стороны команды графического дизайна. Тем не менее, мы работали с нашей творческой командой над созданием различных областей контента шаблонов, которые по-прежнему предоставляют значительную свободу творчества. Взгляните на следующий адаптивный шаблон, который включает в себя несколько вариантов макетов области контента.
Ниже приведено электронное письмо, созданное на основе приведенного выше шаблона, показывающее отображение версий как для настольного компьютера, так и для мобильного телефона. (Nebraska Furniture Mart - клиент DEG, моего работодателя).
Версия для настольного компьютера (слева) и мобильная версия (справа) одного и того же шаблона адаптивного электронного письма.
Вы заметите, что макет содержимого электронного письма не совсем отражает концепцию шаблона, описанную выше. Это связано с тем, что шаблон предназначен для обеспечения общего внешнего вида, а области сохраненного контента (A, B, C, D и т. д.) позволяют создать гибкий дизайн электронного письма. Путем изменения порядка, добавления и/или удаления различных областей контента для каждой кампании создается уникальный макет электронной почты.
В конкретном электронном письме, показанном выше, используется комбинация C, D, C, A, A, C, A, A, C, C из шаблона. Обратите внимание, что C может иметь различную высоту и масштаб для соответствия отзывчивому дисплею.
Создавая варианты макетов области контента, творческий аспект дизайна не теряется. Любая комбинация этих областей содержимого приводит к новому виду дизайна и не создает впечатление шаблона. В зависимости от вашего бренда я рекомендую несколько макетов области контента (которые можно сохранить), чтобы по крайней мере разместить в электронном письме разное количество продуктов. Например, в одном электронном письме вы можете указать один продукт (макет области контента C выше); но в другом случае вы можете продемонстрировать четыре (макет области содержимого B выше).
Код
После того как вы поработали со своей командой дизайнеров над созданием адаптивных концепций, вы готовы к кодированию. Здесь вы можете найти следующее препятствие. Поскольку дизайн адаптивного электронного письма является относительно новым, и у вас ограниченный бюджет ресурсов (не так ли?), у вас может не быть кого-то, кто мог бы написать код шаблона адаптивного электронного письма и стилей для сохраненных областей контента. Электронная почта уже уникальна в своих требованиях к кодированию, но адаптивность делает ее еще более уникальной.
Если ваша команда дизайнеров или инженеров не может помочь с этой задачей, вам может потребоваться обратиться к третьей стороне (например, подрядчику или агентству), чтобы закодировать исходный шаблон и области контента, а также обучить вас тому, как лучше всего это сделать. чтобы использовать его.
После создания шаблона давайте посмотрим, как обновить код. Преимущество изменения кода для сохраненных областей контента заключается в том, что оно не требует каких-либо знаний HTML. Таким образом, шаги по созданию электронного письма могут быть такими простыми, как: 1) выбрать области контента на основе разработанного макета; 2) подготовить и загрузить изображения; и 3) изменить несколько строк кода.
Создание электронного письма с использованием традиционных шаблонов может потребовать глубоких знаний HTML, чтобы форматирование правильно отображалось у различных интернет-провайдеров; но с адаптивным шаблоном изменение нескольких строк кода на самом деле означает обновление контента.
Как вы можете видеть в следующем коде (для одной из областей сохраненного контента для приведенного выше шаблона), пользователю, обновляющему контент, необходимо только обновить информацию о продукте, такую как имя, ссылка на изображение, альтернативный тег, цена., описание и т. д. Стиль и форматирование этих элементов сохраняются как часть настройки шаблона, что упрощает их изменение без необходимости знания HTML.
Почему вам следует перейти на адаптивные электронные письма? Потому что
Умение быстро разрабатывать и создавать электронные письма всегда имеет решающее значение, но в преддверии сезона отпусков оно становится более важным, чем когда-либо.
Итак, в следующий раз, когда вы столкнетесь с вопросом: «Почему нам следует переходить на адаптивные электронные письма?» вы можете ответить:
- “Потому что мы сможем создавать наши электронные письма быстрее”.
- “Потому что подписчики откажутся, если мы этого не сделаем”.
- “Потому что большинство наших подписчиков открывают сайт с мобильного устройства.”
- “Потому что процент открытий увеличивается, когда электронные письма отвечают”.
Теперь нужно обновить ваш веб-сайт, чтобы он реагировал на клики пользователей!