Как верстать письма в html

Гайд по верстке писем для email-маркетологов: виды, возможности, проверка корректности, частые ошибки

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

Этот гайд мы собрали из статей в нашем блоге:

• Гайд по верстке адаптивных писем
• AMP-технология в рассылках: плюсы и минусы
• Зачем нужна геймификация в email-рассылках
• Шаблон для рассылки или создание письма с нуля – что лучше выбрать
• Как провести тестирование писем: сервисы и рекомендации
• 27 сервисов для создания эффективной рассылки
• Как подобрать шрифт для email-рассылки
• Каким должен быть размер письма
• Как сделать макет письма

Какой бывает верстка email-рассылок

Верстка бывает только с помощью HTML-кода. Но для работы с кодом нужны знания программирования, поэтому сервисы рассылок разработали блочные редакторы для тех, кто не умеет писать код.

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

Сейчас сервисы рассылки предлагают два способа сверстать письмо: в блочном или HTML-редакторе. Разберем подробнее принцип работы, плюсы и минусы каждого.

Верстка писем в блочном редакторе

Блочный редактор – это конструктор с готовыми блоками для контента. Визуально он выглядит так ��

Слева блоки, которые можно добавить в письмо: текст, картинка, кнопка, разделитель, кнопки поделиться и ссылки на соцсети. Также есть отдельный блок, в который можно вставить HTML-код с нестандартным форматом. Например, в блочном редакторе можно сделать только 4 колонки, а вам нужно 5.

Справа макет письма. В него email-маркетолог добавляет блоки, перетаскивая их из левой части. Блоки можно ставить в разном порядке, например:

• картинка и под ней текст
• картинка слева – текст справа и наоборот
• несколько картинок в ряд и кнопками под ними и т. д.

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

Все это существенно упрощает верстку почтовых рассылок.

Пример письма, собранного в блочном редакторе за 5 минут

В таком редакторе все блоки сверстаны так, чтобы письмо адаптировалось под разные устройства. Это очень важно, потому что иначе рассылка будет плохо выглядеть с экрана смартфона.

На примере ниже видно, как хорошо подстраивается под размер экрана письмо, сверстанное в блочном редакторе Sendsay. Оно перестраивается так, чтобы текст, картинки и кнопки выглядели одинаково хорошо и читаемо.

Результаты адаптивной верстки письма в блочном редакторе 

Еще у качественных сервисов рассылки есть готовые блочные шаблоны для разных видов писем. Например, в Sendsay есть шаблоны для:

• подтверждения подписки
• приветствия
• каталога товаров
• оповещений
• акций и скидок
• новостей
• брошенной категории, корзины или просмотра

Также есть шаблоны для праздников и событий с тематическим оформлением. Например: письмо на Хэллоуин, Черную пятницу, 23 Февраля или про распродажу.

Все эти шаблоны можно редактировать на свое усмотрение 

Плюсы работы в блочном редакторе

Создать письмо можно за 15 минут без навыков программирования. Блоки уже адаптированы под десктоп и смартфон, поэтому не нужно беспокоиться о качестве верстки.

Минусы работы в блочном редакторе

Возможности ограничены функционалом редактора. Это значит, что нельзя создать письмо с нестандартным оформлением. Это можно сделать только с помощью HTML-верстки, о которой мы поговорим в следующем разделе.

Верстка рассылки в HTML-редакторе

Такая верстка позволяет сделать сложный дизайн письма, добавить интерактивные элементы и персональные подборки. Для создания такой рассылки нужен программист.

HTML-редактор в сервисе рассылки выглядит так ��

Слева – код, который задает дизайн письма, справа – вид письма для получателя.

Так HTML-редактор выглядит в сервисе Sendsay

Только с помощью HTML-верстки письма можно сделать динамические блоки с персональными подборками товаров и услуг.

Например, пользователь смотрел на сайте кроссовки, но не купил. Через час ему приходит письмо с этими кроссовками и предложением сделать заказ. Чтобы в письмо автоматически подставлялись нужные товары и услуги, нужно написать специальный код и вставить его в письмо. Готовых блоков в блочном редакторе для этого нет.

Пример верстки письма с динамическим контентом – информация о выбранном товаре автоматически подставляется в письмо

Есть два способа сделать письмо с помощью HTML:

1. Самостоятельно написать код письма – нужно нанять дизайнера, который нарисует макет, и опытного верстальщика, чтобы превратить его письмо.
2. Воспользоваться готовыми шаблонами, которые можно скачать в интернете. Этот шаблон загружают в сервис рассылки и подстраивают под себя с помощью верстальщика.

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

Верстка адаптивных элементов

Основная сложность HTML-верстки писем для рассылки – адаптивность под устройства. Если в блочном редакторе все блоки созданы так, чтобы подстраиваться под разные размеры экрана, то в HTML-редакторе это нужно делать вручную.

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

У нас есть гайд по верстке адаптивных HTML-писем для email-рассылки, в котором описаны основные правила. Если коротко, то нужно:

• использовать табличную верстку – только такой формат корректно работает во всех почтовых клиентах и браузерах
• добавлять универсальные теги и атрибуты – иначе некоторые блоки писем не распознает браузер или мобильное приложение
• использовать встроенные стили CSS – если использовать другие, то некоторые почтовые клиенты могут неправильно их отобразить
• прописывать атрибуты у всех элементов верстки – это нужно, чтобы почтовые службы не подставили свои значения, разрушив запланированную структуру письма
• задавать ширину письма – тогда на всех устройствах письмо будет помещаться в ширину экрана

Верстка интерактивных элементов

HTML-верстка email-писем позволяет добавить в рассылку интерактивные элементы с помощью AMP-технологии – блоки, с которыми пользователь может взаимодействовать. Например: сыграть в игру, полистать фото товара или оформить заказ.

АМР-технология создавалась для ускорения загрузки мобильных страниц. Позже программисты поняли: если ее использовать в почте, то читатели смогут взаимодействовать с контентом письма. Так в email-рассылках появились интерактивные блоки с мобильной веб-страницей.

Основные плюсы технологии:

• Интерактивность – увеличивает конверсию в заказ или заявку благодаря возможности совершать действия прямо внутри письма.
• Актуальность – содержимое АМР-блока можно редактировать даже после отправки, что позволяет исправлять ошибки или обновлять информацию.
• Геймификация – повышает вовлечение в рассылку за счет тестов, опросов и мини-игр.

Но минус технологии в том, что не все почтовые клиенты ее поддерживают. В России AMP-письма распознают только Gmail и Mail.ru. Для всех остальных почтовиков нужно верстать обычное письмо.

Пример геймификации в письме с помощью АМР-блока

Итак, подведем итог про особенности работы в HTML-редакторе.

Плюсы верстки в HTML-редакторе

Можно делать сложный и красивый дизайн, которого не будет ни у кого другого, добавить форму заказа, игру, опрос, тест и прочие интерактивные элементы. Также с помощью HTML-верстки создаются важные для email-маркетинга письма – подборки с контентом, который создается автоматически с учетом поведения подписчика.

Минусы верстки в HTML-редакторе

Нужен программист для написания кода. Если создавать письмо самостоятельно, то его нужно постоянно тестировать, так как первое время будут появляться ошибки – где-то текст сместится с кнопки, где-то появится код вместо элемента верстки.

Как проверить верстку письма

Перед рассылкой нужно обязательно проверить верстку, потому что у разных почтовых клиентов, браузеров и устройств разные возможности распознавания кода письма. Например, Outlook очень консервативный и не использует новые технологии верстки. Он часто не распознает сложный дизайн писем, из-за чего письмо выглядит не так, как планировал маркетолог.

Есть три основных способа проверить верстку письма для рассылки: предпросмотр в сервисе, тестовая отправка и использование сервисов для проверки.

1. Предпросмотр в сервисе рассылки

В редакторе сервиса верстки и рассылки писем должна быть функция предпросмотра. В Sendsay она есть в двух вариантах: с десктопа и смартфона – можно сразу посмотреть, как письмо будет адаптироваться под разные экраны.

2. Тестовая рассылка

В этом случае email-маркетолог отправляет письмо на свои почтовые ящики, а затем смотрит корректность верстки с разных почтовых клиентов и устройств.

Такая проверка занимает время, но позволяет отшлифовать верстку шаблона письма до идеального состояния. В Sendsay, например, тестовое письмо можно отправить прямо из интерфейса редактора, чтобы сразу внести правки.

3. Специальные сервисы проверки email-верстки

Самый эффективный вариант проверки – использовать специальные сервисы, например, Litmus и Email on Acid. Они позволяют посмотреть, как будет выглядеть письмо в разных почтовиках, браузерах и устройствах.

Если вы уже пользуетесь Email on Acid, его можно интегрировать в Sendsay. Тогда прямо в интерфейсе редактора будет доступен предпросмотр в разных клиентах, браузерах и устройствах – можно сразу увидеть ошибки в верстке и исправить их.

Выглядеть это будет так. По каждому варианту можно кликнуть, чтобы посмотреть крупнее

На что обращать внимание при верстке писем

Тщательно прорабатывать макет

Создавая макет для HTML-верстки, подумайте, насколько сложно реализовать вашу задумку. Например, чем больше блоков разных размеров, тем сложнее.

Также на сложность верстки письма для рассылки влияет количество иконок и текстовых блоков разной величины. Если дизайн рассылки требует нестандартных форматов – вынесите их на баннеры: вместо того, чтобы верстать в письме 5 иконок и подписей к ним, пусть дизайнер нарисует их на картинке.

Над динамическим контентом внутри писем тоже нужно тщательно подумать: смогут ли программисты реализовать идею. Например, подобрать товары, которые пользователь просматривал на сайте – легко. А сверстать рассылку с персональной подборкой товаров к празднику, опираясь на социально-демографические параметры подписчика – сложно.

Использовать только безопасные шрифты

У каждого почтового клиента есть определенный набор шрифтов, который он распознает. И если вы используете в рассылке неизвестный шрифт, почтовик заменит его на системный и внешний вид письма изменится.

Есть шрифты, которые распознаются всеми клиентами – их можно использовать в письмах, не беспокоясь за корректное отображение. Список ниже ��

Если верстка письма требует нестандартный шрифт, лучше добавьте его на картинку.

Проверять корректность персонализации

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

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

• вариант 1 – у получателя указано имя и письмо отправляется в изначальном виде
• вариант 2 – у получателя не указано имя, поэтому ему отправляется письмо без личного обращения
• вариант 3 – у получателя не указано имя, поэтому ему отправляется письмо, в котором вообще нет блока с этим текстом

Следить за весом письма

У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе.

Памятка по верстке писем

1. Используйте блочный редактор, если не умеете программировать и нет возможности нанять верстальщика. Любой email-маркетолог разберется, как им пользоваться, и сможет быстро создавать рассылки.
2. HTML-редактор нужен для создания сложных писем с динамическим контентом: персональные подборки, игры, тесты и опросы. Также он необходим для нестандартного дизайна, который выходит за рамки возможностей блочного редактора.
3. Верстка писем обязательно должна быть адаптивной, чтобы письмо подстраивалось под размеры экранов десктопа и смартфона.
4. Перед отправкой нужно проверить верстку письма с помощью функции предпросмотра, тестовой рассылки на почтовые ящики разных клиентов или специальных сервисах.
5. Верстая письмо, нужно следить за его весом и корректной работой персонализации, также лучше использовать универсальные шрифты, теги и атрибуты кода.
6. Не создавайте слишком сложные макетыдля писем – их будет сложно реализовать, а еще это увеличит шансы, что верстка «разъедется» на смартфоне.

В заключение рекомендуем посмотреть и другие наши гайды по рассылкам:

• Гайд по контенту для писем: пишем текст, правильно его оформляем и придумываем тему
• Гайд по статистике рассылок: как ее собирать, анализировать и использовать для улучшения email-маркетинга
• Гайд по работе с базой email-рассылок: как ее собирать, сегментировать, привлекать и актуализировать

Кроме того, мы делимся полезной информацией в сфере digital-маркетинга в нашем телеграм-канале, при подписке на который дарим книгу «Email-маркетинг для бизнеса». Подробнее о том, как ее получить, рассказали в закрепленном сообщении канала.

Подключайте Sendsay, чтобы сделать ваш email-маркетинг мощнее ��

Как сверстать письмо: инструкция для чайников

Не нравятся «кривые» письма, которые невозможно читать со смартфона? Нам тоже. Давайте узнаем, как победить огрехи неправильной верстки.

Почему «едет» вёрстка

Наверное вы не раз сталкивались с такой неприятной ситуацией: вложили много сил в дизайн и верстку письма для email-рассылки, проверили его на экране компьютера, отдали email-маркетологу. и через некоторое время начали получать претензии. Письма не дочитывают или совсем не читают, а если читают, то не нажимают на кнопки call to action. Почему же так происходит и что пошло не так?

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

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

Вот основные проблемы с отображением писем:

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

Почтовые клиенты «ломают» верстку и некорректно отображают цвета, а также произвольно меняют шрифты.

Блоки письма находятся не на тех местах, что были им назначены, иногда их даже не видно.

CSS- и HTML-теги не работают.

Чтобы избежать перечисленных проблем и добиться того, чтобы оформление электронного письма корректно выглядел на разных устройствах и почтовых клиентах, нужно понять, как верстать письма в html и разобрать основные ошибки и правила верстки e-mail.

Основные правила верстки рассылок

Обязательно применяйте таблицы. Именно правильное использование таблиц позволит вам добиться желаемого результата — чтобы письмо выглядело точно так, как вы задумали, на любом экране. Ведь не все почтовики и браузеры умеют поддерживать последние версии HTML и CSS. Так что выход один — таблицы. С их помощью вы добьетесь того, что структура электронного письма не «расползется» и само оно будет выглядеть именно так, как вы задумали изначально. О том, по каким принципам строятся таблицы, мы расскажем чуть дальше.

Используйте только те атрибуты и HTML-теги, которые одинаково хорошо воспринимают все почтовые клиенты. Например, почтовый клиент от Mail.ru не поймет тег header, почта Gmail имеет проблемы с тегом button, а достаточно всеядный Outlook не справится с тегом footer.

Используйте универсальные HTML-теги и атрибуты, чтобы все элементы отображались корректно на любом устройстве и в любом почтовике.

Используйте встроенные стили CSS. Аббревиатура CSS (Cascading Style Sheets) переводится как каскадные таблицы стилей. CSS занимается описанием того, как будет выглядеть HTML рассылка. Практически все сайты сейчас задействуют связку HTML и CSS.

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

Добавить каскадную таблицу стилей можно несколькими способами

Сделать файл с описанием стилей и сослаться на него тегом link в HTML-документе. Проставить тег внутри head или body: Прогнать HTML-файл с CSS внутри head или body через специальную программу. Она превратит CSS в атрибут для каждого тега и таким образом интегрирует стили внутрь HTML-файла. Для тех, кто привык читать письма с телефона, просто задаем неизменяемые размеры письма по горизонтали, чтобы не было ситуации, когда требуется горизонтальная прокрутка, чтобы прочесть все. Обычно задают ширину не более 600 пикселей.

Обязательные атрибуты HTML

Чтобы почтовый клиент не подставлял свои собственные атрибуты в теги, желательно назначить их самостоятельно. Если этого не сделать, то в структуре электронного письма могут произойти самые неожиданные изменения. Наиболее проблемные теги — это table, предназначенный для таблиц и тег img для картинок.

Приведем примеры нужных атрибутов, которые дадут представление, как верстать письмо в html.

Атрибуты, которые используют в таблицах:

border padding-bottom: 20px»>cellpadding padding-bottom: 20px»>cellspacing padding-bottom: 20px»> Атрибуты для стилей в таблицах:

«margin: 0;» — интервал от края таблицы до других элементов;

«padding: 0;«— интервал от рамки до контента внутри..

Атрибуты для контента:

«color: #333333;» — задает цвет шрифта;

«font: 11px Arial, serif;» — задает гарнитуру, размер и вид шрифта;

«line-height: 22px;» — расстояние между строками в пикселях;

«-webkit-text-size-adjust: none;» — запрещает смартфонам вносить свои изменения

Чтобы ссылки открывались в другом окне, прописываем атрибут «target=»_blank».

Атрибуты для картинок:

src=»https://www.uiscom.ru/blog/kak-sverstat-pismo-instruktsiya-dlya-chaynikov/#» — адрес картинки;

alt=»» — описание картинки: его можно не заполнять;

border padding-bottom: 20px»>width padding-bottom: 20px»>height padding-bottom: 20px»> Атрибуты для стилей в изображениях:

«display: block;» —вставляет элемент в блок, чтобы почтовые клиенты не делали свои собственные отступы вокруг изображения.

Безопасные шрифты

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

Однако почтовые клиенты воспринимают далеко не все типы шрифтов. И это надо учитывать, когда вы собираетесь сверстать письмо в html для рассылки. Прежде чем дать волю своим художественным предпочтениям, изучите, какие шрифты можно применять, а какие не стоит. Если вы хотите добиться, чтобы все шрифты отображались правильно на любом почтовом клиенте, обязательно применяйте свойства font-family.

Давайте рассмотрим самые распространенные семейства шрифтов в почтовых, сверстанных с помощью html рассылках.

Самый популярный шрифт для всех стран, пишущих на латинице. Шрифт не имеет засечек и считается одним из самых дружелюбных для восприятия — в нем почти нет отвлекающих внимание элементов. Несмотря на «простонародность», его активно используют в своих брендбуках глобальные компании, такие как Макдональдс или Скайп. Этот шрифт называют универсальным, он вызывает симпатию у большинства пользователей.

Этот шрифт возник как продолжение Гельветики и содержит родственные с ним элементы. Возник в эпоху массового перехода на компьютеры. Также, как и Helvetica, не имеет засечек и отличается простотой начертания. Используется в большинстве почтовых клиентов по умолчанию. У Arial есть проблемы с восприятием русских букв: например, буква «п» похожа на «л», «ц» похожа на «и», а «ч» похожа на «н». Так произошло потому, что кириллический вариант разрабатывали не в России. У простоты и лаконичности Arial есть и своя обратная сторона: большие массивы текста смотрятся монотонно и их становится трудно читать.

Самый популярный шрифт, в котором используются засечки. Есть распространенное мнение, что шрифты с засечками больше подходят для декоративных задач, а в документах их лучше не использовать, так как их сложнее читать. Однако крупнейшие специалисты по типографике не согласны с этим утверждением. По их мнению, засечки, наоборот, помогают не потеряться в большой «простыне» текста, так как управляют движением глаз, уводя его дальше и дальше по тексту. Также считается, что от чтения букв с засечками глаза меньше устают, потому что каждый знак имеет уникальное начертание и мозг легче отличает один от другого.

Этот шрифт примечателен тем, что в нем расстояние между знаками довольно большое. Verdana — это еще один вариант шрифта без засечек.

Шрифт Times New Roman

Большинство официальных документов в нашей стране используют Times New Roman по умолчанию. Поэтому этот шрифт с засечками подсознательно ассоциируется с государственными учреждениями и коммерческие компании стараются по возможности избегать его.

Шрифт без засечек, созданный в 80-х годах ХХ века специально для Microsoft. Для него характерны узкие буквы и такое же узкое расстояние между ними. Подходит для тех, кому нужен убористый шрифт, чтобы уместить больше текста без разрыва строки.

Шрифт Trebuchet MS

Еще один шрифт для Microsoft, на этот раз его разработка произошла уже в 90-х. Тоже не имеет засечек. Любопытный момент — это первый из шрифтов Microsoft, в котором появился полноценный курсив, а не просто наклонное начертание.

Шрифт Courier и Courier NEW

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

Эти шрифты считаются безопасными. Если вы хотите использовать другие, то гарантии правильного отображения вам никто не даст. Чтобы не рисковать, стоит указать почтовому клиенту, какой из списка безопасных шрифтов он должен подставить, если у него не получится справиться с предложенным вами.

И есть еще один важный нюанс. Почтовый клиент Microsoft Outlook трансформирует все шрифты в Times New Roman.

Цвет и фон

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

Для того, чтобы почтовые клиенты правильно распознавали цвет, записывайте его в полном виде, например #111111. Ни в коем случае не используйте сокращения, почтовики их часто не понимают. Также не работают они с цветовыми кодами RGB или CMYK.

Адаптивная верстка рассылок

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

Рассмотрим основные типы адаптивности

Для качественного просмотра с мобильного телефона чаще всего применяют гибридную верстку. Если для структуры email применяется двухколоночная схема, то как только его открывают на маленьком дисплее мобильника, для пользователя оно тут же превращается в одноколоночник.

Верстка писем с использованием медиазапросов — специальных команд, трансформирующих вид письма под тип экрана. Медиазапросы позволяют трансформировать не только размер букв, но размещение блоков и иллюстраций. Единственный недостаток — не все почтовики способны корректно распознавать и исполнять эти команды.

Наиболее перспективный и хайповый метод — Mobile First, когда email в первую очередь верстают под смартфоны, а во вторую — под стационарные устройства.

Оформление макета письма

В дизайне электронного письма используют деление на четыре части:

Индивидуальная верстка email рассылки происходит преимущественно в Body. Части Pre-Header и Footer изменяют редко, а в Pre-Header с каждым новым письмом добавляется только новое описание.

Фон письма может быть любым, но все же предпочтительнее светлый или контрастный по отношению к шрифту, чтобы текст хорошо читался.

Горизонтальные размеры устанавливайте не шире 600 px. Иначе при просмотре со смартфона пользователю придется прокручивать его влево-вправо, а это всех раздражает.

Избегайте JavaScript — почтовики определяют его как элемент зловреда и блокируют письмо. То же самое относится и Flash.

Если хотите вставить анимацию, то лучше использовать GIF, но рекомендуем предварительно уменьшить его размер, чтобы письмо не стало слишком «тяжелым».

Не пропускайте новости
Спасибо за подписку!

Мы уже отправили вам первое письмо с подборкой лучших материалов

Табличная верстка рассылки

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

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

Но не слишком увлекайтесь. Если сделать большое количество колонок, то они будут узкие и их будет сложно читать. Многие верстальщики предпочитают использовать одноколоночный стиль.

Адаптация писем

При создании структуры email письма не стремитесь делать их все однотипными. Адаптируйте письмо под цели и задачи и под конкретную целевую аудиторию.

Например, письмо-акция должно иметь минимум текста и максимум креативных изображений.

Письмо-ньюслеттер делает акцент на тексте, но сам текст должен иметь четкое структурное членение с тематическими блоками.

Если ваше письмо рассчитано на высокий отклик, то главным элементом в нем должны быть кнопки call to action.

Структура email письма должна быть полностью подчинена задачам, которые задает маркетинг. Тогда оно действительно будет работать.

Оформление текста

Чтобы письмо выглядело адекватно на любых устройствах, придерживайтесь базовых правил оформления текста.

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

Придерживайтесь правил переноса, принятых в типографике. Предлоги нельзя оставлять в конце строки, нужно перенести их в начало следующей. То же самое касается и однобуквенных союзов, таких как «а», «и» и других.

Не используйте сторонние сокращалки для ссылок, поскольку в них адрес сайта и сама ссылка отличаются. Почтовики отслеживают это несоответствие и классифицируют такое письмо как потенциальный спам.

Недопустимо применять URL как замену текстовых блоков. Такие URL почтовые сервисы определяют как фишинг. Все необходимые объяснения лучше описывать словами.

Про изображения

Желательно все изображения делать в формате JPEG. Это золотая середина: хотя формат PNG дает лучшее качество, зато весит он намного больше, а разницу в градиентах на мобильном телефоне вы вряд ли заметите.

Размещайте URL в иллюстрациях. Если картинка привлекательно оформлена и содержит призыв к действию, то адресат скорее всего предпочтет кликнуть именно на нее.

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

Как тестировать

После того, как вы сверстали электронное письмо, обязательно проверьте, как оно отображается на разных устройствах. Откройте его сначала во всех браузерах. Затем проверьте в почтовых клиентах: Outlook, Gmail, Яндекс, Mail.ru, Yahoo, Почта Apple, Spark, Airmail и других.

Затем сделайте тестовые рассылки своим друзьям и коллегам на максимальное число мобильных гаджетов: от iPhone и iPad до всех бесчисленных вариаций Android.

Есть более быстрый путь, например воспользоваться сервисом emailonacid.com, но у него есть серьезный недостаток — он не работает с российскими почтовыми сервисами. Поэтому такие программы могут сократить вам только половину работы.

Надеемся, что эта статья даст вам некоторое представление о том, как сверстать письма в html для рассылки. С правильно отображаемым письмом подсчет и аналитика конверсий станут намного более приятным делом!

HTML-письма без ошибок: 8 требований к дизайну и верстке

Иногда клиентам приходят письма, в которых вместо красивых картинок и выгодных предложений — набор непонятных символов. Или текст и иллюстрации настолько маленькие, что читать письмо просто невозможно.

Чтобы в почте клиента письмо открывалось таким, как задумал маркетолог, дизайн и верстка письма должны соответствовать требованиям почтовиков. Рассказываем, на что обратить внимание при создании писем и какие могут возникнуть сложности, если пренебречь этими требованиями.

Дизайн

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

В верстке email-рассылок нельзя использовать современные спецификации цветов, градиентов, фоновых картинок и лейаутов (flexbox и grid). Зато можно использовать старые и максимально простые инструменты. Отсюда и ограничения в дизайне.

1. Размер

— Ширина макета для веба — максимум 700 пикселей. Даже на больших экранах письма отображаются такой ширины.

— Длина — нет универсальной длины, главное — ключевую информацию и CTA (call to action) разместить на первом экране, чтобы пользователь не потерялся в письме.

— Вес. Если письмо длинное, оно может не пройти по весу. Некоторые почтовики, например, Gmail, обрезают письма больше 102 Кб: они загружаются не полностью и появляется кнопка «Открыть оставшееся». Из-за этого не показывается часть контента и важные ссылки в конце письма, например ссылка отписки. У некоторых сервисов не подгружается пиксель трекинга открытия письма, который расположен в конце. Это повлияет на статистику: если пользователь откроет письмо, маркетолог может не узнать об этом.

2. Фон

— Фон должен быть монохромным. Если дизайнер сделает фон с плавным градиентом от розового к фиолетовому, нет гарантии, что получится сверстать его одинаково хорошо для всех почтовых сервисов.

— Лучше не делать сложный фон из нескольких картинок: их сложно хорошо сверстать для всех почтовиков. Нужно продумать, что будет, если письмо отобразится не так, как задумано.

3. Шрифты

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

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

Чтобы письмо корректно отображалось на всех устройствах, лучше использовать общие шрифты. Если без дизайнерского шрифта не обойтись, можно продумать замену: пользователям, у которых нет шрифта Lobster, показывать Arial.

p <
font-family: Lobster, Arial, sans-serif;
>

4. Контент

Контент письма состоит из четырех базовых элементов: прехедера, хедера, основного содержания и футера.

Прехедер — это короткий текст, который не очень нужен в десктопной версии, но важен для мобильной версии письма. Появляется как подзаголовок под темой:

Если прехедера нет, то под темой письма пусто или подтягиваются случайные строки из письма

Хедер — это шапка письма. Если пользователь откроет письмо, он с вероятностью 100% увидит хедер. Здесь обычно размещают логотип, контакты и ссылки на основные разделы сайта: каталог, распродажа, новинки. Можно сделать эту часть минимальной, чтобы пользователь сразу переходил к основному содержанию.

Основное содержание. Главная задача письма и особенно этой части — подвести пользователя к целевому действию.

Есть несколько способов размещения информации в письме: текст, баннер, товарная сетка.

— Текст: заголовки, подзаголовки, абзацы, списки. Если текст разбить на короткие абзацы, вывести главное в начало и использовать списки там, где это уместно, читатель с большей вероятностью выполнит целевое действие — перейдет на сайт, например.

В заголовке лучше сразу показать пользу (вывести промокод, рассказать о подарке или скидке), чтобы человек понимал, зачем ему читать это письмо. Иногда в заголовке письма пишут приветствие: «Здравствуйте, Татьяна!».

Неудачный пример использования заголовка:

Как верстать email письма — особенности и примеры кода

Разработчики проекта Email Client Market Share отслеживают статистику по доле рынка email среди разных почтовых клиентов. В случае конкретной компании распределение пользователей различных платформ и программ может быть другим, но на старте неплохо понимать базовую диспозицию на рынке. По данным на май 2017 года, cамыми популярными почтовыми платформами являются iPhone и Gmail:

Основные проблемы верстки

Если компания решит не использовать существующие на рынке решения для создания шаблонов рассылок, то ее специалистам придется разобраться с вопросами верстки писем — и в случае email это может быть сложнее, чем создать страницу на сайте.

Сложности начинаются с самого начала — существует множество движков рендеринга писем, которые используются различными почтовыми программами:

• Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
• Outlook 2000, 2002 и 2003 используют Internet Explorer.
• Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
• Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink.

Почтовые клиенты добавляют собственные стили, помимо тех, что были изначально выбраны разработчиком рассылки. Например, Gmail для всех шрифтов в ‹td› устанавливает значение. Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries.

Разнообразие почтовых клиентов и движков рендеринга приводит к необходимости использования универсальных подходов. В частности, это значит, что вместо использования ‹div› лучше применять табличную верстку. Конкретно, это выливается в использование:

• • ‹table› вместо ‹div›
  • #FFFFFF вместо #FFF ,
  • padding вместо margin ,
  • CSS2 вместо CSS3,
  • HTML4 вместо HTML5,
  • background-color вместо background , также стоит использовать расширенные свойства, вроде padding-top;, padding-left; и другие,
  • фон цветом вместо фоновых изображений, а визуальные элементы через тег ‹img› ,
  • HTML-атрибутов вместо CSS,
  • инлайн CSS вместо наборов стилей или блоков ‹style›

  Как работать со шрифтами

  Используйте стандартные системные шрифты для отображения текстов писем — это самое простое и надежное решение. Но если необходимо внести изменения в типографику можно использовать веб-шрифты, например, Google Fonts.

  Чтобы правила веб-шрифтов не конфликтовали с Outlook, используйте специальный медиазапрос для WebKit:

  ‹style› @import url(http://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) < h1 >

  Очень важно прописать для каждой ячейки таблицы ‹td› font family, font size и color, иначе почтовый клиент может проигнорировать выбранный шрифт. Это правило нужно соблюдать и для любых блочных элементов, в которых находится текст, таких как ‹p› , ‹h1› … ‹h5› , ‹div›

  Изображения и медиа

  Следующая важная тема при верстке писем — работа с изображениями и медиа.

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

  Поведение почтовых клиентов здесь весьма вариативно:

  • Outlook блокирует рендеринг изображений по умолчанию,
  • Apple Mail не блокирует,
  • Gmail не блокирует.

  Важно включать alt-текст для всех используемых картинок — это поможет получателю письма понять, что должно было быть на месте изображений, если его email-клиент вдруг ему их не покажет. Для тега ‹img› можно прописать стилевые правила текста, например color или font-family , которые будут применяться к alt-тексту.

  Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.

  Адаптивная верстка

  • Около половины всех писем в мире открывают с мобильных устройств, и эти цифры растут.
  • По данным проекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
  • Исследователи из MailChimp обнаружили, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.

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

  Автоматизация email рассылок

  Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.

  Существует два основных вида писем для мобильных устройств — одноколоночные и многоколоночные. В первом случае особенных сложностей с тем, чтобы сделать контент адаптивным, не возникает, поскольку нет необходимости в реорганизации элементов письма. Необходимо лишь обеспечить уменьшение ширины шаблона для лучшего отображения на устройствах разного размера.

  

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

  ‹table cellspacing="0" cellpadding="0" border="0" width="600"› ‹!-- тут текст письма --› ‹/table› @media screen and (max-width:480px) < table < width: 100%!important; >>

  Также нужно будет адаптировать размеры изображений и размер шрифта font-size — и все.

  В случае многоколоночных писем все куда сложнее, поскольку колонки, которые располагались одна рядом с другой в десктопной версии письма, должны быть перераспределены для его отображения на смартфоне.

  

  Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align=»left» для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:

  

  С уменьшением ширины экрана устройств необходимо изменять размер контейнера и обеспечивать стопроцентную ширину таблиц и колонок:

  table[class="body_table"] < width: 600px; >table[class="column_table"] < width: 180px; >table[class="spacer_table"] < width: 30px; height:30px; >@media only screen and (max-width: 480px) < table[class="body_table"] < width: 420px!important; >table[class="column_table"] < width: 100%!important; >>

  Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.

  Эта техника позволяет добиться того, что письмо будет отображаться в большинстве почтовых клиентов. Возможно вы заметили странное написание селекторов класса [class=»body_table»] вместо привычного .body_table — это специальный хак для работы с почтовым сервисом Yahoo. Дело в том, что он некорректно работает с CSS с медиазапросами и данный хак позволяет игнорировать эти стили.

  Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.

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

  

  table[class="body_table"] < width: 600px; >table td[class="column"] < height:100px; width:200px; >@media only screen and (max-width: 480px) < table[class="body_table"] < width: 440px!important; >table td[class="column"] < width:100%!important; display: block!important; >>

  Здесь можно поиграть с примером кода на Codepen.

  В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы.

  Как сделать резиновую верстку

  Вариант создания резиновой верстки в письмах — использовать оборачивающие дивы с указанием максимальной ширины max-width . Так как Outlook не поддерживает это правило, под него прописываются специальная инструкция-комментарий, в которой заключена табличная верстка.

  ‹!--[if mso | IE] --› ‹table border="0" cellpadding="0" cellspacing="0" width="640" align="center" style="width:640px;"› ‹tr› ‹td› ‹!--[endif]--› ‹div style="margin:0 auto; max-width:640px;"› ‹table cellpadding="0" cellspacing="0" style="width:100%;" align="center" border="0"› ‹tr› ‹td›…‹/td› ‹/tr› ‹/table› ‹/div› ‹!--[if mso | IE]--› ‹/td› ‹/tr› ‹/table› ‹!--[endif]--›

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

  Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную табличную верстку:

  ‹mj-container› ‹mj-section› ‹mj-column› ‹mj-text›Hello World!‹/mj-text› ‹/mj-column› ‹/mj-section› ‹/mj-container›

  

  Адаптивные изображения

  Отдельная тема — создание адаптивных версий изображений. Здесь достаточно использовать классический метод создания адаптивного контента — img .

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

  @media only screen and (max-device-width: 480px) < img[class= " original_img "] < display: none; >[class="substitute_image"] < background-image: url(background_image.png; width: 440px !important; height: 240px !important >>

  

  Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio.

  Неочевидные моменты в работе с текстом email

  В заключение еще несколько советов, которые помогут создать качественную почтовую рассылку.

  Не забывайте о текстовой версии письма

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

  

  Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.

  Прехедер сообщения очень важен

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

  

  Этот элемент используют, чтобы детализировать тему письма и стимулировать подписчика к открытию. Текст превью вытягивается из первых нескольких строк текста письма. При этом в теле сообщения его можно отображать или скрывать с помощью несложного кода.

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

  

  Для превью сообщений и тестирования прехедеров можно использовать этот инструмент от Остина Вудалла (Austin Woodall).

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