Графики помогают визуализировать данные, заменять полотна текста понятными картинками и делать рассылку более интересной. В статье разбираем, как и где оформить график, в каком формате добавить его в письмо.
Ситуации, когда текст лучше заменить графиком
Посмотрим, в каких рассылках графики могут сработать лучше, чем текстовое описание.
| Тип письма | Зачем делать график | Пример использования графика в рассылке |
| Отчёты и аналитика | Сделать данные более понятными, визуализировать важные моменты и тренды. | В письме с обзором мессенджер-маркетинга показать объём аудитории в разных мессенджерах или кликабельность сообщений в сравнении с другими каналами. |
| Новости, обновления | Показать динамику изменений или объём работ, подчеркнуть успехи. | Показать рост количества пользователей после запуска нового функционала. |
| Скидки, акции | Показать выгоду предложения. | Сравнить цены до и после скидки, показать экономию. |
| Обзоры продуктов | Сделать наглядные сравнения продуктов, подчеркнуть плюсы их функций. | В письмо с обзором водонагревателя добавить график снижения расходов, за счёт функции экономии электричества ночью. |
| Обучение, онбординг | Объяснить сложные концепции и процессы, показать прогресс. | Сделать график, который показывает процесс достижения целей. |
Есть несколько правил, которые помогут органично встроить график в письмо
Чтобы инфографика хорошо выглядела в рассылке и легко считывалась, стоит придерживаться следующих правил.
1. Для каждого графика добавлять понятные пояснения
Графики нужно дополнить заголовком и подписями — должно было понятно, что именно он иллюстрирует. Также нужны легенды и метки осей, чтобы читатели могли легко считать данные.
До или после инфографики стоит добавить поясняющий текст. Например: если график показывает рост продаж, указать, что именно способствовало этому росту.
2. Подстраивать график под чтение со смартфона
На мобильном устройстве картинки маленькие, из-за чего графики с большим количеством столбцов или секторов превращаются в нечитаемую кашу. Поэтому, если данных много, лучше вставить в рассылку несколько разных графиков, чем пытаться уместить всё в один.
Также стоит уделять внимание визуальному оформлению. Например, контрастным цветам — они сделают картинку более читаемой и помогут визуально разделить данные. Можно подбирать цвета, которые хорошо сочетаются с вашим брендом.
Лучше придерживаться минималистичного дизайна — простые инфографики без декоративных элементов легче воспринимаются. Ниже на примере видно, что графики с лишними деталями становятся почти нечитаемыми как с десктопной, так и с мобильной версии почты.
3. Учитывать, что у получателя может не загрузиться картинка
Поэтому при добавлении графика в email-рассылку обязательно нужно прописать альт-текст — текстовое описание, которое отображается в письме, если изображение не загрузилось. В нём стоит указать ключевые данные и их значение. Например: столбчатая диаграмма, демонстрирующая рост продаж на 20% в первом квартале 2024 года.
4. Оптимизировать размер и вес картинки
Стоит придерживаться стандартной ширины письма в 600 пикселей и добавить график в рассылку примерно такой же ширины. Это поможет избежать проблем с отображением на разных устройствах. Также помните о весе картинки — чем она тяжелее, тем дольше будет загружаться у получателя.
Поэтому лучше ограничиться весом в 100–200 Кб. Подробнее о технических параметрах рассказывали в нашем блоге → «Каким должен быть размер письма для email-рассылки».
Чтобы сделать график, необязательно привлекать дизайнера — есть удобные сервисы
Собрали несколько сервисов, которые помогут сделать график для письма самостоятельно.
«Google Таблицы» — сервис для работы с таблицами и графиками
Подходят для создания базовых диаграмм и графиков. С их помощью можно построить линейные графики, столбчатые и круговые диаграммы. Нужно добавить в таблицу данные, выделить их и преобразовать в диаграмму, вид которой можно править на своё усмотрение.
Chartle — инструмент для создания графиков, диаграмм и таблиц
Бесплатный англоязычный сервис поддерживает различные типы визуализаций и не требует регистрации. Чтобы создать график, нужно выбрать тип визуализации, указать данные для неё и всё — инфографика готова. При желании можно поменять цвета, чтобы подстроить график под брендбук рассылки.
Visme — сервис для визуализации данных и работы с контентом
Есть большой выбор шаблонов, импорт данных из других сервисов, настройка цветов и шрифтов. От предыдущего сервиса отличается разнообразием визуалов, которые содержат в себе не только графики, но и продуманные фоновые элементы. Сервис англоязычный и платный, но есть бесплатная ограниченная версия.
Но нужно помнить, что лишние подробности превращаются в кашу со смартфона, поэтому лучше избегать слишком детализированных шаблонов.
Есть два способа добавить график в рассылку: загрузить картинкой или сверстать через код
Загрузить график картинкой легко, не нужно привлекать программиста
Разберём, как добавить график в письмо на примере омниканальной CDP Sendsay. В платформе есть блочный редактор, который работает по принципу конструктора: достаточно перетянуть блоки в макет и наполнить их контентом.
Ничего не нужно верстать вручную, поэтому письмо можно создать без программиста. Это позволит компании сэкономить ресурсы и высвободить время сотрудников на более важные задачи.
Выглядит редактор так: слева панель с выбором блоков и их настройкой, а справа — макет письма. Так что вставить график в email-рассылку просто: нужно добавить в макет блок с картинкой и загрузить туда изображение с графиком.
Верстать график через код достаточно сложно, без программиста не обойтись
Программист верстает график через код и вставляет его в письмо с помощью HTML. Так можно создать уникальную брендовую историю: сделать необычную вёрстку, чтобы график выглядел красиво, идеально подстраивался под любой экран или даже был интерактивным.
Но это будет стоить дорого, потому что сделать адаптивную вёрстку графика — сложный и кропотливый процесс. Так что высока вероятность, что работа не окупится: затраты на создание рассылки могут быть несоразмерны полученным результатам.
Добавить код с графиком в письмо можно через разные редакторы. Также разберём на примере Sendsay:
- Блочный редактор — через HTML-блок, который позволяет вставить в письмо элемент, свёрстанный самостоятельно.
- HTML-редактор — используют, когда всё письмо верстается вручную, а не собирается из готовых блоков. Как правило, так создают сложные и необычные письма. В этом случае код с графиком просто встраивают в код письма.
- AMP-редактор — нужен для писем с интерактивным контентом, чтобы пользователи могли совершать действия прямо внутри письма. Например: добавлять товары в корзину, выбирать время доставки или перелистывать вкладки графика. Работает по принципу HTML-редактора: код графика вставляют в письмо.
Резюмируем главное о добавлении графика в рассылку
Как оформить график:
- Контраст и простота — используйте контрастные цвета и не перегружайте декоративными элементами, чтобы график легко считывался даже со смартфона.
- Пояснения — добавляйте пояснения к данным на графике, текстовую подводку и альт-текст для читателей, у которых не загрузится картинка.
- Оптимизация — подбирайте правильный размер и разрешение графиков для корректного отображения на всех устройствах.
Как вставить график в email-рассылку: загрузить картинкой, как обычный баннер, или сверстать с помощью кода. Второй вариант долгий и дорогой, поэтому проще использовать первый способ.
