Верстка писем для email рассылки онлайн: Конструкторы писем: 18 классных сервисов для создания email

Вёрстка писем для емейл-рассылки: 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, и у него та же проблема с медиазапросами в «Яндекс Почте». В России пользоваться им нужно аккуратно.

Три вывода

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

4 сервиса для тестирования HTML-писем — Журнал Mindbox о разумном бизнесе

Учебные материалы

7 сентября 2021

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

Содержание

• Зачем нужны сервисы для тестирования писем
• Litmus
• Email on Acid
• Mail Tester
• Email Preview Services
• Что в итоге
• Полезные ссылки

Зачем нужны сервисы для тестирования писем

Сервисы проверки рассылок созданы, чтобы облегчить жизнь email-маркетолога, потому что это:

Удобно ― не придется регистрироваться во всех почтовых программах и отправлять письма самому себе.

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

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

Возможности Mindbox для самостоятельной настройки email-рассылок

мнение

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

Тут нужно идти от общего к частному: сначала поймайте все баги в сервисе проверки, а потом протестируйте рассылки на реальных почтовиках.

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

Петр Никитин, product owner дополнительных каналов

Что это: сервис для создания рассылок, тестирования писем и анализа email-кампаний.

Минусы	Плюсы
— довольно дорогой;	— покажет, как выглядит письмо в 90 почтовиках и устройствах;
— охватывает мало популярных в России почтовиков, но проверяет отображение писем в иностранных почтовых сервисах, которыми у нас не пользуются.	— предложит выбрать, в каких клиентах и устройствах тестировать;
	— отметит ссылки, которые не работают;
	— отыщет картинки без alt-тега;
	— проанализирует, поддерживает ли код почтовая программа;
	— проведет спам-тест.

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

Результат теста рассылки в Litmus

Что это: сервис, который, как и Litmus, помогает создавать, тестировать и анализировать рассылку.

Минусы	Плюсы
— довольно дорогой;	— покажет, как выглядит письмо в 90 почтовиках и устройствах;
— в базе устройств для проверки совсем немного устройств на Android.	— подскажет, что сделать, чтобы письмо было удобно читать людям с нарушениями зрения и дислексией;
	— проверит корректность ссылок;
	— поможет установить фиксированный размер изображений и первый кадр гифок для почтовиков со статичными картинками;
	— продемонстрирует, как выглядит письмо в dark mode;
	— поделится опытом в верстке и дизайне писем в блоге;
	— проведет спам-тест.

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

Интерфейс сервиса Email on Acid

Что это: сервис, который в основном проверяет рассылку на технические ошибки. Он не покажет, каким увидит письмо адресат, но поможет доставить его в папку «Входящие», а не в «Спам».

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

Сколько стоит: от 50 евро за 500 проверок. Четыре бесплатных теста в день без регистрации. Если зарегистрироваться, можно делать 20 тестов в день бесплатно.

Результат проверки и рекомендации Mail Tester

Что это: такой же функциональный сервис, как хедлайнеры Litmus и Email on Acid, но в три раза дешевле.

Минусы	Плюсы
— охватывает мало популярных в России почтовиков, но проверяет отображение писем в иностранных почтовых сервисах, которыми у нас не пользуются.	— покажет, как выглядит письмо в 50 почтовиках и устройствах;
	— продемонстрирует, как выглядит письмо в dark mode;
	— протестирует рассылку на реальных устройствах;
	— предложит выбрать, в каких клиентах и устройствах тестировать;
	— проведет спам-тест;
	— сгенерирует ссылку, с помощью которой можно поделиться результатами проверки;
	— стоит дешевле сервисов-конкурентов.

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

Превью письма в Email Preview Services

мнение

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

Петр Никитин, product owner дополнительных каналов

Что в итоге

Если сравнить функциональность сервисов между собой:

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

Что делать, если рассылки попали в спам

Почему обрезается рассылка на Gmail и как это починить

Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога

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

Как настроить постмастеры Mail, Yandex и Gmail

• Рroduct owner дополнительных каналов

  Пётр Никитин

• Автор

  Екатерина Жукова

• Редактор

  Филипп Вольнов

• Рroduct owner дополнительных каналов

  Пётр Никитин

• Редактор

  Севиль Нагаева

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

Содержание

Переключение

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

• Логотип
• Верхний и нижний колонтитулы
• Кнопки призыва к действию и социальных сетей
• Стиль шрифта (заголовки, основной текст и ссылки)

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

1. Письмо или текстовый шаблон

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

И еще один от The Muse:

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

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

Вот пример из Drybar:

Письменные или текстовые электронные письма просты. Важные компоненты, которые следует учитывать при включении в шаблон рассылки по электронной почте: 9.0003

1. A стандартный, фирменный заголовок/логотип
2. Легко читаемый безопасный для электронной почты шрифт для основного текста
3. Кнопка призыва к действию
4. Электронная подпись
5. Нижний колонтитул

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

2. Шаблон приглашения присоединиться

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

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

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

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

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

1. Логотип/заголовок
2. Один или два сильных визуальных образа (особенно продукта)
3. Довольно короткий раздел с основными моментами продвижения
4. Четкий и сильный призыв к действию
5. Нижний колонтитул

3. Шаблон оповещения о новостях или объявления о продукте

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

Компания по производству одежды Everlane часто использует этот базовый формат в электронных письмах с объявлениями:

Эти шаблоны, вероятно, будут значительно обновляться от одного использования к другому, особенно при анонсировании новых продуктов (у вас, вероятно, будут специальные художественные и цветовые схемы, посвященные новому изделию), но важно иметь шаблон со структурой, стандартной шириной и потоком. Everlane, например, всегда нуждается в одном и том же заголовке, разделителях контента, разделе контента «Радикальная прозрачность» и нижнем колонтитуле для подобных электронных писем с объявлениями.

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

1. Логотип/заголовок
2. Заполнитель для иллюстрации
3. Последовательно отформатированный раздел для основного текста
4. Четкая кнопка призыва к действию
5. Нижний колонтитул

4.

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

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

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

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

1. Логотип/заголовок
2. Подходящие заполнители для иллюстраций
3. Хорошо организованный раздел основного текста
4.  Четкая и последовательная кнопка(-и) призыва к действию 
5. Нижний колонтитул

5. Шаблон для нескольких продуктов

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

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

Аналогично, Aloha использует шаблон фотоколлажа для размещения рецептов и контента на своем сайте:

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

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

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

1. Логотип/заголовок
2. Хорошо организованный раздел фотографий и основного текста
3.  Четкая и последовательная кнопка(-и) призыва к действию 
4. Дизайн, адаптированный для мобильных устройств
5. Нижний колонтитул

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

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

1. Буквенный или текстовый
2. Рекламный
3. Простое объявление или напоминание
4. Обзор контента
5. Функция нескольких продуктов

Ищете шаблоны электронной почты для использования? Стань профессионалом!

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

Вот лишь несколько примеров наших шаблонов писем, найденных в BEE Pro:

Наш читательский рейтинг:

Всего: 1 — Среднее: 5

6 лучших советов по разработке макета электронного бюллетеня

Автор: Priya Nain  |

Читать больше постов этого автора.




Люди «видят» до того, как начинают что-либо читать, и это формирует первое впечатление.

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

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

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

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

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

6 советов по созданию отличного макета электронного бюллетеня

Хорошо знайте свой бренд

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

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

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

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

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

Расставьте приоритеты в макете вашего электронного бюллетеня

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

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

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

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

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

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

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

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

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

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

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

1. Модель движения глаз. Исследования показали, что большинство людей вместо того, чтобы просматривать все, как правило, просматривают содержимое электронной почты в поисках наиболее важных вещей. Сканирование обычно включает в себя использование шаблона или пути движения глаз, чтобы быстро просмотреть максимум или весь информационный бюллетень электронной почты. Например, макет информационного бюллетеня по электронной почте в виде Z-шаблона (движение слева направо), макет информационного бюллетеня в виде перевернутой пирамиды (начинается с более широкого обзора сверху и сужается по мере достижения нижней части), диаграмма Гутенберга (используется основная оптическая точка для начала и заканчивается по диагонали в конечной точке) и дизайн макета электронной почты в виде F-шаблона (полезен для электронных писем с простым текстом).

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

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

 

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

5. Цветовые контрасты – Используйте яркие цвета, но с ответственностью. Использование цветовых контрастов, чтобы отличить одну вещь от другой, — отличный способ привлечь внимание читателя.

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

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

 

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

Вставьте элементы направления в макет информационного бюллетеня по электронной почте

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

Это означает вставку элементов направления в макет вашего информационного бюллетеня.

Два распространенных способа сделать это — использовать —

• Явные элементы — например, стрелку, маркер, указатель или линию, указывающую на другой объект; и/или
• Неявные элементы — например, изображение живого существа, смотрящего на объект.

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

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

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

Что можно сделать для этого – 

• Цвет и дизайн – Создайте дизайн и выберите цвет для кнопки CTA, чтобы она выделялась среди других элементов макета электронной рассылки. Хорошей идеей является использование резкого цвета, который контрастирует с цветом фона макета электронной рассылки.
• Количество СТА и их заместителей t — Выбор количества CTA для использования в макете новостной рассылки по электронной почте не является фиксированным. Скорее, это зависит от содержания и цели электронного письма. Например, скидка или предложение о распродаже для одного бренда/продукта может иметь только один CTA справа под описанием продукта. В отличие от этого, электронное письмо, содержащее несколько брендов/продуктов, может иметь один CTA рядом с описанием каждого продукта.
• Использование слов-действий от первого лица . Последнее, но не менее важное, это использование слов-действий от первого лица, которые вызывают у читателя побуждение к действию для собственной выгоды. Например, «Мне интересно», «Купи сейчас, заплати потом», «Да, я герой» и т. д.

Вот 3 примера того, как CTA можно использовать в электронной почте:


Электронная почта с двумя CTA — первичный CTA в виде кнопки, вторичный CTA в виде текста.

 

Использование адаптивного дизайна

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

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

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

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

Подводя итог

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

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

  No related posts.