Полное руководство по созданию шаблонов для 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 писем.
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 — вы можете обратиться к нам.
Вам может быть интересно:
Перевели статью Talkwalker о лучших маркетинговых digital-стратегиях для сферы финансовых услуг. О том, как продвигать банки, страховые и брокерские компании, читайте в нашей статье.
Читать далееВ новой статье рассказываем, как компания «Открытие Брокер» полностью автоматизировала свой маркетинг с помощью платформы Altkraft Marketing.
Читать далееО том, как PREMIER настроил броадкасты и автоматизировал цепочки коммуникаций.
Читать далее