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

Представим ситуацию: Сергей — выпускник Нетологии, начинающий маркетолог. Он работает в небольшом интернет-магазине, одна из его задач — запустить рассылку по клиентской базе. Стратегия, план и тексты для писем готовы.

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

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

Выбираем встроенный редактор или услуги верстальщика

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

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

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

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

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

Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.

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

Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 5 000 до 15 000 рублей. Если заказываете в агентстве — в разы дороже. Помните историю из вступления? Для Сергея выбор очевиден: он будет собирать письмо сам, в его ситуации это дешевле и быстрее.

Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений — отдавайте на аутсорс.

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

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

Шаг 1. Схема или прототип письма

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

Шаг 2. Верстка письма в редакторе

• Добавляете нужное количество колонок, исходя из уже готовой схемы или прототипа

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

• Перетаскиваете нужные элементы в тело письма

Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний — принципы работы в редакторе описаны там.

• Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

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

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

• Добавляете кнопки целевого действия, кнопки Поделиться и иконки социальных сетей

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

Шаг 3. Проверка адаптивности во встроенном редакторе

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

В 90% случаев все будет в порядке, блоки перестроятся автоматически. Если верстка все-таки слетает или результат вас не устраивает — проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.

Шаг 4. Проверка адаптивности на сторонних сервисах

Проверьте результат через Litmus или Email on Acid. Эти сервисы покажут, как письмо отобразится на разных устройствах, в разных браузерах и разных почтовых клиентах.

В некоторых редакторах проверка через Litmus интегрирована по умолчанию. Если в вашем редакторе такой возможности нет, отправляйте тестовую копию письма на специальный e-mail, который дадут после регистрации в Litmus.

Услуга платная, месячная подписка в Litmus начинается от 79 $, в Email on Acid — от 45 $. Если вы отправляете по одному письму раз в месяц, выходит дороговато. В крайней случае, попробуйте Browser Shots, он старый и неудобный, зато бесплатный. Помните, что подобные сервисы не дают 100% гарантии. Даже если в Литмусе все хорошо, это не повод сразу же запускать рассылку. Отправьте письмо на личную почту и откройте его там.

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

Как оценить результат работы — своей или верстальщика

Если собираете письмо сами, проверьте адаптивность внутри редактора и посмотрите письмо с личной почты — этого достаточно. Хотите проверить адаптивность на многих устройствах, браузерах и почтовых клиентах сразу — тогда покупайте аккаунт в Litmus или Email on Acid, смотрите результат там.

Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru — это самые популярные почтовые клиенты в России.

Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и качества базы.

Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% — это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% — управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.

Проследите за тем, чтобы письмо адекватно отображалось в Outlook, Gmail, Yandex и Mail.ru — этого достаточно.

Памятка маркетолога

• Определитесь с форматом письма, каким оно будет: стандартным и простым или сложным и креативным. Письма со сложной структурой отдавайте дизайнеру и верстальщику. Простые письма собирайте в редакторе сервиса рассылки, они адаптируются по умолчанию.
• Проверяйте результат во встроенном редакторе и, если позволяет бюджет, на сторонних сервисах. Принимая письмо у верстальщика, просите скриншоты, которые подтверждают, что письмо отображается корректно — по крайней мере, в популярных почтовых клиентах и популярных браузерах.
• Обязательно просмотрите письмо через личную почту, хотя бы в основных почтовых клиентах и с актуальных моделей смартфонов на iOS и Android.

Автор: Константин Шумилов. Команда Sendsay.

______________________________________________________________________________________

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