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 по мнению эксперта относятся:

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

«На мой взгляд у CRM-маркетолога должен быть приоритет над дизайном. Именно он может тестировать гипотезы, принимать на основе своих тестов решения и видоизменять дизайн рассылок так, чтобы они лучше работали на прибыль бизнеса».

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