В 2026 году [**более 55%**](https://genesysgrowth.com/blog/mobile-email-engagement-stats-for-marketing-leaders) электронных писем открывают со смартфонов и планшетов. Это значит, что рассылки должны сохранять читаемость, удобство и рабочую структуру одновременно и на десктопе, и на мобильных устройствах.

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

## Какие особенности email-среды нужно учитывать при адаптации писем

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

### Медиа-запросы

В веб-разработке медиа-запросы — краеугольный камень адаптивности. Они позволяют менять отображение в зависимости от ширины экрана, ориентации (книжная или альбомная), [**плотности пикселей**](https://pixcraft.io/ru/blog/vyorstka-pisem-pod-retina-displei-kak-adaptirovat-i-chto-pri-etom-uchityvat) и темы (светлая или тёмная). Например, можно переключить отображение с двух колонок на одну при определённой ширине окна.

Вот только с почтовыми клиентами история совсем иная. Далеко [**не все клиенты**](https://www.caniemail.com/features/css-at-media/) понимают медиа-запросы: значительная часть работает с ними ограниченно или вообще их не поддерживает, из-за чего медиа-запросы в профессиональной email-вёрстке не следует рассматривать как основной механизм адаптации.

Два наиболее ярких примера — Яндекс Почта и мобильная web-версия Gmail. Медиа-запросы здесь не работают, поэтому письмо на их основе теряет адаптивность (а иногда и читаемость).

### Mobile First в емейлах

Подход Mobile First следует упомянуть отдельно. Его идея заключается в том, что письмо или страница изначально верстается для маленьких экранов, а затем через медиа-запросы адаптируется под десктопы и ноутбуки. Без медиа-запросов получатель видит одноколоночную мобильную вёрстку, а при их срабатывании — полноценную десктопную. Такой подход, в частности, использует фреймворк [**MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml).

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

## Как организовать надёжную мобильную адаптацию

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

- за основу берутся таблицы, формирующие каркас письма;<br><br> 
- адаптивные блоки внутри них реализуются через CSS-свойства, которые понимает большинство email-клиентов;<br><br> 
- медиа-запросы задействуются только для косметических улучшений;<br><br>
- вспомогательная структура для Outlook строится на условных комментариях.

Разберём слои этого подхода по порядку.

### Таблицы как фундамент

Табличная структура (`<table>`) в email-вёрстке ведёт себя предсказуемо и поддерживается большинством клиентов. Таблицы задают внешнюю сетку письма: ширину, расположение основных секций, фоновые цвета. 

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

### Блоки для адаптации без медиа-запросов

Основной ингредиент, обеспечивающий мобильную перестройку даже в отсутствие медиа-запросов — это обычные `div` с атрибутом:

`style="display: inline-block"`

Элементы с `inline-block` располагаются в строку, пока хватает ширины родительского блока. Если места недостаточно, последний элемент переносится на следующую строку. Подход исправно работает в Яндекс Почте, мобильной web-версии Gmail и других клиентах.

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

Предположим, что в десктопной версии письма есть две колонки по 300 px без отступов. Они умещаются внутри контейнера шириной 600 px. Но в мобильном клиенте доступная ширина будет составлять, к примеру, 430 px. Здесь колонки уже не помещаются в одну линию и вместо этого автоматически перестраиваются друг под друга.

<Img
img="/api/uploads/01_mobileadapt_e950bd44fd.png"
alt="Адаптация в мобильной версии письма"
/>

### Медиа-запросы как слой тонкой настройки

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

В этой ситуации как раз могут пригодиться медиа-запросы. С их помощью можно:

- изменить ширину блоков на 100%, чтобы они равномерно заполняли экран;

<Img
img="/api/uploads/02_variousadapt_ad5519f7ea.png"
alt="Адаптация с медиа-запросами и без медиа-запросов"
/>

- скорректировать выравнивание (например, переключиться с левого на центральное);<br><br>
- скрыть или подменить элементы (например, в десктопной версии показывать горизонтальный баннер, а при срабатывании медиа-запроса на мобильных устройствах — квадратный);

<Img
img="/api/uploads/03_differentbanners_588cae0ea2.png"
alt="Баннеры в десктопной и мобильной версии письма"
/>

- трансформировать отступы: схлопывать ненужные зазоры, превращать горизонтальные разделители в вертикальные.

<Img
img="/api/uploads/04_reshapecolumns_9b100f8f09.png"
alt="Перестроение в мобильной версии письма"
/>

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

### Условные комментарии для Outlook

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

Причина здесь следующая: 

- Outlook рендерит письма через движок Word, который игнорирует большинство CSS-свойств, необходимых для адаптивного поведения.<br><br>
- Из-за этого классические методы перестроения контента (такие как `inline-block`, `float`, `flex` и `grid`) либо работают непредсказуемо, либо не работают вообще. 

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

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

``

Внутри них с помощью таблиц обычно формируется часть структуры: к примеру, многоколоночный блок, который в других клиентах строится на `inline-block`, для Outlook раскладывается в отдельную табличную строку с ячейками.

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

## Как ведут себя отступы при мобильной адаптации (и что с этим делать)

Проблема отступов возникает из-за того, что одна и та же вёрстка реализуется в трёх версиях: блочной с `inline-block` (базовая адаптация), улучшенной блочной с медиа-запросами и табличной для Outlook.

Представим, что в десктопном письме две колонки. У левой колонки есть правый отступ (`padding-right`).

- В табличной вёрстке для Outlook отступ работает как надо.<br><br>
- На мобильном устройстве колонки перестраиваются друг под друга. При этом правый отступ левой колонки сохраняется, что приводит к появлению лишнего пустого пространства справа от неё.

<Img
img="/api/uploads/05_indentright_b1c81e4cfc.png"
alt="Сохранившийся отступ справа в колонке"
/>

Решений здесь три: 

- Первое — сделать отступы симметричными: добавить у каждого элемента (например, карточек товаров) равные паддинги слева и справа, а в родительском элементе задать центральное выравнивание. Тогда при переносе блоки будут отцентрированы.

<Img
img="/api/uploads/06_indentsboth_bb413b2235.png"
alt="Симметричные отступы в колонках"
/>

Недостаток тут в том, что при таком способе карточки никогда не займут всю ширину экрана и не будут касаться левого и правого края: по бокам всегда будут оставаться отступы. Поэтому решение подходит только в тех случаях, когда это допустимо по дизайну.<br><br>
- Второе — оставить асимметричный отступ справа, но сделать выравнивание по левому краю. Тогда перестроенные блоки прижмутся к левой границе, а «лишний» отступ просто окажется у правого края, сохраняя единую ширину контентной части.

<Img
img="/api/uploads/07_indentadapt_104174060b.png"
alt="Выравнивание колонок по левому краю"
/>

- Третье — убрать отступ в мобильной версии с помощью медиа-запросов. Но это не самый надёжный способ, так как если почтовый клиент не поддерживает медиа-запросы, отступ останется. 

## Как устроена адаптация AMP-писем

Технология AMP for Email поддерживается только в современных почтовых клиентах, среди которых — [**Gmail и Mail.ru**](https://pixcraft.io/ru/blog/amp-pisma-kak-razlichaetsya-ih-obrabotka-v-gmail-i-mail-ru). AMP-письма не требуют специальных обходных решений: здесь доступны практически все возможности CSS, включая `flex`, `grid` и медиа-запросы.

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

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

## Как мобильная адаптация email-шаблонов работает в Pixcraft

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

Для почтовых клиентов, поддерживающих медиа-запросы, в редакторе доступны различные [**сценарии адаптации**](https://docs.pixcraft.io/ru/builder/mobile_adaptation.html). Например, здесь можно:

- настроить расширение колонок на всю ширину экрана или оставить перестроение без растягивания;<br><br>
- выбрать более сложные схемы перестроения (к примеру, поместить одну колонку с расширением в отдельную строку, а две другие — под ней без расширения).

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

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

Конструктор писем Pixcraft следует этим принципам в логике работы. [**Попробуйте**](https://app.pixcraft.io/user/register) его бесплатно в течение 14 дней и оцените возможности сами. А если хотите узнать о Pixcraft больше — [**напишите нам**](mailto:experts@pixcraft.io), и мы обсудим интересующие вас вопросы.

В статье рассказываем про мобильную адаптацию писем: какие приёмы использовать, какие нюансы учитывать и как она работает в Pixcraft.

small_adapt_cover.png

thumbnail_adapt_cover.png

adapt_cover.png

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

Сравниваем возможности конструкторов писем Pixcraft и Stripo: основные возможности, AMP-функционал, массовое редактирование элементов и многое другое.

small_pix_vs_strp_cover.png

thumbnail_pix_vs_strp_cover.png

pix_vs_strp_cover.png

Pixcraft vs Stripo: какой конструктор писем выбрать

В статье сравниваем конструкторы писем Pixcraft и TOPOL: в чём заключаются их подходы к созданию email-шаблонов и какие различия между двумя инструментами особенно заметны.

small_pixvstopcov (1) (1).png

thumbnail_pixvstopcov (1) (1).png

pixvstopcov (1) (1).png

Pixcraft vs TOPOL: чем различаются подходы в работе над email-шаблонами

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

В статье разбираем отличия отображения AMP-писем в Gmail и Mail.ru, а также какие ограничения необходимо учитывать при вёрстке.

## Состояния (amp-state) и их начальные значения

Состояния в AMP-письмах используются как переменные, где можно хранить любые данные и строить на их базе условную логику отображения. Эти значения подставляются в атрибуты (`[text]`, `[class]` и другие) и обновляются в ответ на действия пользователя. 

Важно учитывать, что значение внутри `<amp-state>` применяется только после инициализации состояния через `AMP.setState`. Если какие-либо данные необходимо показать сразу после открытия письма, их можно задать как обычный контент элемента или значение атрибута:

```xml
<span [text]="myItem.el">default value</span>
```

В данном случае изначально будет отображаться `default value`, а после действия пользователя — значение `myItem.el`. При этом само действие может быть любым, в том числе формальным. Например:

```xml
<amp-state id="myItem">
  <script type="application/json">
    { "el": "new value" }
  </script>
</amp-state>
<span [text]="myItem.el">default value</span>
<button on="tap:AMP.setState({})">Кнопка</button>
```

В **Gmail** этот процесс работает в соответствии со стандартом. Здесь при клике на кнопку инициализируется состояние, и в элементе `<span>` появляется текст `new value`. 

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

Для обхода этого ограничения вместо `<amp-state>` используйте `setState`, чтобы значения динамически обновлялись в момент действия пользователя:

```xml
<button on="tap:AMP.setState({ myItem: { el: 'new value' } })">
  Кнопка
</button>
<div [text]="myItem.el">default value</div>
```

## Ограничение на размер выражений

Хотя в `amp-bind` стандартом не предусмотрены какие-либо ограничения, **Mail.ru** устанавливает строгий лимит на длину выражений — не более **100** единиц. В частности, команда Pixcraft столкнулась с этим ограничением во время разработки [**AMP-игры «Змейка»**](https://pixcraft.io/ru/blog/zmejka-v-pisme-kak-my-s-altcraft-sozdali-igru-dlya-amp-rassylki). При клике на кнопку в письме Mail.ru отображал ошибку:

```xml
amp-bind: Expression eval failed. Expression size (194) exceeds max (100)
```

В то же время с **Gmail** подобных сложностей не возникало.

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

## Работа AMP‑каруселей

`<amp-carousel>` — полезный инструмент для создания интерактивных галерей изображений. Он работает предсказуемо в большинстве клиентов с поддержкой AMP, однако в **Gmail для iOS** при нажатии на стрелку навигации письмо прокручивается вверх, а контекст просмотра теряется. Исправить проблему настройками самого `<amp-carousel>` нельзя, так как она не связана с параметрами `type`, `layout` или размерами компонента.

Надёжным решением для этой ситуации становится сборка собственной карусели с использованием `amp-bind`. В этом варианте письмо при взаимодействии не смещается самопроизвольно. Ниже — пример такой AMP‑карусели, включающий 4 слайда:

```xml
<style amp-custom>
.carousel-wrapper {
position: relative;
width: 500px;
height: 400px;
overflow: hidden;
}
.carousel-container {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide-0 { transform: translateX(0%); }
.slide-1 { transform: translateX(-100%); }
.slide-2 { transform: translateX(-200%); }
.slide-3 { transform: translateX(-300%); }
.carousel-slide {
min-width: 100%;
flex: 0 0 auto;
}
</style>
<div class="carousel-wrapper">
<div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
<amp-img src="pic1.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic2.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic3.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic4.jpg" width="500" height="400" class="carousel-slide"></amp-img>
</div>
</div>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 4) % 4}})">
Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 4}})">
Next
</button>
```

Базовая логика здесь следующая:

- индекс текущего слайда хранится в состоянии;<br><br>
- контейнер со слайдами сдвигается через `transform: translateX(...)`;<br><br>
- навигация реализуется через `AMP.setState` по кнопкам «вперёд» и «назад».

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

Восприятие AMP-CSS в Gmail и Mail.ru заметно различается. Например, **Gmail** следует спецификации AMP for Email максимально строго, что проявляется в нескольких аспектах:

- **Разрешён только ограниченный набор CSS-свойств.** Конструкции, выходящие за рамки спецификации, приводят к тому, что письмо не проходит валидацию.<br><br>
- **Запрещено использование псевдоэлементов `:before` и `:after`.** Это критично для привычных приёмов вёрстки, таких как декоративные иконки, маркеры списков, оверлеи и тени, реализуемые через псевдоэлементы.<br><br>
- **[Анимация](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya) и переходы сильно ограничены на уровне рендеринга.** Поддерживаются только базовые CSS-анимации, без сложных таймингов и цепочек эффектов.

**Mail.ru** на практике предъявляет более мягкие требования к использованию CSS. Здесь:

- шире поддержка CSS-анимаций;<br><br>
- меньше ограничений на декоративные приёмы и визуальные эффекты;<br><br>
- допустимы решения, которые Gmail блокирует или игнорирует при рендеринге.

Из-за этого если при вёрстке письма ориентироваться только на Mail.ru, почти неизбежно появляется CSS, который Gmail не принимает. Поэтому более надёжная стратегия работы с AMP-CSS выглядит так:

- основная вёрстка с учётом ограничений Gmail: только разрешённые свойства, без псевдоэлементов, с минимальными анимациями;<br><br>
- контрольная проверка, что AMP стабильно отображается в Gmail;<br><br>
- аккуратное расширение под Mail.ru: использование дополнительных анимаций и визуальных приёмов поверх базовой вёрстки, уже прошедшей проверку в Gmail.

## Тёмная тема в AMP‑письмах

На работу [**тёмной темы**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat) влияют как сам почтовый клиент, так и используемая платформа. Из-за этого один и тот же AMP-шаблон может выглядеть по-разному в Mail.ru, Gmail на Android и Gmail на iOS.

**Mail.ru** не перекрашивает AMP-письма автоматически. Цвета, фоны и контраст здесь задаются через CSS. Для управления темами используется meta-тег:

```xml
<meta name="supported-color-schemes" content="light dark">
```

Также задействуются CSS-селекторы в `style`:

- `:root[data-ogsc]` — тёмная тема;<br><br>
- `:root:not([data-ogsc])` — светлая тема.

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

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

Таким образом, полноценная поддержка светлой и тёмной темы доступна только для Mail.ru. Поэтому при жёстких требованиях к цветам рекомендуется использовать нейтральный или базовый тёмный дизайн, а проверку письма стоит проводить отдельно в каждом клиенте.

## Тестирование AMP‑писем

Тестирование — финальный этап перед отправкой рассылки. Он позволяет оценить валидность AMP-кода, корректность CSS и то, как почтовый клиент реагирует на ошибки.

Для этого **Gmail** предлагает инструмент [**Gmail AMP for Email Playground**](https://amp.gmail.dev/playground/), с помощью которого можно:

- проверять разметку на соответствие спецификации AMP for Email;<br><br>
- обнаруживать недопустимые компоненты или атрибуты;<br><br>
- отправлять тестовые письма на собственный адрес @gmail.com.

<Img
img="/api/uploads/01_pgrndgm_ef906bc75c.png"
alt="Playground Gmail"
/>

Если после отправки в клиенте отображается AMP-версия — значит, проверка пройдена. Если же вместо неё открывается HTML-версия, над письмом появится уведомление: код ошибки (например, недопустимый компонент) и ссылка на документацию.

Собственный [**Playground**](https://postmaster.mail.ru/amp/playground.html) есть и у **Mail.ru**. В нём также можно выявить ошибки, связанные с нарушением спецификации или внутренних ограничений почтового клиента, и отправить тестовую рассылку себе на почту.

<Img
img="/api/uploads/02_plgrnmlr_7a2a6e664c.png"
alt="Playground Mail.ru"
/>

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

- сначала общая проверка валидности AMP-кода;<br><br>
- затем тестирование интерактива и логики в Gmail;<br><br>
- после этого обязательная проверка рендеринга и поведения в Mail.ru.

Подробнее о том, как подготовить AMP-письмо к тестированию и отправке, читайте в нашей [**подробной инструкции**](https://docs.pixcraft.io/ru/amp/getting_started.html).

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

Поведение AMP-писем зависит не только от реализации кода, но и от правил его обработки в почтовом клиенте. Учёт особенностей Gmail и Mail.ru помогает сохранить контроль над интерактивом и визуальной частью письма. В этом контексте различия между клиентами задают понятные рамки, на основании которых строится реализация email-кампаний.

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

Рассказываем о различиях отображения AMP-писем в Gmail и Mail.ru: как отличаются использование состояний, восприятие длины выражений, работа каруселей, тёмная тема и многое другое.

small_cov_gmmlr.png

thumbnail_cov_gmmlr.png

cov_gmmlr.png

AMP-письма: как различается их обработка в Gmail и Mail.ru

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

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

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

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

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

- HTML-разметка (таблицы, контейнеры, вложенные блоки, комментарии);<br><br>
- CSS (стили внутри `<style>` и свойства, заданные в атрибутах элементов);<br><br>
- текстовый контент (заголовки, абзацы, кнопки, подписи);<br><br>
- ссылки, пиксели отслеживания, скрытые технические блоки.

Размер изображений и [**анимации**](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya) при расчёте не учитывается. Почтовые клиенты загружают графику отдельно, после того, как обработана разметка письма. Но игнорировать этот параметр нельзя, так как объём графических файлов прямо влияет на восприятие письма в первые секунды после открытия:

- Тяжёлая графика в рассылке загружается дольше, особенно при медленном соединении или если в письме несколько объёмных изображений.<br><br>
- До того, как графические элементы загрузятся, пользователь будет видеть на их месте пустые области или плейсхолдеры.<br><br>
- Если загрузка занимает много времени, то главный визуальный блок может появиться слишком поздно, а первое впечатление будет испорчено.

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

## Что влияет на предельный вес письма

### Ограничение в Gmail

Многие популярные почтовые клиенты формально [**не ограничивают**](https://www.dailystory.com/blog/html-email-clipping-limits-across-different-mailbox-providers/) размер электронных писем. Одним из немногих исключений является Gmail, который устанавливает фиксированный лимит по размеру HTML-части: **102 КБ**.

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

<Img
img="/api/uploads/01_chastsoobsh_2a6c7f3fdd.png"
alt="Обрезка письма в Gmail"
/>

Всё это может повлиять и на восприятие, и на функциональность письма:

- Даже если обрезается только футер, именно там зачастую находятся контактные данные, юридическая информация и ссылка для отписки. Последнее особенно критично: если получатель не находит понятного способа отказаться от рассылки, одной из немногих доступных опций становится нажатие на кнопку «Сообщить о спаме».<br><br>
- Трекинг-пиксели (которые фиксируют факт открытия), как правило, также размещают в нижней части письма. Если она не загружается, то открытие не регистрируется, а статистика искажается. При этом когда автоматические сценарии зависят от того, открыл ли получатель письмо, ошибки начинают затрагивать всю оставшуюся [**цепочку коммуникаций**](https://pixcraft.io/ru/blog/kakie-email-cepochki-must-have-dlya-biznesa).

### Ограничение размера в AMP

Для AMP-контента действуют особые ограничения, указанные в [**спецификации AMP for Email**](https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-format):

- AMPHTML-часть письма — не более **200 000 байт** (примерно 195 КБ);<br><br>
- CSS внутри `<style amp-custom>` — не более **50 000 байт** (примерно 48 КБ).

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

### Спам-фильтрация

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

- структура и сложность HTML-разметки;<br><br>
- соотношение полезного контента и технических элементов;<br><br>
- количество трекеров и ссылок;<br><br>
- характер вложений и способ их подключения.

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

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

## Практики оптимизации размера письма

### Очистка HTML от лишних элементов

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

- **лишние пробелы и табуляции**, используемые для визуального выравнивания кода;<br><br>
- **переносы строк**, которые не имеют практического значения для рендеринга, но увеличивают объём;<br><br>
- **пустые строки** между блоками контента, оставшиеся после правок или копирования.

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

### Упрощение табличной структуры

Табличная HTML-разметка (`<table>`, `<tr>`, `<td>`) — один из базовых инструментов email-вёрстки: она обеспечивает стабильность и корректное отображение писем в различных почтовых клиентах. Однако ошибки в её применении способны значительно увеличивать вес кода.

К примеру, лишний объём может возникать из-за таких причин:

- **Чрезмерная вложенность.** Таблицы вложены друг в друга без необходимости и функциональной нагрузки.<br><br>
- **Повторяющиеся контейнеры на одном уровне.** Один и тот же контент помещается в несколько таблиц или ячеек.

Практические способы оптимизации включают:

- **Сокращение глубины вложенности.** Если несколько уровней таблиц выполняют одну и ту же задачу, имеет смысл их объединить. Это уменьшает размер кода без риска для отображения письма.<br><br>
- **Использование `padding` в ячейках таблиц.** Создание отдельных таблиц и строк только ради отступов приводит к росту объёма кода. В этих случаях отступ лучше задавать через `padding` у `<td>`.

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

### Удаление «мёртвого кода»

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

- закомментированные блоки из старых версий письма, оставшиеся после переработки структуры;<br><br>
- фрагменты, связанные с завершёнными A/B-тестами;<br><br>
- скрытые элементы, не участвующие в отображении и логике письма.

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

### Очистка CSS

CSS заметно влияет на вес писем. В частности, это касается шаблонов, которые многократно редактируются. Чаще всего лишний объём формируется из-за:

- повторяющихся наборов CSS-свойств, которые прописываются у множества элементов без необходимости;<br><br>
- стилей и классов, оставшихся от предыдущих вариаций шаблона;<br><br>
- автоматической генерации инлайновых стилей, когда каждому блоку назначается одинаковый набор свойств.

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

### Создание писем с помощью TJML

[**TJML**](https://pixcraft.io/ru/framework) — фреймворк, созданный командой Pixcraft для комфорта и ускорения вёрстки писем. Он позволяет работать с HTML- и AMP-версиями письма в рамках единой кодовой базы, а готовые шаблоны остаются стабильными в большинстве почтовых клиентов, включая Microsoft Outlook 2003–2024.

В части контроля веса писем TJML предусматривает такие механики:

- Фреймворк позволяет рассчитывать размер кода и сигнализирует о превышении рекомендуемого объёма. Это даёт возможность внести исправления до отправки тестовых писем и финальной сборки рассылки.

<Img
img="/api/uploads/02_tjmlwarn_e794848c22.png"
alt="Предупреждение о весе письма в TJML"
/>

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

Подробнее о возможностях TJML и о том, как с его помощью ускорить разработку писем, рассказали в [**этой статье**](https://pixcraft.io/ru/blog/frejmvork-tjml-kak-verstat-pisma-bystro-i-prosto).

### Проверка до запуска рассылки

При отправке писем ESP и CDP обычно оборачивают ссылки в трекерные редиректы. К каждой ссылке добавляются дополнительные параметры, из-за чего они становятся длиннее и увеличивают общий объём кода. В результате письмо может укладываться в лимиты на этапе вёрстки, но превысить их после финальной сборки.

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

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

Вес письма — не абстрактный параметр, а практический фактор, который влияет на аналитику, доставляемость и восприятие рассылок. Поэтому работу с ним следует рассматривать как часть системной подготовки шаблона: от организации разметки и CSS до проверки итогового кода после обработки на стороне ESP или CDP.

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

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

small_emailwght_cov.png

thumbnail_emailwght_cov.png

emailwght_cov.png

Вес электронного письма: что влияет на размер email-рассылок и как его оптимизировать

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

Но за внешней привлекательностью анимации стоит множество аспектов:

- Где она действительно уместна?<br><br>
- Как сделать письмо ярким и динамичным, но при этом не перегрузить?<br><br>
- Будет ли компонент работать одинаково в разных почтовых клиентах? 

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

## Чем полезна анимация в письмах

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

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

- **Промо-письма.** К примеру, анимированный баннер подчёркивает выгоду и делает оффер визуально понятнее. В свою очередь, [**таймер**](https://pixcraft.io/ru/blog/amp-tajmer-ot-pixcraft-chem-on-polezen) с обратным отсчётом подталкивает читателя к действию, пока акция ещё актуальна.<br><br>
- **Онбординг.** Короткая демонстрация интерфейса в приветственных email-цепочках показывает логику сервиса: какой функционал доступен, как он работает и как перейти на следующий шаг. Новый пользователь сразу видит продукт в действии и быстрее понимает его структуру.<br><br>
- **Дайджесты.** Если письмо не требует полноценной [**динамической карточки товаров**](https://pixcraft.io/ru/blog/dinamicheskie-kartochki-tovarov-kak-oni-ustroeny-v-redaktore-pixcraft), небольшая анимация поможет акцентировать нужные позиции. С её помощью можно показать новинку в нескольких ракурсах или выделить товар со скидкой.<br><br>
- **Сервисные письма.** Лёгкие анимированные элементы подходят в том числе для транзакционных сообщений. Например, можно проиллюстрировать статусы заказа, такие как передача курьеру или доставка до пункта выдачи.

<Img
img="/api/uploads/01_trnsctnlanimexm_0db7bae6fb.gif"
alt="Анимация в транзакционном письме"
src="Источник: Really Good Emails"
/>

## Как добавлять анимацию в email-рассылки

Наиболее популярные подходы к добавлению динамики в письма — это GIF и AMP. Понимание их особенностей поможет подобрать нужный инструмент под определённый сценарий.

### GIF

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

- **Размер.** Оптимальный вариант для email-рассылок — короткая и лёгкая GIF-анимация. Разумно удерживать размер файла **в пределах 1 МБ** или даже ниже, чтобы письмо загружалось быстрее.<br><br>
- **Цвета и детализация.** Формат поддерживает только **256 цветов**, а сложные градиенты и переходы между кадрами теряют качество при сжатии. Для аккуратного результата лучше использовать простые формы, фоны и контуры.<br><br>
- **Alt-текст.** Служит страховкой, если элемент не загружается из-за низкой скорости или фильтров в почтовом клиенте. Короткое описание сохраняет логику письма и даёт читателю понять, какой элемент должен быть на месте анимации.

### AMP

Технология AMP расширяет возможности создания писем, добавляя интерактивные элементы. С её помощью можно создавать листаемые галереи, [**интерактивные опросы**](https://pixcraft.io/ru/blog/nps-oprosy-zachem-oni-nuzhny-i-kak-ih-realizovat-v-Pixcraft) и более сложные визуальные сценарии, недоступные в классических форматах.

AMP работает в том числе и с классической GIF-анимацией. Для этого используются два компонента:

- `amp-img`;<br><br>
- `amp-anim`. 

Оба подходят для добавления GIF-файлов, но `amp-anim` — специализированный компонент, предлагающий особое преимущество: анимация работает, пока элемент находится в зоне видимости. Как только пользователь прокручивает письмо — `amp-anim` останавливает воспроизведение и снижает нагрузку на ресурсы, что может быть полезно в длинных рассылках и на мобильных устройствах.

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

Сам элемент поддерживает стилизацию через CSS и вписывается в макет как обычный AMP-блок. Ниже — пример разметки `amp-anim`:

```xml
<amp-anim width="500" height="400" src="animation.gif">
  <amp-img placeholder width="500" height="400" src="placeholder.jpg">
  </amp-img>
</amp-anim>
```

## Как работает анимация в визуальном редакторе Pixcraft

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

<Img
img="/api/uploads/02_animatspixcr_ce1ae079f7.gif"
alt="Анимация в Pixcraft"
/>

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

- ширина и высота;<br><br>
- выравнивание, скругления углов и отступы;<br><br>
- толщина, текстура и цвет рамки;<br><br>
- внешняя ссылка для перехода по клику;<br><br>
- alt-текст.

<Img
img="/api/uploads/03_nastranim_e23b8278da.png"
alt="Настройка изображения в Pixcraft"
/>

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

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

<Img
img="/api/uploads/04_predprosmanim_9fd42f7914.gif"
alt="Предпросмотр письма в Pixcraft"
/>

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

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

- экспортируйте AMP-версию шаблона;<br><br>
- откройте полученный файл в редакторе кода;<br><br>
- добавьте в письмо нужные AMP-компоненты.

## Что важно учитывать при работе с анимацией в email-рассылках

### Совместимость с Outlook

Хотя в большинстве почтовых сервисов GIF работает без сбоев, проблемы могут возникнуть с некоторыми версиями Outlook для Windows. Из-за рендеринга на движке Word анимация в них застывает на первом кадре и не воспроизводится дальше.

На этот случай стоит заранее подготовить запасные варианты:

- использовать условные комментарии, чтобы заменить GIF статичным изображением там, где анимация не работает;<br><br>
- сделать выразительный первый кадр, который передаёт смысл блока без движения и выглядит как полноценная иллюстрация. Это особенно важно, если компонент содержит значимую информацию: дату акции, скидку, ключевой элемент предложения.

### Выразительность и баланс

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

Для этого она должна:

- поддерживать структуру письма, а не перетягивать внимание туда, где нет основной мысли;<br><br>
- сохранять читаемость основного текста и чистоту композиции;<br><br>
- не загромождать и не перегружать вёрстку.

### Лимит внимания

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

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

### Работа на маленьких экранах

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

Перед отправкой важно проверить:

- не обрезается ли анимация;<br><br>
- остаётся ли читаемым текст в её составе;<br><br>
- сохраняется ли общий смысл при уменьшении масштаба.

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

## Поддерживается ли видео в письмах (и стоит ли его использовать)

Идея встроить видео прямо в рассылку может выглядеть привлекательной, но такую технологию поддерживают лишь [**единичные клиенты**](https://www.caniemail.com/features/html-video/), например, Apple Mail. В большинстве email-сервисов ролик внутри письма просто не запустится: на его месте будет отображаться либо пустое место, либо fallback-контент, если он предусмотрен. 

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

<Img
img="/api/uploads/05_playbttnexm_9f29c65836.png"
alt="Кнопка Play в письме"
src="Источник: Really Good Emails"
/>

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

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

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

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

Рассказываем, как использовать анимацию в рассылках: форматы, отображение в email-клиентах и советы по работе с GIF и AMP.

small_anim_eml_cover.png

thumbnail_anim_eml_cover.png

anim_eml_cover.png

Анимация в email-рассылках: рекомендации для стабильного отображения

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

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

## Зачем добавлять таймер в письмо
Таймеры усиливают сценарии коммуникации, переводя дедлайн из расплывчатого обещания в измеримую величину. Время воспринимается как ограниченный ресурс, а подписчики получают повод действовать незамедлительно: возникает так называемый **Fear of Missing Out** (страх упустить выгоду), за счёт которого становится труднее откладывать решение «на потом».

Ниже — маркетинговые сценарии, где таймеры наиболее эффективны.

<Table>
| Сценарий | Польза таймеров |
| --------- | ---------------------------------- |
| **Срочные акции и распродажи** | Формулировки вида «Акция закончится через 5 часов 27 минут» стимулируют к покупке и усиливают ощущение эксклюзивности. В комбинации с дополнительной выгодой (например, скидкой или бонусом) растёт вероятность конверсии. |
| **Лимитированные предложения** | Такие сценарии, как промокод с датой истечения, бесплатная доставка «при заказе до 22:00» или ранний доступ к продукту требуют точных рамок. Таймер фиксирует границы времени, подталкивая подписчика к действию. |
| **Мероприятия (вебинары, онлайн-курсы и другие события)** | Надпись «До начала осталось 04:30:12» побуждает скорее завершить регистрацию, чтобы забронировать место (особенно когда их количество ограничено). |
| **Оформление заказа или подписки** | Таймер помогает в ситуациях, когда клиент сомневается перед решением. Сообщение «Оформите заказ в течение 2 часов и получите подарок» сочетает дедлайн с выгодой и действует эффективнее, чем абстрактное «Поторопитесь». |
</Table>

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

Подход считается классическим, но имеет значительные ограничения:

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

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

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

**3. Длительность и вес анимации.** Размер GIF-файлов растёт вместе с числом кадров и плавностью анимации. Чтобы уложиться в допустимые рамки, длину цикла обычно ограничивают 10–20 секундами. Спустя некоторое время анимация перестаёт воспроизводиться или начинается заново.

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

### amp-timeago
`amp-timeago` — это стандартный amp-компонент для отображения относительного времени в текстовом виде. Он выводит простые значения в зависимости от указанной даты, например, «через 16 часов», «через 3 месяца» или «через год».

<Img
img="/api/uploads/01_timeagoexmp_693c36a831.png"
alt="Компонент amp-timeago"
src="Пример отображения времени с помощью amp-timeago. Источник: amp.dev"
/>

Ключевые особенности `amp-timeago`:

- Корректно пересчитывает оставшееся время вне зависимости от момента открытия письма.<br><br>
- Прост в подключении, не содержит сложных элементов.<br><br>
- Поддерживает множество языков (по умолчанию установлена локаль `en`).

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

Несмотря на это, `amp-timeago` подходит, когда необходимо просто проинформировать аудиторию. К примеру, его можно использовать в технических уведомлениях, таких как «Подтвердите заказ в течение 2 часов» или «Подписка автоматически продлится через 3 дня». Однако в маркетинговых письмах он не заменит полноценный таймер, ориентированный на вовлечение и конверсии.

## Как работает AMP-таймер от Pixcraft

Pixcraft предлагает альтернативу привычным GIF-таймерам и `amp-timeago`. Вместо потоковой генерации картинок задействуется лёгкая AMP-механика, а сам таймер формируется прямо в письме. Это обеспечивает полноценное отображение счётчика времени и стабильную работу без тяжёлых файлов и проблем с кэшированием.

<Img
img="/api/uploads/02_timeranim_ac2a926f74.gif"
alt="AMP-таймер Pixcraft"
/>

### Общая логика работы AMP-таймера

Каждый фрагмент таймера представляет собой отдельную AMP-карусель. Отсчёт оставшегося времени привязан к установленному дедлайну. Например, если финальной точкой станет 31 декабря 2025 года в 23:59, то значение будет выглядеть так: 

```xml
src="https://app.pixcraft.io/api/timer?date=2025-12-31&time=23-59"
```

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

В основе компонента лежат: 

- **amp-list** — делает запрос к серверу и получает данные о том, сколько времени осталось до дедлайна.<br><br>
- **amp-mustache** — подставляет полученные данные в шаблон письма.<br><br>
- **amp-carousel** — визуально перелистывает часы, минуты или секунды.

### Как отображаются часы

Сервер возвращает два значения:

- `hours.i0` — текущее количество часов до дедлайна.<br><br>
- `hours.i1` — следующее значение (уменьшенное на 1).

То есть, если до конца акции осталось 2 часа 30 минут, то `hours.i0` будет иметь значение «2», а `hours.i1` — «1». Эти значения перелистываются в карусели: сначала показывается «2», а когда текущий час заканчивается, происходит автопереключение `hours.i0` на «1» и `hours.i1` — на «0» . Тайминг перелистывания задаётся параметром `delay="{{ hour_left }}"`: он определяет время, оставшееся до конца текущего часа.

### Как отображаются минуты

Здесь формируется массив из 60 элементов (от `minutes.i0` до `minutes.i59`), а карусель перелистывает каждую минуту с задержкой **60 000 мс**. При этом, чтобы время было корректным, первой позицией в массиве автоматически становится не «нулевая», а текущая минута относительно дедлайна. 

К примеру, если до финальной точки остаётся 1 час 30 минут, логика будет работать следующим образом:

- В массиве первым идёт значение `30`.<br><br>
- Далее значение меняется каждую минуту: `29`, `28` и далее до `0`. Затем оно переключается на `59`, после на `58` и так до `31`.<br><br>
- После этого отсчёт начинается заново с `30`. Таким образом возможно зациклить корректный ход времени в минутах.

### Как отображаются секунды

Для простоты и надёжности секунды реализованы как **циклическая имитация**, где ежесекундно происходит переключение числовых значений. Карусель секунд всегда начинается с `59`, после чего значение меняется на `58`, `57` и вплоть до `00`, а затем снова возвращается к `59`. 

### Что происходит после дедлайна

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

- Показать лаконичное сообщение: «Акция завершилась».<br><br>
- Предложить альтернативу: «Глобальная распродажа закончилась, но доступна подборка со скидками до −30%» и кнопка на актуальный раздел.

<Img
img="/api/uploads/03_timerfin_992c22276f.png"
alt="Финальный слайд AMP-таймера Pixcraft"
/>

## Сильные и слабые стороны AMP-таймера

Таймер от Pixcraft предлагает заметные преимущества, которые делают его полезным инструментом для email-маркетинга:

- **Точность и устойчивость отображения.** AMP-таймер не зависит от кэширования изображений. Счётчик показывает актуальные данные даже после закрытия письма и возвращения к нему спустя время.<br><br>
- **Лёгкий вес.** Формирование таймера не требует рендеринга десятков кадров GIF-анимации. Это позволяет значительно ускорить процесс загрузки письма.<br><br>
- **Контроль над состоянием после дедлайна.** AMP-решение позволяет заранее прописать сценарий окончания акции: от простого сообщения до более сложных подходов.

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

- **Условные секунды.** Секундная карусель стартует с `59` независимо от системного времени: настроить кастомное отображение первой секунды на текущий момент нельзя. Но хотя в инженерном смысле это компромисс, визуально эффект выглядит естественно и отлично подходит для маркетинговых задач.<br><br>
- **Необходимость поддержки AMP.** Таймер работает только в тех почтовых клиентах, которые совместимы с технологией AMP (например, Mail.ru, Gmail, Yahoo и AOL). Для остальных клиентов следует предусмотреть fallback: статичный блок или классическую GIF-анимацию.

## Как включить AMP-таймер в письмо

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

▶️ [**Забрать код AMP-таймера от Pixcraft**](https://codepen.io/Todd-the-flexboxer/pen/pvgRXjP)

<Img
img="/api/uploads/04_codeexampl_e449534934.png"
alt="Код AMP-таймера Pixcraft"
/>

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

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

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

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

В статье расскажем о том, как работает AMP-таймер от Pixcraft, в чём его преимущества по сравнению с другими типами таймеров и как включить его в ваши email-рассылки.

small_timer_covr.png

thumbnail_timer_covr.png

timer_covr.png

AMP-таймер от Pixcraft: чем он полезен и как добавить его в рассылку 

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

Для этой цели в Pixcraft предусмотрен особый компонент — **AMP-forward-link**. В статье рассмотрим его подробнее: что он собой представляет, как работает в письмах и как вы сможете включить его в свои рассылки.

## Что такое AMP-forward-link
С этим AMP-компонентом весь процесс подтверждения действия переносится внутрь письма. Кнопка работает без перенаправлений и открытия новых вкладок: фактически пользователь отправляет форму, а переход происходит уже на стороне сервера в фоновом режиме.

Таким образом, подтверждение действий в письме становится:

- **более удобным** — обеспечивается быстрый отклик, исключаются лишние клики и необходимость переходить на сайт;<br><br>
- **более надёжным** — риск потерять внимание читателя на промежуточных шагах сводится к минимуму.

## Для чего AMP-forward-link используется на практике
Ниже рассмотрим три базовых возможности применения **AMP-forward-link**, которые позволят извлечь максимум пользы из этого компонента.

### Подтверждение подписки (Double Opt-In)
Типовой сценарий, где **AMP-forward-link** особенно уместен. Получатель открывает письмо и нажимает «Подтвердить». Компонент определяет действие и тут же показывает сообщение об успешном завершении процесса (например: «Готово! Подписка активирована»). С позиции пользователя всё выглядит максимально просто: одно нажатие, быстрая реакция и обновление статуса.

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

- **Интересы для сегментации**. Получатель сам выбирает наиболее интересные для себя рубрики будущих рассылок из нескольких категорий. За счёт этого база сегментируется по интересам, а подписчик получает релевантный контент с первого дня, что способно повлиять на открываемость и снизить риск отписки.<br><br>
- **Расширение профиля**. Письма с подтверждением подписки традиционно показывают очень высокие OR и CTR. Когда пользователь нажал кнопку и подтвердил подписку, его внимание уже сосредоточено на бренде. В этот момент можно аккуратно предложить заполнить дополнительные данные о себе — имя, номер телефона или другую информацию.<br><br>
Эффективность такого подхода демонстрируется на практике. Например, после подтверждения подписки Everyday Horoscopes предложил пользователям указать номер телефона. В результате конверсия **превысила 40%**, то есть поделиться номером согласился почти каждый второй подписчик.

<Img
img="/api/uploads/01_horocexamp_f23f7b8b78.png"
alt="Ввод номера после подтверждения адреса"
/>

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

Это полезно тем, что: 

- вы сразу получаете структурированную причину отказа, которая может пригодиться для дальнейшей аналитики;<br><br>
- прямо в письме можно предложить мягкую альтернативу: сократить частоту рассылок, поменять тематику или оставить только критически важные уведомления. Так вы сможете сохранить часть аудитории.

## Как создать AMP-forward-link в Pixcraft
Аналогично другим AMP-компонентам, процесс создания **AMP-forward-link** начинается с меню **«Компоненты»** в рабочем пространстве вашего профиля.

<Img
img="/api/uploads/02_moyoprostr_ab881c470b.png"
alt="Рабочее пространство профиля в Pixcraft"
/>

Нажмите **«Новый компонент»** и в списке доступных типов выберите **Link**. После этого система предложит заполнить:

- **Название.** Укажите любое подходящее имя компонента, например, «Подтверждение подписки» или «Отписка с обратной связью». Это упростит навигацию в будущем.<br><br>
- **Описание.** Опционально добавьте пояснение, к примеру, для чего или в какой именно кампании задействуется этот компонент. Поле можно оставить пустым, но оно будет полезно для более точного понимания сценариев использования, особенно если над проектами работают сразу несколько пользователей.

<Img
img="/api/uploads/03_sozdssylk_0a0d68a659.png"
alt="Создание компонента в Pixcraft"
/>

Далее нажмите **«Создать компонент»**, после чего откроется новая страница с настройками. В отличие от других компонентов со множеством опций, таких как [**формы**](https://pixcraft.io/ru/blog/kak-sozdavat-i-ispolzovat-formy-v-pisme) или [**«Живая лента»**](https://pixcraft.io/ru/blog/zhivaya-lenta-v-amp-rassylkah-novyj-uroven-vovlecheniya), у **AMP-forward-link** необходимо указать только два обязательных значения:

**1. Сообщение об успешной отправке.** Это текст, который увидит пользователь сразу после подтверждения действия. Он может быть лаконичным («Спасибо, ваша подписка подтверждена!») или более развернутым, с дополнительными инструкциями или приглашением к следующему шагу.<br><br>
**2. Домен для ссылок.** Здесь указывается домен confirm-ссылки. Обратите внимание: если ваш ESP использует систему трекинга кликов, домен может подменяться при отправке письма.

<Img
img="/api/uploads/04_ukazdomen_bc19221963.png"
alt="Настройка компонента в Pixcraft"
/>

Механика работы **AMP-forward-link** построена на отправке формы и фиксирует действие напрямую через ссылку подтверждения. Это значит, что нет необходимости связывать письмо с внешними системами через вебхуки или настраивать дополнительные серверные события.

Как только параметры заполнены, нажмите **«Сохранить»**. Система перенаправит вас на следующий экран, где будут доступны **Action-xhr** (URL, на который уходит запрос при нажатии кнопки подтверждения), готовый к работе **HTML-код**, а также более компактная **TJML-версия кода**.

## Структура сгенерированного кода
HTML-код состоит из двух частей: блок для шапки письма `<head>` и блок для тела письма `<body>`. В блоке `<head>` подключаются обязательные AMP-скрипты, которые обеспечивают корректную работу формы, обработку действий пользователя и отображение сообщений.

Однако вся основная логика работы компонента формируется в `<body>`. Именно здесь размещается форма с атрибутом `action-xhr`:

```xml
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
```

Запрос обрабатывается на стороне Pixcraft. В свою очередь, параметр `on="submit-success: AMP.setState(...)"` определяет, что произойдёт после успешного выполнения действия.

**Ключевым элементом AMP-forward-link является передача самой ссылки подтверждения.** Это делается через скрытое поле `input` с `name=”link”`:

```xml
<input type="hidden" name="link" value="${confirm}">
```

Здесь `${confirm}` необходимо заменить на подстановку ссылки подтверждения в синтаксисе вашей платформы.

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

```xml
 <div class="loading" submitting>
        Loading...
  </div>
```

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

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

В сравнении с HTML он предлагает такие преимущества:

- **Компактность.** Код TJML выглядит короче и легче, чем AMP-HTML-реализация.<br><br>
- **Автоматизация.** В отличие от HTML-версии, здесь не требуется вручную подключать `amp-bind`, `amp-form` и `amp-mustache`.

TJML-код для **AMP-forward-link** выглядит следующим образом:

```xml
<m-form action="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div data-amp-hidden="confFormXXXX">
    <m-button bgcolor="#7D4DA3">Confirm Subscription</m-button>
    <input type="hidden" name="link" value="${confirm}">
  </div>
  <m-form-success>[[success]]</m-form-success>
  <div class="loading" submitting>
        Loading...
  </div>
</m-form>
```

Включить **AMP-forward-link** в рассылки легко: просто встройте готовый код в письмо. После того, как рассылка будет запущена в работу, вы сможете:

- **отслеживать,** сколько пользователей подтвердили действие через письмо;<br><br>
- **собирать и анализировать дополнительные данные,** если в письме предусмотрен второй экран с формой.

## Заключение
**AMP-forward-link** добавляет в письма расширенную возможность подтверждения действий. Благодаря Pixcraft создать компонент и использовать его как часть email-кампаний возможно без сложной разработки: достаточно вставить готовый код в существующий шаблон письма.

[**Попробуйте Pixcraft**](https://app.pixcraft.io/user/register) бесплатно в течение 14 дней и оцените все возможности нашего визуального конструктора писем. А если вы хотите прокачать навыки в email-маркетинге — загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье расскажем о том, как подтверждать действия в письмах без перехода на сайт с помощью компонента AMP-forward-link и как создать этот компонент в конструкторе писем Pixcraft.

small_image (1).png

thumbnail_image (1).png

image (1).png

AMP-forward-link: как подтверждать действия в письме, не покидая почтового клиента

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

Статьи по тегу: AMP