5 правил вёрстки email

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

Что такое верстка email?

Верстка email — это последовательный процесс превращения готового дизайна или концепта клиента в код, HTML-шаблон, который клиент получит и прочитает с любого девайса. С визуальной точки зрения задача верстки — обеспечить удобочитаемость и привлечь внимание к ключевому посылу письма (через СТА кнопку).

Как её делать?

Для верстки можно использовать редакторы кода (собирать вручную каждый элемент) или онлайн-конструкторы (делать из готовых блоков).

Редакторы кода

Где работать: Visual Studio Code, Sublime Text, Atom и др.
Кому: Профи в кодировании, работают напрямую с HTML 

Сервисы для отправок email

Где работать: Stripo, Litmus, Unisender, Sendsay
Кому: Тем, кто не готов тратить время на изучение HTML, и использует готовые конструкторы рассыльщиков для верстки email.

CDP-платформы

Где работать: Mindbox 
Кому: маркетологам, которые хотят использовать отправки по всем каналам, не ограничиваясь email. Онлайн-конструктор для электронных писем – лишь одна из функций CDP-платформы.

Топ-5 популярных ошибок в верстке

• Письмо = картинка. Такое письмо с большой вероятностью попадет в спам, потому что обычно подобный контент отправляют мошенники и спамеры. Кроме того, при сбое/ошибке отображения изображения потеряется весь смысл рассылки.
• Все важное – в конце. Лучше разместить все самое нужное: промокоды, скидки, акции и CTA-кнопки на первом экране. Пользователь может не прочесть письмо до конца. А в случае, если оно тяжелое, то еще и почтовый сервис может скрыть часть содержимого и открыть ее только по запросу читателя.
• Редирект и сокращатели ссылок. В случае их использования письма постепенно перейдут в разряд спама. В картинки и текст зашивать следует только оригинальные ссылки, напрямую ведущие на нужные страницы вашего сайта.
• Тяжелое вложение. Большой вес письма выглядит подозрительно с точки зрения почтовиков. Если вы хотите поделиться большим объемом данных – отправьте их в облако и дайте на них ссылку в письме. 
• Цветовая избыточность. Рекомендуется не применять более 3-х ярких и акцентных цветов шрифта в одной рассылке. 

5 правил хорошей email-верстки

• Удобочитаемость – умеренный кегль, регулярные шрифты (если вы используете редкий шрифт, у вашего адресата он может отобразиться набором символов, ровные отступы, гармоничное сочетание элементов друг с другом, без заступов и наложений.
• Нейтральный фон и вес (до 102 Кб) – лучше использовать однотонные фоны без сложных узоров и градиентов для универсального отображения на всех устройствах. Некоторые почтовики (например,Gmail) срезают часть письма при отображении, и пользователь вынужден нажать кнопку для прочтения дальнейшей информации.
• Структурированность – помощь в последовательной визуализации ключевых пунктов оффера, прогрев CTA-кнопок для стимуляции к покупке.
• Адаптивность – письмо (особенно графические элементы) должно одинаково хорошо читаться и в веб-версии, и на смартфоне, благодаря адаптивной верстке.
• Тестирование – нужно всегда проверять отображение готовой рассылки на разных устройствах и с разными почтовыми клиентами. Только так вы будете уверены, что все шрифты на месте, фото открываются, да и в целом верстка не «поехала». 

Как проверять верстку?

Если вы – гуру HTML и СSS можно использовать сайты по типу litmus.com, emailonacid.com, но в них не представлены все российские почтовики. Поэтому самый надежный метод – проверять каждое письмо вручную. Для этого стоит сделать ящик на всех почтовиках и отправлять макеты самому себе до отправки по базе клиентов.

Если вы работаете со встроенным конструктором (CDP- платформы или онлайн-конструктора сервиса почтовых рассылок) можно использовать кнопки preview (обычно она отображает и веб, и мобильную версии письма) в качестве дополнительной проверки к отправке тестового письма на ваши почты. 

Верстка email в Mindbox

CDP-платформа позволяет маркетологу без знаний кода и разметки верстать письма в конструкторе внутри Mindbox с помощью готовых блоков. Преимущества:

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

В 2024 году Mindbox обновил конструктор для email-рассылок. Агентство DataGrow является партнёром CDP-платформы и помогает создавать мастер-шаблоны для нового конструктора. Сейчас новый конструктор позволяет настраивать и менять в собственных блоках практически все. Весь функционал стал очень гибким.

К ключевым сложностям работы с вёрсткой в Mindbox относятся:

• Трудности с адаптивностью верстки на товарных сетках, когда вместо горизонтальной линии вывода товаров, продукты приходится выводить один за другим вертикально для мобильной версии, что часто встречает сопротивление со стороны клиента из-за роста длины письма. 
• Вопрос о приоритезации маркетинговой эффективности над дизайном – при наличии брендбука многие компании отказываются от изменений для удобочитаемости верстки, выбирая единый корпоративный стиль.

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