Материал подготовил Михаил Терентьев, основатель и руководитель компании Mailfit.
Для электронных писем не работают правила, которые работают при создании приложений и сайтов: здесь есть принципиальные особенности, и их всегда нужно учитывать. Мы подготовили несколько советов, чтобы вы могли сделать читаемое, аккуратное и красивое письмо, которое отобразится на любой платформе, в любом почтовике и устройстве так, как вы это задумали.
Основные проблемы, которые могут возникнуть при верстке писем
- Письма плохо отображаются в разных почтовых клиентах, на мобильных устройствах или на десктопных почтовиках вроде Outlook.
- Письмо долго загружается.
- Некоторые блоки письма не видно, или письмо вовсе выглядит абсолютно не так, как было сверстано в макете.
- Письма попадают в спам (такая неприятность тоже может случиться из-за верстки).
- Письмо неудобно читать, с ним сложно взаимодействовать.
Почему это происходит
- Проблемы с отображением писем вызваны обилием программ и интернет-сервисов для чтения почты.
- 41,9 % всех писем в 2019 году открывались с мобильных устройств, а у смартфона и компьютера разная ширина экрана.
- Не все CSS- и HTML-теги работают в emailах: в этом смысле письма практически «застряли в двухтысячных».
Чтобы письмо точно выглядело так, как вы задумали, можно доверить работу по email-маркетингу профессионалам.
На самом деле причин того, почему именно едет верстка, много. Всего не перечислить в одной статье, и даже в каждом новом кейсе могут встретиться неожиданные открытия. Но там уже должны разбираться технические специалисты.
Предлагаем пройтись по базовым правилам, которые нужно знать email-маркетологу. Хотя бы для того, чтобы объяснить, что пошло не так с рассылкой и правильно поставить ТЗ.
Ключевые моменты верстки
Оформление макета письма
Структура письма состоит из четырех блоков:
- прехедер;
- шапка;
- тело письма;
- футер (подвал).
Вся основная работа ведется в теле письма, а шапка и футер, как правило, от письма к письму не меняются. В прехедере специалисту нужно только поменять описание.
Мы рекомендуем оставлять ширину контентной части письма не более 600 пикселей. Такой размер подходит для большинства устройств и легко адаптируется. Если сделать ширину больше, то письмо «расплывется» и читателю придется его прокручивать по горизонтали. На фон почтовые приложения ограничений не накладывают – он может быть любого цвета и размера.
Не используйте JavaScript, Flash и Active X. Почтовые провайдеры расценивают эти элементы как вирусные и отправляют письмо в спам. Чтобы письмо корректно отображалось в любом браузере и почтовой программе, нужно пользоваться универсальными тегами и атрибутами. Вот их полный список.
Также не рекомендуем использовать CSS-анимацию, так как в письмах не работают многие CSS- и HTML-теги (специальные настройки, которые отвечают за внешний вид страниц в вебе). Например, в письме не получится наложить два элемента друг на друга так, чтобы это смотрелось хорошо на всех устройствах. Если нужна динамика, лучше добавить GIF. Оптимальный вес – 125–800 кб, поэтому слишком тяжелые GIF следует сжимать так же, как и картинки.
Табличная верстка
Для верстальщиков таблицы – это пережитки 90-х годов. Но в email-рассылках только этот способ подходит для нормального отображения письма.
Структура письма при этом выглядит так: основную таблицу делят на ячейки, в которые помещают другие таблицы. В этих модулях находится весь контент: изображения, текст, кнопки и ссылки. Они могут располагаться в одну или несколько колонок.
Чем меньше колонок, тем лучше. При множестве колонок их ширина будет очень маленькой, поэтому могут возникнуть сложности с их чтением.
Лучше всего использовать одноколоночный шаблон – макет, в котором блоки располагаются друг под другом последовательно. Такой шаблон хорошо подстраивается под многие устройства, а письмо (даже длинное) удобней читать.
Адаптация писем
Чтобы письма корректно отображались на разных экранах и любом устройстве, используйте блочную адаптацию. Умение рассылки подстраиваться под различные устройства и размеры экрана и называется адаптивностью.
Например, в десктопной версии у письма может быть две или три колонки. А при адаптации блоки выстраиваются один под другой. Такой способ верстки называется «плавающие блоки». На разных устройствах письмо будет выглядеть по-разному, но ничего не съедет.
Пример адаптивного письма:
Оформление текста
При верстке писем безопаснее использовать стандартные шрифты. Например, Arial, Verdana, Tahoma, Times New Roman поддерживают все почтовики на любых устройствах. Кроме того, от шрифта зависит то, насколько легко читать письмо: текст, который легко читать, дочитывают до конца. Это заслуга не только автора, но и типографики.
Если в письме нет текста и используются только баннеры с нестандартными шрифтами, то конечная верстка будет состоять сплошь из картинок. Такие письма часто блокируются спам-фильтрами. Поэтому не злоупотребляйте нестандартными шрифтами.
В редакторе кода указывайте стилевые параметры текста для каждого текстового блока: цвет (color) и интерлиньяж (line-height), размер шрифта (font-size в px или pt) и гарнитуру (font-family). Они помогут письму отобразиться так, как задумано в оригинале.
«Висячие» предлоги лучше не оставлять. Согласно правилам типографики, предлоги и союзы нужно переносить на следующую строку. Для этого стоит использовать символ неразрывного пробела.
Несколько слов про оформление ссылок.
Не используйте в качестве поясняющего текста URL. Такие ссылки могут быть распознаны как фишинговые (вредоносные копии сайтов), а письмо – как мошенническое. Поясняющий текст пишите текстом.
Кроме того, почтовые сервисы плохо воспринимают редирект или сокращенные ссылки. Из-за несоответствия URL и конечного адреса такие письма уходят в спам.
Про изображения
Используйте картинки в форматах JPEG, PNG, BMP и сжимайте изображения, чтобы письмо быстрее прогружалось.
Укажите ряд обязательных параметров, чтобы картинки и баннеры не поехали куда им вздумается: высоту и ширину изображения, альтернативный текст.
Когда открываем это же письмо в веб-версии, меню уезжает вправо, а картинка и тело письма остаются на месте. Возможно, проблема в том, что меню не адаптировано под общую ширину письма.
Чтобы почтовый сервис не расценил рассылку как спам, добавляйте plain text версию письма – письмо, состоящее только из текста. Это нужно для почтовых клиентов, которые не отображают HTML.
Ставьте ссылки в изображениях. В письмах читатели чаще всего кликают по изображениям.
Если верстальщика нет в команде, но письмо собрать нужно
Чтобы собрать письмо, совсем необязательно обладать какими-то специальными знаниями. Проще всего это сделать в блочном редакторе: такие сервисы работают по принципу drag-and-drop – методом перетаскивания нужных блоков и заполнения их контентом. Можно еще больше упростить себе задачу и просто выбрать уже готовый шаблон.
В интернете можно найти как конструкторы писем, так и сервисы рассылок со своим конструктором. Например, такие редакторы как Letteros, GetResponse или Unisender имеют множество похожих функций и интуитивно понятны даже начинающим пользователям.
Как работает Letteros
Специализированная платформа для создания рассылок из шаблонов, для работы в которой не требуются знания HTML. Можно выбрать один из готовых вариантов, загрузить свой или заказать разработку уникального мастер-шаблона.
Новое письмо собирается в блочном редакторе всего за несколько минут. После его можно быстро экспортировать в платформу для отправки рассылок. Все блоки в письме можно редактировать прямо во время его сборки.
Контентный блок и другие элементы автоматически подстраиваются под изменение размера в зависимости от длины текста. Менять здесь можно все: заголовки, текст, изображения, цвет кнопок, фона и другие элементы
Что классно: проверка орфографии, кода и адаптивности письма уже встроены в сервис и не требуют дополнительной платы, как в других сервисах.
Как работает GetResponse
В конструкторе писем есть целая библиотека качественных шаблонов с профессиональным дизайном. Можно сделать адаптивный дизайн, скрывая или видоизменяя отдельные блоки для просмотра на мобильных устройствах.
Есть встроенный фоторедактор для ретуши фотографий или создания текста для баннера.
Что классно: много готовых шаблонов и возможность использовать собственные шрифты.
Как работает Unisender
Сервис по созданию и отправке email-рассылок с обширной базой знаний и 100+ готовыми бесплатными шаблонами.
В редакторе можно как угодно изменить шаблон под себя, а после отправки письма проанализировать статистику в личном кабинете.
Что классно: есть возможность персонализировать письма и сделать все сразу в одном сервисе.
При выборе сервиса обратите внимание на количество доступных шаблонов, интуитивно-понятный интерфейс, адаптивность (подстраивается ли макет под все размеры экранов), интеграцию с почтовыми сервисами и возможность сохранения HTML-кода готового шаблона для дальнейшей загрузки на сервис, а также цену – наличие бесплатной версии или тестового периода.
Самое важное о верстке писем
- Ширина письма – не более 600 пикселей.
- Письмо верстается таблицей и строится модулями.
- Лучше всего использовать одноколоночный макет, в котором блоки располагаются друг под другом последовательно.
- Используйте блочную адаптацию.
- Пользуйтесь универсальными тегами и атрибутами
- Не используйте в письмах JavaScript, Flash-анимацию, укороченные ссылки и редирект.
- Пользуйтесь стандартными шрифтами.
- Не используйте в качестве поясняющего текста URL: поясняющий текст пишите текстом.
- Используйте картинки в форматах JPEG, PNG, BMP, GIF и сжимайте изображения.
- Ставьте ссылки в изображения.
- Воспользуйтесь конструктором писем, если в команде нет верстальщика. Это упростит вам жизнь.
Если следовать этим рекомендациям, можно создать красивое работающее письмо, которое обязательно попадет в папку «Входящие». Но помните, что почтовые клиенты и программы регулярно обновляются, появляются возможности применять новые фишки. Тестируйте их и экспериментируйте!
Читайте также:
Топ-5 вредных советов в email-маркетинге, которые уничтожат вашу репутацию
40 рассылок по SEO и интернет-маркетингу, на которые обязательно стоит подписаться
Это мы не вам: как извиняться в рассылке, если вы облажались