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

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

Для таких переходов используют диплинки (deeplinks). В статье разберём, что это, как они работают и что учитывать при использовании диплинков в email-рассылках.

## Что представляют собой диплинки

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

Это сокращает путь между письмом и целевым действием. Так, с помощью диплинков:

- в письме о доставке кнопка «Посмотреть заказ» будет вести к нужному заказу в приложении; 
- в рассылке о снижении цены пользователь сразу откроет [**карточку товара**](https://pixcraft.io/ru/blog/dinamicheskie-kartochki-tovarov-kak-oni-ustroeny-v-redaktore-pixcraft); 
- из письма о продлении подписки можно перейти к соответствующей форме в приложении и так далее.

## Как диплинки взаимодействуют с мобильными приложениями

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

`https://shop.example.ru/products/xxxx`

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

Вместе с тем для iOS и Android доступны специальные варианты диплинков, работающие с учётом соответствующих систем.

### Диплинки в iOS

На устройствах Apple для переходов по HTTPS-ссылкам в приложение используются **Universal Links**. Опять же, по своей сути это обычные веб-адреса, которые заранее связываются с приложением. Если такая связь настроена и приложение установлено, iOS может передать ссылку приложению вместо открытия её в Safari.

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

### Диплинки на Android

На Android аналогичную задачу решают **App Links** — HTTP- или HTTPS-ссылки, для которых подтверждена связь между сайтом и приложением. После проверки система может передать ссылку приложению без дополнительного выбора обработчика. Такие подтверждённые ссылки называют Verified App Links.

Если приложение не установлено, то адрес, опять же, продолжает работать как обычная веб-ссылка и открывается в браузере.

Механизм App Links поддерживается начиная с Android 6 на устройствах с Google Services. В случае если Google Services отсутствуют, проверка связи между сайтом и приложением может работать иначе. Поэтому поведение App Links на таких устройствах стоит проверять отдельно.

<Img
img="/api/uploads/01_rabotalinkov_a90290051b.png"
alt="Как работают диплинки"
/>

### Custom URI schemes

Кроме HTTPS-ссылок приложение может использовать собственную **URI-схему**, например:

`shopapp://products/XXXX`

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

Важно отметить, что `shopapp://products/XXXX` не является обычной веб-ссылкой и открыть её как веб-адрес нельзя. Если подходящего приложения нет, переход может завершиться ошибкой или просто не привести к ожидаемому действию. Результат зависит от устройства и программы, через которую пользователь открывает ссылку. 

### Deferred Deep Linking

Отдельно стоит отметить механизм **Deferred Deep Linking**, при котором назначение диплинка сохраняется, даже если приложение ещё не установлено.

Например, пользователь нажимает в письме кнопку «Посмотреть товар», но приложения магазина у него на устройстве нет. В этом случае сначала его направляют к установке приложения, а после первого запуска открывается карточка нужного товара.

Обычного Universal Link или App Link для такого сценария недостаточно: сами по себе они не сохраняют контекст перехода через установку приложения. Исходные данные нужно сохранить отдельно и затем передать приложению. Для этого используют дополнительную логику на стороне приложения или специализированные сервисы (такие как Branch или AppsFlyer OneLink).

## Какие ещё ссылки ведут к действиям вне письма

В письмах можно использовать и другие URI-схемы. Они не относятся к диплинкам мобильного приложения в том же смысле, что Universal Links или App Links, но тоже переводят пользователя из почтового клиента к определённому действию.

### tel:

Схема `tel:` используется для телефонных номеров:

`<a href="tel:+74951234567">Позвонить</a>`

После клика устройство передаёт номер приложению, которое умеет обрабатывать ссылки `tel:`. При этом сам URI не означает, что звонок начнётся автоматически: для совершения вызова требуется действие или подтверждение пользователя.

На смартфоне обычно открывается интерфейс звонка. На компьютере результат зависит от того, есть ли в системе подходящее приложение. Поэтому номер лучше оставлять видимым в теле письма, а не только прятать его за [**кнопкой «Позвонить нам»**](https://pixcraft.io/ru/blog/kak-uvelichit-klikabelnost-email-rassylok-s-pomoshchyu-pravilnyh-cta).

### mailto:

URI-схема `mailto:` используется для создания нового письма в почтовом клиенте. Её простой вариант может выглядеть так:

```xml
<a href="mailto:support@example.ru">
 Написать в поддержку
</a>
```

Также в `mailto:` можно заранее передать тему и текст сообщения. Для темы используется параметр `subject`, а для тела письма — `body`:

```xml
<a href="mailto:support@example.ru?subject=Order%20question&amp;body=Hello">
 Contact Support
</a>
```

Значения в ссылке требуют корректной кодировки. Например, пробел передаётся как `%20`, а перенос строки в теле сообщения как `%0D%0A`. Кириллица сначала кодируется в UTF-8, после чего байты записываются через percent-encoding — специальный формат для передачи символов в URL в виде последовательностей `%XX`. 

Собственные диплинки (как HTTPS-ссылки, так и URI-схемы) могут быть и у сторонних приложений, например мессенджеров или банковских сервисов. Формат зависит от конкретного приложения, поэтому перед запуском рассылки стоит свериться с актуальной документацией сервиса и проверить, что ссылка корректно работает на нужных устройствах.

## Что учитывать при использовании диплинков в email

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

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

Это важно учитывать для Universal Links и App Links, так как они привязаны к конкретным доменам. Если сервис рассылок подменяет исходный URL трекинговой ссылкой, прямой переход в приложение может измениться. 

Для определённых ссылок отслеживание переходов можно отключить. Например, в [**платформе Altcraft**](https://altcraft.com) есть возможность убрать перенаправление на трекинг, чтобы пользователь переходил непосредственно по исходному URL. Но тогда переход не будет учитываться в статистике кликов.

<Img
img="/api/uploads/02_vstavitssilkyaltcrft_1316c3eadf.png"
alt="Добавление ссылки в Altcraft"
/>

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

Отдельно стоит учитывать устройство, на котором будет открыто письмо. Например, ссылку `tel:` иногда имеет смысл показывать только при небольшой ширине экрана. Для этого можно использовать CSS-медиазапросы.

Но стоит помнить, что условие вроде `max-width: 600px` лишь проверяет ширину области отображения, а не определяет тип устройства. Поддержка CSS также зависит от почтового клиента. Поэтому важное действие не стоит делать доступным только через элемент, который появляется по медиазапросу.

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

## Как добавить диплинк в шаблон письма в Pixcraft

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

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

<Img
img="/api/uploads/03_ssylkipix_fb023c931b.png"
alt="Ссылки в конструкторе писем Pixcraft"
/>

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

<Img
img="/api/uploads/04_krtssylok_a25ceb387f.png"
alt="Карта ссылок в конструкторе писем Pixcraft"
/>

А чтобы оценить работоспособность шаблона (включая то, как ссылки ведут себя в реальном почтовом клиенте), отправьте тестовое письмо.

<Img
img="/api/uploads/05_otpravtest_03a9443217.png"
alt="Отправка тестового письма в конструкторе Pixcraft"
/>

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

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

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

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

small_deeplinks_cover (1).png

thumbnail_deeplinks_cover (1).png

deeplinks_cover (1).png

Диплинки в email: что это такое и как их использовать

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

При этом с фонами email-шаблонов связано немало технических нюансов, касающихся разметки. Больше всего трудностей возникает с Outlook для Windows, где из-за особенностей движка не работают многие CSS-свойства. 

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

## Как работают фоновые изображения в email-рассылках

В HTML фоны обычно задаются с помощью CSS, через свойство `background-image`. Подобное изображение в коде письма выглядит так:

`background-image: url('background.jpg')`

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

<Img
img="/api/uploads/001_bckgrndplaceexample_275a1c1713.png"
alt="Фоновое изображение начинается от левого верхнего угла"
/>
 
Это поведение можно изменить, используя стилевые свойства:

- `background-size`: отвечает за размер фонового изображения. 
- `background-position`: задаёт положение фона внутри блока. 
- `background-repeat`: определяет, будет ли фон повторяться.

Но если в web-верстке эти свойства, как правило, работают предсказуемо, то в email результат зависит от почтового клиента.

## Чем настройка фонов в Outlook отличается от других почтовых клиентов

Для реализации фоновых CSS-свойств, которые Outlook не может корректно обработать, используется **VML (Vector Markup Language)** — технология Microsoft для работы с векторной графикой.

VML-разметку обычно помещают в условные комментарии. Благодаря этому Outlook получает отдельную версию блока с фоновым изображением, а остальные почтовые клиенты её игнорируют и вместо этого обрабатывают CSS-свойства.

Упрощённая VML-конструкция выглядит примерно так:

```xml

 

```

Здесь `v:rect` создаёт область, `v:fill` задаёт её фон, а `v:textbox` позволяет разместить внутри обычный HTML-контент. 

Внешне конструкция может напоминать обычный HTML-блок с фоном. Однако принципы настройки изображений в VML заметно отличаются от привычных CSS-свойств.

### Масштабирование

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

Для VML ближайший аналог `cover` — это `atleast`, который задаётся через атрибут `aspect`:

`<v:fill type="frame" aspect="atleast" src="background.jpg" />`

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

<Img
img="/api/uploads/02_mashtabirovanie_29dd13c54d.png"
alt="Фоновое изображение при использовании atleast"
/>

Свойство `background-size: contain`, в свою очередь, масштабирует фоновое изображение так, чтобы оно целиком поместилось внутри блока, сохраняя исходные пропорции. Аналогом для VML здесь служит `atmost`:

`<v:fill type="frame" aspect="atmost" src="background.jpg" />`

<Img
img="/api/uploads/03_mashtabatmost_fadbc15afd.png"
alt="Фоновое изображение при использовании atmost"
/>

Если нужно указать конкретный размер фонового изображения, в CSS это можно сделать точно в пикселях, например `background-size: 300px 150px`. В VML для этого используется параметр `sizes`, а сами размеры обычно задаются в `pt`:

`<v:fill type="frame" src="background.jpg" sizes="300pt,150pt" />`

### Позиционирование

Положение фонового изображения в CSS задаётся свойством `background-position` и соответствующими параметрами, например `background-position: center`.

В VML для настройки положения используются два параметра: `origin` и `position`. Вместе они выполняют примерно ту же задачу, что и `background-position`, но работают по другому принципу, описывая **две точки привязки**:

- `origin` определяет точку внутри изображения; 
- `position` определяет положение этой точки внутри области VML.

Для наиболее простых случаев настройка позиционирования может быть довольно прямолинейной. Например, `background-position: top right` можно оформить в VML так:

`origin="1,0"`
`position="1,0"`

А для центрирования изображения будут использоваться следующие значения:

`origin="0.5,0.5"`
`position="0.5,0.5"`

<Img
img="/api/uploads/04_tochkavnutri_e9f1ef9162.png"
alt="Позиционирование фонового изображения"
/>

Однако позиционирование усложняется, если вместе с `origin` и `position` используется `aspect`. VML сначала масштабирует изображение с учётом `aspect`, а затем определяет его положение. Поэтому результат зависит от размеров исходного изображения, области VML и выбранного режима масштабирования.

Из-за этого комбинация вида:

`aspect="atmost"`
`origin="0.5,0.5"`
`position="0.5,0.5"`

не во всех случаях будет визуально эквивалентна CSS:

`background-size: contain;`
`background-position: center;`

Проще говоря, при работе с VML зачастую недостаточно лишь преобразовать `background-size` и `background-position` в соответствующие параметры. Сначала нужно определить размер изображения после масштабирования, а затем рассчитать его положение внутри блока.

### Повторение

По умолчанию у `background-repeat` установлено значение `repeat`: если фоновое изображение меньше области, оно повторяется по горизонтали и вертикали. Запретить повторение фона можно, указав `background-repeat: no-repeat`.

В VML дублирование фона управляется параметром `type`. Для изображения, которое должно заполнить всю область как единый фон, применяется `type="frame"`:

`<v:fill type="frame" src="background.jpg" />`

Соответственно, для повторяющегося изображения используется `type="tile"`:

`<v:fill type="tile" src="pattern.png" />`

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

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

## Что ещё учитывать при работе с фоном в письмах

### Запасной цвет

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

Здесь в качестве страховки следует задать фоновый цвет:

```xml
<td
 bgcolor="#17233C"
 style="
 background-image: url('background.jpg');
 "
>
```

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

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

### Отображение фона в тёмной теме

У почтовых клиентов нет единой логики работы с [**тёмной темой**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat). Одни вообще не затрагивают содержимое HTML-письма, другие лишь частично меняют цвета, а третьи применяют более заметную инверсию.

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

Один из способов снизить этот риск — использовать полупрозрачное фоновое изображение вместе с цветом блока. Через прозрачные участки будет виден цвет фона, который почтовый клиент может изменить при переходе в тёмную тему. Тогда внешний вид блока частично адаптируется к новой цветовой схеме, и [**текст сохранит читаемость**](https://pixcraft.io/ru/blog/tipografika-pisem-kak-sdelat-tekst-chitaemym).

<Img
img="/api/uploads/002_prozrachnost_f9fadc8b98.png"
alt="Полупрозрачное фоновое изображение"
/>

### Вложенные фоны

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

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

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

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

## Как Pixcraft упрощает работу с фоновыми изображениями

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

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

<Img
img="/api/uploads/05_pixprimerpisma_d66e903570.png"
alt="Настройка фона письма в Pixcraft"
/>

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

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

В итоге пользователям Pixcraft не нужно раздумывать над тем, как настроить работу фоновых изображений в коде письма. Необходимые параметры фона задаются прямо в интерфейсе, а генерацию совместимой разметки (включая VML) берёт на себя TJML.

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

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

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

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

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

small_covbackpic.png

thumbnail_covbackpic.png

covbackpic.png

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

Рассказываем про аналитику email-рассылок: что полезного она даёт, как настроить её в Pixcraft и подключить к вашим письмам, а также как использовать данные аналитики на практике.

Заметки

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