В статье мы рассмотрим, что представляют собой компоненты, варианты и переменные в 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>

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

small_email-marketing-trends.jpg

thumbnail_email-marketing-trends.jpg

email-marketing-trends.jpg

Емейл-маркетинг в 2025: как не отстать от конкурентов 

Про тёмную тему (в письмах и не только) не рассказал только ленивый: есть множество [**рекомендаций и правил**](https://emailmatrix.ru/blog/dark-mode-guide/) по использованию изображений, текста и цветов, чтобы они корректно выглядели как в светлой, так и в тёмной теме. Но давайте взглянем немного под другим углом.

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Немного теории

Мы привыкли к использованию цветовой модели RGB, где любой цвет можно представить как сочетание 3-х основных цветов: R — красного, G — зеленого и B — синего. В компьютерной графике интенсивность каждого из основных цветов чаще всего варьируется от 0 до 255. Например, при минимальной интенсивности всех трёх цветов (R=0, G=0, B=0) получается чёрный цвет, а при максимальной (R=255, G=255, B=255) — белый. Этот принцип положен не только в математическую модель, но и воплощен в привычных нам мониторах. Каждый пиксель состоит из трёх субпикселей — красного, зелёного и синего. В зависимости от яркости их свечения мы видим определённый цвет благодаря эффекту пространственного смешивания, а при отсутствии свечения наблюдаем чёрный цвет.

<Img
img="/api/uploads/dark_theme_7186cd1340.png"
alt="Темная тема: модель"
/>

При работе с кодом или графическими редакторами чаще всего применяется шестнадцатеричное (Hex) представление цвета, записанное вместе, например #6812FC. При этом перед кодом всегда следует символ #, который указывает на способ задания значения. В нашем примере получается, что это цвет:

R = #68 = 104
G = #12 = 18
B = #FC = 252

Помимо RGB существуют и другие цветовые модели, например CMYK, применяемая для вывода изображения на печать. Здесь C — отвечает за Cyan (Синий), M — Magenta (Пурпурный), Y — Yellow (Желтый) + K — черный.

<Img
img="/api/uploads/dark_theme_model2_63c32e5b9b.png"
alt="Темная тема: модель CMYK"
/>

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

Но нас сегодня будет интересовать немного другой подход к представлению цвета. Давайте рассмотрим еще одну цветовую модель — HSL, которая включает три компонента:

- Hue (Тон)
- Saturation (Насыщенность)
- Lightness (Светлота).

Хотя иногда светлоту называют «яркостью», это не совсем корректно, правильнее будет использовать термин «светлота» или «интенсивность».

Тон принимает значение от 0 до 360 градусов; насыщенность — значение от 0 до 1; светлота — также от 0 до 1. 

## Как же работает тёмная тема

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

<Img
img="/api/uploads/dark_theme_email_11zon_d2d7a14806.jpg"
alt="Емейл с тёмной темой"
/>

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

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

## Разберём на примере

У нас есть кнопка с цветом фона #6A66D3 и цветом текста #FFFFFF

<Img
img="/api/uploads/dark_theme_button_fee67de805.png"
alt="Пример кнопки"
/>

Для начала переведем цвет из 16-ричной системы счисления в десятичную.

```#6A66D3 = R 106, G 102, B 211```
```#FFFFFF = R 255, G 255, B 255```

Следующим шагом необходимо перевести цвет из RGB в HSL, для этого воспользуемся следующим алгоритмом:

```
Dif = Max([R,G,B])-Min([R,G,B]) = 0,4274
Lightness = (Max([R,G,B])+Min([R,G,B]))/2 = 0.6137

Saturation = Dif/(2-Max([R,G,B])-Min([R,G,B])), Если Lightness > 0.5
Saturation = Dif/(Max([R,G,B])+Min([R,G,B])), Если Lightness < 0.5

Saturation = 0.5527

Hue = 0, если Dif = 0
Hue = ((G - B)/Dif mod 6)/6*360, если Max = R
Hue = ((B - R)/Dif + 2)/6*360, если Max = G
Hue = ((R - G)/Dif + 4)/6*360, если Max = B

Hue = 242
```
Итого, мы получили: 

```#6A66D3 = H 242, S 0.55, L 0.61```
```#FFFFFF = H 0, S 0, L 1```

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

H 242, S 0.55, L (1-0.61) = 0,39
H 0, S 0, L (1-1) = 0

Переводя цвета в RGB, мы получим: 

```#302C9A```
```#000000```

Или же визуально:

<Img
img="/api/uploads/dark_theme_button2_66307bea97.png"
alt="Пример кнопки с темной темой"
/>

Примерно так работает преобразование в тёмную тему в почтовом клиенте Gmail на iOS — просто инвертируя светлоту каждого из цветов.

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

##Что перекрашивать

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

Здесь каждый разработчик волен выбирать значения, которые ему по душе, или «поиграться» с ними. Эмпирически мы подобрали значение светлоты 0,6. Если фон светлее (больше) этого значения, его следует перекрасить. Аналогично, если текст темнее 0,6, его также нужно перекрасить. 

В реальных почтовых клиентах все происходит чуть-чуть сложнее. Используется прогрессивная шкала корректировки яркости (а не просто вычитание из единицы): чем значение ближе к пороговому (в нашем случае — 0.6), тем меньше цвет будет изменяться. Кроме того, обычно происходит небольшая коррекция насыщенности.

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

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

###TJML framework и тестирование тёмной темы

При профессиональной верстке писем важно позаботиться не только о качественном отображении в различных почтовых клиентах, но также и об отображении в тёмной теме.

Специально для этого в [**TJML-фреймворке**](https://pixcraft.io/ru/framework) предусмотрен инструмент тестирования отображения в тёмной теме, а также в тёмной теме, характерной для gmail на iOS:

<Img
img="/api/uploads/dark_theme_testing_1664f23ca7.png"
alt="Тестирование темной темы"
/>

Здесь реализован именно тот алгоритм, который мы пошагово рассмотрели выше. Следует отметить, что проверить можно не только письма, созданные на фреймворке — в тело письма (m-body) можно вставить и обычную емейл-верстку.

###Pixcraft Плагин для Figma

Этот [**плагин для Figma**](https://pixcraft.io/ru/figma) также позволяет создавать профессиональные емейл-рассылки, но уже без кода. Он преобразует структуру дизайн-макета в TJML-верстку автоматически, после чего позволяет выгрузить получившийся код в виде архива или в ESP. 

Так как TJML-фреймворк является неотъемлемой частью инструмента, то и все преимущества его использования здесь также доступны, в том числе и проверка отображения письма в тёмной теме:

<Img
img="/api/uploads/dark_theme_plugin_11zon_1c66f00083.jpg"
alt="Проверка темной темы"
/>

##Dark me плагин для Figma

Мы не зря говорили про HSL в контексте работы с цветом — это один из самых удобных подходов, который мы воплотили в плагине [**Dark me**](https://www.figma.com/community/plugin/1210863977149285175/dark-me).

<Img
img="/api/uploads/dark_theme_dark_me_cd5fa205f5.png"
alt="Плагин для темной темы"
/>

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

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


small_dark-theme.jpg

thumbnail_dark-theme.jpg

dark-theme.jpg

Тёмная тема: как она устроена и как с ней работать

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

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Планирование рассылки

На первый взгляд создание email-шаблона не кажется сложной задачей. Однако, если рассмотреть этот процесс подробнее, становится очевидно, с какими трудностями можно столкнуться при его разработке. Электронное письмо – не просто текст в красивой «упаковке». Работа над шаблоном состоит из следующих этапов:

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

* **Разработка дизайна письма**. Дизайн письма должен быть лаконичным. Чрезмерная перегруженность визуальными элементами или слишком яркие цвета могут отвлечь внимание от главной информации рассылки.
* **Верстка шаблона**. Когда идея, текст и дизайн готовы, наступает технически самый сложный этап — верстка. В этой статье разберем использование плагина [Pixcraft для Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates), который позволяет получить качественную email-верстку из дизайн-макета.
* **Тестирование письма**. Чтобы проверить корректное отображение письма, а также выявить технические ошибки при отправке, необходимо не просто открыть шаблон в режиме предпросмотра, но и запустить тестовую рассылку. Только после проведения тестов можно рассылать письмо реальным получателям.

## Текст письма

Вне зависимости от целей рассылки есть несколько неоспоримых правил для текста письма:

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

В ситуациях, когда у вас есть интересные идеи для текста, но сложно найти точные формулировки, вы можете воспользоваться помощью **нейросетей**. В [плагине Pixcraft](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) есть соответствующий раздел AI-инструментов, который поможет вам не только с текстом, но и с изображениями:

<Img
img="/api/uploads/email_shablony_1_921f13aebb.jpg"
alt="AI-генерация изображений и текста"
/>

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

## Разработка дизайна

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

Для большинства компаний основным инструментом является **Figma**. Вы можете разработать дизайн-макет с использованием auto layout с вашим уникальным дизайном и структурой. Или воспользоваться заготовками плагина [Pixcraft Email Generator](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) и собрать письмо из готовых блоков:

<Img
img="/api/uploads/email_shablony_2_37054e8980.jpg"
alt="Готовые блоки"
/>

Здесь вы также можете добавить ссылки в элементы. Для этого выберите нужный слой или текст, откройте раздел «Свойства» и укажите URL-адрес ссылки:

<Img
img="/api/uploads/email_shablony_3_4306a919bb.png"
alt="Адрес ссылки"
/>

Обширная статья для дизайнеров о работе с плагином Pixcraft доступна в нашем [блоге](https://pixcraft.io/ru/blog/email-template-no-code).

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

Pixcraft Email Generator позволяет сохранить все ваши блоки (ассеты) в библиотеку, указав им имена и теги для удобного выбора:

<Img
img="/api/uploads/email_shablony_4_fab0d68ab9.png"
alt="Имена и теги"
/>

## Верстка шаблона

При использовании плагина Pixcraft Email Generator вам не потребуется думать о верстке шаблона – достаточно выбрать нужное письмо и открыть предпросмотр. Если письмо отображается корректно, то далее можно перейти в раздел экспорта. Для разовых промо-рассылок достаточно выгрузить результат сразу в ESP. Если же вы планируете повторно использовать этот шаблон или его блоки, особенно, если в дальнейшем предстоит работать над шаблоном без дизайнера, то лучшим вариантом будет **сохранить шаблон в Pixcraft**:

<Img
img="/api/uploads/email_shablony_export_5_75c3a812a3.png"
alt="Сохранить шаблон"
/>

После сохранения шаблон будет доступен в конструкторе писем [Pixcraft Builder](https://app.pixcraft.io). Теперь, когда вам нужно будет создать новое письмо для рассылки, просто откройте сохраненный мастер-шаблон и нажмите **«Редактировать копию»**:

<Img
img="/api/uploads/email_shablony_redaktorovanie_6_98a2c79840.jpg"
alt="Редактирование копии"
/>

Также в конструкторе Pixcraft можно отдельно сохранить используемые элементы для дальнейшей вставки в любом другом письме. Для этого во время редактирования выделите блок, откройте дополнительные настройки и нажмите **«Save asset»**:

<Img
img="/api/uploads/email_shablony8_ce7f115791.png"
alt="Сохранение ассета"
/>

Все сохраненные элементы будут доступны в соответствующем разделе панели инструментов слева:

<Img
img="/api/uploads/email_shablony_assets_7_8b45a0e102.png"
alt="Сохранённые элементы"
/>

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

## Тестирование отображения

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

* **Почтовый клиент** – не все клиенты поддерживают AMP-контент или требуют особенной настройки компонентов письма
* **Мобильная или десктопная версия** – элементы письма должны уметь адаптироваться в зависимости от устройства, которым пользуется получатель
* **Системная тема интерфейса** – темная или светлая

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

<Img
img="/api/uploads/email_shablony_8_4512f82b35.jpg"
alt="Отдельные компоненты"
/>

Письма, созданные с помощью Pixcraft, корректно отображаются и сохраняют изначальный внешний вид во всех почтовых клиентах, начиная от **самых массовых** (Gmail и Mail.ru, Yandex) и заканчивая **корпоративными** (Outlook). 

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

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

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


Расскажем, как быстро создавать шаблоны писем с нуля с помощью инструментов Pixcraft. А ещё выясним, как как сделать мастер-шаблон. 


Блог