Subtract.svg

Group 488121.svg

Union.svg

Union (1).svg

Group 488455.svg

Недавно mail.ru начал вырезать пробельные символы при отображении начального текста письма до его открытия, что сломало эффект «короткого прехедера» — когда рядом с темой только тот текст, что мы задумали. Мы нашли решение.

Используйте следующий код:
```
<vk-snippet-end/>
```

Как использовать короткий прехедер в mail.ru

small_photo_2025-04-29_17-16-29.jpg

thumbnail_photo_2025-04-29_17-16-29.jpg

photo_2025-04-29_17-16-29.jpg

Как починить короткий прехедер в mail.ru

В статье рассказываем о том, какую пользую несут мастер-шаблоны писем и как с ними работать в визуальном конструкторе Pixcraft.

small_Обложка Pixcraft (2) (1).png

thumbnail_Обложка Pixcraft (2) (1).png

Обложка Pixcraft (2) (1).png

Мастер-шаблоны писем: для чего они нужны и как с ними работать

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

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

## Работа с шаблонами писем

### Обновлённый экран рабочего пространства

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

<Img
img="/api/uploads/01_interfeis_5ea0121af8.png"
alt="Обновлённый экран рабочего пространства"
/>

### Предпросмотр шаблона прямо из списка

Ранее предпросмотр письма в Pixcraft был доступен только внутри конструктора. Чтобы оценить итоговый вид шаблона, сначала требовалось открыть его в редакторе. 

Свежее обновление предлагает пользователям возможность проверять email-шаблоны непосредственно в общем списке. Функция пригодится, в частности, когда нужно быстро просмотреть или сравнить несколько писем.

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

<Img
img="/api/uploads/02_predprosmanimatsiya_4a4a5bfd53.gif"
alt="Предпросмотр шаблона из списка"
/>

### Система тегов

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

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

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

<Img
img="/api/uploads/03_tegidspiske_af83df1518.png"
alt="Теги в списке шаблонов"
/>

### Тестовые рассылки

Одно из важнейших обновлений в конструкторе Pixcraft — функция отправки тестовых писем, с помощью которой вы можете оценить отображение шаблона в нужных почтовых клиентах [**до запуска рассылки**](https://pixcraft.io/ru/blog/checklist-chto-protestirovat-pered-otpravkoj-pisma).

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

<Img
img="/api/uploads/04_testrrasilok_2a9d1594c7.png"
alt="Тестирование рассылок"
/>

### Обновлённая панель экспорта и интеграций

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

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

<Img
img="/api/uploads/05_exportpanel_8a33b412db.png"
alt="Экспорт шаблона"
/>

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

<Img
img="/api/uploads/06_integratsiyapanel_0a31b75d27.png"
alt="ESP-интеграции"
/>

### Разделение ассетов по проектам

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

Такое разделение особенно актуально для команд, которые одновременно работают с несколькими брендами, продуктами или направлениями. Элементы не смешиваются в общей библиотеке, а внутри проекта остаётся только тот набор, который относится к текущему списку писем.

Количество доступных проектов зависит от вашего тарифного плана: 1 проект в «Персональном» (Personal), до 3 проектов в «Стартовом» (Starter) и до 10 — в «Профессиональном» (Pro).

## Гибкая настройка прав доступа

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

Настроить права доступа возможно для:

- шаблонов; 
- компонентов; 
- ассетов; 
- интеграций; 
- файловых хранилищ; 
- статистики; 
- тестовых отправок.

<Img
img="/api/uploads/07_kategoriipolzovatel_865f0e35af.png"
alt="Настройка прав доступа"
/>

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

## Отслеживание условий тарифа

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

<Img
img="/api/uploads/08_uslovijatarifa_cf6ea0415b.png"
alt="Условия тарифа"
/>

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

Например, в рамках «Стартового» плана (Starter) можно создать 3 проекта и 300 шаблонов, а также экспортировать шаблоны 300 раз в месяц. В этом случае:

- Если в одном проекте создать 200 шаблонов, то на два других суммарно останется всего 100 доступных шаблонов. 
- Экспорты учитываются по тому же принципу: 300 экспортов за месяц распределяются на всех участников проекта, а не выдаются каждому отдельно.

## Аналитика

В Pixcraft уже была доступна аналитика AMP-рассылок, однако свежее обновление расширило возможности сервиса и сделало его независимым от сторонних решений: 

- Во-первых, теперь вы можете добавлять аналитику и к шаблонам, созданным в Pixcraft, и к шаблонам, собранным вручную. 
- Во-вторых, аналитика работает полностью самостоятельно в контуре Pixcraft. Больше нет необходимости интегрировать её с Google Analytics или [**Яндекс Метрикой**](https://pixcraft.io/ru/blog/perekhod-s-google-analytics-na-yandeks-metriku-kak-ne-poteryat-dannye-i-vremya).

Отслеживание статистики для писем, созданных в конструкторе, подключается на этапе экспорта: для этого можно выбрать сбор статистики по открытиям и по времени. В разделе «Аналитика» отображаются все письма, которые были выгружены с отметкой сбора событий. Также прямо здесь можно создать новую кампанию. 

<Img
img="/api/uploads/09_analitikaspisok_c91272e332.png"
alt="Экран аналитики"
/>

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

<Img
img="/api/uploads/10_polzovatsobitiya_dc43110fa3.png"
alt="Пользовательские события"
/>

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

<Img
img="/api/uploads/11_grafikotchet_1e9be2fde0.png"
alt="Графики аналитики"
/>

## AMP-компоненты

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

<Img
img="/api/uploads/12_ampsostavpolej_9206dd890a.png"
alt="Состав полей AMP-компонента"
/>

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

<Img
img="/api/uploads/13_ampvalidatsija_e06b0fbdac.png"
alt="Валидация полей AMP-компонента"
/>

### Интеграция с Telegram

Для оперативной обработки сообщений в AMP-формах и [**«Живой ленте»**](https://pixcraft.io/ru/blog/zhivaya-lenta-v-amp-rassylkah-novyj-uroven-vovlecheniya) ранее были предусмотрены только вебхуки. Однако со свежим обновлением мы также добавили прямую интеграцию с Telegram. 

Интеграция настраивается с помощью [**специального бота**](https://t.me/pixcraft_forms_bot). К примеру, вы можете добавить его в собственную группу и настроить так, чтобы он отправлял уведомления именно туда. 

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

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

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

<Img
img="/api/uploads/14_plagininterf_2ab8103b47.png"
alt="Интерфейс Figma-плагина"
/>

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

<Img
img="/api/uploads/15_plaginexport_264e6c3855.png"
alt="Экспорт через Figma-плагин"
/>

При экспорте макета через плагин Figma он автоматически появится в списке шаблонов текущего проекта и будет отмечен соответствующей иконкой.

<Img
img="/api/uploads/16_plaginshablonvspiske_0e6a7b0c0d.png"
alt="Шаблон в списке"
/>

## Другие изменения

На этом список нововведений не заканчивается. Помимо крупных обновлений в Pixcraft были внесены следующие технические улучшения:

- Сохранение email-шаблонов ускорено в несколько раз. Больше не нужно ждать долгой загрузки после внесения значительных изменений. 
- Добавлено автоматическое сжатие PNG-изображений без потери качества: оно выполняется при загрузке изображения. Такой же механизм применяется к макетам, которые создаются в Figma с помощью плагина. 
- Повышены стабильность, отказоустойчивость, безопасность и общее быстродействие сервиса.

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

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

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

small_updates_cover (1).png

thumbnail_updates_cover (1).png

updates_cover (1).png

Обновление Pixcraft: что нового в конструкторе писем

В 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, особенно для рассылок в России — не лучший вариант.

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

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

- за основу берутся таблицы, формирующие каркас письма; 
- адаптивные блоки внутри них реализуются через CSS-свойства, которые понимает большинство email-клиентов; 
- медиа-запросы задействуются только для косметических улучшений; 
- вспомогательная структура для 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="Адаптация с медиа-запросами и без медиа-запросов"
/>

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

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

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

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

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

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

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

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

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

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

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

``

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

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

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

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

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

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

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

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

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

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

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

<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). Например, здесь можно:

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

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

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

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

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

Заметки

Рекомендовано к прочтению в блоге