Верстка адаптивных писем. Памятка маркетолога
Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии рассказала, в какой ситуации стоит отдать верстку писем на аутсорс, а когда можно собрать адаптивное письмо самому в блочном редакторе.
Представим ситуацию: Сергей — выпускник «Нетологии», начинающий маркетолог. Он работает в небольшом интернет-магазине, одна из его задач — запустить рассылку по клиентской базе. Стратегия, план и тексты для писем готовы.
Что делать с дизайном и адаптивной версткой? Бюджет на исходе, поэтому у Сергея серьезный выбор: сэкономить и сделать все самому, в редакторе сервиса рассылки. Либо нанять фрилансера.
Наш совет: Сергей должен определиться, какие письма ему нужны. Если он не гонится за креативностью, то справится с дизайном и версткой сам. Рассказываем, как сделать это правильно, без помощи сторонних специалистов. Результат будет отличаться, но в ситуации, когда бюджет на исходе и надо сделать более-менее качественно — это выход.
Выбираем встроенный редактор или услуги верстальщика
У крупных сервисов рассылки есть встроенный блочный редактор. В нем собирают простые адаптивные письма и это входит в стоимость подписки. Оформить сложное креативное письмо в редакторе не получится — это работа дизайнера и верстальщика. Для начала разберемся, какое письмо отнести к категории сложных, а какое — к простым.
Возможности встроенных редакторов отличаются от сервиса к сервису. В любом из популярных редакторов вы можете добавить блоки с текстом, картинки, кнопки, иконки социальных сетей и кнопки «Поделиться». Это стандартный набор стандартного редактора.
Дальше идут «фишки». Где-то можно задать точный размер для отдельных блоков, а где-то — нельзя. В одном редакторе можно собирать только одноколоночные письма, в другом ограничений по количеству колонок нет. В некоторых редакторах вы даже можете настроить, какие блоки показывать на десктопной версии, а какие — только на мобильных устройствах.
Дизайнер и верстальщик предлагают индивидуальные решения, редактор — типовые. Учитывайте, что, собирая письмо в редакторе, вы в любом случае ограничены, например, набором шрифтов и их размерами.
Дизайнер сделает так, как вы хотели. Верстальщик продумает, как переставить блоки на мобильных устройствах — так, как вы и планировали. Работая в блочном редакторе, вы полагаетесь на решения, предложенные разработчиками.
Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.
Если вы проработали структуру, написали текст и подобрали картинки, то на создание письма уйдет от тридцати минут до двух часов. Напомним, что вы не платите за верстку, работа с редактором включена в стоимость аккаунта.
Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 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.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Полный текст статьи читайте на Нетология
