Верстка email-рассылки: полное руководство

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

Зачем верстать рассылки

Качественная верстка поможет получить от email-рассылок максимум результата: внешний вид привлечет и удержит внимание пользователя, адаптивность обеспечит положительный пользовательский опыт (User experience), а правильное расположение блоков и кнопок повысит вовлеченность, а в дальнейшем — доход.   

При должном использовании, еmail-рассылка становится очень эффективным инструментом. Чтобы не быть голословными, обратимся к статистике. 

1. В 2023 году насчитывается 4,371 млрд email-пользователей, прогнозируемый рост — 4,594 млрд пользователей в 2027 (Statista).
2. В 2023 году доход с email во всем мире составляет $10.6 млрд, прогнозируемый рост — $17,9 млрд в 2027 (Statista).
3. По данным Litmus, канал email генерирует ROI в $36 на каждый потраченный $1. 
4. Почти 55% глобального трафика сайта генерируется с мобильных устройств, не считая планшетов (Statista, 2022). 
5. 46% пользователей смартфонов предпочитают получать сообщения от бизнесов через email (Statista, 2021). 
6. Исследование MailChimp в 2021 году показало, что адаптивный дизайн может увеличить показатели уникальных кликов на 15%. 

Виды верстки

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

Верстка в блочном редакторе с нуля

Редактор Drag-n-drop — вариант для новичков и опытных специалистов, которые стремятся к высокой эффективности и минимальным затратам времени на верстку. В этом редакторе можно добавлять нужные для письма элементы: изображения, текст, кнопки, меню, разделители, а также экспериментировать с количеством контейнеров в структуре и управлять их адаптивностью.

Плюсы

1. Низкий порог входа: не требуется высокий уровень знаний в программировании.
2. Минимизация количества ошибок.
3. Хорошая отображаемость в стандартных почтовых клиентах.
4. Экономия времени.
5. Возможность адаптации одного шаблона под различные электронные рассылки.
6. В большинстве случаев обеспечивает адаптивность.
7. Часто входит в состав клиентских ESP или CRM, что исключает необходимость установки дополнительного программного обеспечения.

Минусы

1. Возможности ограничены функционалом конкретного редактора.
2. Функционал может быть ограничен в бесплатной версии, за более сложные компоненты приходится доплачивать или оформлять подписку.
3. Процесс переноса макета дизайна в готовое письмо становится сложнее.
4. Проблемы с мобильной адаптацией в случаях, когда дизайн отличается на десктопе и/или сложнее, чем позволяет функционал редактора.
5. Проблемы с отображением в светлой и темной теме.
6. Шаблонность дизайнов из-за широкого использования drag-and-drop на рынке.

Верстка с использованием готовых шаблонов

Этот вариант очень удобен для создания триггеров, рассылок под специфические инфоповоды, креативных дизайнов и поиска вдохновения/референсов. Таких шаблонов много: праздничные (День Рождения, Новый год, Рождество, Черная пятница), сервисные («Спасибо за покупку», «Оставьте отзыв», «Завершите оплату»), с динамическим контентом (Брошенные сеансы, Товарные рекомендации) и т.д. 

Остается подобрать подходящий шаблон и заполнить его контентом.

Плюсы

1. Низкий порог входа: не требуется знания кода даже для создания динамических блоков в триггерных письмах.
2. Минимизация количества ошибок.
3. Сокращение временных затрат даже по сравнению с блочной версткой.
4. Исключение необходимости в трате времени на разработку дизайна.
5. Повышение вовлеченности пользователя.
6. Помощь в разнообразии стандартных регулярных дизайнов писем.

Минусы

1. Наиболее креативные и сложные шаблоны писем — платные.
2. Возможности ограничены функционалом конкретного редактора.
3. Усложнен процесс переноса макета дизайна в готовое письмо.
4. Проблемы с мобильной адаптацией в случаях, когда в шаблон внесены собственные правки.
5. Проблемы с отображением в светлой и темной теме.
6. Шаблонность дизайнов из-за широкого распространения drag-n-drop на рынке.

HTML-верстка для опытных и бесстрашных

Создание рассылки с помощью HTML/CSS — вариант, который практически не имеет ограничений в плане реализации креативов. Есть возможность:

• создать НЕстандартные на вид стандартные блоки (кнопки, карточки товаров); 
• добавить разнообразные фоны письма;
• скрыть конкретные блоки/фоны/изображения на десктопе и активировать только отображение на мобайле и наоборот;
• настроить адаптивность для мобильных устройств. 

Для HTML/CSS верстки используют онлайн-редакторы, которые отображают результат написания кода в реальном времени. Например, W3Schools, JSFiddle или OneCompiler.

Плюсы

1. Полный контроль над версткой рассылки.
2. Высокая гибкость и адаптивность.
3. Доступность — для создания кода не требуется оформление подписки на конструктор писем.
4. Высокая уникальность дизайнов.
5. Эффективность в визуальной передаче информации, поскольку можно использовать креативные призывы к действию.
6. Совместимость с различными почтовыми клиентами при использовании универсальных тегов.

Минусы

1. Требуется высокий уровень знаний в HTML/CSS.
2. Большая вероятность ошибок, особенно при недостатке опыта, что может привести к проблемам с отображением на мобильных устройствах или в старых версиях почтовых сервисов.
3. Значительные временные затраты на создание каждого письма.
4. Больше этапов проверки для обеспечения безупречного отображения в почтовых сервисах.
5. Несовместимость с ситуативной коммуникацией, особенно в случаях, когда необходимо действовать быстро.
6. Сложность поддержания единообразного узнаваемого шаблона бренда.

Для экономии ресурсов и создания эффективных рассылок наиболее оптимальный вариант — комбинирование drag-n-drop редактора и знаний HTML/CSS-верстки. Это позволит создать быструю и качественную email-верстку с возможностью настройки адаптивности и внесения нестандартных элементов с помощью HTML/CSS.

Частые ошибки

Расскажу о наиболее распространенных проблемах в отображении писем. 

Пренебрежение адаптивным дизайном

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

Решение. Тестируйте email-рассылки перед отправкой на мобильных устройствах, планшетах, ноутбуках и компьютерах. Реальное отображение проверяйте на собственном девайсе. Если нужно проверить разные диагонали, почтовых клиентов или операционные системы, используйте сервисы тестирования рассылок вроде Email on Acid. Они помогут сократить количество ошибок в адаптации писем до минимума.

Десктоп:

Поехавшая верстка на мобайле:

Правильная верстка на мобайле:

Игнорирование совместимости почтового клиента и чрезмерное использование CSS и JavaScript

Различные почтовые клиенты (Gmail, Outlook, Apple Mail) отображают электронные письма по-разному, а также часто имеют ограниченную поддержку CSS и JavaScript. Шаблоны могут выглядеть выигрышно в одном клиенте, но некачественно в другом. 

Решение. Протестируйте письмо в различных почтовых клиентах, чтобы убедиться в совместимости. Используйте универсальные теги, читаемые размеры и цвета шрифтов, а также дополнительно проверьте, поддерживает ли конкретный почтовик ваш HTML-код. С этим поможет сервис Can I email. 

Outlook 2016 vs Gmail Chrome

Большие размеры файлов

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

Решение. Оптимизируйте изображения и минимизируйте ненужный код, чтобы уменьшить размер файла. Оптимальный размер письма для полного отображения в Gmail не должен превышать 80-100 КБ. Динамический контент в письмах отягощает письмо, а большое количество блоков и изображений — замедляет загрузку. Размер изображений минимизируется в фоторедакторах, а также с помощью различного софта, вроде Tiny.png. 

Сильная зависимость от изображений

Некоторые почтовые клиенты по умолчанию блокируют изображения, что приводит к пустым или испорченным электронным письмам. 

Решение. Всегда добавляйте альтернативный текст (alt text) для изображений. Шаблон должен работать и без изображений, а месседж улавливаться и без картинок.

Инверсия цветов в темной теме

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

Решение. Задавайте не контрастные цвета (не черный и белый) или замените элемент картинкой. В первом случае, даже при инверсии в темной теме, текст будет читаемым для пользователя, во втором же — картинка поможет точно сохранить цвета элемента, поскольку на нее инверсия не сработает. 

Светлая тема:

Темная тема с проблемой: 

Темная тема с решенной проблемой:

Непоследовательный брендинг

К этой проблеме приводит использования большого количества разных шаблонов под различные инфоповоды. Несоответствия в брендинге сбивают с толку получателей. 

Решение. Используйте единый мастер-шаблон для рассылок. Шаблон электронного письма должен отражать индивидуальность бренда (его цветовые схемы, логотипы и шрифты), но при этом сохранять четкую ассоциацию с ним. Чтобы шаблон не приедался пользователю, используйте уникальный дизайн, а также меняйте его раз в 6-12 месяцев.

Лучшие практики в верстке писем

Исходя из самых распространенных ошибок, давайте структурируем наиболее полезные практики в верстке рассылок.

Оптимизация изображений

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

1. Используйте JPEG для фотографий и изображений с множеством цветов.
2. Выбирайте PNG для изображений с прозрачностью или простой графикой.
3. Рассмотрите GIF-файлы для простой анимации и графики.
4. Используйте изображения шириной около 600–800 пикселей.
5. Предоставьте альтернативный текст для изображений, которые не прогружаются из-за проблем с доступностью или ограничений почтового клиента.

Соблюдение допустимых размеров письма

1. Вес письма должен быть в границах 80-100 КБ.
2. Размер шрифта основного текста не должен превышать 14–16 пикселей.
3. Ширина email-шаблона примерно 600 пикселей, чтобы он помещался в область просмотра большинства устройств и почтовых клиентов.

Универсальные теги и встроенные стили CSS

Используйте универсально поддерживаемые теги и атрибуты HTML, чтобы обеспечить совместимость между почтовыми клиентами. Придерживайтесь широко признанных стандартов HTML и CSS. Чтобы улучшить отображение рассылок, используйте встроенные стили CSS, а не внешние таблицы стилей, ведь некоторые почтовые клиенты могут их не поддерживать.

Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Встроенный CSS пример</title>
</head>
<body>
    <h1 style="color: blue; font-size: 24px;">Это Заголовок</h1>
    <p style="font-family: Arial, sans-serif; line-height: 1.5;">Это параграф текста со встроенным CSS стилем</p>
    <div style="background-color: #f0f0f0; padding: 10px;">
        <p style="font-weight: bold;">Это div контейнер со встроенным стилем</p>
    </div>
    <a href="https://www.example.com" style="color: green; text-decoration: none;">Ваш_сайт.com</a>
</body>
</html>

Вот некоторые из наиболее часто поддерживаемых HTML-тегов для шаблонов электронной почты.

Табличная верстка макета

Хотя это кажется устаревшим, использование HTML-таблиц для макета может помочь обеспечить согласованное отображение в разных почтовых клиентах. Современные методы макетирования CSS могут поддерживаться не полностью.

Стандартные шрифты

Используйте веб-безопасные шрифты, такие как Arial, Helvetica, Times New Roman или Georgia, чтобы гарантировать единообразие типографики вашего электронного письма в разных почтовых клиентах.

Шестнадцатеричные цветовые коды

Используйте шестнадцатеричные коды (Hexadecimal), которые широко поддерживаются почтовиками и являются безопасным выбором для определения цветов.

<p style="color: #FF0000;">Это красный текст</p>

Параметры UTM

Используйте параметры UTM для отслеживания эффективности кампании.

Добавляйте UTM-теги к ссылкам в электронных письмах, чтобы отслеживать клики и измерять эффективность рассылок по электронной почте.

<a href="https://www.example.com/landing-page?utm_medium=email&utm_source=your_esp&utm_content=banner"> 
Нажмите здесь, чтобы перейти на наш сайт
</a>

В этом примере:

• utm_medium=email указывает, что средством передачи является «email» — канал электронная почта;
• utm_source=your_esp указывает, что источником является «your_esp» — сервис рассылок;
• utm_content=banner указывает, что контентом, с которого перешли по ссылке является «banner» — баннер. 

Когда получатели нажмут на эту ссылку в электронном письме и посетят веб-страницу, параметры UTM будут переданы на аналитическую платформу или систему отслеживания. Это позволяет отслеживать эффективность почтовой кампании с точки зрения среды, источника и контента, которые привели посетителей на сайт.

Медиа-запросы

Медиа-запросы в CSS используются для применения разных стилей в зависимости от различных характеристик устройства пользователя. Они в основном полезны в адаптивном веб-дизайне, чтобы гарантировать, что макет и стиль веб-сайта адаптируются к различным размерам экрана, разрешениям и другим свойствам устройств.

Однако не все почтовики поддерживают медиа-запросы, поэтому тестирование перед отправкой обязательно.

В данном случае мы задаем трем блокам .unique, .unique1 и .unique2 ширину 29%, чтобы они не «ехали» при просмотре на мобильном устройстве. 

В результате получаем правильное и адаптивное отображение:

FAQ

Какая верстка используется для писем?

Для создания эффективных email-рассылок можно использовать три основных метода верстки.

1. Верстка в блочном редакторе с нуля (Drag-n-drop редактор). Подходит для всех уровней специалистов. Позволяет быстро добавлять элементы и управлять адаптивностью.
2. Верстка с использованием готовых шаблонов. Удобна для триггеров, креативных дизайнов, специфических и праздничных рассылок. Предлагает множество шаблонов для различных сценариев.
3. HTML-верстка для опытных и бесстрашных. Предоставляет полный контроль, высокую гибкость и уникальность дизайнов. Требует знаний HTML/CSS.

Оптимальный вариант — комбинирование drag-n-drop редактора и знаний HTML/CSS.

Как правильно делать email-рассылки?

Перечислю частые ошибки и способы их исправления. 

1. Пренебрежение адаптивным дизайном. Решение: тестируйте рассылки на различных устройствах перед отправкой.
2. Игнорирование совместимости почтового клиента. Решение: тестируйте в различных почтовых клиентах, избегайте избыточного CSS и JavaScript.
3. Большие размеры файлов. Решение: оптимизируйте изображения, минимизируйте код, соблюдайте допустимый размер письма.
4. Сильная зависимость от изображений. Решение: всегда добавляйте альтернативный текст для изображений, создавайте письма такими, чтобы посыл сохранялся даже без отображения картинок.
5. Инверсия цветов в темной теме. Решение: не используйте слишком контрастные цвета (черный и белый), чтобы при инверсии их было видно, или заменяйте элементы картинками.
6. Непоследовательный брендинг. Решение: используйте единый мастер-шаблон для рассылок, а также меняйте его раз в 6-12 месяцев, чтобы сохранять активность базы.

Как верстать письмо для рассылки?

Используйте лучшие практики в верстке писем.

1. Оптимизируйте изображения.
2. Соблюдайте допустимые размеры писем.
3. Используйте универсальные теги и встроенные стили CSS.
4. Добавляйте параметры UTM.
5. Используйте стандартные шрифты, табличную верстку макета и шестнадцатеричные цветовые коды.
6. Используйте медиа-запросы для адаптивности.