На эффективность рассылки влияет множество факторов. Один из главных — внешний вид. За него отвечают вёрстка и хороший дизайн.
Дизайн помогает подсвечивать важную информацию, повышать CTR, делать письмо удобным для чтения. Вёрстка же нужна для адаптации дизайна под разные устройства: если элементы письма не подстроятся под маленький экран, читатель увидит неровные колонки, мелкий текст или горизонтальную прокрутку.
При этом рассылку не получится верстать как сайты: почтовые клиенты поддерживают не все возможности веб-кода из-за ограничений формата. Подробнее об этом рассказываем в статье: какие есть возможности и инструменты вёрстки email-писем, как самостоятельно собрать письмо в сервисе рассылки.
Виды вёрстки email-рассылки
В сервисах рассылок есть разные варианты вёрстки письма: блочный конструктор, готовые шаблоны email-рассылки, а также ручная HTML-вёрстка для ситуаций, когда нужно реализовать оригинальную или сложную идею. У каждого инструмента есть свои преимущества и недостатки.
Вёрстка письма для рассылки в блочном редакторе
Она похожа на создание лендинга в конструкторе. Необходимо только продумать структуру, написать текст и подобрать картинки. Простое адаптивное письмо можно собрать в блочном редакторе сервиса рассылок самостоятельно. Это быстрее и дешевле, чем поручить специалистам верстать письмо с нуля.
Для создания макета обычно привлекают дизайнера, который отрисовывает баннер и другие элементы. Затем макет собирают в блочном редакторе, и письмо готово.
А если сложный дизайн не нужен, маркетолог может сам загрузить подходящие картинки, добавить кнопки со ссылками и распределить текст. Или воспользоваться готовыми шаблонами платформы рассылки. Обычно есть базовые шаблоны с минимальным оформлением, и тематические с полноценным дизайном под разные случаи — Чёрная пятница, поздравление клиента днём рождения и так далее.
Стандартные возможности вёрстки в редакторе drag'n'drop:
- добавлять блоки с текстом;
- вставлять изображения;
- добавлять кнопки, например «Поделиться»;
- давать ссылки на соцсети в формате иконок.
В некоторых редакторах дополнительно можно менять размер отдельных блоков, делать письма с несколькими колонками, настраивать вид рассылки для десктопных и мобильных устройств.
Адаптивная HTML-вёрстка письма
Такой вид вёрстки позволяет реализовать практически любое нестандартное решение: интерактивные элементы, сложный дизайн, тематическое оформление. Правильно свёрстанные письма корректно отображаются в разных почтовых сервисах и на разных устройствах.
Ниже — пример сложной вёрстки от «ВкусВилла». В письме хаотично разбросаны подарки, клик на каждый из которых ведёт на опредёленную страницу сайта или запускает скачивание файла. Чтобы это сделать, каждый подарок должен быть отдельным элементом письма со своей ссылкой. Поэтому маркетологи разделили макет на несколько изображений и сверстали их так, чтобы при любом размере экрана подарки оставались на своём месте и не смещались ниже или вбок.
Сделать такую вёрстку в обычном конструкторе сложно, потому что при адаптации под мобильное устройство блоки могут сдвигаться, чтобы лучше поместиться в узкий экран. Ниже — пример того, как адаптируется под разные экраны шаблон письма, свёрстанный в блочном конструкторе.
Минус HTML-вёрстки — нужны навыки работы с кодом рассылок и понимание, как отображается вёрстка в различных почтовых клиентах. Если вы ими не владеете, быстро сверстать адаптивные письма для email-рассылки не получится.
Для этого нужно подключить верстальщика, который напишет код, или купить готовый HTML-шаблон письма. Скачивать бесплатные шаблоны не стоит, так как в их код могут быть интегрированы опасные элементы, из-за которых рассылка попадёт в спам.
Как верстать письма в платформе для рассылки
В разных сервисах свои инструменты, но работают они по схожим принципам. Мы покажем, как собрать письмо, на примере маркетинговой платформы Sendsay. Она позволяет отправлять рассылки на почту, в мессенджеры и пуши, собирать контакты клиентов и информацию о них из разных источников, чтобы максимально персонализировать коммуникацию.
Как верстать письмо с помощью готового шаблона
Когда письмо нужно собрать быстро и c минимальными усилиями, можно воспользоваться готовыми шаблонами. Базовые шаблоны пустые ― их нужно заполнять самостоятельно. У тематических уже есть дизайн, который можно отредактировать: поменять цвет кнопок, текст, ссылки и запускать рассылку.
Собирать письма по готовым шаблонам удобно в Sendsay. После регистрации и авторизации вам предложат создать рассылку.
В настройках можно выбрать вариант создания письма: в HTML-редакторе, блочном конструкторе или с использованием готового шаблона из галереи.
Если нужно быстро сверстать типовое письмо, выберите шаблон из галереи — останется только добавить в него информацию.
В шаблонах блоки письма уже расставлены определённым образом, их можно отредактировать. Но вы можете самостоятельно собрать рассылку из элементов в блочном редакторе, если нужно создать свою структуру.
Как верстать email-рассылку в конструкторе писем Sendsay
Выберите «Конструктор писем» и приступайте к вёрстке адаптивного письма. Можно собрать каждый блок из отдельных элементов: текст, изображение, кнопка, разделитель и другие. Или воспользоваться готовыми блоками с продуманной структурой: шапка, подборка товаров, статьи, подвал и так далее. Вы можете выбрать один из готовых блоков, или собрать его самостоятельно и сохранить в качестве шаблона для будущих рассылок.
Добавьте нужное количество колонок исходя из прототипа. Самая простая структура — одна-две колонки. Большинство браузеров и приложений корректно отображают такие письма.
Важно: если блоки несимметричны, они могут некорректно перестроиться в мобильной версии письма. Если так и произошло — поправьте расположение элементов, установив отступы вручную. Симметричные рассылки в большинстве случаев адаптируются под разные устройства корректно.
Выберите нужные элементы и перетащите в тело письма. Настройте отображение: расположение, цвет, размеры.
Добавьте иллюстрации, впишите текст, вставьте ссылки для кнопок, баннеров, иконок.
Проверьте адаптивность письма — то, как оно отображается на разных устройствах. Для этого нажмите на иконку глаза в правом верхнем углу. Откроется окно предпросмотра для десктопа и мобильного устройства. Кликнув на любой из них, увидите, как выглядит письмо, если открыть его на выбранном устройстве.
В финале проверьте, как письмо отображается в разных браузерах и почтовых клиентах (Outlook, Gmail, Яндекс, Mail.ru), сделав тестовую рассылку. По умолчанию вёрстка, выполненная в блочном редакторе, корректно отображается в большинстве популярных почтовых клиентов. Если ваша аудитория пользуется нестандартными почтовыми программами, стоит проверить, как в них отображается письмо.
Теперь вы знаете, как можно собрать рассылку без специальных навыков в сервисе вёрстки. Но такие письма всё равно ограничены в форматах и дизайне. Если хочется реализовать что-то необычное, придётся обратиться к специалистам: дизайнер сделает макет письма, а верстальщик превратит его в код.
Как верстать письма в HTML-редакторе Sendsay
Первый шаг в вёрстке HTML-письма — создание макета. На данном этапе создаётся дизайн, и продумывается структура будущей рассылки.
В Sendsay есть простой и удобный редактор кода. Чтобы в него попасть, кликните «Создать выпуск», выберите Email и среди предложенных вариантов по созданию письма — в HTML-редакторе.
Откроется пустая страница для ввода кода. В правой части экрана письмо отобразится таким, каким его увидит получатель.
Вы можете написать код с нуля, вставить свой, отредактировать его или оставить без изменений. Готовый код можно сохранить как файл, шаблон или отправить текстовую копию по электронной почте.
Правила и особенности работы с адаптивной вёрсткой рассылок
Задача такой вёрстки — сделать так, чтобы письма хорошо выглядели на разных устройствах. Поэтому блоки на одном экране могут быть горизонтальными, а на другом — вертикальными. Это происходит за счёт изменения внутренних элементов: уменьшения картинок, кнопок, сокрытия декоративных элементов на маленьких экранах и так далее.
Если верстать письма в блочном конструкторе, не нужно думать, как именно происходит этот процесс — разработчики платформы всё заранее запрограммировали. Маркетологу остаётся выбрать блоки и скомпоновать их в нужном порядке.
Но если верстать письмо вручную через HTML-код, то нужно учитывать ряд нюансов. Далее разбёрем их подробнее.
Что нужно учитывать при HTML-вёрстке email-рассылок
Есть несколько важных принципов:
- Mobile First. Принцип, при котором письмо сначала верстают под мобильные гаджеты, а потом адаптируют для компьютеров. Согласно статистике, 50% всего интернет-трафика приходится именно на мобильные устройства.
- Применять универсальные HTML-теги и атрибуты. Для вёрстки рассылок нужно использовать универсальные элементы кода, потому что не все браузеры считывают даже некоторые стандартные теги.
- Использовать встроенные стили CSS. Это простые команды, которые меняют цвет, размер или положение текста и картинок. Но для рассылки не подходят стили, которые отвечают за подвижные элементы из-за особенностей почты. Так, не сработает изменение цвета кнопки при наведении мышью. Стили Их можно прописать в коде или отдельно и вставить в код ссылку на правила оформления. Но чтобы email-письма корректно отображались всеми клиентами, нужно описать CSS как атрибут в элементах HTML (inline-CSS), либо прописать общие стили для всего письма в head документа.
- Указывать конкретные атрибуты для некоторых элементов HTML. Для таблиц прописывать ширину, расстояние от рамки до содержимого, отступ между ячейками. Для текста цвет, размер, межстрочный интервал, для изображений — – ширину и так далее. Так почтовик не поставит эти значения по умолчанию, а возьмёт из кода, и вёрстка не рассыплется.
- Указывать фиксированную ширину письма. Оптимально — 600 пикселей. Тогда на письмо не растягивается на весь экран, а удобно скроллится вниз без боковой прокрутки. Не стоит использовать вёрстку письма на всю ширину экрана (full-width), тогда на мобильных устройствах текст и картинки растягиваются слишком широко. Использовать стандартные шрифты. Чтобы текст везде отображался одинаково, пользуйтесь шрифтами, которые поддерживают все почтовые клиенты и устройства, например, Helvetica или Arial.
Какие есть подходы к работе с адаптивной вёрсткой
Для создания адаптивных писем используют:
- Табличную вёрстку. При таком способе блоки с контентом помещаются внутрь одной таблицы. Благодаря этому сообщения нормально отображаются в почтовиках и браузерах, которые не поддерживают новые версии HTML и CSS.
- Гибридную вёрстку. Контент заключают в теги <center>, по горизонтали располагают теги <span> с указанной шириной. Тогда 2-3 колонки в письме на мобильном устройстве перестроятся в одну.
- Медиазапросы. Это команды, которые подстраивают письмо под разрешение устройства. Пользователю будет комфортно читать сообщение с любого экрана. Однако не все почтовые клиенты их поддерживают.
Верстайте адаптивные рассылки таким образом, чтобы они корректно отображались на тех устройствах и в тех программах, которыми пользуется большинство вашей целевой аудитории.
Чтобы протестировать рассылку и посмотреть, как выглядит адаптивное письмо в разных почтовых программах на разных устройствах, отправьте сообщение на свои почтовые ящики.
Делаем выводы и повторяем главное
Если вам нужно быстро сверстать несложную рассылку самостоятельно — используйте готовые шаблоны или блочный редактор сервиса рассылок. Нужно что-то посложнее — обратитесь к специалистам по созданию дизайна и вёрстке адаптивного письма с нуля в HTML-редакторе.
Что нужно вспомнить перед тем, как верстать рассылку:
- Начните с создания макета.
- Если собираетесь сами сверстать письмо, не делайте структуру слишком сложной.
- Проверьте готовое email-письмо на адаптивность с помощью функции предпросмотра в платформе рассылки.
- Посмотрите, как выглядит рассылка, отправив её на свою личную почту.
Частые вопросы про адаптивную вёрстку email-писем
