Ключевые аспекты, которые следует учитывать при разработке email-писем
Адаптивные email-письма
Примерно 34% электронных писем открываются на устройствах с разными размерами дисплеев, и чаще всего на мобильных устройствах. Поэтому очень важно, чтобы ваши рассылки выглядели хорошо у всех ваших подписчиков. Из-за этого большинство маркетологов предпочитают, чтобы их письма в первую очередь красиво и органично смотрелись на мобильных устройствах.
В макете письма для мобильных устройств используется один столбец шириной 600 пикселей и адаптация элементов в два столбца для отображения на десктопной версии почты при необходимости. Кроме того, при создании адаптивного дизайна email-писем вы должны учитывать следующие факторы:
- Прописывать текст прехедера.
- Не делать тело письма слишком большим.
- Использовать чёткие и понятные кнопки с call-to-action.
- Для мобильной версии использовать более крупный шрифт, чем на десктопной версии письма.
- Изменять размер изображений пропорционально размеру всего макета.
Тренды в дизайне email-писем в 2020 году
В дизайне email-писем существуют различные стили, которые остаются актуальными до сих пор. В основном они используются в рекламных или событийных рассылках. Вот некоторые из них:
- Градиентные фоны.
В начале 2013 года это был один из самых популярных стилей в веб-дизайне, но он отошёл на задний план из-за нового тренда — материального дизайна. Сейчас, благодаря таким брендам как Harry'S и American Eagle Outfitters, градиентные фоны с двумя контрастными цветами вновь возвращаются в email-письма.
- Двойная экспозиция.
Довольно популярный стиль наложения двух различных изображений для создания совершенно новой формы визуального носителя в digital-среде. Сейчас двойная экспозиция широко используется в рекламных баннерах, но уже есть несколько удачных примеров применения этого стиля в email-рассылках. Мы считаем, что совсем скоро это может стать трендом электронной почты.
- Типографика.
Время, когда 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-маркетологу не обязательно глубоко погружаться в вёрстку писем, но имея какие-то базовые знания о часто используемых HTML-тегах, вы можете самостоятельно устранять незначительные ошибки в email-письмах.
HTML-теги и их назначение
- <head></head> — предназначен для хранения других элементов, которые помогают браузеру работать с данными. Этот тег не виден конечному пользователю.
- <body></body> — это тело вашего письма, и всё, что размещено здесь, видно подписчику.
- <table> — тег для создания таблицы.
- <tr> — создаёт строку в таблице.
- <td> — создаёт ячейку внутри строки.
- <a> — используется для создания гиперссылки.
- <img> — указывает, какое изображение будет использоваться.
- <h1>,<h2>,<h3> — теги для форматирования заголовков.
- <p> — определяет текстовый абзац.
- <ol> — создаёт упорядоченный или нумерованный список.
- <ul> — создаёт неупорядоченный или маркированный список.
- <li> — определяет отдельный пункт списка.
- <span> — выделяет отдельные строки, символы и любые другие строчные элементы для дальнейшего изменения их оформления с помощью стилей.
Какие могут возникнуть проблемы
<div > vs <table>
Первоначально 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-рассылка, которую не тестировали, может здорово сократить вашу базу подписчиков. Поэтому после того, как вы заканчиваете вёрстку письма проверяйте его. Мы подготовили список сервисов, которые помогут вам с этим.
Тестирование 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-письма просматривают на мобильных устройствах. Поэтому для удобства лучше использовать соответствующие семантические коды для заголовков <h_> и абзацев <p>.
Добавляйте соответствующие заголовки: заголовки помогают читателю ориентироваться в тексте письма, также они упрощают процесс чтения.
Используйте таблицы в качестве презентации: добавляйте элемент role= "Presentation" к каждой таблице. Благодаря ему программа чтения с экрана будет читать содержимое всего тела письма вместо отдельной ячейки.
Делайте отступы: пробелы облегчают подписчику чтение текста письма на мобильном устройстве. Отступы также добавляют пустого пространства различным элементам и не перегружают письмо.
Ошибки, которых следует избегать при создании шаблона email-письма
- Баланс между продвижением и решением проблем.
Согласно inbound-маркетингу, ваши клиенты сами должны обращаться к вашему бренду, а не наоборот. Другими словами, когда они подписываются на вашу рассылку, они ждут того, что ваши продукты или услуги решат их проблемы. Некоторые маркетологи переступают черту и начинают продвигать свои предложения, в то время как главная суть «как решить проблему» отходит на задний план.
Решение: транзакционные рассылки всегда должны быть на 80% транзакционными и на 20% рекламными. Аналогичная ситуация при создании шаблона email-письма для автоматизации процесса лидогенерации — основное внимание должно уделяться обучению подписчика.
- Рассылка, состоящая из одних изображений.
Эту ошибку допускает большая часть email-маркетологов. Некоторые почтовые клиенты по умолчанию отключают изображения в рассылках, и если в вашем письме текст размещён только на изображениях, то есть вероятность того, что подписчики не прочитают его. Совсем плохо, когда email-маркетологи не прописывают alt-текст в изображениях.
Решение: в письме не размещайте текст только на изображениях и всегда прописывайте соответствующий alt-текст к изображениям.
- Письма с плохим форматированием текста.
Пользовательские шрифты выглядят круто, но они теряют своё очарование, если они не могут отразить суть вашего письма. Некоторые шрифты хорошо смотрятся только в заголовках, в остальном же тексте они могут становится неразборчивыми. Кроме того, очень важно ставить пробелы, добавлять правильные межстрочные интервалы между словами и абзацами.
- Несоблюдение закона CAN-SPAM.
Согласно закону CAN-SPAM принятым в 2009 году, любой бренд, отправляющий маркетинговые или коммерческие email-рассылки, должен добавлять определенную информацию в футер письма. Чтобы избежать серьёзных штрафов, каждый бренд должен добавлять действительный физический адрес и ссылку на отписку от рассылки.
- Email-рассылки, которые вводят в заблуждение.
Маркетологи должны придерживаться прозрачности в своих рассылках и не вводить подписчиков в заблуждение. Да, кликабельная тема и call-to-action помогут вам набрать несколько дополнительных кликов, но те кто читают ваши письма могут почувствовать себя обманутыми. В результате это приведёт к резкому росту отписок от рассылок. Попасть в спам можно и из-за некоторых приёмов в оформлении рассылок.
- Отсутствие A/B тестирования.
Многие маркетологи считают, что они лучше знают, какая email-рассылка нужна их подписчикам. И это в корне не правильно. Поэтому будет правильным проводить A/B тестирование между двумя шаблонами писем, чтобы узнать как они воздействуют на подписчиков и что можно улучшить.
Шаблоны email-писем являются неотъемлемой частью email-маркетинговой стратегии. Понимание того, как создаются шаблоны, может помочь вам в создании лучших email-рассылок.
Вместо заключения
Наша команда надеется, что этот гайд от email-маркетингового агентства Uplers поможет вам создать email-рассылки, которые покорят ваших подписчиков. Если вам нужна помощь с настраиванием рассылок или с созданием автоматического Customer Journey — вы можете обратиться к нам.
#email маркетинг #email рассылка #сервис email рассылок #веб-дизайн #дизайн email-писем #шаблоны для email-рассылки