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

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

## Подходы к мобильной адаптации емейлов

Для адаптации писем под разные устройства используется три основных подхода — давайте разберем их подробнее. 

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

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

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

<Img
img="/api/uploads/adaptaciya_emeilov_mashstabirovanie_2c298c2ab6.jpg"
alt="Мобильная адаптация: масштабирование"
/>

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

### Адаптация на медиазапросах

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

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

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

<Img
img="/api/uploads/adaptaciya_mediazaprosy_f43d0a2b06.jpg"
alt="Мобильная адаптация: медиазапросы"
/>

### Блочная адаптация

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

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

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

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

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

<Img
img="/api/uploads/adaptaciya_emeilov_bloki_c2a880b1a6.jpg"
alt="Мобильная адаптация: блочная адаптация"
/>

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

### Какой подход выбрать

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

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

## Что учитывать в дизайне писем 

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

**Кнопки.** Основное различие между использованием мобильных устройств и компьютеров — способ управления: на мобильных экранах всё происходит через касания пальцем, а не с помощью мыши и курсора. Даже если ваша кнопка с [**призывом к действию**](https://altcraft.com/ru/blog/chto-takoe-cta) (CTA) очень привлекательна, но зона нажатия слишком маленькая, то количество кликов снизится.

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

**Темная тема.** При автоматическом переходе письма в темную тему для писем со светлым фоном происходит инверсия яркости: фон становится темным, а текст — светлым. В случае писем с темным фоном инверсия обычно не происходит, за исключением Gmail на iOS.

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

<Img
img="/api/uploads/adaptaciya_emeilov_temnaya_tema_b717c3797c.jpg"
alt="Мобильная адаптация: темная тема"
/>

**Ретина-адаптация.** Retina-дисплей — изначально термин компании Apple и технически относится только к их продукции, но сейчас так часто называют любые экраны с высокой плотностью пикселей. Чтобы изображение выглядело чётко на таких экранах, его нужно сохранять в увеличенном размере — как минимум в два раза больше.

<Img
img="/api/uploads/adaptaciya_emeilov_retina_fb8a496d59.jpg"
alt="Мобильная адаптация: ретина"
/>

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

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

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

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

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

small_adaptaciya-emeilov-main.jpg

thumbnail_adaptaciya-emeilov-main.jpg

adaptaciya-emeilov-main.jpg

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

Рассмотрим эффективность MJML и TJML-фреймворков при создании email-рассылок, определим преимущества и недостатки.

small_MJML-TJML.jpg

thumbnail_MJML-TJML.jpg

MJML-TJML.jpg

MJML или TJML: испытываем емейл-фреймворки на практике 

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

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

<Img
img="/api/uploads/Konstruktor_pisem_fc7bfa536f.jpg"
alt="Конструктор писем Pixcraft"
src="Конструктор писем для рассылки Pixcraft"
/>

## В чём преимущества конструкторов писем

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

**Качественная кроссплатформенная вёрстка.** Хорошие конструкторы формируют код так, чтобы письмо корректно отображалось на различных устройствах и в разных почтовых клиентах (Gmail, Outlook, Yandex, Apple Mail и т.д.). Конструктор сам решает вопросы совместимости.

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

**Удобство работы с мастер-шаблонами.** В конструкторах обычно есть возможность создать мастер-шаблон с заранее подготовленными блоками, которые можно комбинировать для создания различных типов рассылок: [**триггерных**](https://altcraft.com/ru/glossary/chto-takoe-triggernye-rassylki), информационных, промоакций и других.

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

**Преимущества мастер-шаблона:**
- **Экономия времени.** Ускоряет процесс создания писем за счет переиспользования готовых блоков.
- **Единый стиль.** Обеспечивает визуальную согласованность всех рассылок компании.
- **Удобство использования.** Позволяет быстро делать новые письма без глубоких знаний в области дизайна и верстки. Дизайнеру требуется выполнять лишь творческую часть работы — создавать уникальные изображения и баннеры. Верстальщик также может быть исключен из процесса, если маркетолог обладает базовыми знаниями HTML или умеет работать с визуальными редакторами. Таким образом, основное внимание можно уделить содержанию письма: согласованию текста и подбору подходящих изображений.
- **Простое обучение новых сотрудников.** Облегчает процесс адаптации и позволяет быстро влиться в работу.

Мастер-шаблон идеально подходит компаниям, которые ценят порядок и единообразие. С помощью него все письма выглядят аккуратно и профессионально, что укрепляет [**имидж бренда**](https://altcraft.com/ru/blog/upravlenie-reputaciej-brenda).

**Однако у этого инструмента есть ограничения:**
- **Стандартный дизайн.** Если вам нужны уникальные письма для каждой рассылки, то придется создавать их вручную. Когда каждое сообщение адаптируется под конкретный сегмент аудитории, использование стандартного шаблона может снизить уровень персонализации. 
- **Не подходит для сложных дизайнов.** Для создания креативных писем шаблон может оказаться ограничивающим фактором.
- **Не поможет стартапам.** Если рассылки не являются регулярной частью маркетинговой стратегии, мастер-шаблон вряд ли вам пригодится. 

## Недостатки конструкторов писем 

Конструкторы email-рассылок действительно удобны, но у них есть и свои минусы, которые могут создать сложности — особенно если вам нужен высокий уровень кастомизации. Рассмотрим основные недостатки:

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

**Иногда страдает качество верстки писем.**
Качество вёрстки сильно варьируется между конструкторами. Так, например, некоторые из них не способны обеспечить корректное отображение в том же Outlook или в почтовых клиентах, которые не поддерживают медиазапросы, к примеру, в Яндексе. Также многие блочные редакторы в принципе не учитывают отображение в менее популярных почтовиках, таких как Рамблер.

Некоторые конструкторы создают довольно «тяжелый» HTML-код из-за большого количества служебных тегов и атрибутов, которые они добавляют автоматически. Это важно, потому что, например, Gmail или Yahoo ограничивают размер кода до ~100 КБ, и если ваше письмо превышает этот лимит, оно может быть обрезано, а важные элементы — удалены. 

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

<Img
img="/api/uploads/kod_e2c9346c2e.jpg"
alt="Пример ограниченного кода"
/>

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

**Сложность редакторов.**
У некоторых конструкторов такой запутанный интерфейс, что разобраться в нём бывает непросто — особенно новичкам. В таких случаях создание email-рассылки может стать настоящим испытанием. Требуется определённый уровень подготовки и знаний. Иногда проще написать код самостоятельно, чем пытаться разобраться в интерфейсе конструктора. Если у вас нет опыта работы с такими инструментами, придется потратить немало времени или найти более «дружелюбный» [**блочный редактор**](https://pixcraft.io/ru). 

Pixcraft позволяет редактировать оформление, добавлять ссылки, менять тексты и даже использовать [**AMP-элементы**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe) —  при этом сразу видно, как будет выглядеть итоговое письмо. Работа идет быстро и плавно, без сложных настроек и перегруженных меню. На создание письма уходит всего несколько минут, и в итоге вы получаете оптимизированный HTML-код, который будет корректно отображаться в почтовых клиентах.

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

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

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

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



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

small_Konstruktory-pisem.jpg

thumbnail_Konstruktory-pisem.jpg

Konstruktory-pisem.jpg

Конструкторы писем: плюсы и минусы

Когда речь идет о создании эффективных email-рассылок, важно выбрать удобный инструмент. Pixcraft и Emailify — это два популярных плагина для Figma, которые предлагают разные подходы к разработке писем.

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

## Emailify  

<Img
img="/api/uploads/emailify_new_email_a96b89d9f5.jpg"
alt="Создание емейла"
/>

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

<Img
img="/api/uploads/emailify_settings_d6be4a6562.jpg"
alt="Настройки емейла"
/>

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

Также есть возможность внести корректировки в оформление и отступы. Однако манипулировать структурой здесь нельзя.

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

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

Когда письмо готово, нажмите «Экспорт HTML». Здесь можно перейти в режим предпросмотра, указать тему письма и прехедер, а также выбрать формат для скачивания — HTML или MJML. Также есть возможность напрямую экспортировать в одну из поддерживаемых платформ ESP.

Важно отметить, что использование MJML для рендеринга сразу накладывает ряд проблем — там используется подход «mobile first» и медиазапросы, что ломает верстку в веб-интерфейсе Yandex. Также у MJML есть небольшие проблемы отображения в Outlook.

В плагине можно локализовать дизайн писем с помощью встроенных инструментов перевода. Emailify поддерживает экспорт и импорт переводов через Excel (XLSX) или интеграцию с платформами Lokalise и Crowdin, что упрощает создание емейлов для международной аудитории.

<Img
img="/api/uploads/emailify_background_color_1a27ab45ca.jpg"
alt="Конструктор писем. Настройки емейла"
/>

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

- **Есть бесплатная версия.** Подходит для тех, кто хочет протестировать возможности Emailify перед покупкой. План предоставляет 10 пробных попыток с полным доступом к функциям pro-версии. Пользователи могут создавать неограниченное количество шаблонов емейлов. Для активации бесплатной версии не требуется привязывать карту.
- **Pro-версия.** Оптимальный выбор для индивидуальных пользователей, которым нужен полный доступ к функциям. Pro-версия включает безлимитный экспорт HTML, неограниченное размещение изображений и GIF, загрузку на платформы и локализацию текста. Также в пакете предусмотрена поддержка клиентов. 
- **Версия для организаций.** Этот план разработан для крупных компаний и команд с высокими требованиями к email-рассылкам. Он предлагает доступ ко всем функциям, а также приоритетную техническую поддержку. 

### Главное 

- Инструмент довольно дорогой. Годовая подписка на pro-версию стоит больше $450, что может быть неподъемной суммой для небольших команд. 
- Нет возможности создавать [**AMP-письма**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). 
- Сервис зарубежный — могут быть проблемы с оплатой из России. 
- Использует MJML — отображение в Yandex будет некорректным.
- Emailify не предоставляет возможности глубокой кастомизации. Структура писем задается внутри плагина, что существенно ограничивает творческие возможности и гибкость в дизайне.
- Качество отображения может варьироваться в зависимости от почтового клиента. Использование MJML под капотом накладывает некоторые ограничения. Например, в России может возникнуть проблема с корректным отображением в Yandex. Также рекомендуется провести дополнительные тесты в Outlook.
- Интерфейс только на английском языке. 

## Pixcraft 

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

<Img
img="/api/uploads/pixcraft_1_step_5de6220be0.png"
alt="Конструктор емейлов Pixcraft"
/>

В конце этого гайда у вас уже будет готовое письмо, и останется всего один шаг до его экспорта. Но обо всем по порядку. 

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

<Img
img="/api/uploads/pixcraft_2_step_d2270f16d0.png"
alt="Генератор писем Pixcraft"
/>

Библиотека ассетов разделена на категории: блоки, шапки, изображения, тексты, кнопки, футеры, AMP-компоненты и разделители. Здесь можно найти ассеты на любой вкус. Если же ничего не подошло, вы можете создать собственный блок в Figma, используя автолэйауты.

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

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

<Img
img="/api/uploads/pixcraft_4_step_0b1c123d97.png"
alt="Верстка email рассылок с Pixcraft"
/>

Вкладка «Нейросеть» поможет создать современное и стильное письмо. Если выделить изображение, откроются инструменты для генерации иллюстраций: с помощью Pixcraft можно задать стиль (арт, фото, скетч, мультик или аниме), выбрать настроение и описать, что должно быть на картинке. Нейросеть также работает с текстом — можно сгенерировать текст по запросу, сделать рерайт в нужном стиле или просто исправить ошибки.

<Img
img="/api/uploads/pixcraft_5_step_63c35ce41e.jpg"
alt="HTML конструктор Pixcraft"
/>

Когда письмо готово, можно перейти в режим предпросмотра, чтобы оценить, как оно выглядит на мобильных устройствах и в [**темной теме**](https://altcraft.com/ru/blog/invertirovanie-cvetov-v-rassylke). В этом режиме формируются как статичный HTML, так и интерактивная AMP-версия письма. Если всё отображается корректно, можно переходить к последнему шагу — экспорту.

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

<Img
img="/api/uploads/pixcraft_6_step_539a6c85c2.png"
alt="Поддерживаемые ESP"
/>

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

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

- **Тариф Personal.** Идеален для индивидуальных пользователей, которые работают над небольшими проектами. Подписка включает неограниченные черновики, до 50 сохраненных шаблонов и 1 проект. Также доступно 1 000 AMP-событий с возможностью увеличения их количества. 
- **Тариф Starter.** Этот вариант подойдет для небольших команд (три пользователя), которым требуется больше возможностей для работы. При этом доступны неограниченные черновики, до 300 сохраненных шаблонов и два проекта. Включено от 3 000 AMP-событий.
- **Тариф Pro.** Оптимальное решение для команд (десять пользователей) или компаний с более объемными задачами. Этот тариф включает неограниченные черновики, шаблоны и проекты. План также предлагает от 5 000 AMP-событий.

### Главное 

- Есть разные планы подписки, которые подходят как для фрилансеров, так и для больших команд. Вы можете выбрать то, что лучше всего соответствует вашим потребностям. 
- Поддерживает обычную HTML-верстку емейлов и интерактивные AMP-письма. 
- Pro-версия для 10 пользователей обойдется дешевле, чем план Enterprise для Emailify. 
- Российский сервис. 
- Поддерживает экспорт в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие.
- Интерфейс на русском, английском, испанском и французском языках. 

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

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

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


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

small_figma-plugins.jpg

thumbnail_figma-plugins.jpg

figma-plugins.jpg

Pixcraft или Emailify: какой плагин использовать для создания емейлов

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

Если при взаимодействии со взрослой аудиторией основная сложность заключается в обеспечении открытия email из-за огромного количества писем, то проблема [**рассылок**](https://altcraft.com/ru/blog/kak-dostat-klienta-v-rassilke) для детей —  отсутствие подходящего и интересного им контента.

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

## Проработка концепции

Как раз незадолго до начала работы у «Детской почты» обновился фирменный стиль и появились маскоты — монстрики, поэтому было решено дать возможность собрать собственного почтомонстрика:

<Img
img="/api/uploads/pismo_struktura_11zon_48b5b42fe9.jpg"
alt="Проработка концепции"
/>

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

<Img
img="/api/uploads/pismo_soberi_monstrika_e658030d60.png"
alt="Вариант письма"
/>

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

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

## Немного технических деталей

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

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

Чтобы фиксировать данные о самых популярных сервисах среди детей, при сборке монстрика мы также формировали форму, куда добавляли выбранные сервисы и при клике «готово» отправляли в Pixcraft.

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

```xml
<amp-state id="names">
  <script type="application/json">
	["Цифрош", "Сервисио", "Файлер", "Отправита", "Мегагай", "Мэйлия", "Черновер"]
  </script>
</amp-state>
```
При этом в Gmail она бы отработала корректно.

Универсальным решением в нашем случае было задать массив возможных имен сразу для span, обратившись к случайному элементу массива:

```xml
<span [text]="['Цифрош', 'Сервисио', 'Файлер', 'Отправита', 'Мегагай', 'Мэйлия', 'Черновер'][floor(random() * 7)]"></span>
``` 
</br>
С обоями для телефона тоже получилось не все просто — 7 доступных сервисов позволяют сформировать 128 различных монстриков. Делать их вручную пришлось бы очень долго, поэтому мы написали небольшую программу, которая сгенерировала все возможные варианты.

<Img
img="/api/uploads/pismo_amp_f73b2cede5.gif"
alt="AMP-письмо"
/>

## Статистика

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

<Img
img="/api//uploads/welcome_pismo_statistika_1542f81de4.png"
alt="Статистика"
/>

Для  уникальных открытий — AMP 62%, html — 38%. А для неуникальных AMP — 66%, html — 34%. **Конверсия в отправку формы** (клик кнопки «готово») составила 19,9% от открывших письмо. Это говорит нам о том, что к [_AMP-письмам_](https://altcraft.com/ru/blog/chto-takoe-amp-pisma) неоднократно возвращались, открывали несколько раз, чтобы собрать разных монстриков, а значит, задача заинтересовать пользователя точно была выполнена.

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

|    |         | 
|------------|-----------------|
| Облако     | 44.29%          | 
| Мульты     | 46.20%          | 
| Матеша     | 44.85%          | 
| Игры     | 49.52%          | 
| Рисовалка     | 50.43%          | 
| Маруся     | 44.60%          | 
| Эмодзи     | 49.92%          | 

Но, есть вероятность, что дети просто выбирали самые красивые фичи для монстрика, а не сервисы, которые их действительно заинтересовали. Поэтому неудивительно, что «Рисовалку» добавили более 50% подписчиков — она добавляла симпатичный хвост-кисточку,  «Эмодзи», который выбрала почти половина — добавляла милые глазки, а «Игры», которые ненамного отстали по популярности — добавляли крылья.

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

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

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

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

В статье расскажем, как мы прорабатывали концепцию велком-письма для сервиса «Детская почта». 

small_welcome-email-main.jpg

thumbnail_welcome-email-main.jpg

welcome-email-main.jpg

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

Figma — это мощный инструмент для дизайнеров, а с помощью плагинов его возможности можно расширить ещё больше. 

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

## [Mockup Plugin](https://www.figma.com/community/plugin/817043359134136295/mockup-plugin-devices-mockups-print-mockups-ai-mockups) 

<Img
img="/api/uploads/figma_mockup_706f96370e.jpg"
alt="Mockup плагин"
/>

Инструмент для создания мокапов.  

- Большая библиотека. В ней вы найдёте макеты устройств, брендовые элементы и другие уникальные решения. - У некоторых мокапов есть варианты — можно менять размер или цвет. Также есть возможность создавать свои макеты. 
- Есть ИИ. После загрузки [**лого**](https://altcraft.com/ru/glossary/logotip-chto-eto-i-kak-ego-sozdat) или ввода текста генерируется готовое решение. 
- Можно редактировать уже готовые мокапы. 
- Установка бесплатная. [**Подписка**](https://www.ls.graphics/unlimited-access) с безлимитным доступом ко всей библиотеке за $10 в месяц. 

## [Batch Styler](https://www.figma.com/community/plugin/818203235789864127/batch-styler) 

<Img
img="/api/uploads/figma_batch_styler_bd19fabb54.jpg"
alt="Batch Styler плагин"
/>

Бесплатный плагин для изменения цвета и стилей. 

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

## [Styles & Variables Viewer](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css)

<Img
img="/api/uploads/figma_styles_variables_0357b65b37.jpg"
alt="Styles and Variables плагин"
/>

После того как вы обновили стили, можно приступить к их выгрузке в CSS. В этом поможет наш плагин styles&variables viewer. Он позволит заменить dev-режим Фигмы, а в чем-то он даже значительно удобнее.

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

Существует 3 доступных режима работы:

- Вывод всех переменных Figma.
- Вывод всех стилей Figma.
- Вывод стилей для выбранного элемента.

Причем при выделении будут отображены:

- Все его CSS-стили;
- Если слой текстовый, то текст для удобного копирования;
- Если у слоя есть фоновое изображение, то кнопка для экспорта оригинального изображения;
- Если выбрано 2 слоя — размеры слоёв и расстояние между ними.

## [Dark Me](https://www.figma.com/community/plugin/1210863977149285175/dark-me) 

<Img
img="/api/uploads/figma_darkme_977ccc3dd6.jpg"
alt="Darkme плагин"
/>

Плагин для создания тёмной темы для пользовательского интерфейса или электронного письма. 

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

## [PixCraft Email Generator ](https://pixcraft.io/ru/figma)

<Img
img="/api/uploads/figma_email_generator_64873a39be.jpg"
alt="Email generator плагин"
/>

Плагин для создания писем. 

- **Позволяет легко создавать готовые к отправке HTML электронные письма.** Плагин обеспечивает корректное отображение в любых почтовых клиентах, включая мобильные и все версии Outlook. Помимо этого, мобильную адаптацию можно гибко настраивать.
- **Много готовых ассетов.** Библиотека содержит более ста готовых компонентов, включая блоки контента, шапки и подвалы писем, кнопки, изображения, текстовые блоки, разделители и AMP-компоненты. Также можно создавать свои собственные ассеты и разбивать их на категории. 
- **Есть возможность предпросмотра.** Не выходя из плагина, вы можете проверить, как письмо отображается на мобильных устройствах различной ширины, а также в тёмном режиме.
- **Экспорт.** Вы можете экспортировать макет прямо из плагина в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие. Если же в списке нет подходящей ESP, то можно выгрузить в виде zip-архива.
- **Поддерживает** [**AMP**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). Можно экспортировать не только стандартный HTML, но и [**AMP HTML**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Вставляйте в письма формы, карусели и другие интерактивные элементы. 

## [Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify)

<Img
img="/api/uploads/figma_iconify_e42c5c1996.jpg"
alt="iconify плагин"
/>

Библиотека векторных иконок. 

- Более 200 тысяч иконок и 150 наборов. 
- Можно импортировать иконки или просто перетаскивать их из плагина в Figma.
- Легко заменять выбранные иконки.
- Иконки всегда импортируются в формате SVG без дополнительной оплаты. 
- Сохраняется последняя посещённая вами страница — легко продолжить поиск. 

## [Isometric](https://www.figma.com/community/plugin/741184519069077841/) 

<Img
img="/api/uploads/figma_isometric_2c0427f0e7.png"
alt="Isometrics плагин"
/>

Простой плагин для Figma для создания изометрических слоёв. 

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

## [Beautiful Shadows](https://www.figma.com/community/plugin/1068595505353552645/)

<Img
img="/api/uploads/figma_beautiful_shadows_9e754cc930.png"
alt="Beautiful Shadows плагин"
/>

Инструмент для создания и настройки теней. 

- Прост в использовании — достаточно перетащить источник света в окне плагина относительно центрального элемента.
- Цвет тени настраивается. 
- Имеет открытый исходный код и распространяется по лицензии MIT.

## [Remove BG](https://www.figma.com/community/plugin/738992712906748191/remove-bg)

<Img
img="/api/uploads/figma_plugins_remove_bg_f7409a4911.jpg"
alt="Remove BG плагин"
/>

Инструмент для удаления фонов. 

- Фон изображений удаляется автоматически всего одним кликом. 
- Можно добавить белый фон к фото, сделать его прозрачным (PNG); выделить, изолировать или получить вырезанный объект.
- Для использования требуется учётная запись remove.bg. Базовый план подписки — €0,90 за изображение, единоразовый платёж — €9. 

## [Jitter. Animation for Figma](https://www.figma.com/community/plugin/961270034818256057/) 

<Img
img="/api/uploads/figma_jitter_f4c1474d38.jpg"
alt="Jitter плагин"
/>

Простой бесплатный плагин для создания анимаций. 

- Позволяет легко анимировать интерфейсы (мобильные приложения, веб-сайты, лендинги, микровзаимодействия). Интуитивно понятный процесс создания анимаций. 
- Есть экспорт в формате видео (до 4K, 60 fps), GIF и Lottie. Поддерживается прозрачный фон.
- Можно создать свою систему моушн-дизайна.
- Легко делиться анимированными шаблонами.
- Есть возможность анимировать текст. 
- Есть готовые пресеты. Просто настройте их под свой проект в несколько кликов.

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

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

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

С плагинами вы сможете создать более сложные дизайны и повысить свою продуктивность.

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

small_figma-main.jpg

thumbnail_figma-main.jpg

figma-main.jpg

Топ-10 полезных плагинов для Figma

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

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

## Что вам потребуется, чтобы начать AMP-рассылки

Самое важное — получить разрешение от почтовых провайдеров, поддерживающих AMP (Mail.ru, Gmail, Yahoo, AOL), и соблюдать все технические условия для рассылки:

**Настроить запрещающую политику DMARC.** При настройке политики [**DMARC**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup/dmarc) вам нужно выбрать один из двух режимов: quarantine или reject. Режим reject обеспечивает максимальную защиту и полностью блокирует письма, не прошедшие проверку. Режим quarantine направляет такие емейлы в папку «Спам».

Также необходимо убедиться, параметр pct установлен на 100%. Это означает, что политика будет применяться ко всем отправляемым сообщениям. Для корректной работы DMARC также необходимо правильно настроить [**SPF**](https://altcraft.com/ru/blog/zashita-ot-spama) и [**DKIM**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup/dkim).

**DKIM-подпись.** Домен отправителя электронного письма должен совпадать с доменом, указанным в DKIM-записи. Gmail имеет более гибкие требования: достаточно, чтобы домены второго уровня совпадали. Если в вашей подписи указан домен company.ru, то письма с адресов, где после @ идет company.ru или любой поддомен этого домена (например, department@support.company.ru), успешно пройдут проверку. 

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

**Репутация отправителя** в постмастере Gmail должна быть как минимум средней. Для Mail.ru важно соотношение отправлений и открытий, а также количество жалоб и писем, удаленных без прочтения. Точные критерии могут варьироваться, поэтому рекомендуется ориентироваться на общие принципы: например, не следует превышать определённое [**количество жалоб**](https://help.mail.ru/developers/mailing_rules/technical) (1,1% жалоб — до 10 тысяч писем в месяц, 1% жалоб — до 500 тысяч писем в месяц). 

**От рассылки можно легко отписаться.** В любом шаблоне, включая интерактивные письма, должна присутствовать активная ссылка для отписки. Процесс отписки должен быть максимально простым и занимать минимум времени. Пользователь может отписаться одним нажатием, без необходимости проходить дополнительную авторизацию или подтверждать свои намерения. Если вы хотите узнать причину, то следует сначала предоставить возможность аннулировать подписку, а уже затем задавать уточняющие вопросы. Для удобства получателей в каждом письме необходимо указывать заголовок List-Unsubscribe. Это позволит читателям легко отписаться от рассылки прямо в интерфейсе почтового сервиса. 

### Дополнительные требования Mail.ru и Gmail

**Gmail:**

- Для успешного прохождения модерации в Gmail ваша рассылка должна быть защищена TLS-шифрованием. Чтобы проверить, используется ли шифрование, отправьте тестовое письмо на свой почтовый ящик Gmail. В открывшемся письме нажмите на кнопку «мне» (или «to me») и в выпадающем меню найдите информацию о шифровании. Если TLS не включен, обратитесь в службу поддержки вашей платформы для его активации.

<Img
img="/api/uploads/kak_vnedrit_amp_testing_c03525e98c.png"
alt="Шифрование TLS"
/>

**Mail.ru:** 

- Необходимо настроить сервис Postmaster Mail.ru. Особое внимание следует уделить настройке обработки FBL-отчетов, то есть автоматической отписке пользователей, которые пожаловались на письмо. Как правило, эту функцию берет на себя платформа для email-рассылок.

- Для оценки качества почтовой рассылки и вашей репутации отправителя, провайдер требует, чтобы вы отправляли не менее 5000 писем в месяц в течение трех месяцев. 

## Как подготовить AMP-письмо 

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

Вам понадобится подготовить две версии письма: в формате HTML и AMP. Платформа PixCraft предоставляет три инструмента для создания таких сообщений: визуальный конструктор писем для рассылки, плагин для Figma и фреймворк TJML. Специальные знания для того, чтобы генерировать корректный код для обеих версий, вам не понадобятся.

Протестируйте письмо на соответствие всем необходимым критериям. Если всё в порядке, заполните [**заявку**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup) и отправьте емейлы почтовым провайдерам. Важно, чтобы письма были максимально приближены к настоящим — нельзя использовать слово «тест» или текст-заполнитель. 

Подробнее о тестировании AMP-писем и заполнении заявки [**читайте в статье**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup). 

## Как использовать AMP-емейлы в маркетинге 

Технология AMP-писем может успешно интегрироваться в стандартные email-маркетинговые цепочки. Например:

**1.** **Письма подтверждения.** Интерактивные элементы непосредственно в емейле сокращают путь пользователя. Вы предлагаете читателю подтвердить подписку в самом письме и ввести дополнительную информацию — дату рождения, номер телефона, пол. В примере ниже, благодаря использованию интерактивных компонентов (кнопки подтверждения и формы для указания номера) конверсия в указание номера телефона достигла 40,27%: 

<Img
img="/api/uploads/kak_vnedrit_amp_horoscope_11zon_fc0409ccb5.jpg"
alt="Использование формы с номером телефона"
/>

**2.** **Приветственные письма.** AMP-элементы в welcome-сообщениях создают первое впечатление о компании как современной и инновационной.

**3.** **Электронные письма для вовлечения неактивных пользователей.** Интерактивные элементы в письмах реактивации, например, мини-игры или опросы, вовлекают пользователей в диалог и повышают вероятность их возвращения. Пример использования AMP для реактивации [**смотрите в статье**](https://pixcraft.io/ru/blog/povisili_cr_na_55). 

**4.** **Регулярные рассылки.** AMP-технология позволяет создавать динамические емейлы, содержимое которых обновляется в реальном времени. Это особенно полезно для отображения актуальной информации, такой как цены, наличие товаров или акций. AMP-письмо «живет» 30 дней, после чего отображается статичная HTML-версия. Для этого используется компонент [**AMP List**](https://docs.pixcraft.io/ru/amp/documentation/amp-components/amp-list).

## Главные мысли 

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

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

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

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

small_photo_2024-10-24_15-36-34.jpg

thumbnail_photo_2024-10-24_15-36-34.jpg

photo_2024-10-24_15-36-34.jpg

Как внедрить AMP-письма в вашу email-стратегию

Что выбрать — классический HTML или инновационный AMP для рассылок? У каждого формата свои сильные стороны. С AMP вы создаёте интерактивный опыт, который подталкивает пользователей к действию, но требуется значительно больше времени на разработку, а старый добрый HTML гарантирует одинаковое отображение практически в любом почтовом клиенте.

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

## Различия между HTML и AMP-письмами 

Для начала дадим определения: 

**AMP-письмо** — это HTML-сообщение созданное с помощью фреймворка AMP for email. Благодаря AMP-компонентам и ограниченной поддержке JavaScript, в такие электронные письма можно добавлять интерактивные элементы. Сообщения выглядят живее и интереснее для пользователей. 

**HTML-емейл** — это письмо, созданное с использованием языка гипертекстовой разметки (HTML). В отличие от обычных текстовых сообщений без каких-либо элементов (формат plain-text), HTML-письма могут содержать не только текст, но и картинки. 

<Img
img="/api/uploads/html_ru_a99e6a0cdb.png"
alt="Пример HTML-сообщения"
src="Пример HTML-письма"
/>

Дальше чуть подробнее разберём, в чём всё-таки различия:
 
### Вёрстка писем

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

В рамках единой емейл-вёрстки необходимо предусмотреть отображение как в современных почтовых клиентах, так и в устаревших, не поддерживающих медиазапросы (например, Yandex), или имеющих ограниченную поддержку HTML и CSS (как, например, Outlook). Но при этом вы не будете ограничены в возможностях использования хаков для тёмной темы или же использования медиазапросов, сможете контролировать размеры и начертание шрифтов как в десктопе, так и в мобильной версии письма. 

Если вы используете конструктор email, то специальные знания HTML не нужны. [**В емейл-конструкторе PixCraft**](https://pixcraft.io/ru/builder) можно легко создать любые шаблоны, включая  мастер-шаблон из ваших собственных или готовых блоков. Вы сохраняете единый стиль письма и не тратите время на вёрстку. А ещё можно использовать [**PixCraft плагин для Figma**](https://pixcraft.io/ru/figma), чтобы превратить ваши дизайны в готовые к отправке письма. Получаются профессиональные email-рассылки без заморочек с кодом.

Вёрстка **AMP-емейлов** требует понимания как HTML, так и специфики AMP. Если вы уже знакомы с HTML, то освоить тонкости AMP-писем будет проще. 

Помимо визуальных элементов (например, прокручивающихся галерей или витрин с товарами), у AMP есть и другие компоненты:

- **Компонент amp-bind.** С ним создают элементы, которые реагируют на действия пользователя.
- **Компонент amp-list.** Он даёт возможность подгружать данные с внешних источников (например, с вашего сайта).
- **amp-form.** Компонент позволяет создавать формы для сбора данных от подписчиков.

HTML-письма поддерживаются практически во всех почтовых клиентах, включая устаревшие (например, Outlook). А AMP-сообщения работают только в Gmail, Mail.ru, Yahoo Mail (в веб-интерфейсе и приложениях) и в AOL (только веб-интерфейс). AMP-версию в среднем увидит только 40-45% подписчиков. 

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

Верстать AMP-письма может показаться сложным, но с PixCraft это проще простого. Конструктор писем делает процесс их создания лёгким и приятным даже для тех, кто далёк от кода.

### Отображение

Основное отличие новой технологии от традиционных HTML-писем — почти что полная поддержка CSS. Это включает поддержку медиазапросов, а также использование различных эффектов и анимаций (с ограничениями в Gmail и с полной поддержкой в Mail.ru). 

Кроме того, в AMP есть возможность [**настройки под тёмную тему**](https://altcraft.com/ru/blog/invertirovanie-cvetov-v-rassylke): если у пользователя стоит тёмное оформление, то письмо подстроится под него. Правда, поддержка под это есть только в Mail.ru.

А ещё, конечно, отличаются уровни интерактивности: если в HTML реализуются только ховер-эффекты, то в AMP можно использовать формы для сбора обратной связи, через bind можно менять отображаемый контент по действиям пользователя, а с помощью amp-list — вообще подтягивать контент с сайта в режиме реального времени. 

<Img
img="/api/uploads/amp_584a374138.gif"
alt="Пример AMP-сообщения"
src="Пример AMP-письма"
/>

### Аналитика

В HTML-емейлах отслеживаются только открытия сообщения и клики по ссылкам. 

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

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

**С PixCraft вы не упустите ни одной важной метрики. Вы сможете** [**отслеживать**](https://docs.pixcraft.io/ru/amp/documentation/analytics): 

- Время, проведённое в письме — чтобы узнать, вовлечены ли пользователи (или не очень);
- HTML/AMP-открытия — чтобы разобраться, какая версия письма работает лучше;
- Взаимодействие с AMP-компонентами — чтобы увидеть не только данные из форм, но и отследить любые события в письме с помощью трекинг-пикселей и интеграции с Google Analytics 4. 

## Главное  

HTML и AMP-письма — это два разных подхода к созданию email-рассылок. Если HTML-письма — это статичный контент, то с AMP-сообщениями пользователи могут взаимодействовать. Благодаря AMP можно реализовать различные интерактивные элементы, такие как карусели, формы, «живые ленты», аккордеоны и многое другое. 

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

Чтобы упростить процесс создания писем используйте PixCraft. Там можно создавать как классические HTML, так и AMP-письма без погружения в технические детали.

В статье выясним, чем AMP-письма отличаются от классических HTML-сообщений. 

small_html vs amp.jpg

thumbnail_html vs amp.jpg

html vs amp.jpg

AMP-письма или HTML-письма: что использовать 

**AMP-письмо** — это электронное сообщение,  в котором читатель может взаимодействовать с его элементами: заполнять анкеты, просматривать галереи, выбирать товары и оформлять заказы.

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

Технология AMP (accelerated mobile pages — «ускоренные мобильные страницы»), разработанная в 2015 году, изначально создавалась для того, чтобы веб-страницы загружались быстрее на мобильных устройствах. Со временем её возможности расширились, и теперь она используется для электронных писем. Причём пользоваться этой технологией может абсолютно любой желающий. Однако, чтобы начать, придётся обеспечить соответствие рассылки [**техническим требованиям**](https://docs.pixcraft.io/ru/amp/documentation/amp-setup) и получить разрешение от почтовых провайдеров. 

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

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

<Img
img="/api/uploads/amp_emaily_quiz_1_1_2a0090b53c.gif"
alt="Письмо на базе PixCraft"
/>

Если говорить о структуре, то  AMP-емейл состоит из трёх частей:

- простой текстовой версии для старых почтовых программ (опционально)
- стандартной HTML-версии 
- и специальной AMP-части, которую понимают только современные почтовые клиенты.

## В каких сервисах есть поддержка AMP 

По состоянию на 2024-й год, AMP-емейлы корректно отображаются в веб-интерфейсе и мобильных приложениях Gmail, Mail.ru и Yahoo Mail, а также в веб-интерфейсе AOL.

Те, кто читают электронные письма через этих провайдеров, смогут увидеть все AMP-элементы и обновления прямо в своём почтовом ящике. Люди, предпочитающие Yandex.Почту, Outlook или сервис от Apple, смогут открыть только  стандартную HTML-версию письма без дополнительных возможностей.

Однако, учитывая, что Mail.ru и Gmail [**являются**](https://www.cnews.ru/news/top/2023-09-25_rossiyane_ne_hotyat_proshchatsya) самыми популярными почтовыми сервисами в России, у большинства подписчиков ваш интерактивный контент отобразится. 

## Как AMP-письма выводят email-маркетинг на новый уровень

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

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

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

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

## Почему AMP с PixCraft — это просто 

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

**PixCraft меняет правила игры.**

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

**Преимущества PixCraft:**

- Простота. Не требует глубоких знаний HTML и JavaScript.
- Скорость. Создание интерактивных писем занимает гораздо меньше времени.
- Гибкость. Конвертируйте ваши существующие HTML-письма в AMP для добавления «живых» элементов.
- Мобильная адаптация. Работает даже без медиазапросов, например, в Yandex.
- Готовые блоки. Широкий выбор блоков для различных типов контента (формы, рейтинги, живые ленты и другие).

**С PixCraft вы можете:**

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

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

AMP — это технология, позволяющая использовать интерактивный контент прямо в письмах. 

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

С помощью PixCraft вы можете создавать динамические письма легко и быстро, без специальных знаний и по себестоимости обычных HTML-емейлов.  




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

Блог