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

Дата: 2020-08-24 | Время чтения: 11 минут (1991 слово)

email_shablony_part2.jpg

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

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

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

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

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

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

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

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

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

harrys

American_Eagle_Outfitters

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

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

spring

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

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

Banana_Republic

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

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

Sugarfix

Everlan

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

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

Email_Uplers

Anthropolgie

  • Glitch-эффект

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

Steve_Madden

  • Минимализм

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

Code_School

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

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

Spotify

Church_Media

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

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

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

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

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

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

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

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

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

HTML-тегиОписание
head и /headПредназначен для хранения других элементов, которые помогают браузеру работать с данными. Этот тег не виден конечному пользователю.
body и /bodyЭто тело вашего письма, и всё, что размещено здесь, видно подписчику.
tableТег для создания таблицы.
trСоздаёт строку в таблице.
tdСоздаёт ячейку внутри строки.
aИспользуется для создания гиперссылки.
imgУказывает, какое изображение будет использоваться.
h1,h2,h3Теги для форматирования заголовков.
pОпределяет текстовый абзац.
olСоздаёт упорядоченный или нумерованный список.
ulСоздаёт неупорядоченный или маркированный список.
liОпределяет отдельный пункт списка.
spanВыделяет отдельные строки, символы и любые другие строчные элементы для дальнейшего изменения их оформления с помощью стилей.

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

Вёрстка через 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 — вы можете обратиться к нам.

Поделиться:

Если статья была вам полезна, поделитесь с вашими друзьями ;)
Автор: Anna Volkova

Вам может быть интересно:

Как Altcraft Marketing помог увеличить Группе «АльфаСтрахование» уровень повторных..

В новой статье рассказываем как с помощью автоматизации маркетинга и платформы Altkraft Marketing группа «АльфаСтрахование» увеличила у..

Читать далее
7 трендов в B2B маркетинге в 2020 году

Перевели статью OpenView о трендах в B2B маркетинге. В 2020 году не обойтись без персонализации, машинного обучения и лидеров мнений.

Читать далее
On-premise платформы для автоматизации маркетинга и стратегической безопасности ко..

Рассказываем как с помощью маркетинговых on-premise платформ повысить безопасность данных в компании.

Читать далее