Современный [**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. А ещё выясним, как как сделать мастер-шаблон. 


small_kak-sozdat-email-shablony.jpg

thumbnail_kak-sozdat-email-shablony.jpg

kak-sozdat-email-shablony.jpg

Как создать email-шаблоны с нуля с помощью Pixcraft

Важной составляющей любого бизнес-проекта является email-маркетинг. Сегодня существует множество инструментов, позволяющих быстро создать нужный вам шаблон сообщения. Для тех, кому необходимо больше гибкости при вёрстке письма, существуют **фреймворки**. Фреймворки предоставляют широкий функционал для понятной и удобной кастомизации вашего email-шаблона, а также открывают новые возможности для взаимодействия с клиентами.

Сегодня мы расскажем о **React Email**. Это email-фреймворк для создания шаблонов писем, основанный на React. В этой статье рассмотрим его сильные и слабые стороны, а также сравним инструмент с фреймворком [**TJML**](https://pixcraft.io/ru/framework). 

<Note>
TJML работает на основе **Vue**, предоставляя пользователю все его преимущества. Ранее мы уже [**сравнивали TJML с фреймворком MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml).
</Note>

## Установка и подключение

### React email

Чтобы установить React email, необходимо добавить его в свой TypeScript- или JavaScript-проект [**через npm**](https://react.email/docs/getting-started/automatic-setup), либо же произвести установку [**вручную**](https://react.email/docs/getting-started/manual-setup), самостоятельно добавив необходимые зависимости. После завершения процесса вам будет доступен локальный демо-сервер с набором базовых шаблонов для писем. Их можно открыть и просмотреть прямо в браузере:

<Img
img="/api/uploads/react_time_c6bcc6452f.png"
alt="React email login"
/>

Все изменения, которые вы внесете в шаблоны в папке `emails`, сразу отобразятся в браузере. Тестовое письмо можно отправить себе на почту с помощью соответствующей кнопки.

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

### TJML

Для начала работы с фреймворком вы можете зайти в бесплатную [**«песочницу»**](https://app.pixcraft.io/playground/), вставить туда нужные компоненты и самостоятельно проверить отображение готового письма. Наличие playground-страницы позволяет в любой момент отредактировать шаблон письма и сразу же посмотреть результат изменений:

<Img
img="/api/uploads/react_time_2_497203ac39.jpg"
alt="Редактирование шаблона письма"
/>

TJML можно установить путем подключения **JS-библиотеки**, что обеспечит возможность работы с шаблонами в привычной среде разработки. Полная инструкция – по [**ссылке**](https://docs.pixcraft.io/ru/framework/documentation).

Для удобства работы с фреймворком пользователю доступны следующие инструменты:

- **Плагин для VS Code.** Данное расширение будет предлагать автозавершение для тегов TJML, а также покажет подсказки по доступным атрибутам. Плагин доступен по [**ссылке**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml).
- **Автозавершение для продуктов JetBrains (WebStorm) с помощью [**Web-Types**](https://github.com/JetBrains/web-types).** Для получения подсказок по тегам и доступным атрибутам вы также можете подключить [**web-types.json**](https://github.com/ahttps://github.com/pixcraft-io/TJML-framework/blob/main/web-types.jsoneb-types.json).

## Возможности

### React email

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

<Img
img="/api/uploads/react_time_3_3dfba29c1c.png"
alt="Код письма"
/>

Код можно сразу же экспортировать в формате HTML, либо же в формате plain-text.

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

<Img
img="/api/uploads/react_time_4_e69243d511.png"
alt="Блоки"
/>

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

В React Email для работы с тем или иным компонентом необходимо сначала его импортировать, затем можно использовать в коде. После вставки вы можете изменить наполнение блоков, включая текст и изображения. Внешний вид компонентов задается с помощью передачи объекта, содержащего стилевые свойства и их значения, в свойство `style` компонента:

```xml
<Section style={{ display: "inline-block", width: "100%", maxWidth: 270, verticalAlign: "middle", }}>
            <Text style={{fontSize:"36px", color: "#ffffff", lineHeight: '1.2'}}>
              The best<br/>choice
            </Text>
</Section>
```

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

### TJML

Как уже было сказано ранее, у TJML есть своя «песочница». В ней можно полностью собрать шаблон из компонентов и проверить отображение письма в разных режимах просмотра:

<Img
img="/api/uploads/react_time_5_a71489ef4b.png"
alt="Разные режимы просмотра"
/>

В TJML также доступны следующие функции:

- Различные режимы просмотра: темная тема, просмотр на мобильных и десктоп-устройствах, имитация инверсии цвета для клиента Gmail на iOS
- Инструмент Pixel-Perfect, предназначенный для точной верстки вплоть до пикселя
- Фреймворк автоматически отслеживает размер кода и уведомляет, если он превышает рекомендуемые значения
- Поддержка AMP: галереи изображений, интерактивные элементы, формы, встроенные прямо в письмо
- Одновременный рендеринг как HTML-, так и AMP-версии письма
- Валидация различных ошибок

Верстка в TJML соответствует написанию обычного XML-кода. Для каждого из компонентов есть [**документированный набор атрибутов**](https://docs.pixcraft.io/ru/framework/documentation). Вставленные блоки можно кастомизировать под свои требования, например, указать ссылки для кнопок, заменить картинки и добавить текст.

После завершения работы над шаблоном вы можете сразу просмотреть код и при необходимости **сжать его**:

<Img
img="/api/uploads/react_time_6_a923eabe10.png"
alt="Сжатие кода"
/>

## Отображение письма

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

Для сравнения результатов работы фреймворков сверстаем два идентичных письма,  одно – с использованием TJML, а другое – с помощью React Email. Начнем с **Gmail**:

<Img
img="/api/uploads/react_time_7_cfe370d8b9.png"
alt="Gmail"
/>

Здесь письмо выглядит корректно. Теперь посмотрим, в каком виде его получат пользователи **IPhone**:

<Img
img="/api/uploads/react_time_8_cb2da98995.png"
alt="iPhone"
/>

С этой задачей фреймворк справился. Проверим отображение в корпоративном клиенте – **Microsoft Outlook**:

<Img
img="/api/uploads/react_time_9_c1744beeb0.png"
alt="Outlook"
/>

В Outlook письмо React Email выглядит крайне неудовлетворительно. Это значит, что инструмент не подойдет для крупных маркетинговых рассылок, где может присутствовать B2B-сегмент, а также фреймворк не предназначен для профессионального использования агентствами, поскольку заказчик зачастую проверяет результат именно в Outlook.

Сравнив полученные письма, можно однозначно сказать, что TJML справился лучше, чем React Email.

## Итоги

После пристального изучения фреймворка React Email можно сделать следующие выводы:

**Плюсы:**

- Доступна **тестовая отправка письма** прямо со страницы демо-сервера
- Отметим **привлекательный дизайн сервиса**, лаконичность и приятное для восприятия оформление сайта.

**Недостатки:**

- В созданных с помощью React Email письмах присутствуют **проблемы с отображением** в различных почтовых клиентах, особенно в outlook
- Для React Email не предусмотрена «песочница»
- **Отсутствие поддержки AMP-email** – серьезный недостаток для современного email-фреймворка
- Не предусмотрена возможность  **тестирования отображения письма в темной теме.**

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

Фреймворки могут стать отличным решением для тех, кому важна гибкость при работе с вёрсткой. React Email на первый взгляд кажется интересным инструментом для верстальщика, однако некорректное отображение писем в некоторых клиентах, отсутствие поддержки AMP и ограниченная гибкость делают его неподходящим для профессионального использования.

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

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

React email vs TJML: сравнение фреймворков

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

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

## Пример от [Findomestic](https://amp.dev/success-stories/findomestic)

<Img
img="/api/uploads/Findomestic_Sample_Email_6cfee92223.gif"
alt="Пример AMP-письма"
/>

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

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

[**A/b-тестирование**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) AMP- и классических писем на Черную пятницу показало:

- Открываемость выросла на 128% (35,4% против 15,5%).
- Клики увеличились на 133% (1,4% против 0,6%).

<Note>
Создавать такие письма легко с конструктором email-рассылок [**Pixcraft**](https://pixcraft.io/ru/builder). Теперь создание готового сообщения занимает всего несколько минут, и для этого не нужны знания HTML. Просто выбирайте готовые блоки, меняйте их оформление, добавляйте текст и ссылки — все это можно сделать в удобном визуальном режиме.
</Note>

## Пример от СДЭК 

<Img
img="/api/uploads/amp_primery_sdek_d80c56d812.gif"
alt="Пример AMP-письма от СДЭК"
/>

В письме от агентства [**Kinetica**](https://kinetica.su/) пользователь видит изображение нескольких котов и,  чтобы получить совет о зарубежном шопинге, ему нужно нажать на одного из них. При клике на изображение срабатывает механизм AMP-компонента ```<amp-bind>```, который обновляет содержимое письма в реальном времени. Кот «сдвигается», а на его месте появляется полезная рекомендация. 

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

## Пример от Volkswagen (дизайн: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_primer_volkswagen_da99d162c1.png"
alt="Пример AMP-письма от Volkswagen"
/>

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

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

## Пример от Huel 

<Img
img="/api/uploads/amp_primer_golosovalka_154551fe9a.png"
alt="Пример AMP-письма от Huel"
/>

В этом письме пользователи выбирают свой любимый вкус напитка через интерактивную голосовалку, реализованную с помощью технологии AMP. Все, что нужно — нажать на один из предложенных вариантов. Данные о голосах пользователей отправляются на сервер с помощью компонента ```<amp-form>```.

Результаты отображаются в реальном времени благодаря ```<amp-list>```, который динамически обновляет содержимое письма. Процентное соотношение голосов за каждый вкус отображается в бутылке уровнем напитка и числовыми процентами.

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

## Пример от Disney 

<Img
img="/api/uploads/amp_primery_krossword_ce5ca229b6.jpg"
alt="Пример AMP-письма от Disney"
/>

В этом письме для детей используется увлекательная игровая механика — кроссворд, который ребенок решает прямо в почтовом ящике. Нужно угадать персонажей, опираясь на силуэты и краткие описания, и ввести их имена в форму внутри письма. Для ввода ответов также используется ```<amp-form>```, который позволяет взаимодействовать с письмом без перехода на внешние страницы. 

Вся логика и обновления контента в емейле происходят с использованием AMP-компонента ```<amp-bind>```, который привязывает данные к интерактивным элементам и обновляет их в реальном времени. Информация о правильных ответах и изменяющиеся изображения персонажей также обрабатываются через AMP-теги, что позволяет отображать новый контент без перехода из письма.

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

## Пример от Toms 

<Img
img="/api/uploads/amp_primery_toms_26ca91543a.jpg"
alt="Пример AMP-письма от Toms"
/>

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

Для реализации механики применяются состояния и ```<amp-bind>```, которые позволяют динамически менять изображение, а также ```<amp-img>``` для отображения светящихся и обычных вариантов обуви. Создается интересный визуальный эффект прямо в почтовом ящике, без необходимости перехода на внешний сайт. 

## Пример от Mail.ru 

<Img
img="/api/uploads/amp_primery_digest_fb14394cd3.gif"
alt="Пример AMP-письма от Mail.ru"
/>

Письмо, созданное Pixcraft для «Mail Облако», делает знакомство с новыми функциями простым и увлекательным благодаря интерактивному формату. Вместо обычного текста пользователю предлагают сыграть в игру: ответить на вопросы и сразу получить развернутую информацию о каждой функции. 

Механика реализована с помощью AMP-компонентов. Пользователь выбирает ответы, а результат и дополнительная информация появляются мгновенно благодаря ```<amp-bind>```. Такой подход создает живое взаимодействие прямо в почтовом ящике, делая письмо динамичным, современным и наглядным.

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

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

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

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

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

small_amp-primery-pisem.jpg

thumbnail_amp-primery-pisem.jpg

amp-primery-pisem.jpg

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

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

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

## Создание готового шаблона за несколько минут

Для начала работы создайте новый файл в Figma и найдите **Pixcraft Email Generator** в меню Действий на панели инструментов. Запустите плагин:

<Img
img="/api/uploads/1_0a3d51aac7.png"
alt="Figma Pixcraft plugin"
src="Плагин Pixcraft Email Generator"
/>

<Note>
В плагине доступна версия интерфейса на русском языке. Для того чтобы переключиться на другой язык, нажмите на значок планеты в правом нижнем углу плагина. 
</Note>

В открывшемся окне вам предложат пройти руководство по использованию плагина, которое вы можете пропустить. Чтобы создать новый шаблон, перейдите на вкладку **New** и выберите **Blank email**:

<Img
img="/api/uploads/2_b82f124d97.png"
alt="New Blank email"
src="Создание нового письма"
/>

<Note>
Вы можете сгенерировать базовый шаблон письма с заголовком, изображением, кнопкой и футером нажатием кнопки **Simple email**. В таком случае вам останется только заменить изображения и текст на собственные.
</Note>

Перед вами появится пустой шаблон письма. Наполните его элементами из вкладки **Assets**. Эти элементы разделены на следующие категории:

**Blocks** — блоки контента, например, новостные блоки, баннеры и прочее
**Headers** — заголовок письма, его «шапка»
**Images** — изображения в письме
**Texts** — любые блоки текста
**Buttons** — [Call to Actions-кнопки](https://altcraft.com/ru/blog/chto-takoe-cta), содержащие призыв пользователя к действию
**Footers** — нижняя часть письма, так называемый «подвал» письма
**AMP** — интерактивные элементы, такие как формы обратной связи и карусели изображений, а также их html-версия
**Dividers** — разделители пунктов письма.

<Img
img="/api/uploads/3_694121e1e8.png"
alt="Assets"
src="Окно Assets"
/>

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

<Img
img="/api/uploads/4_f0516043ad.png"
alt="New block"
src="Добавление элемента"
/>

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

<Note>
При создании письма вы также можете использовать свой дизайн макета. Главным условием для того, чтобы плагин корректно его отрендерил, является применение режима **Auto layout** для фреймов в Figma. 
</Note>

Шаблон готов! Перейдите в меню предпросмотра, для этого выберите весь основной фрейм с шаблоном и нажмите на кнопку **Preview**. Перед вами появится окно тестирования письма. Именно таким его увидит получатель:

<Img
img="/api/uploads/five_750ea79887.png"
alt="Preview mode"
src="Режим предпросмотра"
/>

В этом окне пользователю доступен следующий инструментарий:

* Переключатель режима предпросмотра для **HTML и AMP-версии письма**
* Переключатель режима отображения **десктопной\мобильной** версии письма
* Проверка отображения письма **в темной теме**. Большинство мобильных почтовых клиентов автоматически преобразуют письмо, если выбрана темная тема, поэтому необходимо учитывать, какой вид примет ваше письмо после изменения темы. Также доступен режим имитации **полной инверсии цвета**, используемый в приложении Gmail на iOS.
* Кнопка **Screenshot** создаст снимок содержимого письма, которым вы можете поделиться, например, с клиентом
* На вкладке **Show Code** можно просмотреть код готового письма и его размер, там же вы можете «сжать» код при необходимости

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

<Img
img="/api/uploads/6_9858c2479e.png"
alt="Export template"
src="Экспорт шаблона"
/>

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

<Img
img="/api/uploads/7_79decc7b96.png"
alt="External services export"
src="Экспорт шаблона в другие сервисы"
/>

## Кастомизация шаблона

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

### Ссылки для кнопок, надписей и изображений

Если вы хотите вставить в кнопки или изображения ссылки для перехода, выделите нужный элемент и перейдите на вкладку **Properties**. В поле **Link address** добавьте URL-ссылку ресурса:

<Img
img="/api/uploads/8_27fe582818.png"
alt="Add URL"
src="Создание ссылки в кнопке"
/>

Для того чтобы добавить гиперссылку в текст, выделите фрагмент текста и добавьте ссылку в меню **Properties**. То же самое вы можете сделать с помощью функции **Create link** в Figma:

<Img
img="/api/uploads/9_275103a5a3.png"
alt="Create link"
src="Создание ссылки в тексте"
/>

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

<Img
img="/api/uploads/10_383937dc05.png"
alt="Button mode"
src="Распознавание кнопки"
/>

### Выгрузка блоков в виде изображений

Плагин может выгрузить некоторые элементы в качестве изображений, а не в виде кода. Для этого на вкладке Properties выбранного объекта нажмите кнопку **Convert to image**. К преобразованному блоку можно добавить описание и заголовок изображения:

<Img
img="/api/uploads/11_8c1e16a4cd.png"
alt="Convert image"
src="Преобразование блока в картинку"
/>

То же самое вы можете сделать с помощью стандартного функционала Figma, для этого оберните блок в группу:

<Img
img="/api/uploads/12_33bdda8094.png"
alt="Grouping"
src="Группирование элементов блока"
/>

### Управление адаптацией блоков

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

<Img
img="/api/uploads/13_04c976bd15.png"
alt="Columns display"
src="Настройка порядка блоков"
/>

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

<Img
img="/api/uploads/vid1_39672b4a17.png"
alt="Reorder preview"
src="Порядок блоков в письме"
/>

Также доступна настройка **боковых отступов и ширины всего письма**. Для настройки этих параметров, выберите основной фрейм и укажите нужный режим отображения:

<Img
img="/api/uploads/14_9071dca1a8.png"
alt="Paddings"
src="Настройка отступов и ширины"
/>

### HTML и AMP-отображение

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

Создайте AMP и HTML-элементы, например, форму для заполнения и сноску со ссылкой на службу поддержки. Для сноски в разделе Properties укажите отображение только для HTML-версии:

<Img
img="/api/uploads/15_82450b571b.png"
alt="HTML and AMP"
src="Настройка отображения контента"
/> 

Теперь в тех случаях, когда AMP-форма по какой-то причине не появится в письме, пользователь увидит сноску с контактами для обратной связи:

<Img
img="/api/uploads/vid2_2324df4884.png"
alt="HTML and AMP preview"
src="AMP и HTML-контент"
/> 


### Помощь искусственного интеллекта

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

<Img
img="/api/uploads/16_47d0d6e7f0.png"
alt="AI Helper"
src="Использование искусственного интеллекта"
/> 

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

<Img
img="/api/uploads/17_de860fb47b.png"
alt="AI text styling"
src="Генерация текста"
/>

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

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

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

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

Блог