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

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

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

## Какие есть виды шрифтов для письма

**Шрифты без засечек (гротески)** — это такие шрифты, как Arial, Helvetica, Verdana, Tahoma. Они выглядят современно, нейтрально и легко воспринимаются на экранах любых устройств. Их главное преимущество — хорошая читаемость и универсальность. Такие шрифты подходят для деловых писем, новостных рассылок и любых коммуникаций, где акцент сделан на простоту и доступность. Для основного текста особенно рекомендуется использовать Verdana или более нейтральный Arial.

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

**Шрифты с засечками (антиквы),** например Georgia и Times New Roman, создают более формальный и основательный образ. Засечки добавляют тексту серьёзности, что особенно полезно при официальных рассылках или в проектах, где важно подчеркнуть традиционность бренда. Однако стоит учитывать, что на небольших экранах шрифты с засечками могут ухудшать читаемость. 

<Img
img="/api/uploads/tipografika_yandex_krasivye_shrifty_5_11zon_28107960ca.jpg"
alt="Пример емейла с красивыми шрифтами"
src="В заголовке — контрастный шрифт с засечками. Это распространённый приём — сочетать заголовок с засечками и основной текст без засечек" 
/>

**Рукописные шрифты** вроде Pacifico, Dancing Script или Lobster добавляют письму неформальности и эмоциональности. Они создают эффект личного обращения, усиливают вовлечённость. При этом рукописные шрифты заметно ухудшают читаемость длинных текстов, поэтому их использование стоит ограничить небольшими акцентами — заголовками или краткими вставками. Для основного текста рукописные шрифты непригодны.

<Img
img="/api/uploads/tipografika_v_pismah_example_1_11zon_d7195094b4.jpg"
alt="Емейл с рукописным шрифтом"
src="В заголовке используется рукописный шрифт, похожий на Great Vibes или Dancing Script" 
/>

**Декоративные шрифты** (например, Impact, Comic Sans или брендированные стилизованные гарнитуры) рассчитаны на привлечение внимания за счёт нестандартного вида. Они могут быть оправданы в оформлении баннеров, праздничных заголовков, специальных акций. Но в деловой переписке и для длинных текстов такие шрифты использовать нельзя: они быстро утомляют глаз и мешают восприятию информации.

<Img
img="/api/uploads/tipografika_v_pismah_primer_2_11zon_515d253781.jpg"
alt="Декоративный шрифт"
src="В заголовке используется декоративный шрифт" 
/>

### Стандартные и кастомные шрифты

**Стандартные шрифты** (или веб-безопасные) — это шрифты, которые обычно предустановлены на всех основных операционных системах: Windows, macOS, Android, iOS. Они корректно отображаются в большинстве почтовых клиентов без дополнительных настроек. К таким шрифтам относятся Arial, Verdana, Tahoma, Times New Roman, Georgia. Они гарантируют предсказуемое поведение письма на любых устройствах: текст выглядит одинаково, загружается быстро, риск ошибок минимален.

**Нестандартные (или кастомные шрифты)**, напротив, требуют подключения через @font-face или внешние сервисы вроде Google Fonts. Поддержка таких шрифтов крайне ограничена: стабильно они работают только в Apple Mail (на iOS и macOS) и в некоторых версиях Outlook для Mac. В остальных случаях (например, в Gmail, Outlook на Windows, мобильных приложениях) такой шрифт будет автоматически заменён на стандартный. Это не только рушит задуманный стиль письма, но и создаёт непредсказуемые проблемы с вёрсткой.

Использование кастомных шрифтов в email-рассылках оправдано только в очень редких случаях, когда есть уверенность в специфике аудитории. 

**@font-face** сегодня фактически бесполезен в email-дизайне: поддержка на уровне [**менее 20% клиентов**](https://www.caniemail.com/features/css-at-font-face/) делает его применение нецелесообразным. Если подключить кастомный шрифт без запасного варианта, письмо может выглядеть некорректно.

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

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

<Img
img="/api/uploads/tipografika_shrifty_dlya_texta_3_11zon_2a6f8112b7.jpg"
alt="Шрифты для текста в емейле"
src="Кастомный шрифт в баннере + стандартные шрифты без засечек в тексте" 
/>

### Как сочетать шрифты

Использовать в письме более двух шрифтов не рекомендуется. Оптимальное решение — один шрифт для основного текста и один для заголовков. Например:

- Georgia для заголовков и Verdana для основного текста — вариант для писем с лёгким акцентом на классику.
- Arial для заголовков и Times New Roman для основного текста — решение для строгих деловых рассылок.
- Trebuchet MS для заголовков и Arial для текста — современный, нейтральный вариант для массовых email-рассылок, особенно если важна читаемость и универсальность.

## Размер шрифта, межстрочный интервал и контраст: правила для писем, которые легко читать

**Размер заголовков** должен быть значительно больше основного текста. Для основных заголовков целесообразно использовать 28-36 px, а для подзаголовков —18-24 px. Такая градация строит чёткую визуальную иерархию, акцентирует внимание на ключевых элементах письма и упрощает навигацию по тексту.

<Img
img="/api/uploads/tipografika_zagolovok_samyi_chitabelnyy_shrift_6_11zon_19e6f8be49.jpg"
alt="Размер заголовка в письме"
src="Размер заголовка — примерно 26-30 пикселей" 
/>

**Оптимальный размер шрифта для основного текста — 16 px.** Это значение считается комфортным и для десктопов, и для мобильных устройств. Меньший размер ухудшает читаемость и повышает риск, что часть текста просто проигнорируют. 

**Межстрочный интервал (line-height)** играет не менее важную роль. При плотной вёрстке текст становится трудночитаемым даже при правильном размере шрифта. Оптимально выставлять межстрочный интервал в диапазоне 1,4-1,6 от размера шрифта. 

Например, при размере шрифта 16 px межстрочный интервал должен быть около 22-24 px. Таким образом текст «дышит», его легче воспринимать, и глаза меньше устают при чтении.

<Img
img="/api/uploads/tipografika_interval_shrifty_nazavaniya_2_11zon_f6669c9907.jpg"
alt="Шрифты: названия и межстрочный интервал"
src="Line-height примерно 1.4-1.5" 
/>

**Контраст между текстом и фоном** — обязательное условие для повышения читаемости. Слабый контраст мешает читать и повышает вероятность, что человек просто перестанет вникать в текст. Тёмный текст на светлом фоне (например, чёрный на белом или тёмно-серый на светло-сером) остаётся наиболее надёжным решением. Избегайте цветовых сочетаний с низким контрастом, а также тонких и светлых шрифтов на ярких фонах.

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

## На что ещё стоит обращать внимание 

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

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

<Img
img="/api/uploads/tipografika_soyuzy_visyachie_4_11zon_560f04a939.jpg"
alt="Висячие предлоги"
src="Емейл с висячими предлогами и союзами" 
/>

- **Разрядность чисел**. Большие числа вроде 10 000 или 1 200 000 всегда нужно разделять пробелами. Читателю так проще воспринимать числа. 
- **Знаки препинания**. Дефис — это не то же самое, что длинное тире. Дефис — это «-» (например, в слове «по‑русски»), а длинное тире (—) ставится в тексте как логическая пауза. Также в русских емейлах для цитирования применяйте «ёлочки» («…»), а не кавычки такого формата: “”.
- **Выравнивание текста**. Текст, кнопки и изображения в письме должны быть выровнены одинаково — так письмо выглядит аккуратно и читается проще. Самый удобный вариант — по левому краю. Не растягивайте текст по ширине: из-за этого между словами появляются дополнительные расстояния, и читать становится неудобно.
- **Цвет текста**. Основной текст должен быть одного нейтрального оттенка — тёмно-серого или чёрного (для светлого фона). Для акцентов и заголовков можно добавить один-два дополнительных цвета, но не больше. Избыток цветовых элементов делает письмо визуально перегруженным. 
- **Выделение текста**. Жирный и курсив лучше использовать только для акцентов — отдельных слов или коротких фраз. Например, жирным можно выделить промокод или важную мысль. Если выделено слишком много, акценты теряют смысл и перестают привлекать внимание.

## Итоговые рекомендации

- **Не больше двух шрифтов**. Один для заголовков, другой для основного текста. Больше не нужно — письмо будет выглядеть перегруженным. 
- **Размер шрифта — 14-16 px**. Меньше — уже трудно читать, особенно на телефоне. 
- **Между строками должен быть воздух**. Межстрочный интервал — 1.4–1.6. С таким интервалом строки не слипаются, текст остаётся разборчивым.
- **Тёмный текст на светлом фоне**. Самый надёжный вариант — чёрный или тёмно-серый на белом. Сложные цветовые сочетания ухудшают читаемость.
- **Не вставляйте текст картинкой**. Такие письма не читаются скринридерами и могут не загрузиться.

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

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


small_tipografika-v-emerilah.png

thumbnail_tipografika-v-emerilah.png

tipografika-v-emerilah.png

Типографика писем: как сделать текст читаемым

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

small_email-sequence.png

thumbnail_email-sequence.png

email-sequence.png

Какие email-цепочки — must-have для бизнеса

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

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

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

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

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

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

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

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

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

### Gmail

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

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

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

small_figma.png

thumbnail_figma.png

figma.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### Размер 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


small_cta-pixcraft-knopki-dlya-emeilov.jpg

thumbnail_cta-pixcraft-knopki-dlya-emeilov.jpg

cta-pixcraft-knopki-dlya-emeilov.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

small_email-branding.jpg

thumbnail_email-branding.jpg

email-branding.jpg

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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









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

small_Using_the_AMP-list_component.jpg

thumbnail_Using_the_AMP-list_component.jpg

Using_the_AMP-list_component.jpg

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

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

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

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

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

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

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

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

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

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

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

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

###  Gmail

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

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

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

### Outlook

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

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

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

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

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

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

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

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

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

### Почта mail.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блог