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

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

Чеклист: что протестировать перед отправкой письма

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

## Микроразметка JSON-LD

**JSON-LD** — это формат передачи связанных данных. В контексте email-рассылок JSON-LD позволяет преобразовывать данные в элементы интерфейса почтового клиента. Для этого необходимый код вставляется в раздел head HTML-кода email-письма, предоставляя почтовым сервисам структурированные данные для отображения.

Формат JSON-LD используется не только в коде электронных писем, но и при создании сайтов и страниц в интернете. Не следует путать их между собой, поскольку применение формата в этом случае направлено на SEO-оптимизацию.
JSON-LD в письмах использует словарь **schema.org**. Его базовая структура выглядит примерно так:

```JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "..."
…
}
</script>
```
## Особенности в разных почтовиках

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

### Gmail

Именно Google первым начал использовать JSON-LD в своих письмах и продолжает добавлять варианты его применения. Функционал формата можно разделить на:

**1.** **Действия** — это кнопки быстрых действий, которые появляются в списке входящих и позволяют совершить целевое действие вообще не открывая письмо. Они бывают 2 типов:

- **One Click Actions** — подходит для подтверждения чего-либо без перехода на сайт. Отлично подойдет для подтверждения подписки, например.

- **Go to action** — для перехода по ссылке в один клик

<Img
img="/api/uploads/JSON_LD_example_1_4e9c63d874.png"
alt="JSON-LD в письмах"
src="Пример использования Go to Action"
/>

- **Заказы** — информация о заказах и все, что с ними связано. Сюда входит: главная информация о заказе, информация о доставке, платежная информация.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_1_5b519c7709.png" 
thumbnail="/api/uploads/json_ld_1_5b519c7709.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_2_82a8ff0022.png" 
thumbnail="/api/uploads/json_ld_2_82a8ff0022.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_3_9ebbc61ae1.png"
thumbnail="/api/uploads/json_ld_3_9ebbc61ae1.png"
description="JSON-LD в письмах. Информация о заказах"
/>
</Gallery>

- **Бронирование**, включает в себя: билеты на автобус, билеты на поезд, авиаперелет, событие/мероприятие, бронирование гостиниц, бронирование ресторанов, аренда автомобиля.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_bus_tickets_a769591ef7.png" 
thumbnail="/api/uploads/json_ld_bus_tickets_a769591ef7.png"
description="JSON-LD в письмах. Бронирование билета" 
/>
<GalleryItem
original="/api/uploads/json_ld_train_tickets_55bf85ffea.png" 
thumbnail="/api/uploads/json_ld_train_tickets_55bf85ffea.png"
description="JSON-LD в письмах. Бронирование"
/>
<GalleryItem
original="/api/uploads/json_ld_arenda_255d394b69.png" 
thumbnail="/api/uploads/json_ld_arenda_255d394b69.png"
description="JSON-LD в емейлах"
/>
<GalleryItem
original="/api/uploads/json_ld_hotel_b92350279e.png"  
thumbnail="/api/uploads/json_ld_hotel_b92350279e.png"
description="Использование JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_perelet_ff36c7efba.png"  
thumbnail="/api/uploads/json_ld_perelet_ff36c7efba.png"
description="JSON-LD: примеры использования."
/>
<GalleryItem
original="/api/uploads/json_ld_restoran_f9a5022f12.png"  
thumbnail="/api/uploads/json_ld_restoran_f9a5022f12.png"
description="JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_sobytie_2c01399694.png" 
thumbnail="/api/uploads/json_ld_sobytie_2c01399694.png"
description="JSON-LD в рассылках"
/>
</Gallery>

- **Аннотации** — это информация, которая отображается до открытия письма, если оно попало в список «Промоакции». Она может включать в себя карточки товаров, информацию о скидке и промокод. Яркие карточки в списке «Промоакций» точно привлекут внимание подписчика, сократят путь до перехода на сайт, а также предотвратят автоматическое формирование карточек с неудачными изображениями.

<Img
img="/api/uploads/JSON_LD_annotation_11zon_71b196b29b.jpg"
alt="JSON-LD в письмах"
src="JSON-LD в письмах с аннотациями"
/>

Широкие возможности формата в Gmail позволяют создать удобные для клиента email-рассылки. Для использования всех возможностей JSON-LD в Gmail необходимо пройти процедуру регистрации, практически как для отправки AMP-писем. Во-первых,  ваш домен должен соответствовать [**требованиям Google**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru#registration_guidelines). Во-вторых, нужно отправить пример письма с JSON-LD на специальный почтовый ящик (schema.whitelisting+sample@gmail.com). В-третьих, нужно заполнить специальную [**форму**](https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1&hl=ru). Только после этих действий можно ожидать одобрения от почтовика. 

Подробнее об условиях одобрения ваших писем можно прочесть [**в официальной документации**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru), а полная информация+ по использованию JSON-LD в Gmail доступна [**на этой странице**](https://developers.google.com/gmail/markup/reference?hl=ru).

Для тестирования работы вы можете отправить себе письмо с того же ящика Gmail. Самым удобным вариантом для этого будет воспользоваться сервисом [**Google Scripts**](https://script.google.com). Основной скрипт будет иметь примерно следующий вид:

```JavaScript
function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('Email.html').getContent();

  MailApp.sendEmail({
	to: Session.getActiveUser().getEmail(),
	subject: 'JSON LD',
	htmlBody: htmlBody,
  });
}
```
А рядом необходимо добавить файл с тестовым шаблоном, в нашем случае Email.html.


### Mail.ru
Mail.ru поддерживает использование JSON-LD в виде карточек заказов и смарт-карточек для оплаты прямо в письме. 

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

<Img
img="/api/uploads/JSON_LD_zakaz_mailru_41402ae923.png"
alt="JSON-LD в емейле с карточкой заказа"
src="JSON-LD с карточкой заказа"
/>

**Смарт-карточки** — Mail.ru позволяет произвести оплату заказа или квитанции прямо из письма. 

<Img
img="/api/uploads/JSON_LD_smartkartochki_b848aa6dfc.png"
alt="JSON-LD в емейле со счетом"
src="JSON-LD со счетом"
/>

Смарт-карточки отображаются как в веб-версии почтового клиента, так и в мобильном приложении.

Имейте ввиду, что для использования смарт-карточек необходимо [**согласовать**](https://help.mail.ru/developers/jsonld/smartcards/id/) уникальный идентификатор отправителя. Полная документация Mail.ru по JSON-LD находится на [**этой странице**](https://help.mail.ru/developers/jsonld/about/).

### Яндекс.Почта

Яндекс.Почта выделяет письма, содержащие JSON-LD, специальным образом в общем списке входящих сообщений. Поддерживается:

- показ информации по заказу, отображая рядом с темой список товаров, стоимость и кнопку быстрого перехода в магазин;

- вывод информации об авиабилетах.

<Img
img="/api/uploads/JSON_LD_yandex_710073fad9.png"
alt="JSON-LD. Вывод информации"
src="Вывод информации о билете"
/>

Условие для использования JSON-LD только одно: соблюдения требований Яндекса к массовым рассылкам и домену отправителя.
Подробнее информацию об использовании JSON-LD в почтовике Яндекса можно найти [**здесь**](https://yandex.ru/support/webmaster/mail/mail.html).

## Тестирование шаблонов с JSON-LD

Мы рекомендуем всегда проверять ваши email-шаблоны с JSON-LD (как и с любыми другими интерактивными элементами). Существует несколько способов проверки:

- При помощи специальных валидаторов, например, [**Schema Validator**](https://validator.schema.org/). Некоторые почтовые провайдеры имеют собственные сервисы, например, [**Инструмент проверки разметки от Google**](https://www.google.com/webmasters/markup-tester/u/0/?hl=ru).

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

- Запуск тестовой рассылки. Самый надежный способ, который поможет быстро проверить отображение JSON-LD сразу в нескольких почтовиках.

<Note>О проверке отображения и тестировании рассылок мы уже говорили в одной из [**статей блога.**](https://pixcraft.io/ru/blog/proverka-sovmestimosti-email-shablonov-kak-izbezhat-oshibok-na-raznyh-ustrojstvah#podderzhka-jsonld) Там же отдельно упоминали и JSON-LD.</Note>

## Заключение

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

Клиентоориентированность, наряду с [**другими трендами email-маркетинга**](https://pixcraft.io/ru/blog/email-marketing-v-2025-kak-ne-otstat-ot-konkurentov), является одним из главных условий успешной коммуникации с клиентом. Внедряя JSON-LD в свои письма, вы не просто улучшаете, а создаете качественно новый пользовательский опыт, значительно повышая лояльность к вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

JSON-LD в email-рассылках выделяет письма среди конкурентов и упрощает получение важной информации. Разбираемся, как использовать микроразметку.

small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

Смарт-карточки и статус заказа: использование JSON-LD в email-рассылках

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

small_figma.png

thumbnail_figma.png

figma.png

Разработка гайдлайна в Figma: компоненты, варианты и переменные

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

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

В статье расскажем, какие [**CTA**](https://altcraft.com/ru/blog/chto-takoe-cta) привлекают больше подписчиков, зачем нужны bulletproof-кнопки и как проверить разные варианты, чтобы выбрать наиболее оптимальный.

## Сколько нужно кнопок и где их размещать 

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

<Img
img="/api/uploads/cta_pixcraft_9d4e132077.png"
alt="Письмо без кнопки"
src="Здесь кнопки нет, но картинка кликабельна. Пользователь может не понять, куда нажимать, чтобы перейти в карточку товара на сайте"
/>

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

<Img
img="/api/uploads/cta_pixcraft_buttons_styles_ad33d06cdd.png"
alt="Два вида кнопок"
src="Здесь используется два вида кнопок"
/>

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

<Img
img="/api/uploads/cta_pixcraft_mnogo_knopok_f81c9dd139.png"
alt="Слишком много кнопок в письме"
src="Письмо перегружено кнопками"
/>

## Какие формулировки работают лучше

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

**Короткие или длинные кнопки?** Короткие CTA («Купить», «Посмотреть», «Попробовать») привычны и быстро читаются. Они хорошо работают, когда действие очевидно, а контекст понятен без лишних слов. Например, если перед кнопкой уже есть объяснение, зачем на нее нажимать.

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

**Что важнее: понятность или креативность?** Яркий и нестандартный CTA может привлечь внимание, но если смысл кнопки неочевиден, кликов будет меньше. Например, «Открыть дверь в будущее» звучит интересно, но не всегда ясно, что произойдет при нажатии. «Записаться на курс» — прямолинейно, но зато понятно.
Креативные CTA работают, если они совпадают с тоном бренда и понятны без раздумий. Например, для интернет-магазина:

- «Добавить в корзину» — понятно и привычно.
- «Отложить, чтобы не забыть» — необычно, но смысл ясен.
- «Положить в заначку» — креативно, но может запутать.

<Img
img="/api/uploads/cta_knopka_pixcrft_16c7bbfb5d.png"
alt="Вариант CTA"
src="Кнопка креативная, но не всем будет понятно, что произойдет при нажатии"
/>

**Что попробовать?**

- Если стандартный CTA не дает хороших результатов, протестируйте разные формулировки: лаконичные, детализированные, эмоциональные.
 - Используйте глаголы, побуждающие к действию: «Получить», «Зарегистрироваться», «Скачать».
 - Добавьте элемент срочности или выгоды: «Забронировать со скидкой», «Скачать бесплатно».
 - Избегайте неопределенности: «Окей», «Дальше», «Готово» без контекста могут запутать.

## Как должны выглядеть кнопки 

### Размер 

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

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

Средняя ширина указательного пальца взрослого человека — 1,6–2 см (45–57 px), а большого — около 2,5 см (72 px). Кнопки такого размера удобны: их видно при нажатии, они не требуют повышенной точности и позволяют быстрее взаимодействовать с интерфейсом.

<Img
img="/api/uploads/cta_pixcraft_bolshaya_knopka_845f72cbc4.jpg"
alt="CTA для мобильных устройств"
src="Здесь кнопка крупная — пользователь точно не промахнется"
/>

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

### Форма кнопки

Эксперименты с дизайном — это здорово, но если кнопка не выглядит как кнопка, пользователи могут ее не заметить. Лучше использовать привычные формы:

- Закругленные.
- Прямоугольные.
- Кнопки-капсулы.
- Прозрачные кнопки.
- Кнопки с тенями.

<Img
img="/api/uploads/pixcraft_standard_cta_shapes_62a3c9c862.png"
alt="Формы кнопок"
/>

### Пространство вокруг кнопки

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

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

### Визуальный отклик

Простая анимация делает кнопки заметнее и приятнее в использовании. [**Исследования показывают**](https://www.sixthcitymarketing.com/2023/03/24/statistics-to-know-about-ctas-in-2023/), что такие визуальные эффекты увеличивают количество кликов на 26%.

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

## Как подобрать лучший вариант кнопок

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

**Что тестировать?**

При тестировании кнопок можно проверить:

- **Текст** — короткий или длинный CTA.
- **Цвет** — яркий контрастный или более нейтральный, гармонирующий с дизайном письма.
- **Форма** — классическая прямоугольная, закругленная или капсула.
- **Размер** — компактная кнопка или крупный элемент, привлекающий внимание.
- **Расположение** — в начале письма, в середине или в конце.

### Как тестировать?

Можно использовать платформы, которые автоматизируют процесс. Например, в [**Altcraft Platform**](https://altcraft.com/ru/features/mvt) доступны разные форматы тестирования:

- [**A/B-тесты**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) — позволяют сравнивать два варианта кнопок и определять победителя по кликам или открытиям. Система может автоматически распределять аудиторию и выбирать лучший вариант.
- **Многовариантное тестирование** — подходит для более сложных проверок, например, если нужно протестировать сразу несколько элементов письма. В платформе можно создать до 8 версий шаблонов.
- **Аналитика** — если автоматического выбора недостаточно, можно проанализировать отчеты и вручную определить лучший вариант.

## Что такое bulletproof-кнопки

Bulletproof-кнопки — это кнопки, созданные с помощью HTML и CSS, а не в виде изображений (PNG, GIF, JPEG). Их главное преимущество — корректное отображение во всех почтовых клиентах, даже если у пользователя отключены изображения.

Если использовать кнопки в виде картинок, есть риск, что они просто не загрузятся. Это снижает кликабельность и делает CTA менее заметным. Кроме того, кнопки-изображения сложно редактировать: каждый раз приходится переделывать дизайн, загружать новую версию на сервер и обновлять код. С bulletproof-кнопками всё проще — стиль и текст можно менять прямо в HTML-шаблоне.

Pixcraft всегда формирует bulletproof-кнопки, которые корректно отображаются во всех почтовых клиентах, включая Outlook, и остаются видимыми даже при отключённых картинках. В блочном редакторе можно быстро собрать письмо без лишних сложностей и сразу подготовить его к отправке. [**Попробуйте конструктор писем бесплатно.**](https://pixcraft.io/ru) 

Если нет времени заниматься технической реализацией письма, поможет [**плагин Pixcraft для Figma**](https://pixcraft.io/ru/figma). Достаточно подготовить дизайн-макет — плагин сам превратит его в чистую HTML-верстку. Это экономит время и избавляет от ручной правки кода. 

## Заключение 

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

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Разберем, какие кнопки привлекают больше кликов, почему важны bulletproof-версии и как тестировать разные варианты, чтобы выбрать лучший.


small_cta-pixcraft-knopki-dlya-emeilov.jpg

thumbnail_cta-pixcraft-knopki-dlya-emeilov.jpg

cta-pixcraft-knopki-dlya-emeilov.jpg

Как увеличить кликабельность email-рассылок с помощью правильных CTA

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

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

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

Фирменный стиль в email-рассылках решает сразу несколько задач:

- **Формирует доверие** — пользователи привыкают к знакомому стилю и не воспринимают письмо как спам.
- **Упрощает восприятие** — четкая структура и единообразие помогают быстрее считывать информацию.
- **Делает емейлы запоминающимися** — если дизайн писем всегда в одном ключе, бренд легче узнают даже без логотипа.

### Какие элементы делают письмо фирменным

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

**1. Логотип.** Лого — главный визуальный маркер бренда. Он должен быть:
- Размещен в шапке письма или в заметном месте.
- Достаточно крупным, но не перегружать макет.
- В хорошем качестве и с прозрачным фоном, чтобы корректно отображаться в том числе и  в тёмной теме.

<Img
img="/api/uploads/Email_Wikium_45360d4696.png"
alt="Пример письма от «Викиум»"
src="Письмо от «Викиум» — логотип сразу бросается в глаза, но не перегружает емейл"
/>

**2. Фирменные цвета.** Цвета делают письма единообразными и визуально связывают их с сайтом и другими каналами бренда. Важно:

- Использовать 2-3 основных фирменных цвета и не отходить от них.
- Сделать кнопки (CTA) контрастными, чтобы они выделялись.
- Проверять, как цвета выглядят на разных экранах и в темном режиме (некоторые оттенки могут теряться).

<Img
img="/api/uploads/Email_Vkusvill_5e4b2033a6.png"
alt="Пример письма от «ВкусВилл»"
src="Здесь «ВкусВилл» отошли от цветов бренда. Пока не прочитаешь текст, трудно понять, от кого письмо"
/>

**3. Шрифты.** Текст в письмах должен быть не только читаемым, но и соответствовать стилю бренда. Что учитывать:

- Использовать шрифты из [**брендбука**](https://altcraft.com/ru/blog/chto-takoe-brendbuk) (если они подходят для email-формата).
- Выбирать «безопасные» шрифты, которые корректно отображаются в почтовых клиентах.
- Выделять заголовки и кнопки акцентными шрифтами или стилями, но не перегружать макет.

<Img
img="/api/uploads/Email_Golden_Apple_33e0345900.png"
alt="Пример письма от «Золотого Яблока»"
src="«Золотое Яблоко» здесь использует привычные шрифты"
/>

**4. Визуальный стиль.** Картинки, иллюстрации, иконки — всё это влияет на восприятие бренда в письмах. Советы:

- Используйте единый стиль изображений (например, только картинки или только фото).
- Не перегружайте письмо графикой — изображения должны дополнять контент, а не отвлекать от него.
- Оптимизируйте картинки по весу, чтобы письмо не загружалось медленно.

<Img
img="/api/uploads/Email_My_Book_9f1cf97dd8.png"
alt="Пример письма от «MyBook»"
src="MyBook, например, использует иллюстрации"
/>

## Как сохранить единый стиль с компонентами и переменными

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

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

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

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

### Email-гайдлайн в Figma: зачем он нужен

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

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

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

## Как не надоесть подписчикам и сохранить узнаваемость бренда

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

### Добавляем разнообразие, не нарушая стиль

Фирменные цвета можно использовать гибко. Брендовый оттенок фона иногда меняют в зависимости от праздников: например, на Хэллоуин используют более тёмные цвета. Главное — не отходить от основной цветовой палитры.

<Img
img="/api/uploads/Email_Glossybox_066acce9ea.png"
alt="Пример письма от «Glossybox»"
src="Здесь Glossybox сделали цветовую палитру темнее, чем обычно, но бренд всё равно узнается"
/>

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

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

<Img
img="/api/uploads/Gold_Apple_9d6232d85e.png"
alt="Пример письма от «Gold Apple»"
/>

### Обыгрываем логотип и другие фирменные элементы

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

<Img
img="/api/uploads/Email_Gos_Uslugi_88c8333f64.png"
alt="Пример письма «Госуслуги»"
src="«Госуслуги» празднично оформили логотип"
/>

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

## Как сохранить свой стиль в тёмной теме

Многие пользователи читают почту в [**dark mode**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat), и если письмо не адаптировано, оно может выглядеть странно: яркие фирменные оттенки могут стать неоновыми, а пастельные — слишком блеклыми. 

### Что делать

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

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

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

<Img
img="/api/uploads/Dark_Logo_Visibility_Issue_6cc60d2355.jpg"
alt="Слияние логотипа с фоном"
src="Темно-синий логотип в темной теме сливается с фоном"
/>

4. Разные почтовые клиенты обрабатывают Dark Mode по-разному, поэтому важно протестировать письмо в Gmail, Apple Mail, Outlook и других сервисах. Если оно выглядит хорошо во всех вариантах, фирменный стиль сохранится независимо от настроек экрана.


Проверять внешний вид письма в dark mode можно быстро — с этим поможет генератор емейлов Pixcraft. [**Попробуйте бесплатно**](https://pixcraft.io/ru/builder). 

## Заключение

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

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

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

small_email-branding.jpg

thumbnail_email-branding.jpg

email-branding.jpg

Как использовать брендинг в email-шаблонах для создания узнаваемого стиля

Современный [**email-маркетинг**](https://altcraft.com/ru/glossary/email-marketing-kak-nastroit-i-ispolzovat) давно вышел за рамки статичных рассылок. Пользователи ждут актуального, персонализированного и интерактивного контента, который подстраивается под их потребности в реальном времени.

В этой сфере **AMP для email** стали настоящим прорывом. Технология позволяет добавлять в письма динамические элементы и  интерактивные формы. Подробнее о внедрении AMP в шаблоны писем мы писали в [**нашей статье**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Одним из ключевых инструментов AMP для email является **компонент AMP-list**. Он позволяет загружать данные из внешних источников в реальном времени и динамически обновлять контент письма. Это открывает широкие возможности: от персонализированных рекомендаций до актуального расписания работы магазинов или обновляемых акций. Давайте разберемся, как именно работает AMP-list и как его можно эффективно использовать в email-маркетинге с помощью [**Pixcraft**](https://pixcraft.io/ru).

## Что такое AMP-list

**AMP-list** — компонент для динамического получения данных внутри письма с возможностью их обновления. Он пришел на смену Agile-изображениям, которые работали нестабильно и не полностью удовлетворяли потребностям пользователей. 

<Img
img="/api/uploads/promo_rassylka_s_ispolzovaniem_amp_list_12ffe7ff31.gif"
alt="Email campaign with AMP-list"
src="Пример промо-рассылки с использованием AMP-list"
/>


### Общий синтаксис

AMP-list загружает JSON-данные из указанного URL и отображает их в разметке с использованием шаблона.
```
<amp-list 
  width="auto" 
  height="100" 
  layout="fixed-height" 
  src="https://example.com/data.json">
  <template type="amp-mustache">
    <div>{{title}}</div>
  </template>
</amp-list>
```
Среди **ключевых атрибутов** amp-list:
- `src` — URL источника данных (JSON API)
- `width / height / layout` — параметры отображения
- `template type="amp-mustache"` — шаблон вывода данных

AMP-list ожидает в ответ JSON с объектом, у которого в свойстве items будет передан массив данных. Пример:
```
{
  "items": [
    { "title": "Интерактивный AMP-контент" },
    { "title": "Персонализированные материалы" }
  ]
}
```
В нашем примере HTML будет иметь примерно следующий вид:
```
<div>Интерактивный AMP-контент</div>
<div>Персонализированные материалы</div>
```

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

```
<amp-list width="auto" height="200" layout="fixed-height" src="https://example.com/products.json">
  <template type="amp-mustache">
    <div>{{name}}</div>
  </template>
  <div fallback>Контент на случай, если что-то пошло не так</div>
</amp-list>
```

**AMP-mustache**
За отображение присланных данных отвечает **AMP-mustache**:
```
<template type="amp-mustache">
    <div>
      <amp-img src="{{image}}" width="100" height="100"></amp-img>
      <p>{{name}}</p>
      <a href="{{url}}">Подробнее</a>
    </div>
  </template>

```
Mustache не передает само значение, а задает шаблон отображения для переданных данных. Подстановка контента осуществляется с использованием следующего синтаксиса:
- {{variable}}: Переменная. Выводит HTML-экранированное значение переменной variable.
- {{#section}} {{/section}}: Проверяет существование переменной и позволяет итерационно вывести элементы, если это массив.
- {{^section}} {{/section}}: Проверяет отсутствие переменной. Используется для создания элементов-заглушек.
- {{{unescaped}}}: Неэкранированный HTML позволяет, например, вывести текст со стилизацией и ссылками. Имеет ограничения на используемые внутри теги.

## Примеры использования

Использование AMP-list в сообщениях открывает широкий круг возможностей для маркетологов. Самое главное преимущество — персонализация ваших писем и показ актуального контента. Кроме того, компонент позволяет:
- показывать живую ленту комментариев в письме;
- встраивать стилизацию по времени суток и дате;
- отображать актуальную информацию о товарах и акциях в вашем магазине;
- и многое другое!

### Живая лента комментариев

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

<Img
img="/api/uploads/real_time_comments_4c5b3cb9a2.gif"
alt="Real-time comments"
/>

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

### Стилизация по времени суток или дате

При помощи AMP-list можно настроить динамическое отображение элементов, зависящее от того, в какое время суток получатель читает письмо:

<Img
img="/api/uploads/Styling_by_time_of_day_or_date_c095368095.jpg"
alt="Styling by time of day or date"
/>

### Акции и специальные предложения

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

<Img
img="/api/uploads/Promotions_and_special_offers_8bc8576a84.png"
alt="Promotions and special offers"
/>

### Прогноз погоды

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

<Img
img="/api/uploads/Weather_forecast_8e69c0ecf0.png"
alt="Прогноз погоды с помощью AMP-list"
/>

## Реализация в Pixcraft
AMP-list можно легко встроить в ваше письмо при помощи [**Pixcraft**](https://pixcraft.io/ru/builder). Для этого создайте новый **компонент** в соответствующем разделе меню:

<Img
img="/api/uploads/New_Pixcraft_component_1fbaa6abb2.png"
alt="New Pixcraft component"
/>

Укажите название и описание, выберите тип **AMP-List**:

<Img
img="/api/uploads/AMP_list_b5c1a2912f.png"
alt="AMP-list.png"
/>

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

<Img
img="/api/uploads/Element_structure_0402a7f4a2.png"
alt="Element structure"
/>

На вкладке **«Контент»** можно настроить содержимое получившихся «карточек» и добавить необходимое количество:

<Img
img="/api/uploads/Content_3b086a42e4.png"
alt="Content"
/>

Также вы можете указать **условия отображения** блока. В качестве условия укажите **время**, **день недели** или **конкретную дату**:

<Img
img="/api/uploads/Display_conditions_6a004e698e.png"
alt="Display"
/>

После сохранения элемента перед вами появится **подробная инструкция по подключению** AMP-list к вашему письму. Pixcraft сформирует готовый код как на HTML, так и на [**TJML**](https://pixcraft.io/ru/framework). 

<Img
img="/api/uploads/Connection_da82a9ddad.png"
alt="Connection"
/>

Интерактивный элемент для вашего шаблона готов! Обязательно проверьте письмо перед массовой рассылкой, а также помните о том, что не все почтовые провайдеры поддерживают [**AMP-контент**](https://altcraft.com/ru/blog/chto-takoe-amp-pisma).

## Заключение

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

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

Если вы еще не используете AMP в email, самое время протестировать его с [**Pixcraft**](https://pixcraft.io/ru) и вывести свои рассылки на новый уровень!









Как AMP-list делает email-рассылки динамичными: загрузка данных, персонализация и интерактивный контент. 

small_Using_the_AMP-list_component.jpg

thumbnail_Using_the_AMP-list_component.jpg

Using_the_AMP-list_component.jpg

Использование компонента AMP-list в email-рассылке

Совместимость электронных писем с почтовыми клиентами является ключевым аспектом при создании эффективных [**email-рассылок**](https://altcraft.com/ru/blog/kak-dostat-klienta-v-rassilke). Каждый почтовый клиент — будь то Gmail, Outlook, Яндекс Почта или Mail.ru — использует свой движок рендеринга, что приводит к появлению различных особенностей, которые влияют на отображение писем. Неправильно заданные стили, нюансы поддержки CSS почтовым клиентом или специфические баги верстки могут привести к тому, что письмо будет выглядеть совсем не так, как задумано.

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

## Инструменты

Чтобы минимизировать риск ошибок при отправке рассылки, важно протестировать шаблон во множестве почтовых клиентов. Одним из сервисов для такой проверки является **Email on Acid**. Он предоставляет комплексное тестирование шаблонов, позволяющее просмотреть, как письмо отображается в разных почтовых клиентах и на различных устройствах. 

<Img
img="/api/uploads/email_templates_compatibility_email_on_acid_f79305668f.jpg"
alt="Email on Acid"
src="Сервис Email on Acid"
/>

Альтернативой может стать **Email Testing** от **Litmus**, также предоставляющий детальные отчеты о рендеринге шаблонов.

Чтобы избежать ошибок еще на этапе верстки, стоит воспользоваться **Caniemail.com** – аналитическим инструментом, который информирует о поддержке различных HTML- и CSS-свойств в почтовых клиентах. Сервис позволяет быстро понять, какие возможности можно использовать в шаблоне, а какие – нет.

<Img
img="/api/uploads/email_templates_compatibility_can_i_email_232ec10896.png"
alt="Can I email"
src="Сервис Can I email?"
/>

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

## Виды почтовиков и их технические особенности

Разные почтовые клиенты обладают своими особенностями, которые нужно учитывать при разработке шаблонов. В этой статье рассмотрим основные почтовики, такие как **Gmail**, **Outlook**, **Яндекс Почта** и **Почта mail.ru**.

###  Gmail

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

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

<Img
img="/api/uploads/shablon_emeila_gmail_f290752f98.png"
alt="Отображение письма"
src="Блок текста “прижался” к боковой границе письма"
/>

### Outlook

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

- **Произвольное появление горизонтальных или вертикальных линий,** связанное с особенностями обработки размеров шрифтов и отступов. Решением может стать изменение размеров шрифта и\или высоты строки.
- Баг, при котором **рамки блоков исчезают в некоторых версиях Outlook**, может помешать корректному отображению письма. Для обхода проблемы рекомендуется оборачивать проблемные элементы в дополнительную таблицу с корректно заданными стилями.
- Outlook не поддерживает свойство background-image, поэтому для реализации фона часто используется язык разметки VML. Однако нельзя просто вложить один VML-фрагмент в другой. Наложение фоновых изображений требует использования альтернативных подходов.

<Img
img="/api/uploads/shablon_emeila_outlook_04c45c7f9d.png"
alt="Отображение письма в Outlook"
src="Нежелательная полоса у рамки в письме"
/>

### Яндекс Почта

Некоторые email-фреймворки используют подход “mobile first”, при котором изначальная структура соответствует мобильной, а макет преобразуется в десктопный при помощи медиа-запросов. Яндекс Почта не поддерживает медиа-запросы и поэтому при просмотре мы увидим “мобильную” версию такого письма:
 
<Img
img="/api/uploads/email_templates_compatibility_yandex_1964d0b402.jpg"
alt="Отображение письма в Outlook"
/>

Отметим еще несколько проблем Яндекс Почты:

- Текстовые надписи в письме (например, даты или номера телефонов) могут **превращаться в ссылки**. Чтобы избежать этого, приходится вручную оборачивать эти надписи в тег ```<a>``` без атрибута href.
- Яндекс Почта анализирует текст письма, чтобы еще до открытия вывести рядом с темой какой-то полезный контент. Но зачастую это приводит к обратному эффекту — пропадает прописанный прехедер письма. Иногда даже неочевидные комбинации символов или слов могут вызвать подобное поведение, поэтому требуется тестирование и корректировка текста.

<Img
img="/api/uploads/shablon_emeilov_yandex_otobrazhenie_d694b72109.png"
alt="Яндекс-почта"
src="В верхнем письме прехедер есть, а в нижнем — нет. Почтовик скрыл его из-за наличия в нем стоп-слов"
/>

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

### Почта mail.ru

Несмотря на то, что mail.ru поддерживает кастомизацию дизайна и для светлой, и для темной темы при помощи медиа-запроса ````@media (prefers-color-scheme: dark)````, **иногда рамки некоторых блоков отображаются некорректно**. Чтобы избежать этой проблемы, всегда следует явно указывать цвет фона данного блока, даже если он совпадает с цветом фона всего письма. 

## Тёмная тема

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

Одной из наиболее известных проблем Gmail является **инверсия цветов в тёмной теме на iOS**. Дело в том, что почтовик инвертирует значение "светлоты" цвета вне зависимости от его текущего цветового баланса — то есть изначально тёмное письмо станет светлым. Исправлять подобные проблемы приходится вручную, и это отнимает значительное количество времени у верстальщика.

<Img
img="/api/uploads/shablony_emeilov_tyomnaya_tema_0686d746c4.png"
alt="Отображение темной темы"
/>

Важно помнить, что инверсия **цвета фона** и инверсия **цвета рамок** работают по-разному. Например, выделяющаяся рамка тёмного цвета в светлой теме может оказаться едва заметной в тёмной теме и наоборот:

<Img
img="/api/uploads/shablony_emeil_temnaya_tema_6d55855a93.png"
alt="Как работает темная тема"
/>

При создании шаблона в [**редакторе Pixcraft**](https://pixcraft.io/ru/builder) вы сможете одним кликом переключить цветовую тему в режиме предпросмотра и проверить, корректно ли отображается ваше письмо:

<Img
img="/api/uploads/emeil_shablony_redaktor_pixcraft_a8b876c6d0.jpg"
alt="Как работает темная тема"
/>

Подробнее о том, как работает темная тема мы писали в [**нашей статье**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat).

## Поддержка AMP

[**AMP-письма**](https://altcraft.com/ru/blog/chto-takoe-amp-pisma) позволяют сделать рассылки более интерактивными и динамичными, добавляя функциональные элементы непосредственно в тело письма. Однако данная технология поддерживается не всеми почтовыми клиентами. Отображение AMP-контента доступно у провайдеров **mail.ru**, **Gmail**, **Yahoo** и **AOL**.

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

- Ошибка валидности AMP-кода. 
- Отсутствие в white-листе почтовика. Как получить разрешение мы уже рассказывали в [**этой статье**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu).
- AMP-версия письма отображается лишь 1 месяц с момента получения, поэтому при повторном просмотре клиент может не увидеть интерактивный контент.
- Подписчик принудительно отключил показ динамического контента у себя в настройках.

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

## Поддержка JSON‑LD

Поддержка JSON-LD также сильно зависит от почтового клиента и провайдера.  Например, mail.ru поддерживает только блок “Информация о заказе” (`order`) и смарт-карточки для оплаты внутри письма:

<Img
img="/api/uploads/shablony_emeilov_sovmestimost_mail_ru_dc81bb7942.png"
alt="Отображение емейла в mail.ru"
/>

Яндекс также отобразит элемент “Информация о заказе” (`order`), помимо этого доступен показ информации по авиабилетам (`FlightReservation`). Однако почтовик не показывает карточки, а лишь добавляет ключевую информацию в список писем до их открытия:

<Img
img="/api/uploads/sovmestimost_emeil_shablonov_yandex_8a97361fee.png"
alt="Отображение емейла в Яндекс почте"
/>

<Img
img="/api/uploads/sovmestimost_shablona_klienta_yandex_bb042464e9.png"
alt="Отображение письма в Яндекс почте"
/>

Gmail же поддерживает отображение [**самой разной информации**](https://developers.google.com/gmail/markup/highlights?hl=ru): автобусные и железнодорожные билеты, бронирование гостиниц, аренда автомобилей, доставка посылок, счета, бронирование ресторанов, а также данные о билетах на мероприятия:

<Img
img="/api/uploads/email_template_compatibility_gmail_38b0453cf4.png"
alt="Отображение емейла в Gmail"
/>

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

## Заключение

Современный рынок [**email-маркетинга**](https://altcraft.com/ru/glossary/email-marketing-kak-nastroit-i-ispolzovat) диктует высокие требования к качеству и адаптивности рассылок. Как видно из примеров, каждая ошибка в вёрстке может привести к тому, что письмо будет отображаться некорректно на разных почтовых клиентах и устройствах. Однако при использовании современных инструментов тестирования и учете специфики работы почтовых клиентов, можно заранее выявить и устранить большинство проблем.

В результате, если учитывать все технические нюансы и проводить тщательное тестирование, каждый шаблон сможет безупречно отображаться у подписчиков, независимо от используемого почтового клиента или режима работы устройства. Создать адаптивное письмо, наполненное интерактивным контентом, вам помогут [**продукты Pixcraft**](https://pixcraft.io/ru): фреймворк, блочный редактор или плагин для Figma.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

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

small_1564х834.jpg

thumbnail_1564х834.jpg

1564х834.jpg

Проверка совместимости email-шаблонов: Как избежать ошибок на разных устройствах и почтовых клиентах

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

В этой статье мы расскажем, как создавали интерактивное AMP-письмо с игрой для новогодней рассылки [**Altcraft**](https://altcraft.com/), с какими проблемами столкнулись и какие результаты получили. Если вам интересно, как добавить интерактивности в рассылки и увлечь аудиторию, — читайте дальше. 

## Как придумывали 

2025 год — год Змеи по восточному календарю, и когда мы начали обсуждать концепт для интерактивного [**AMP-письма**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe), идея игры «Змейка» возникла сама собой.  

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

<Img
img="/api/uploads/amp_email_snake_58366f1277.jpg"
alt="Механики змейки"
/>

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

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

<Img
img="/api/uploads/amp_email_design_24fe8960ca.jpg"
alt="Емейл-рассылка с игрой "
/>

С творческим процессом создания статьи можно ознакомиться в [**статье Altcraft**](https://altcraft.com/ru/blog/zmeyka-altcraft). 

А поиграть в «Змейку» можно [**здесь**](https://cases.pixcraft.io/altcraft/2025/). 

## Как разрабатывали 

### Геймплей

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

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

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

<Img
img="/api/uploads/amp_email_maze_design_aa9e10177f.png"
alt="Разработка емейла"
/>

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

<Img
img="/api/uploads/amp_email_snake_mechanics_604ef2eb22.png"
alt="Интерактивный емейл: разработка"
/>

Управление реализовано через кнопки: каждое нажатие продвигает змейку на одну клетку в выбранном направлении. Рядом добавили подсказку для пользователей: «Управляй змейкой, используя эти кнопки». 

<Img
img="/api/uploads/amp_email_controls_b28ecd019e.png"
alt="Кнопки управления"
/>

### Технические тонкости  

Чтобы змейка могла перемещаться по всей игровой зоне, мы использовали условные координаты — слева и сверху. Эти координаты задаются через CSS-классы, которые определяют положение змейки на сетке. Для отображения мы создали по десять классов для смещения по горизонтали и вертикали. Положение змейки задаётся так:  

```html
<div [class]=”'translate-left-' + playerState.left + ' translate-top-' + playerState.top + ' head_snake_' + playerState.direction_1”></div>
```  
Когда игрок нажимает на кнопку управления, змейка поворачивает голову в выбранном направлении. Поскольку змейка состоит из четырёх элементов, каждый её сегмент должен сдвигаться на место предыдущего. Это реализовано через обновление состояния:  

```html
<button class="button_up" on="tap:AMP.setState({
	playerState3: {direction_1:playerState2.direction_1, direction_2:playerState2.direction_2 ,left: playerState2.left, top: playerState2.top},
	playerState2: {direction_1:playerState1.direction_1, direction_2:playerState1.direction_2 ,left: playerState1.left, top: playerState1.top},
	playerState1: {direction_1:playerState.direction_1, direction_2:playerState.direction_2 ,left: playerState.left, top: playerState.top},
	playerState: { direction_2:playerState.direction_1, direction_1: 'up', left: playerState.left, top: playerState.top - 1 }
})"></button>
```  

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

Ещё один важный момент — контролировать, чтобы змейка оставалась внутри игровой области. Поскольку она движется только вперёд, достаточно проверять координаты её головы (playerState). Координаты left и top не должны превышать 10, чтобы змейка оставалась в пределах игрового поля.  

Для проверки допустимых координат мы используем массив coordinates, в котором перечислены все разрешённые точки на карте:  

```javascript
coordinates: [
	{ left: 0, top: 6 },
	{ left: 1, top: 0 },
	{ left: 1, top: 1 },
	{ left: 1, top: 2 },
	{ left: 1, top: 3 },
	{ left: 1, top: 5 },
	{ left: 1, top: 6 },
	{ left: 1, top: 8 },
	...
]
```  

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

```javascript
coordinates.filter(c => c.left == playerState.left && c.top == playerState.top).length
```  

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

### Сложности  

Известно, что почтовый клиент Mail.ru не поддерживает состояния, заданные по умолчанию через ```<amp-state>```. Например, если мы задаём начальное состояние следующим образом:  

```html
<amp-state id="myDefinedState">
	<script type="application/json">
	{
    	"foo": "bar"
	}
	</script>
</amp-state>
```  

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

```html
<button on="tap:AMP.setState({ myDefinedState: { foo: 'bar' } })">Старт</button>
```  

Этот подход отлично работает как в Mail.ru, так и в Gmail. Однако мы столкнулись с новой проблемой: в Mail.ru существует ограничение на длину выражения — не более 100. Наши выражения, необходимые для работы игры, превышали этот лимит, что вызывало ошибку:  

*amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.*

Чтобы решить эту проблему, мы использовали ```<amp-state>``` для проверки, где открыта игра, и предложили пользователям Mail.ru перейти на веб-версию. Также мы сообщили о проблеме в поддержку Mail.ru, чтобы они могли рассмотреть возможность увеличения лимита.  

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

## Какие результаты получили

Эксперимент с интерактивным AMP-письмом, включающим игру, дал отличные результаты, подтвердив, что такой подход работает.

- **Вовлечённость и метрики.** Мы увидели, что пользователи активно взаимодействовали с игрой. Почти 30% тех, кто открыл письмо, дошли до завершения игры — это отличный показатель для интерактивного контента. Люди не только открывали письмо, но и проводили с ним больше времени, чем обычно.
- **Мобильная аудитория.** Большинство пользователей играли с мобильных устройств, и управление с помощью экранных кнопок оказалось удобным. 
- **Технические итоги.** Письмо корректно отображалось в AMP-совместимых почтовых клиентах, а для тех, где поддержка AMP отсутствовала, срабатывал резервный HTML-вариант.

## Заключение 

Эксперимент показал, что электронные письма с интерактивными элементами — это реальный способ зацепить аудиторию. Пользователи с удовольствием включаются в игру, особенно если это что-то необычное, вроде «Змейки» прямо в письме. Формат AMP идеально подошёл для реализации такой идеи.

Главный вывод: люди охотно взаимодействуют с контентом, если он интересный и удобный. Но чтобы всё прошло успешно, необходимо учитывать каждую деталь — от совместимости с почтовыми клиентами до резервных решений для тех, кто не поддерживает AMP.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Мы решили проверить, как геймификация влияет на вовлеченность, и встроили «Змейку» прямо в емейл. В статье — детали эксперимента и результаты.


small_amp-email-main.jpg

thumbnail_amp-email-main.jpg

amp-email-main.jpg

«Змейка» в письме: как мы с Altcraft создали игру для AMP-рассылки 

В 2025 году email-маркетинг продолжит меняться, и бренды будут искать новые способы, чтобы емейлы не просто пылились в почтовых ящиках, а действительно цепляли аудиторию. 

В этой статье расскажем о главных трендах email-маркетинга 2025 года: от геймификации до использования искусственного интеллекта для более эффективных рассылок.

## Тренд 1. Письма станут более интерактивными 

<Img
img="/api/uploads/email_marketing_trends_amp_9aeaa6db06.png"
alt="Пример AMP-письма"
src="При нажатии конверт открывается. Источник: reallygoodemails.com"
/>

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

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

Раньше создание AMP-писем требовало больших усилий и ресурсов, но сегодня с инструментами вроде [**Pixcraft**](https://pixcraft.io/ru) процесс разработки стал значительно проще. Теперь можно не только быстро запустить кампанию, но и снизить затраты на разработку и тестирование, при этом получая действительно качественные результаты.

### Советы:

**1.** **Используйте fallback-версию для AMP-писем.** Не все почтовые клиенты поддерживают AMP, поэтому важно настроить HTML-версию, чтобы письмо выглядело корректно у всех пользователей.

**2.** **Проверяйте отображение в популярных программах.** Тестируйте письма в Mail.ru, Gmail, Yahoo и других поддерживающих AMP сервисах, чтобы избежать неприятных сюрпризов.

**3.** **Сфокусируйте внимание.** Убедитесь, что в письме есть один главный CTA, который сразу бросается в глаза. Остальные элементы должны поддерживать этот флоу, а не отвлекать. Читатель должен интуитивно понимать, что делать дальше.

**4.** **Помогите пользователям.** Добавьте подсказки в письме, если AMP-функциональность требует особых действий, например, кликов по определённой области. 

**5.** **Попробуйте Pixcraft.** Наш конструктор писем поможет вам создавать адаптивные AMP-емейлы даже без знаний HTML-вёрстки.
 
## Тренд 2. Геймификация 

<Img
img="/api/uploads/email_marketing_trends_game_968ebc0de0.jpg"
alt="Письмо с мини-игрой"
src="Здесь используется механика лотерейного билета со стираемой областью. Источник: reallygoodemails.com"
/>

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

### Какая бывает геймификация в письмах?

- **Микроигры.** Простые игры прямо в письме: колесо фортуны, скретч-билеты, головоломки. Эти элементы легко реализовать с помощью AMP-технологий.
- **Системы наград.** Баллы за клики, открытие писем или выполнение других действий. Пользователи могут накапливать их и обменивать на скидки или подарки.
- **Элементы соревнования.** Рейтинги, таблицы лидеров или персонализированные достижения. Например, пользователь может видеть, на каком этапе программы лояльности он находится.
- **Сезонные кампании.** Включение игровых механик в кампании, приуроченные к праздникам или событиям.

### Советы:

**1.** **Не перегружайте письма.** Игровые элементы должны быть простыми и понятными. Сложные сценарии отпугнут пользователя.

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

**3.** **Учитывайте совместимость.** Если AMP не поддерживается, предложите пользователю перейти на сайт для участия в игре.

**4.** **Тестируйте функционал.** Геймификационные элементы могут отображаться по-разному в почтовых клиентах. Проверяйте их работу в Gmail, Yahoo и других популярных сервисах. С [**Pixcraft**](https://pixcraft.io/ru/builder) вы сможете тестировать емейлы, не покидая блочный редактор. 

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

## Тренд 3. Искусственного интеллекта станет больше 

<Img
img="/api/uploads/email_marketing_trends_ai_1375a44494.png"
alt="Плагин для Figma"
src="В Figma-плагине от Pixcraft есть функция ИИ"
/>

В 2025 году использование ИИ поможет автоматизировать сложные задачи и сэкономить ресурсы. Вот основные направления:

- **Оптимизация времени отправки.** Алгоритмы предсказывают, когда пользователь с наибольшей вероятностью откроет письмо, и автоматически отправляют рассылку в это время. Например, так работает [**модуль от Altcraft**](https://altcraft.com/ru/blog/altcraft-ml). 
- **Динамическая сегментация.** ИИ заменяет ручную работу, создавая сегменты на основе анализа данных. Например, он может выделить пользователей, склонных к повторным покупкам, или тех, кто давно не проявлял активность.
- **Создание контента.** Нейросети генерируют изображения, темы, заголовки и даже текст писем. Конечно, полностью на ИИ здесь полагаться не стоит — полученный контент придётся редактировать. Также стоит обратить внимание на лицензии: не все ИИ разрешают коммерческое использование их контента. Например, [**«Шедеврум»**](https://yandex.ru/legal/shedevrum_termsofuse/) от Yandex запрещает применять созданные изображения в коммерческих целях, а вот результаты от [**MidJourney**](https://docs.midjourney.com/docs/terms-of-service) и [**DALL-E**](https://openai.com/policies/terms-of-use/) можно использовать в коммерции.
- **Аналитика в реальном времени.** ИИ анализирует показатели кампаний прямо во время их проведения, предлагая изменения или новые тактики для улучшения результата.

### Советы:

**1.** **Начните с небольших тестов.** Внедрите ИИ для одной задачи, например, генерации тем или оптимизации времени отправки. Оценивайте результаты и масштабируйте решения.

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

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

## Тренд 4. Меньше ручной работы 

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

### Что можно автоматизировать?

- **Сбор данных.** Интеграции с CDP и аналитическими платформами позволяют автоматически обновлять данные о пользователях: их покупках, активности на сайте, кликах в письмах. Никакого ручного ввода и ошибок.
- **Создание цепочек писем.** В платформах вроде [**Altcraft**](https://altcraft.com/ru) можно строить сложные сценарии, например, цепочку писем, которые отправляются в зависимости от действий пользователя (подтверждение email, заполнение формы, переход по ссылке). 
- **Сегментация.** Автоматические системы анализируют аудиторию и разделяют её на группы по интересам, активности или даже предиктивным моделям. Так вы отправляете максимально релевантные письма.
- **A/B-тестирование.** Современные платформы умеют запускать тесты, собирать данные и выбирать лучшие варианты.
- **Шаблоны с динамическими данными.** Настраивайте письма с переменными, которые будут автоматически заполняться нужной информацией, например, именем пользователя или актуальными скидками.

### Советы:

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

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

**3.** **Не забывайте тестировать.** Даже автоматизированные процессы иногда дают сбои. Проверяйте цепочки писем и корректность подстановки данных.

## Тренд 5. Чем короче текст, тем лучше 

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

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

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

### Советы:

**1.** **Ставьте суть в начало.** Пользователь должен понимать основное сообщение уже с первого взгляда. Если ключевая идея скрыта в середине текста, её просто не заметят.

**2.** **Используйте лаконичные заголовки.** До 20 символов — идеальный вариант для того, чтобы письмо привлекло внимание.

**3.** **Разбивайте текст на блоки.** Короткие абзацы, списки и разделители помогают читателю быстрее усваивать информацию.

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

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

## Заключение

Емейл-маркетинг в 2025 году продолжает развиваться. Технологии делают письма интерактивными, персонализированными и умными. Автоматизация, ИИ, геймификация — всё это не только привлекает внимание, но и помогают удерживать его в условиях информационного шума. 

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

<Note>
Подписывайтесь на наш [**Telegram-канал**](https://t.me/pixcraft_io), чтобы всегда быть в курсе актуальных трендов в емейл-маркетинге. Поделимся с вами полезными инсайтами и практическими рекомендациями!
</Note>

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

Блог