Укр
Рус
Українська мова
Русский язык
Маркетинг

Как правильно верстать электронные письма: ТОП-советов для email-маркетолога

Формулы идеального письма не существует? Скорее всего да, ведь все слишком индивидуально. Вместе с тем, существуют определенные правила и особенности создания эффективных электронных писем. Мы собрали лучшие из них. Читаем и запоминаем!
28 июля 2021
0
8 мин
logo

Хочешь зарабатывать больше? Пройди курс Комплексный интернет-маркетинг от команды tripmydream и освой профессию за 3 месяца!

    Содержание

Основные проблемы, возникают при верстке письма

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

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

А теперь давайте разберем, почему возникают такие проблемы:

Причин, почему верстка «плывет» может быть множество — но об этом говорить долго и бессмысленно. Чаще всего это происходит по следующим причинам:

  1. Обилие программ и интернет-сервисов для чтения почты.
  2. Не все CSS- и HTML-теги работают в имейлах.
  3. Разная ширина экрана на телефоне и компьютере.

А сейчас мы соберем основные правила, которые стоит знать и помнить email-маркетологам, чтобы понимать, что не так с рассылкой и как корректно составить ТЗ.

Что стоит знать о верстке письма

Макет письма

Любое письмо состоит из четырех блоков:

  • прехедер;
  • шапка;
  • тело;
  • футер (подвал).

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

Ширина контентной части, желательно, должна быть не больше 600 пикселей — это самый удобный размер для большинства устройств и легко подстраивается под каждое письмо. Если неправильно выстроить ширину, то письмо может «расплыться». Фон может быть абсолютно любого цвета и размера — тут никаких ограничений нет.

Не стоит использовать JavaScript, Flash и Active X — зачастую такие письма отправляются в спам. А также для корректного отображения пользуйтесь универсальными тегами и атрибутами.

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

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

На самом деле, это устаревший метод. Но во время создания email-рассылки — это самый удачный метод для нормального отображения письма.

Как структурируется при этом письмо? Основная таблица делится на ячейки, в которые помещаются остальные таблицы. В этих ячейках располагается весь контент — от изображений до ссылок. Это все может помещаться в одну или несколько колонок. Но чем меньше колонок — тем лучше. Если будет много колонок, ширина будет маленькой, а то есть текст будет нечитабельным. Лучше всего подойдет шаблон одной колонки, то есть блоки будут располагаться друг под другом последовательно. Такой шаблон будет отлично адаптироваться под разные устройства.

Адаптация писем

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

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

Оформление текста

Для того, чтобы успешно заверстать письмо, необходимо использовать стандартные шрифты, такие как — Arial, Verdana, Tahoma, Times New Roman. Эти шрифты поддерживаются на всех устройствах и именно от них зависит читабельность текста.

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

При редактирование кода укажите стилевые параметры текста для каждого текстового блока: цвет и интерлиньяж (line-height), размер шрифта (font-size в px или pt) b и гарнитуру (font-family) — это поможет отобразиться письму так, как было запланировано изначально.

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

Оформление ссылок

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

Почтовые сервисы плохо определяют редирект или сокращенные ссылки. Из-за неточности URL и конечного адреса письма уходят в спам.

Про изображения

Необходимо использовать изображения в формате JPEG, PNG, BMP и сжимать их для быстрой загрузки.

Указывайте высоту, ширину изображения и альтернативный текст — это важно учитывать, чтобы изображения и баннеры не съехали.

Чтобы письмо не улетело в спам, добавляйте plain text версию письма (письмо, которое состоит из одного текста). Такой случай необходим для почтовых клиентов, не отображающих HTML. И не забывайте вставлять ссылки в изображения — получатели часто кликают по картинке.

Если у вас нет верстальщика

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

Letteros

Тут есть множество шаблонов для рассылок, и для этого совсем не нужны знания HTML. Каждое новое письмо собирается в блочном редакторе очень быстро. Блоки в письме можно править прямо во время сборки. Очень удобное дополнение — проверка орфографии, кода и адаптивности письма.

GetResponse

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

Unisender

В этом сервисе можно подстроить шаблон под себя, а во время отправки сделать анализ статистики в личном кабинете. Также тут есть более 100 готовых бесплатных шаблонов и можно персонализировать письма.

Что главное в верстке писем?

  1. Ширина письма должна быть не более 600 пикселей.
  2. Каждое письмо верстается таблицей или строится модулями.
  3. Стоит использовать блочную адаптацию.
  4. Пользуйтесь универсальными тегами и атрибутами.
  5. Только стандартные шрифты.
  6. Ставьте ссылки в изображение.
  7. Используйте макет одной колонки, где блоки строятся друг под другом последовательно.
  8. Изображения используйте в форматах JPEG, PNG, BMP, GIF и не забывайте их сжимать.
  9. Поясняющий текст пишите текстом — не используйте URL.
  10. Если у вас нет верстальщика — используйте конструктор писем.
  11. Не стоит использовать JavaScript, Flash-анимацию, укороченные ссылки и редирект.

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

Понравилась статья?
😍
5
😂
1
😄
1
😐
1
🤔
😩
РАСCКАЗАТЬ ДРУЗЬЯМ:
Комментариев нет