Полное руководство по созданию шаблонов для email-рассылки, часть 2

Ключевые аспекты, которые следует учитывать при разработке email-писем

Адаптивные email-письма

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

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

• Прописывать текст прехедера.
• Не делать тело письма слишком большим.
• Использовать чёткие и понятные кнопки с call-to-action.
• Для мобильной версии использовать более крупный шрифт, чем на десктопной версии письма.
• Изменять размер изображений пропорционально размеру всего макета.

Тренды в дизайне email-писем в 2020 году

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

• Градиентные фоны

В начале 2013 года это был один из самых популярных стилей в веб-дизайне, но он отошёл на задний план из-за нового тренда — материального дизайна. Сейчас, благодаря таким брендам как Harry'S и American Eagle Outfitters, градиентные фоны с двумя контрастными цветами вновь возвращаются в шаблоны email.

• Двойная экспозиция

Довольно популярный стиль наложения двух различных изображений для создания совершенно новой формы визуального носителя в digital-среде. Сейчас двойная экспозиция широко используется в рекламных баннерах, но уже есть несколько удачных примеров применения этого стиля в шаблонах для письма. Мы считаем, что совсем скоро это может стать трендом электронной почты.

• Типографика

Время, когда email-дизайнеры применяли пользовательские шрифты, ушло в прошлое. Тем не менее, они начали использовать большой жирный текст поверх заглавного изображения, которое является частью тела письма. Этот тренд можно увидеть в email-рассылках у бренда Banana Republic.

• Использование белого пространства

Использование белого пространство улучшает читабельность письма и снимает напряжение с глаз при чтении текста. На самом деле это сложно назвать тенденцией дизайна электронной почты, так как специалисты по всему миру в течение последних лет придерживаются «чистого пространства». Но несмотря на это всё больше брендов стараются использовать его в своих рассылках. Хорошие примеры можно увидеть у таких брендов, как Sugarfix и Everlane.

• Иллюстрации

Ещё одним излюбленным приёмом среди большинства email-дизайнеров является использование иллюстраций в своих письмах. Благодаря им вокруг бренда формируется непринуждённая атмосфера, из-за которой бизнес-цели отходят на второй план. Отличный пример писем с иллюстрациями есть у Email Uplers и Anthropologie.

• Glitch-эффект

Под этим приёмом подразумевается эффект «битой» картинки, засвеченного изображения, телевизионных помех или геометрических искажений. В последнее время Glitch-эффект всё чаще используют при разработке веб-страниц, логотипов и других творческих форматов для воссоздания ретро-образа. Этот приём можно увидеть в email-рассылках у Steve Madden, приуроченных к акции Cyber Monday.

• Минимализм

Этот тренд немного схож с белым пространством внутри email-писем. В минималистических email-письмах принято использовать минимальный набор элементов дизайна. Например, в рассылке от Code School есть только изображения героев курсов, небольшое описание и кнопка с call-to-action.

• Контрастные цвета и пастельные тона

Одной из самых неожиданных тенденций в дизайне email-писем является сочетание пастельных и мягких фонов с резкими и контрастными элементами. Этот приём отлично привлекает внимание пользователей к важным в письме деталям.

• Стоковые изображения, подходящие теме

Стоковые изображения — это настоящее спасение для агентств, которые не могут позволить себе нанимать профессионального фотографа под каждую тему рассылок. Однако у стоковых фотографий печальная известность из-за того, что бренды зачастую используют устаревшие, слишком заезженные и не подходящие под тему рекламной кампании изображения. Из-за этого контент в email-письмах выглядит нереалистичным, а сам канал теряет доверие. Сейчас бренды пытаются исправить ситуацию и всё чаще в своих рассылках используют нишевые и релевантные изображения.

Email-рассылки и landing page: единый дизайн

Любая email-кампания будет неполной, если вы сосредоточитесь только на проработке шаблона письма. Как правило, email-письма имеют небольшой формат и рассказать о всех нюансах невозможно. Поэтому цель всех рассылок — это вызвать у подписчика интерес и перенаправить его на landing page. Подписчики ожидают плавного перехода по всем каналам, и поэтому большинство брендов стремятся поддерживать единый дизайн между своими рассылками и landing page. Для этого необходимо использовать один и тот же стиль в дизайне и изображениях, а также одинаковые тона как в рассылках, так и на landing page.

Отличный пример единого дизайна в email-письме и landing page у бренда J. Hilburn.

Вёрстка шаблона email рассылки

После того как вы подготовили макет вашего будущего email-письма пришло время перейти к его вёрстке. Письмо, идеально отображаемое на всех почтовых сервисах и устройствах, — мечта любого email-маркетолога. Давайте разберёмся как этого достичь.

Основные теги

Email-маркетологу не обязательно глубоко погружаться в вёрстку email писем, но имея какие-то базовые знания о часто используемых HTML-тегах, вы можете самостоятельно устранять незначительные ошибки в шаблонах HTML писем.

Какие могут возникнуть проблемы

Вёрстка через div или табличная

Первоначально HTML использовался для вёрстки веб-страниц, и только спустя какое-то время при помощи HTML стали создаваться email-письма. В то время как технологии разработки сайтов сильно развились и улучшились, email-письма всё еще создаются при помощи табличной вёрстки. Такие почтовые клиенты как Apple Mail, iOS mail, Gmail и Yahoo, в отличие от Microsoft Outlook, поддерживают HTML-тег div. Из-за Microsoft Outlook верстальщикам всё ещё приходится использовать табличную вёрстку, которая не поддерживает теги div. Каждый кусок кода с div может быть вложен между тегами td, но это увеличивает вес письма. Напомним, что такие почтовые сервисы как Gmail и Yahoo могут обрезать ваше письмо, если оно весит больше положенного. Лимит веса для Gmail — 120 кб, для Yahoo — 100 кб.

Подстраиваем вёрстку для максимального количества почтовых клиентов или только для конкретных?

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

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

Немного о CSS

Разработчики веб-страниц указывают таблицы стилей либо в разделе head, либо связывают их с внешней таблицей стилей. При вёрстке email-писем разработчики такой свободой не обладают и вынуждены их встраивать. Это увеличивает вес кода, но снижает общую скорость загрузки письма.

Какие инструменты использовать для тестирования шаблона рассылок

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

Тестирование email-рассылок

• EmailonAcid.
• Litmus.

Проверка HTML-кода

• HTMLemailcheck.

CSS-инлайнинг

• Litmus Builder.
• CSS inliner by Campaign Monitor.
• CSS inliner by HTMLemail.io.

Доступность

• IA Toolkit.
• Google’s Accessibility Developers Tools.
• Wave Tool.

4 вещи, которые нужно учитывать при вёрстке email-писем

• Используйте семантический код: чаще всего email-письма просматривают на мобильных устройствах. Поэтому для удобства лучше использовать соответствующие семантические коды для заголовков и абзацев.
• Добавляйте соответствующие заголовки: заголовки помогают читателю ориентироваться в тексте письма, также они упрощают процесс чтения.
• Используйте таблицы в качестве презентации: добавляйте элемент role= "Presentation" к каждой таблице. Благодаря ему программа чтения с экрана будет читать содержимое всего тела письма вместо отдельной ячейки.
• Делайте отступы: пробелы облегчают подписчику чтение текста письма на мобильном устройстве. Отступы также добавляют пустого пространства различным элементам и не перегружают письмо.

Ошибки, которых следует избегать при создании шаблона письма для рассылки

• Баланс между продвижением и решением проблем

Согласно inbound-маркетингу, ваши клиенты сами должны обращаться к вашему бренду, а не наоборот. Другими словами, когда они подписываются на вашу рассылку, они ждут того, что ваши продукты или услуги решат их проблемы. Некоторые маркетологи переступают черту и начинают продвигать свои предложения, в то время как главная суть «как решить проблему» отходит на задний план.

Решение: транзакционные рассылки всегда должны быть на 80% транзакционными и на 20% рекламными. Аналогичная ситуация при создании шаблона для письма для автоматизации процесса лидогенерации — основное внимание должно уделяться обучению подписчика.

• Рассылка, состоящая из одних изображений

Эту ошибку допускает большая часть email-маркетологов. Некоторые почтовые клиенты по умолчанию отключают изображения в рассылках, и если в вашем письме текст размещён только на изображениях, то есть вероятность того, что подписчики не прочитают его. Совсем плохо, когда email-маркетологи не прописывают alt-текст в изображениях.

Решение: в письме не размещайте текст только на изображениях и всегда прописывайте соответствующий alt-текст к изображениям.

• Письма с плохим форматированием текста

Пользовательские шрифты выглядят круто, но они теряют своё очарование, если они не могут отразить суть вашего письма. Некоторые шрифты хорошо смотрятся только в заголовках, в остальном же тексте они могут становится неразборчивыми. Кроме того, очень важно ставить пробелы, добавлять правильные межстрочные интервалы между словами и абзацами.

• Несоблюдение закона CAN-SPAM.

Согласно закону CAN-SPAM принятым в 2009 году, любой бренд, отправляющий маркетинговые или коммерческие email-рассылки, должен добавлять определенную информацию в футер письма. Чтобы избежать серьёзных штрафов, каждый бренд должен добавлять действительный физический адрес и ссылку на отписку от рассылки.

• Email-рассылки, которые вводят в заблуждение

Маркетологи должны придерживаться прозрачности в своих рассылках и не вводить подписчиков в заблуждение. Да, кликабельная тема письма для рассылки и call-to-action помогут вам набрать несколько дополнительных кликов, но те кто читают ваши письма могут почувствовать себя обманутыми. В результате это приведёт к резкому росту отписок от рассылок. Попасть в спам можно и из-за некоторых приёмов в оформлении рассылок.

• Отсутствие A/B тестирования

Многие маркетологи считают, что они лучше знают, какая email-рассылка нужна их подписчикам. И это в корне не правильно. Поэтому будет правильным проводить A/B-тестирование между двумя шаблонами писем, чтобы узнать как они воздействуют на подписчиков и что можно улучшить.

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

Вместо заключения

Наша команда надеется, что этот гайд от email-маркетингового агентства Uplers поможет вам создать шаблоны для рассылки, которые покорят ваших подписчиков. Если вам нужна помощь с настраиванием рассылок или с созданием автоматического Customer Journey — вы можете обратиться к нам.