Верстка писем для email рассылки: Как верстать email письма — инструкция от А до Я

Как верстать email письма — инструкция от А до Я

Представьте: ваше письмо готово и выглядит одинаково красиво на всех устройствах. Вот только это далеко от реальности: различные почтовые программы — Gmail, Яндекс.Почта и т. п.) по‑разному отображают один и тот же HTML-код. Поэтому задача верстальщика — не просто перевести дизайн шаблона в код, но и сделать так, чтобы рассылка везде выглядела хорошо. Об этом и поговорим.

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

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

По сути, HTML-вёрстка для email-рассылки — это набор таблиц, которые находятся в других таблицах. Мы заглянули в вёрстку и использовали внутренние значения border, заменив их на 1:

Особенности и ограничения вёрстки электронных рассылок

Тег <style>

Этот тег задаёт стили CSS для HTML-вёрстки писем для рассылки — шрифты, цвета, расположение отдельных блоков и других визуальных элементов.

Важная информация: style поддерживается не всеми почтовыми клиентами (вот простая таблица, которая это показывает). Поэтому и медиазапросы могут обернуться проблемами — они будут работать не везде.

Сокращённая форма стилей

Так как не все почтовые клиенты поддерживают тег <style>, все стили нужно инлайнить — писать их в атрибуте и не в сокращённой форме, а в полной. Сравните два варианта:

Сокращённая форма

h2 {

  color: #fff;

}

Полная форма

h2 {

  color: #ffffff;

}

Нам нужен второй. Кстати, для инлайна стилей и «перевода» сокращённой формы в полную можно использовать инлайнеры — такой сервис уже встроен в Letteros.

Шрифты

Шрифты в вёрстке имейлов — тот случай, когда лучше не отступать от классики и использовать только стандартные веб‑шрифты. Вот стандартный список шрифтов, применяемых для HTML-писем:

font-family: Arial, Helvetica, sans-serif;

font-family: Arial Black, Gadget, sans-serif;

font-family: Georgia, serif;

font-family: MS Sans Serif, Geneva, sans-serif;

font-family: MS Serif, New York, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Times New Roman, Times, serif;

font-family: Trebuchet MS, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif.

Если подключаются другие шрифты, нужно помнить, что это будет работать только в тех почтовиках, где поддерживается тег <style>. 

Размер HTML-кода

Стоит знать: почтовый клиент Gmail обрезает email, код HTML которых превышает 100 кб. Так пользователи увидят слова «Письмо показано не полностью» и ссылку на полный текст:

Чтобы email не обрезались, нужно сокращать их код до 100 кб. Для этого можно использовать Минификатор кода — он сжимает код в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.

Изображения

Чтобы все изображения (в том числе и фоновые) в письме отобразились корректно, главное использовать только следующие форматы — jpg, gif и png. 

Технических ограничений по весу изображений в шаблонах писем нет. Но при мобильном интернете после клика по теме письма очень «тяжёлые» картинки будут долго открываться. Поэтому картинки для баннера должны весить не больше 150 килобайт, а все остальные — не больше 50.

Чтобы сжать картинку до нужно размера, можно воспользоваться специальными сервисами — Optimizilla и TinyPNG. Или встроенным сервисом в Letteros.

JavaScript

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

Работает AMP пока не везде: Gmail, Mail.Ru, Yahoo! Mail технологию уже освоили, а вот Яндекс ещё нет, и в его почтовых сервисах AMP-функционал отображаться не будет. 

Опросы

В письмах бывают опросы, а в них — чекбоксы, галочки, поля для ввода и другие детали, которые не поддерживаются в вёрстке. Как их сделать?

Первый способ — это NPS-опрос с одним закрытым вопросом в стиле «Оцените нашу работу от 1 до 10». Результаты покажут, как подписчик оценил работу, почитав ваше письмо:

Второй способ подходит для открытых вопросов: на кнопку (или в любом другом месте) в рассылке вешается ссылка на опрос в Google Forms.

Третий вариант — нечто среднее между первыми двумя. Просто вставляем в электронное письмо вопрос с несколькими кнопками ответа — и пользователь переходит на сайт, где ответ на первый вопрос уже дан, но есть ещё несколько неотвеченных.

Добавление в календарь

Подписчик может добавить в свой календарь событие из рассылки — вот как это работает: 

1. Получает рассылку с анонсом события.
2. Нажимает на кнопку «Добавить в календарь».
3. Календарь автоматически открывается и предлагает добавить событие.

Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и последнее — отправить её пользователям. Это работает со всеми популярными типами календарей: Google, Яндекс, Yahoo!, Mail.ru, Outlook или iOS. В этой статье есть подробная инструкция. 

Счётчики обратного отсчёта

Таймер обратного отсчёта — отличный инструмент, чтобы напомнить в цепочке промописем: нужно поторопиться.

Чтобы таймер работал корректно, его лучше сверстать скриптом — либо собственным, либо использовать сервисы Sendtric или MotionMail.

Отступы в вёрстке рассылок

Отступы — одни из основных элементов вёрстки, и часто в письмах с ними возникают проблемы. Поэтому поговорим и о них тоже.

Свойство padding устанавливает внутренние отступы со всех сторон элемента. Но вертикальный отступ внутри структуры body можно задать и с помощью пустой таблицы с указанием высоты самого отступа. 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
    </tr>
</table>

Font-size обнуляем. Ещё вариант — отбивка отступа линией. Вот такой:

Её код: 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" valign="top">
        </td>
    </tr>
</table>

Это таблица, у которой нет никакой размерности. Значение border-top-width как раз и указывает на линию толщиной 1px серого цвета border-top-color, а значение border-top-style задаёт линии сплошной стиль solid. Есть ещё несколько значений, которые можно использовать:

• none обнуляет линию;
• dotted состоит из набора точек;
• dashed указывает на пунктирную линию;
• double создаёт двойную линию;
• groove для эффекта вдавленной линии;
• ridge отвечает за рельефную линию; 
• inset и outset определяют трёхмерную линию.  

Margin же в CSS определяет внешний отступ на всех четырёх сторонах элемента:

margin-top, margin-right, margin-bottom и margin-left.

Осталось самое интересное — мобильная адаптация. 

Мобильная адаптация 

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

Для этого нужно указывать размер каждого блока в процентах, а не использовать пиксели — и HTML-вёрстка email-писем подстроится под разные экраны. Такой подход называют резиновым. 

Перестраивающиеся блоки

Картинки на мобильных устройствах уменьшаются пропорционально ширине экрана. Как это работает: 

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

Раз — и картинка уехала вниз. 

Два перестраивающихся блока

По сути, два перестраивающихся блока — это два блока div, которым задано свойство display со значением inline.

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

Инлайн‑блоки занимают всю заданную ширину контейнера. Соответственно, если использовать ширину письма в 600px, то два одинаковых контейнера будут по 300px. Вот пример кода:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="top">
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top">
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END-->
        </td>
    </tr>
</table>

Cellpadding и cellspacing, естественно, обнуляем, а td align задаём center. Закрывает код первого блока условный комментарий для Outlook — хотя ему вообще не нужны перестроения, ведь это десктопный почтовик. Но иначе он не увидит закрывающий тег </td> в первом контейнере. 

Второй блок — почти такой же, только с условным комментарием для Outlook.

В итоге таблица выглядит так:

контент

контент

А если экран сузится даже на один пиксель, блоки перестроятся. Пример:

контент

контент

Если же необходимо задать и использовать разную ширину ячеек, действуйте так: 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="top">
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top">
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END-->
        </td>
    </tr>
</table>

Здесь width превратился в max-width, потому что размер стал больше 300px: если задать жёстко ширину, экран «упрётся» в 400px. Теперь наша таблица выглядит так:

контент

контент

А так — при перестроении:

контент
контент

То же самое и с баннерами. Часто контент баннера разделён на две стороны: слева — текст, справа — картинка:

При адаптации баннер может перестраиваться по‑разному — правая колонка может «уйти» под другую:

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

Обратное перестроение блоков

Такая вёрстка для email-рассылки работает примерно так же, но есть одно но: атрибут dir. Он используется для задания направления: 

• ltr (Left To Right) — текст отображается слева направо;
• rtl (Right To Left) — справа налево.

Код начинается с table border, далее tr служит контейнером для создания строки таблицы:  

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td dir="rtl" align="center"><!--[if (gte mso 9)|(IE)]>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td dir="rtl">
            <![endif]-->
            <!-- Item -->
            <div>
                <table cellpadding="0" cellspacing="0" border="0" dir="ltr">
                    <tr>
                        <td align="center">
                            Блок 2
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0" dir="ltr">
                    <tr>
                        <td align="center">
                            Блок 1
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td></tr>
            </table>
            <![endif]--></td>
    </tr>
</table>

Здесь td align выравнивает содержимое ячейки по горизонтали. Вот пример, как код отобразится на большом экране:

Блок 1

Блок 2

А так — на мобильном: 

Блок 2

Блок 1

Как видим, это два тега div, но читаться они будут в обратную сторону. Плюс появился условный комментарий для Outlook, чтобы он увидел заданное направление. 

Адаптация изображений

Здесь существует правило: для всех изображений шириной больше 300px не нужно использовать и прописывать фиксированную высоту. Когда высота не прописана в коде, система самостоятельно её вычислит пропорционально размеру картинки. 

Чтобы картинка шириной больше 300px начала адаптироваться и не ломала вёрстку, в стилях прописываем ширину в процентном соотношении (100%), и максимальную ширину картинки img (600px), используя резиновый подход:

<span>
    <img src="creative-main.png" alt="Альтернативный текст" border="0"
    />
</span>

Десктопные версии (в том числе Outlook) увидят запись width=600 и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма. 

Кстати, не забудьте в alt прописать альтернативный текст — без него никуда. 

Масштабирование кнопок

Бывает, что кнопки растягивают на всю ширину экрана:

Вот как будет масштабироваться такая кнопка в мобильной версии:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="middle" bgcolor="#000"
           >
            <!--[if gte mso 9]>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td nowrap align="center" valign="middle">
            <![endif]-->
            <a href="#" target="_blank"
              >
                Текст кнопки
            </a>
            <!--[if gte mso 9]>
            </td></tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

Чуть разберём: height и line-height здесь одинаковые, также как background и bgcolor. Target задано свойство _blank — так страница загрузится в новом окне браузера.

Важно, чтобы высота строки соответствовала высоте кнопки, а её текст был меньше 300px в ширину. Если будет больше — текст либо сломает адаптацию, упёршись в края кнопки при сужении [при наличии свойства white-space со значением nowrap], либо неминуемо перестроится и вылезет за пределы кнопки.

Тёмная тема

Как это работает? Всё просто: при включении Dark Mode фон страницы становится тёмным, а шрифт — светлым. 

Некоторые почтовики делают прямую инверсию «белый — чёрный», а некоторые «подбирают» тёмный аналог. Так, если фон верстается картинкой, происходит инверсия цвета текста, что может повлиять на его читабельность. Важно, что разные сервисы по‑разному работают с тёмной темой и результат будет отличаться. 

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

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

Ещё лучше — сделать фон таким цветом, на котором будет хорошо читаться как белый текст, так и чёрный:

Если фон будет верстаться кодом, его цвет тоже будет инвертироваться. Однако какие‑то градиенты нужно верстать картинкой: прямой градиент из двух цветов легко сверстать кодом, но если он более сложный — уже не получится и придётся использовать классический баннер. 

Чёрно‑белые или серые иконки, которые используются в дизайне письма, должны быть с обводкой в цвет фона (1–1,5 px). В светлой теме её не будет видно, зато в тёмной — ещё как. Это же правило относится к нестандартным шрифтам, которые используются в заголовках.

Если кнопку верстать кодом, она тоже будет инвертироваться. Когда в светлой теме у кнопки есть обводка, этого можно избежать: верстать кнопки картинками, добавляя заливку в цвет фона. В светлой теме это будет выглядеть как обводка, а в тёмной — как обычная кнопка. Рекомендуем использовать этот приём.

Как сделать так, чтобы вёрстка точно не «поехала»

Есть решение: собрать цепочку электронных писем в конструкторе Letteros и использовать для этого шаблон. Это модульный редактор, благодаря которому можно создать вёрстку шаблона письма без верстальщика и знаний HTML. 

Платформа показывает отображение письма на огромном количестве (100+) популярных устройств, а встроенные сервисы сразу проверяют письмо на ошибки — и рассылка выглядит красиво как на десктопе, так и в мобильных почтовиках: вёрстка писем для email-рассылки адаптируется под любой вид устройства. Там же можно тестировать рассылки и использовать другие возможности сервиса.

Посмотрите демо и переходите на Letteros, где на создание писем уходит 15 минут.

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

Вёрстка писем для емейл-рассылки: 5 способов оптимизации

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

Классический подход

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

Плюсы

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

Минусы

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

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

Рассмотрим основные способы оптимизации этой схемы.

Мастер-шаблоны

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

Пример мастер-шаблона

В блоге EMAILMATRIX есть подробные статьи с нюансами создания мастер-шаблонов и емейл-гайдлайнов для компаний.

Плюсы

Мастер-шаблон заметно сокращает два самых трудозатратных этапа: дизайн и вёрстка рассылки сводятся к выбору готовых блоков и замене контента в них.

Также он обеспечивают постоянство стиля и предотвращает ошибки на вёрстке, так как не нужно ничего создавать с нуля.

Минусы

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

Однако со временем всё равно потребуются новые блоки, а все предусмотренные могут устареть. Придётся регулярно обновлять мастер-шаблон на обоих уровнях, чтобы он оставался актуальным. Это тоже требует времени.

Автоматические письма

Автоматизация заключается в создании шаблона писем, содержимое в которые затем будет подтягиваться программно, без участия людей. Мы в EMAILMATRIX используем этот метод для еженедельных анонсов статей, а, например, vc.ru — для емейл-дайджестов лучших публикаций.

Автоматическое письмо EMAILMATRIX

Плюсы

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

Минусы

Обойтись только автоматическими контентными письмами очень сложно.

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

Емейл-фреймворки

Фреймворки предполагают упрощённый синтаксис вёрстки — понятный и компактный. Затем он преобразуется в привычную HTML-вёрстку.

Обобщённо работу фреймворка можно представить следующей схемой:

Для создания кнопки в синтаксисе фреймворка нужно только указать элемент (m-button) и задать параметры: цвет фона, ширину и текст. Строчка экспортируется в HTML-код с отдельным блоком для корректной работы в Outlook

Рассмотрим несколько фреймворков. Старший из них — Foundation for Emails — появился ещё в 2013 году. Для разметки в нём используется язык Inky HTML, а готовое письмо собирается на Gulp или с помощью сервиса инлайнера.

Следующий по старшинству — MJML. Это проект с открытым исходным кодом, который существует с 2016 года. Работает с одноимённым языком разметки, а готовую емейл-вёрстку можно получить после сборки проекта или воспользовавшись онлайн-редактором либо приложением. MJML — один из самых известных емейл-фреймворков. Среди особенностей — поддержка нетипичных компонентов вроде каруселей и аккордеонов (правда, они мало где работают) и формирование QR-кодов.

У MJML есть и существенный недостаток — по крайней мере для российских пользователей. Его разработчики делают большой акцент на использовании в письмах медиазапросов, которые не поддерживаются «Яндекс Почтой». А на неё приходится около 30% пользователей в РФ, так что применение фреймворка для рассылок российской аудитории представляется крайне сомнительным.

Самый молодой емейл-фреймворк — Ampier Framework. Он подключается как JavaScript-библиотека, после чего сразу готов к использованию. Для разметки используется язык TJML. Его ключевое отличие — из единого кода формируются и HTML-, и AMP-части письма.

Среди дополнительных возможностей Ampier Framework — проверка отображения письма в двух вариантах тёмной темы. Это классический — с инверсией светлых цветов и неизменностью тёмных — и характерный для Gmail на iOS, когда происходит полная инверсия цветов. Фреймворк не накладывает каких-либо ограничений на структуру и дизайн письма и даёт полную творческую свободу, в том числе для управления мобильной адаптацией и формирования AMP/HTML-версий.

Плюсы

Фреймворки ощутимо упрощают и ускоряют вёрстку писем для рассылки.

Минусы

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

Блочные редакторы

Блочные редакторы, или билдеры, позволяют практически исключить вёрстку как этап классической схемы. Сегодня их довольно много.

В Mailchimp, Stripo, емейл-конструкторе «Тильды» и большинстве других письмо полностью собирается из блоков из их собственных библиотек. Пользователь задаёт сетку, добавляет в неё картинки, кнопки, тексты и затем модифицирует элементы под свои требования.

Интерфейс емейл-конструктора «Тильды»

В Letteros пользователь загружает свой мастер-шаблон и затем берёт блоки оттуда и наполняет контентом. Схожая функция есть у Stripo: здесь можно создавать собственные блоки.

Плюсы

Письма создаются быстрее и почти без участия верстальщика.

Минусы

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

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

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

Mailchimp и Stripo с весны 2022 года не работают в РФ. Оплатить сервисы через российские платёжные системы невозможно.

Плагины для Figma

С помощью плагинов можно реализовать nocode-подход к разработке писем. Среди них — Emailify и российские Marka и Ampier.

Интерфейсы плагинов схожи. Пользователь собирает письмо из заготовок — ассетов, заменяет контент и указывает параметры вроде темы и прехедера. После рендеринга — переход в интерфейс с дополнительными возможностями. У плагина Ampier они совпадают с фреймворком: проверка тёмной темы и мобильной адаптации, формирование AMP-кода и другие.

Интерфейс плагина Ampier for Figma

Плюсы

Такой подход в принципе исключает вёрстку. К тому же он может значительно ускорить дизайн, если использовать собственные ассеты из мастер-шаблона.

У Marka и Ampier нет никаких ограничений по структуре писем. Обязательна только их сборка с инструментом Auto Layout, который Figma активно продвигает. После недавнего обновления пользоваться им стало проще.

Минусы

В рамках Figma не получится сделать письмо со сложным AMP-интерактивом.

Также вы оказываетесь привязаны к особенностям рендеринга выбранного плагина.

Плагин Emailify использует упомянутый фреймворк MJML, и у него та же проблема с медиазапросами в «Яндекс Почте». В России пользоваться им нужно аккуратно.

Три вывода

• Нет универсального решения, которое подойдёт любому бизнесу. Ориентируйтесь на свои потребности и ресурсы. Для однотипных писем достаточно блочного редактора, при большом штате умелых дизайнеров стоит рассмотреть плагины, а фреймворки полезны тем, кто хочет ускорить вёрстку, не ограничивая себя в творчестве.
• Лучший результат даёт комбинирование подходов и инструментов для разных типов задач.
• Важно пробовать новые инструменты — хотя бы на тестовых проектах. Это позволит найти оптимальные решения.

Полезное руководство по написанию электронного бюллетеня

Бюллетень — это, по сути, миниатюрная газета, рассылаемая по электронной почте. Информационные бюллетени по электронной почте — отличный способ завоевать доверие вашей аудитории и держать их в курсе. Они могут включать привлекательный контент, объявления, рекламные акции или новости.

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

Что такое информационный бюллетень и какова его функция?

Информационный бюллетень — это форма маркетинга по электронной почте, которая рассылается на регулярной основе. Информационные бюллетени по электронной почте могут быть сводками новостей, событий, рекламных акций или контента. Информационные бюллетени по электронной почте — отличный способ наладить отношения с членами вашей «теплой» аудитории (члены «теплой» аудитории — это люди, которые ранее каким-то образом взаимодействовали с вашим брендом).

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

Кто пишет информационные бюллетени?

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

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

Кто подписывается на информационные бюллетени?

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

На что следует обратить внимание при создании собственного информационного бюллетеня

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

Не знаете, какой информационный бюллетень вы хотите запустить? Вот несколько идей для информационных бюллетеней, которые вы могли бы попробовать:

• Обзоры блогов: Отлично подходит для тех, у кого уже есть активный блог, они включают в себя короткий сегмент блога и мотивационную копию, которая побуждает ваших читателей перейти к самому блогу.
• Ближайшие мероприятия: Идеально подходит для организаций, которые проводят мероприятия или мероприятия со всего своего сообщества. Эти электронные письма содержат от трех до пяти событий, которые относятся к одной категории.
• Для клиентов: Этот стиль электронной почты обычно используется розничными торговцами, ресторанами и предприятиями сферы услуг, чтобы информировать свою аудиторию о последних продуктах и ​​предложениях. Он может включать два или три раздела, в которых содержится информация о продукте, предстоящие события и намеки на миссию бренда.
• Развитие лидов: Ценные электронные письма, которые помогут вашей аудитории познакомиться с вашим брендом в удобном для них темпе с помощью краткого и подробного контента, обновлений продуктов, событий или новостей о вашей организации. Обычно они состоят из двух-трех разделов.
• Антология: Коллекция новостей, интересных материалов, подкастов, видео или блогов со всего Интернета. Этот тип электронной почты можно использовать для установления авторитета, развлечения, создания сообщества или совместного рынка. Электронные письма-антологии часто включают пять или более разделов.

Как начать свой информационный бюллетень

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

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

Как структурировать информационный бюллетень

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

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

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

Что включить в информационный бюллетень

В информационный бюллетень необходимо включить восемь основных компонентов.

1 Строка темы, достойная клика

2 Информативный текст предварительного просмотра

3 Ценный рекомендуемый контент

4 Привлекательная графика и легко читаемый макет

5 Четкий призыв к действию

6 Минимальные акции

7 Контактная и социальная информация

8 Вариант отказа от подписки

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

Ценный контент и четкий призыв к действию — главные акценты информационного бюллетеня. Вот несколько примеров полезного контента, который вы можете включить в свой информационный бюллетень по электронной почте: 

• Предстоящие события
• Последние сообщения в блоге или мини-сообщение в блоге только для электронной почты
• Продукты (три или меньше)
• Значение (советы, рекомендации, бесплатные ресурсы и т. д.)
• Проекты, над которыми вы работаете
• Флэш-продажи
• Промышленные или местные новости
• Праздничный контент
• Обратите внимание на сотрудника или клиента
• Покажите гостя или влиятельного человека
• Делитесь любыми открытыми вакансиями, которые есть в вашей компании
• Советы, которые помогут вашим клиентам использовать ваши продукты
• Часто задаваемые вопросы или советы
• Закулисный контент
• Отзывы и тематические исследования
• Пользовательский контент
• Краткий пример лидерства
• Новые рецепты

Как оформить информационный бюллетень

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

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

5 советов по составлению информационного бюллетеня

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

1 Придерживайтесь одной темы

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

2 Дайте подписчикам вескую причину выбрать

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

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

• Код скидки
• Бесплатный загружаемый ресурс, шаблон, электронная книга или руководство
• Бесплатный мини-курс по электронной почте или видеокурс 
• Новые рецепты каждую неделю
• Еженедельные советы

3 Будьте последовательны

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

4 Создавайте заслуживающие клика строки темы

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

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

5 Говорите напрямую с одним человеком из вашей аудитории

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

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

6 вещей, которых следует избегать при написании информационного бюллетеня

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

1 Не делайте его слишком длинным

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

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

2 Будь проще

Как в дизайне, так и в тексте лучше всего подходит минимализм. И имейте в виду, что 81 процент всех электронных писем читается на мобильных устройствах. Убедитесь, что ваш дизайн адаптивен и легко читается на любом устройстве. Всегда проверяйте свой информационный бюллетень, прежде чем отправлять его в свой список, чтобы убедиться, что он читаем!

3 Не забывайте о своей аудитории

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

4 Избегайте слишком большого количества призывов к действию.

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

Вот несколько призывов к действию, которые вы могли бы включить в свой информационный бюллетень:

• Ознакомьтесь с сообщением в блоге
• Переслать это другу, которому это понравится
• Магазин нашей последней распродажи
• Подать заявку на участие в нашем мероприятии
• Купить билеты
• Прочитать руководство
• Получить советы
• Смотреть сейчас

5 Не обманывайте свою аудиторию

Одним из преимуществ рассылки новостей является постоянное внимание к вашему бренду. Но если вы будете рассылать свои информационные бюллетени нечасто или время от времени, ваши подписчики будут чувствовать, что вы их застали врасплох. Если вы собираетесь запустить информационный бюллетень, рассылайте его не реже одного раза в квартал. Еженедельно или ежемесячно – еще лучше! Если вы планируете сделать перерыв в рассылке новостей в любое время, сообщите своей аудитории, когда вы вернетесь к их почтовым ящикам.

6 Не забудьте поставить себя на место ваших получателей

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

Информационный бюллетень Часто задаваемые вопросы

Что такое информационный бюллетень?

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

Как устроен информационный бюллетень?

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

Каковы элементы эффективного информационного бюллетеня?

Информационный бюллетень состоит из восьми основных компонентов: 

1 Строка темы, достойная клика

2 Информативный текст предварительного просмотра

3 Ценный рекомендуемый контент

4 Привлекательная графика и легко читаемый макет

5 Четкий призыв к действию

6 Минимальные акции

7 Контактная и социальная информация

8 Вариант отписки

Пошаговое руководство (с реальными примерами)

Сегодня я покажу вам, как писать рассылку — в стиле сумо.

На самом деле, это те же самые советы по написанию информационных бюллетеней, которые мы использовали, чтобы получать ежемесячный регулярный доход в размере 1846 долларов США, когда мы продвигали эту запись в блоге в наш список адресов электронной почты:

Хотите узнать, как написать информационный бюллетень по электронной почте для себя? Тогда продолжайте читать!

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

Прямой эфир на AppSumo

SendFox ↗

Создавайте автоматизированные кампании информационных бюллетеней с помощью доступного решения для электронного маркетинга

Better Letters ↗

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

WordHero ↗

Использовать ИИ для создания оригинальных сообщений в блогах, рекламы, коммерческих копий, электронных писем и многого другого всего за 1 клик!

1. 4 совета о том, как написать информационный бюллетень

2. 5 шагов для написания вашего первого информационного бюллетеня

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

4. Как передать вашу рассылку на аутсорсинг

4 совета о том, как написать информационный бюллетень

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

1. Сделайте так, чтобы людям было интересно читать

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

И это еще не конец письма! (Извините, Джонатан, мне нравится ваша работа, но я не могу прочитать это в своем электронном письме.)

Я говорю это не для того, чтобы быть суровым — я говорю это, потому что это правда.

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

Это просто человеческая психология.

Точно так же не отправляйте рекламу только в свой список. (Если они выбрали это не поэтому, дайте им то, что они хотят.)

Спросите себя: если бы я получил это электронное письмо, было бы мне интересно? Трудно быть объективным, но постарайтесь.

2. Зафиксируйте процент открываемости

Заставить людей открывать ваши электронные письма — это полдела.

Компания MailChimp провела исследование своих клиентов и обнаружила, что средний показатель открытия по всем отраслям на их платформе составляет всего 20,81%. ^{[ * ]}

Другими словами, только пятая часть ваших подписчиков откроет ваше письмо.  Не очень хорошо.

К счастью, вы можете значительно улучшить это:

1. Написание отличных тем.
2. Укрепляйте доверие аудитории к тому, что ваши электронные письма стоит читать.
3. Использование вашего имени в адресе «От» вместо названия бренда.

Другими словами, вот уравнение:

Интересная тема + Доверие аудитории = Open Rate

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

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

Когда у вас есть доверие И отличная тема? Бум! Высокие показатели открытия.

3. Будьте последовательны в доставке

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

Не отправляйте три письма в одну неделю и ни одного в следующую. Оставайтесь последовательными.

Отправлять еженедельные электронные письма каждую пятницу? Большой! Отправляйте электронные письма раз в две недели или ежемесячно? Потрясающий. Отправлять электронные письма ежедневно или несколько раз в день? Это, вероятно, плохо, если ваши подписчики не знали, на что они подписываются.

Если вы ориентируетесь на статистику, обратите внимание, что исследование HubSpot, в котором были опубликованы медианные показатели открываемости, также учитывало медианные показатели открытий и вовлеченности на основе количества электронных писем, отправляемых в месяц. ^{[ * ]}

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

И по влиянию на рейтинг кликов:

Это кажется, наилучшее место находится между 16-30 писем в месяц  (письмо ежедневно или через день).

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

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

4. Говорите кратко и просто

Последний совет перед тем, как мы углубимся в детали:  Не рассказывайте историю своей жизни!

Я уже упоминал об этом в первом совете, но стоит упомянуть еще раз с другой стороны. Люди с каждым днем ​​становятся все более занятыми. Почти 3,4 миллиона электронных писем отправляются каждую секунду . ^{[ * ]}

Ни у кого нет на это времени!

Так что сделайте себе и своим читателям одолжение и сделайте ваши электронные письма короткими и приятными.

Длина ваших писем не должна превышать 3–5 абзацев. Используйте короткие предложения и простые, легко читаемые формулировки. Попробуйте писать на уровне чтения седьмого класса или ниже (вы можете использовать редактор Hemingway Editor, чтобы проверить уровень чтения вашего контента).

5 шагов для написания вашего первого информационного бюллетеня

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

1. Решите, чем вы хотите поделиться

Первый шаг — решить, что вы хотите сказать или чем поделиться.

Вот некоторые идеи:

• Созданный вами новый контент (сообщения в блогах, видео, инфографика и т. д.).
• Контент других людей, который вы нашли, относится к тому, что волнует ваш список.
• проектов, над которыми вы работаете.
• Запуск нового продукта.
• Скидки и срочные распродажи (используйте экономно).
• *Мини-сообщения в блоге (электронные письма, которые написаны достаточно хорошо, чтобы быть самостоятельным сообщением в блоге).

*Мини-сообщения в блогах — единственные довольно длинные письма, которые я когда-либо отправлял, потому что они представляют большую ценность. Например, Кай Дэвис часто отправляет свой список сообщений в мини-блогах по электронной почте: ^{[ * ]}

Когда вы знаете, чем хотите поделиться, самое время составить информационный бюллетень!

2. Напишите черновик так, как будто вы пишете конкретному человеку

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

В любом случае пишите письмо так, как будто вы пишете этому человеку. Это поможет вам сделать его более личным и интересным, чем если бы вы просто писали «всем».

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

3. Проверка черновика

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

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

Если вам лень, вы можете скопировать и вставить электронное письмо в инструмент для преобразования текста в речь, такой как Natural Readers или даже Word, чтобы он прочитал его вам.

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

4. Сначала разошлите часть списка

Перед отправкой вашего информационного бюллетеня всем подписчикам рассмотрите возможность отправки черновика, который вы только что откорректировали, небольшой части списка (10-15%). Это поможет вам увидеть, какой уровень открываемости получает электронное письмо, и убедиться, что все работает нормально.

Если у вас недостаточно большой список для этого, следуйте нашему руководству по расширению списка адресов электронной почты, чтобы вы могли получить больше подписчиков!

5. Если все в порядке, отправьте всем

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

Похлопайте себя по плечу! Вы написали и отправили информационный бюллетень.

3 продвинутых совета по рассылке новостей, которые понравятся вашим подписчикам

Жаждете улучшения? Я тебя прикрыл! Вот три продвинутых совета, которые помогут поднять ваш информационный бюллетень на новый уровень:

1. Сегментируйте свой список для лучшего вовлечения

Сегментация вашего списка адресов электронной почты означает разделение ваших подписчиков на разные «сегменты» или «сегменты». Это выглядит так:

Сегментированные списки работают намного лучше, чем несегментированные списки. MailChimp обнаружил, что сегментированные списки открываются на 14,31 % чаще и 90 411 удваивают 9.0412  клики по сравнению с несегментированными списками. ^{[ * ]}

Существует несколько способов сегментации списка:

1. На основе того, что они выбрали на вашем веб-сайте (например, руководство по почтовому маркетингу или руководство по SEO).
2. В зависимости от того, какие электронные письма они открывают (например, электронное письмо о маркетинге по электронной почте или электронное письмо о поисковой оптимизации).
3. В зависимости от того, по каким ссылкам они нажимают в электронных письмах (например, ссылка на электронный маркетинг или ссылка на SEO).

В идеале вам нужно сегментировать на основе всех трех.

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

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

Чтобы начать сегментацию в Sumo List Builder, перейдите к Success раздел любой формы.

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

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

2. A/B-тестирование строк темы электронной почты

Следующий «продвинутый» метод, о котором я хочу рассказать, — это сплит-тестирование строк темы электронной почты. (Я взял «продвинутый» в кавычки, потому что на самом деле это довольно просто.)

Сплит-тестирование, или A/B-тестирование, означает отправку двух или более вариантов вашей темы письма, чтобы увидеть, какой из них работает лучше всего (т. е. получает самый высокий показатель открываемости).

Вы также можете провести сплит-тестирование самого контента, например копии электронного письма, типа скидки и т. д., но для простоты мы будем придерживаться строк темы.

Чтобы провести A/B-тестирование ваших тем, сначала проведите мозговой штурм с некоторыми идеями. Придумайте 5-10 идей, а затем выберите две наиболее перспективные для тестирования.

Многие поставщики услуг электронной почты, такие как ConvertKit, позволяют делать это автоматически. Нажмите  A/B  кнопка рядом со строкой темы.

3. Опросите свою аудиторию, чтобы узнать, чего они хотят

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

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

Вот как это делается:

1. Решите, какие вопросы вы хотите задать (используйте то, что я сказал выше, для мозгового штурма).
2. Создайте бесплатную учетную запись Typeform или используйте форму Google (оба варианта отлично работают).
3. Добавьте в опрос вопросы с вариантами ответов. Вы можете выбрать из множественного выбора, короткого текста, длинного текста и т. д.

4. Скопируйте URL-адрес опроса. Напишите электронное письмо, чтобы отправить его в свой список, и включите URL-адрес для вашей аудитории, чтобы пройти опрос.
5. Ждите результатов и обзора!

Вот пример электронного письма с опросом, которое вы можете отправить своему списку:

Привет, [имя]…

Мне нужна ваша помощь.

Видите ли, мы пытаемся [миссия, например, научить миллион человек зарабатывать 100 долларов с помощью рекламы в Facebook]. Но мы не можем сделать это без вас!

Мы хотим, чтобы наш [контент/продукт] был как можно лучше. Для этого нам нужно, чтобы вы сказали нам, что вам нужно, чтобы мы могли это предоставить.

Пожалуйста, потратьте 60 секунд, чтобы заполнить этот сверхбыстрый опрос и помочь нам отправить вам лучший [контент/продукт]: URL

Большое спасибо!

Продолжайте сокрушать его,
[Имя]

Тогда в опросе могут быть такие вопросы, как:

1. Какие проблемы возникают у вас с рекламой в Facebook? (полный ответ)
2. На каком этапе рекламного процесса вы больше всего застряли? (множественный выбор)
3. Сколько писем вы хотели бы получать каждую неделю? (множественный выбор)
4. Есть ли еще что-нибудь, что вы хотели бы нам сообщить? (полный ответ)

Легко!

Как передать информационный бюллетень на аутсорсинг

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

Да, и у вас есть множество вариантов:

1. Наймите кого-нибудь с сайта фриланса, такого как FreeeUp, Fiverr или UpWork.
2. Наймите кого-нибудь из местных или знакомых и обучите их этому.
3. Наймите агентство, которое специализируется на электронном маркетинге.

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

Если вы решите нанять кого-то в качестве виртуального помощника или автора новостной рассылки, вот несколько советов, которые помогут упростить процесс:

1. Попробуйте найти людей с восторженными отзывами. Отзывы говорят тысячу слов.
2. В своем списке вакансий будьте как можно тщательнее. Объясните точный набор навыков, который вам нужен, в чем заключается ваш бизнес, немного о вас, если это имеет смысл, и ваши ожидания с точки зрения результатов, к которым вы стремитесь.