Про тёмную тему (в письмах и не только) не рассказал только ленивый: есть множество [**рекомендаций и правил**](https://emailmatrix.ru/blog/dark-mode-guide/) по использованию изображений, текста и цветов, чтобы они корректно выглядели как в светлой, так и в тёмной теме. Но давайте взглянем немного под другим углом.

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Немного теории

Мы привыкли к использованию цветовой модели RGB, где любой цвет можно представить как сочетание 3-х основных цветов: R — красного, G — зеленого и B — синего. В компьютерной графике интенсивность каждого из основных цветов чаще всего варьируется от 0 до 255. Например, при минимальной интенсивности всех трёх цветов (R=0, G=0, B=0) получается чёрный цвет, а при максимальной (R=255, G=255, B=255) — белый. Этот принцип положен не только в математическую модель, но и воплощен в привычных нам мониторах. Каждый пиксель состоит из трёх субпикселей — красного, зелёного и синего. В зависимости от яркости их свечения мы видим определённый цвет благодаря эффекту пространственного смешивания, а при отсутствии свечения наблюдаем чёрный цвет.

<Img
img="/api/uploads/dark_theme_7186cd1340.png"
alt="Темная тема: модель"
/>

При работе с кодом или графическими редакторами чаще всего применяется шестнадцатеричное (Hex) представление цвета, записанное вместе, например #6812FC. При этом перед кодом всегда следует символ #, который указывает на способ задания значения. В нашем примере получается, что это цвет:

R = #68 = 104
G = #12 = 18
B = #FC = 252

Помимо RGB существуют и другие цветовые модели, например CMYK, применяемая для вывода изображения на печать. Здесь C — отвечает за Cyan (Синий), M — Magenta (Пурпурный), Y — Yellow (Желтый) + K — черный.

<Img
img="/api/uploads/dark_theme_model2_63c32e5b9b.png"
alt="Темная тема: модель CMYK"
/>

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

Но нас сегодня будет интересовать немного другой подход к представлению цвета. Давайте рассмотрим еще одну цветовую модель — HSL, которая включает три компонента:

- Hue (Тон)
- Saturation (Насыщенность)
- Lightness (Светлота).

Хотя иногда светлоту называют «яркостью», это не совсем корректно, правильнее будет использовать термин «светлота» или «интенсивность».

Тон принимает значение от 0 до 360 градусов; насыщенность — значение от 0 до 1; светлота — также от 0 до 1. 

## Как же работает тёмная тема

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

<Img
img="/api/uploads/dark_theme_email_11zon_d2d7a14806.jpg"
alt="Емейл с тёмной темой"
/>

Светлый фон с тёмным текстом преобразуется в тёмный фон со светлым текстом. При этом чаще всего, если фон изначально был тёмным, то он остаётся неизменным. Причём мы видим не просто какую-то инверсию цвета, а сохранение тона и насыщенности: инвертируется лишь светлота. Ничего не напоминает? =)

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

## Разберём на примере

У нас есть кнопка с цветом фона #6A66D3 и цветом текста #FFFFFF

<Img
img="/api/uploads/dark_theme_button_fee67de805.png"
alt="Пример кнопки"
/>

Для начала переведем цвет из 16-ричной системы счисления в десятичную.

```#6A66D3 = R 106, G 102, B 211```
```#FFFFFF = R 255, G 255, B 255```

Следующим шагом необходимо перевести цвет из RGB в HSL, для этого воспользуемся следующим алгоритмом:

```
Dif = Max([R,G,B])-Min([R,G,B]) = 0,4274
Lightness = (Max([R,G,B])+Min([R,G,B]))/2 = 0.6137

Saturation = Dif/(2-Max([R,G,B])-Min([R,G,B])), Если Lightness > 0.5
Saturation = Dif/(Max([R,G,B])+Min([R,G,B])), Если Lightness < 0.5

Saturation = 0.5527

Hue = 0, если Dif = 0
Hue = ((G - B)/Dif mod 6)/6*360, если Max = R
Hue = ((B - R)/Dif + 2)/6*360, если Max = G
Hue = ((R - G)/Dif + 4)/6*360, если Max = B

Hue = 242
```
Итого, мы получили: 

```#6A66D3 = H 242, S 0.55, L 0.61```
```#FFFFFF = H 0, S 0, L 1```

Чтобы получить цвет для тёмной темы, пересчитаем значение светлоты, вычтя из единицы значение цвета:

H 242, S 0.55, L (1-0.61) = 0,39
H 0, S 0, L (1-1) = 0

Переводя цвета в RGB, мы получим: 

```#302C9A```
```#000000```

Или же визуально:

<Img
img="/api/uploads/dark_theme_button2_66307bea97.png"
alt="Пример кнопки с темной темой"
/>

Примерно так работает преобразование в тёмную тему в почтовом клиенте Gmail на iOS — просто инвертируя светлоту каждого из цветов.

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

##Что перекрашивать

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

Здесь каждый разработчик волен выбирать значения, которые ему по душе, или «поиграться» с ними. Эмпирически мы подобрали значение светлоты 0,6. Если фон светлее (больше) этого значения, его следует перекрасить. Аналогично, если текст темнее 0,6, его также нужно перекрасить. 

В реальных почтовых клиентах все происходит чуть-чуть сложнее. Используется прогрессивная шкала корректировки яркости (а не просто вычитание из единицы): чем значение ближе к пороговому (в нашем случае — 0.6), тем меньше цвет будет изменяться. Кроме того, обычно происходит небольшая коррекция насыщенности.

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

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

###TJML framework и тестирование тёмной темы

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

Специально для этого в [**TJML-фреймворке**](https://pixcraft.io/ru/framework) предусмотрен инструмент тестирования отображения в тёмной теме, а также в тёмной теме, характерной для gmail на iOS:

<Img
img="/api/uploads/dark_theme_testing_1664f23ca7.png"
alt="Тестирование темной темы"
/>

Здесь реализован именно тот алгоритм, который мы пошагово рассмотрели выше. Следует отметить, что проверить можно не только письма, созданные на фреймворке — в тело письма (m-body) можно вставить и обычную емейл-верстку.

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

Этот [**плагин для Figma**](https://pixcraft.io/ru/figma) также позволяет создавать профессиональные емейл-рассылки, но уже без кода. Он преобразует структуру дизайн-макета в TJML-верстку автоматически, после чего позволяет выгрузить получившийся код в виде архива или в ESP. 

Так как TJML-фреймворк является неотъемлемой частью инструмента, то и все преимущества его использования здесь также доступны, в том числе и проверка отображения письма в тёмной теме:

<Img
img="/api/uploads/dark_theme_plugin_11zon_1c66f00083.jpg"
alt="Проверка темной темы"
/>

##Dark me плагин для Figma

Мы не зря говорили про HSL в контексте работы с цветом — это один из самых удобных подходов, который мы воплотили в плагине [**Dark me**](https://www.figma.com/community/plugin/1210863977149285175/dark-me).

<Img
img="/api/uploads/dark_theme_dark_me_cd5fa205f5.png"
alt="Плагин для темной темы"
/>

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

Расскажем, как правильно подготовить ваши письма для тёмной темы — от теории до инструментов.


small_dark-theme.jpg

thumbnail_dark-theme.jpg

dark-theme.jpg

Тёмная тема: как она устроена и как с ней работать

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

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Планирование рассылки

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

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

* **Разработка дизайна письма**. Дизайн письма должен быть лаконичным. Чрезмерная перегруженность визуальными элементами или слишком яркие цвета могут отвлечь внимание от главной информации рассылки.
* **Верстка шаблона**. Когда идея, текст и дизайн готовы, наступает технически самый сложный этап — верстка. В этой статье разберем использование плагина [Pixcraft для Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates), который позволяет получить качественную email-верстку из дизайн-макета.
* **Тестирование письма**. Чтобы проверить корректное отображение письма, а также выявить технические ошибки при отправке, необходимо не просто открыть шаблон в режиме предпросмотра, но и запустить тестовую рассылку. Только после проведения тестов можно рассылать письмо реальным получателям.

## Текст письма

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

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

В ситуациях, когда у вас есть интересные идеи для текста, но сложно найти точные формулировки, вы можете воспользоваться помощью **нейросетей**. В [плагине Pixcraft](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) есть соответствующий раздел AI-инструментов, который поможет вам не только с текстом, но и с изображениями:

<Img
img="/api/uploads/email_shablony_1_921f13aebb.jpg"
alt="AI-генерация изображений и текста"
/>

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

## Разработка дизайна

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

Для большинства компаний основным инструментом является **Figma**. Вы можете разработать дизайн-макет с использованием auto layout с вашим уникальным дизайном и структурой. Или воспользоваться заготовками плагина [Pixcraft Email Generator](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) и собрать письмо из готовых блоков:

<Img
img="/api/uploads/email_shablony_2_37054e8980.jpg"
alt="Готовые блоки"
/>

Здесь вы также можете добавить ссылки в элементы. Для этого выберите нужный слой или текст, откройте раздел «Свойства» и укажите URL-адрес ссылки:

<Img
img="/api/uploads/email_shablony_3_4306a919bb.png"
alt="Адрес ссылки"
/>

Обширная статья для дизайнеров о работе с плагином Pixcraft доступна в нашем [блоге](https://pixcraft.io/ru/blog/email-template-no-code).

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

Pixcraft Email Generator позволяет сохранить все ваши блоки (ассеты) в библиотеку, указав им имена и теги для удобного выбора:

<Img
img="/api/uploads/email_shablony_4_fab0d68ab9.png"
alt="Имена и теги"
/>

## Верстка шаблона

При использовании плагина Pixcraft Email Generator вам не потребуется думать о верстке шаблона – достаточно выбрать нужное письмо и открыть предпросмотр. Если письмо отображается корректно, то далее можно перейти в раздел экспорта. Для разовых промо-рассылок достаточно выгрузить результат сразу в ESP. Если же вы планируете повторно использовать этот шаблон или его блоки, особенно, если в дальнейшем предстоит работать над шаблоном без дизайнера, то лучшим вариантом будет **сохранить шаблон в Pixcraft**:

<Img
img="/api/uploads/email_shablony_export_5_75c3a812a3.png"
alt="Сохранить шаблон"
/>

После сохранения шаблон будет доступен в конструкторе писем [Pixcraft Builder](https://app.pixcraft.io). Теперь, когда вам нужно будет создать новое письмо для рассылки, просто откройте сохраненный мастер-шаблон и нажмите **«Редактировать копию»**:

<Img
img="/api/uploads/email_shablony_redaktorovanie_6_98a2c79840.jpg"
alt="Редактирование копии"
/>

Также в конструкторе Pixcraft можно отдельно сохранить используемые элементы для дальнейшей вставки в любом другом письме. Для этого во время редактирования выделите блок, откройте дополнительные настройки и нажмите **«Save asset»**:

<Img
img="/api/uploads/email_shablony8_ce7f115791.png"
alt="Сохранение ассета"
/>

Все сохраненные элементы будут доступны в соответствующем разделе панели инструментов слева:

<Img
img="/api/uploads/email_shablony_assets_7_8b45a0e102.png"
alt="Сохранённые элементы"
/>

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

## Тестирование отображения

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

* **Почтовый клиент** – не все клиенты поддерживают AMP-контент или требуют особенной настройки компонентов письма
* **Мобильная или десктопная версия** – элементы письма должны уметь адаптироваться в зависимости от устройства, которым пользуется получатель
* **Системная тема интерфейса** – темная или светлая

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

<Img
img="/api/uploads/email_shablony_8_4512f82b35.jpg"
alt="Отдельные компоненты"
/>

Письма, созданные с помощью Pixcraft, корректно отображаются и сохраняют изначальный внешний вид во всех почтовых клиентах, начиная от **самых массовых** (Gmail и Mail.ru, Yandex) и заканчивая **корпоративными** (Outlook). 

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

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

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


Расскажем, как быстро создавать шаблоны писем с нуля с помощью инструментов Pixcraft. А ещё выясним, как как сделать мастер-шаблон. 


small_kak-sozdat-email-shablony.jpg

thumbnail_kak-sozdat-email-shablony.jpg

kak-sozdat-email-shablony.jpg

Как создать email-шаблоны с нуля с помощью Pixcraft

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

Сегодня мы расскажем о **React Email**. Это email-фреймворк для создания шаблонов писем, основанный на React. В этой статье рассмотрим его сильные и слабые стороны, а также сравним инструмент с фреймворком [**TJML**](https://pixcraft.io/ru/framework). 

<Note>
TJML работает на основе **Vue**, предоставляя пользователю все его преимущества. Ранее мы уже [**сравнивали TJML с фреймворком MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml).
</Note>

## Установка и подключение

### React email

Чтобы установить React email, необходимо добавить его в свой TypeScript- или JavaScript-проект [**через npm**](https://react.email/docs/getting-started/automatic-setup), либо же произвести установку [**вручную**](https://react.email/docs/getting-started/manual-setup), самостоятельно добавив необходимые зависимости. После завершения процесса вам будет доступен локальный демо-сервер с набором базовых шаблонов для писем. Их можно открыть и просмотреть прямо в браузере:

<Img
img="/api/uploads/react_time_c6bcc6452f.png"
alt="React email login"
/>

Все изменения, которые вы внесете в шаблоны в папке `emails`, сразу отобразятся в браузере. Тестовое письмо можно отправить себе на почту с помощью соответствующей кнопки.

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

### TJML

Для начала работы с фреймворком вы можете зайти в бесплатную [**«песочницу»**](https://app.pixcraft.io/playground/), вставить туда нужные компоненты и самостоятельно проверить отображение готового письма. Наличие playground-страницы позволяет в любой момент отредактировать шаблон письма и сразу же посмотреть результат изменений:

<Img
img="/api/uploads/react_time_2_497203ac39.jpg"
alt="Редактирование шаблона письма"
/>

TJML можно установить путем подключения **JS-библиотеки**, что обеспечит возможность работы с шаблонами в привычной среде разработки. Полная инструкция – по [**ссылке**](https://docs.pixcraft.io/ru/framework/documentation).

Для удобства работы с фреймворком пользователю доступны следующие инструменты:

- **Плагин для VS Code.** Данное расширение будет предлагать автозавершение для тегов TJML, а также покажет подсказки по доступным атрибутам. Плагин доступен по [**ссылке**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml).
- **Автозавершение для продуктов JetBrains (WebStorm) с помощью [**Web-Types**](https://github.com/JetBrains/web-types).** Для получения подсказок по тегам и доступным атрибутам вы также можете подключить [**web-types.json**](https://github.com/ahttps://github.com/pixcraft-io/TJML-framework/blob/main/web-types.jsoneb-types.json).

## Возможности

### React email

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

<Img
img="/api/uploads/react_time_3_3dfba29c1c.png"
alt="Код письма"
/>

Код можно сразу же экспортировать в формате HTML, либо же в формате plain-text.

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

<Img
img="/api/uploads/react_time_4_e69243d511.png"
alt="Блоки"
/>

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

В React Email для работы с тем или иным компонентом необходимо сначала его импортировать, затем можно использовать в коде. После вставки вы можете изменить наполнение блоков, включая текст и изображения. Внешний вид компонентов задается с помощью передачи объекта, содержащего стилевые свойства и их значения, в свойство `style` компонента:

```xml
<Section style={{ display: "inline-block", width: "100%", maxWidth: 270, verticalAlign: "middle", }}>
            <Text style={{fontSize:"36px", color: "#ffffff", lineHeight: '1.2'}}>
              The best<br/>choice
            </Text>
</Section>
```

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

### TJML

Как уже было сказано ранее, у TJML есть своя «песочница». В ней можно полностью собрать шаблон из компонентов и проверить отображение письма в разных режимах просмотра:

<Img
img="/api/uploads/react_time_5_a71489ef4b.png"
alt="Разные режимы просмотра"
/>

В TJML также доступны следующие функции:

- Различные режимы просмотра: темная тема, просмотр на мобильных и десктоп-устройствах, имитация инверсии цвета для клиента Gmail на iOS
- Инструмент Pixel-Perfect, предназначенный для точной верстки вплоть до пикселя
- Фреймворк автоматически отслеживает размер кода и уведомляет, если он превышает рекомендуемые значения
- Поддержка AMP: галереи изображений, интерактивные элементы, формы, встроенные прямо в письмо
- Одновременный рендеринг как HTML-, так и AMP-версии письма
- Валидация различных ошибок

Верстка в TJML соответствует написанию обычного XML-кода. Для каждого из компонентов есть [**документированный набор атрибутов**](https://docs.pixcraft.io/ru/framework/documentation). Вставленные блоки можно кастомизировать под свои требования, например, указать ссылки для кнопок, заменить картинки и добавить текст.

После завершения работы над шаблоном вы можете сразу просмотреть код и при необходимости **сжать его**:

<Img
img="/api/uploads/react_time_6_a923eabe10.png"
alt="Сжатие кода"
/>

## Отображение письма

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

Для сравнения результатов работы фреймворков сверстаем два идентичных письма,  одно – с использованием TJML, а другое – с помощью React Email. Начнем с **Gmail**:

<Img
img="/api/uploads/react_time_7_cfe370d8b9.png"
alt="Gmail"
/>

Здесь письмо выглядит корректно. Теперь посмотрим, в каком виде его получат пользователи **IPhone**:

<Img
img="/api/uploads/react_time_8_cb2da98995.png"
alt="iPhone"
/>

С этой задачей фреймворк справился. Проверим отображение в корпоративном клиенте – **Microsoft Outlook**:

<Img
img="/api/uploads/react_time_9_c1744beeb0.png"
alt="Outlook"
/>

В Outlook письмо React Email выглядит крайне неудовлетворительно. Это значит, что инструмент не подойдет для крупных маркетинговых рассылок, где может присутствовать B2B-сегмент, а также фреймворк не предназначен для профессионального использования агентствами, поскольку заказчик зачастую проверяет результат именно в Outlook.

Сравнив полученные письма, можно однозначно сказать, что TJML справился лучше, чем React Email.

## Итоги

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

**Плюсы:**

- Доступна **тестовая отправка письма** прямо со страницы демо-сервера
- Отметим **привлекательный дизайн сервиса**, лаконичность и приятное для восприятия оформление сайта.

**Недостатки:**

- В созданных с помощью React Email письмах присутствуют **проблемы с отображением** в различных почтовых клиентах, особенно в outlook
- Для React Email не предусмотрена «песочница»
- **Отсутствие поддержки AMP-email** – серьезный недостаток для современного email-фреймворка
- Не предусмотрена возможность  **тестирования отображения письма в темной теме.**

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

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

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

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

small_1564х834.jpg

thumbnail_1564х834.jpg

1564х834.jpg

React email vs TJML: сравнение фреймворков

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

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

## Пример от [Findomestic](https://amp.dev/success-stories/findomestic)

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

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

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

[**A/b-тестирование**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) AMP- и классических писем на Черную пятницу показало:

- Открываемость выросла на 128% (35,4% против 15,5%).
- Клики увеличились на 133% (1,4% против 0,6%).

<Note>
Создавать такие письма легко с конструктором email-рассылок [**Pixcraft**](https://pixcraft.io/ru/builder). Теперь создание готового сообщения занимает всего несколько минут, и для этого не нужны знания HTML. Просто выбирайте готовые блоки, меняйте их оформление, добавляйте текст и ссылки — все это можно сделать в удобном визуальном режиме.
</Note>

## Пример от СДЭК 

<Img
img="/api/uploads/amp_primery_sdek_d80c56d812.gif"
alt="Пример AMP-письма от СДЭК"
/>

В письме от агентства [**Kinetica**](https://kinetica.su/) пользователь видит изображение нескольких котов и,  чтобы получить совет о зарубежном шопинге, ему нужно нажать на одного из них. При клике на изображение срабатывает механизм AMP-компонента ```<amp-bind>```, который обновляет содержимое письма в реальном времени. Кот «сдвигается», а на его месте появляется полезная рекомендация. 

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

## Пример от Volkswagen (дизайн: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_primer_volkswagen_da99d162c1.png"
alt="Пример AMP-письма от Volkswagen"
/>

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

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

## Пример от Huel 

<Img
img="/api/uploads/amp_primer_golosovalka_154551fe9a.png"
alt="Пример AMP-письма от Huel"
/>

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

Результаты отображаются в реальном времени благодаря ```<amp-list>```, который динамически обновляет содержимое письма. Процентное соотношение голосов за каждый вкус отображается в бутылке уровнем напитка и числовыми процентами.

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

## Пример от Disney 

<Img
img="/api/uploads/amp_primery_krossword_ce5ca229b6.jpg"
alt="Пример AMP-письма от Disney"
/>

В этом письме для детей используется увлекательная игровая механика — кроссворд, который ребенок решает прямо в почтовом ящике. Нужно угадать персонажей, опираясь на силуэты и краткие описания, и ввести их имена в форму внутри письма. Для ввода ответов также используется ```<amp-form>```, который позволяет взаимодействовать с письмом без перехода на внешние страницы. 

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

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

## Пример от Toms 

<Img
img="/api/uploads/amp_primery_toms_26ca91543a.jpg"
alt="Пример AMP-письма от Toms"
/>

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

Для реализации механики применяются состояния и ```<amp-bind>```, которые позволяют динамически менять изображение, а также ```<amp-img>``` для отображения светящихся и обычных вариантов обуви. Создается интересный визуальный эффект прямо в почтовом ящике, без необходимости перехода на внешний сайт. 

## Пример от Mail.ru 

<Img
img="/api/uploads/amp_primery_digest_fb14394cd3.gif"
alt="Пример AMP-письма от Mail.ru"
/>

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

Механика реализована с помощью AMP-компонентов. Пользователь выбирает ответы, а результат и дополнительная информация появляются мгновенно благодаря ```<amp-bind>```. Такой подход создает живое взаимодействие прямо в почтовом ящике, делая письмо динамичным, современным и наглядным.

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

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

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

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

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

small_amp-primery-pisem.jpg

thumbnail_amp-primery-pisem.jpg

amp-primery-pisem.jpg

Как вдохнуть жизнь в email-рассылку: лучшие примеры AMP-писем

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

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

## Создание готового шаблона за несколько минут

Для начала работы создайте новый файл в Figma и найдите **Pixcraft Email Generator** в меню Действий на панели инструментов. Запустите плагин:

<Img
img="/api/uploads/1_0a3d51aac7.png"
alt="Figma Pixcraft plugin"
src="Плагин Pixcraft Email Generator"
/>

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

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

<Img
img="/api/uploads/2_b82f124d97.png"
alt="New Blank email"
src="Создание нового письма"
/>

<Note>
Вы можете сгенерировать базовый шаблон письма с заголовком, изображением, кнопкой и футером нажатием кнопки **Simple email**. В таком случае вам останется только заменить изображения и текст на собственные.
</Note>

Перед вами появится пустой шаблон письма. Наполните его элементами из вкладки **Assets**. Эти элементы разделены на следующие категории:

**Blocks** — блоки контента, например, новостные блоки, баннеры и прочее
**Headers** — заголовок письма, его «шапка»
**Images** — изображения в письме
**Texts** — любые блоки текста
**Buttons** — [Call to Actions-кнопки](https://altcraft.com/ru/blog/chto-takoe-cta), содержащие призыв пользователя к действию
**Footers** — нижняя часть письма, так называемый «подвал» письма
**AMP** — интерактивные элементы, такие как формы обратной связи и карусели изображений, а также их html-версия
**Dividers** — разделители пунктов письма.

<Img
img="/api/uploads/3_694121e1e8.png"
alt="Assets"
src="Окно Assets"
/>

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

<Img
img="/api/uploads/4_f0516043ad.png"
alt="New block"
src="Добавление элемента"
/>

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

<Note>
При создании письма вы также можете использовать свой дизайн макета. Главным условием для того, чтобы плагин корректно его отрендерил, является применение режима **Auto layout** для фреймов в Figma. 
</Note>

Шаблон готов! Перейдите в меню предпросмотра, для этого выберите весь основной фрейм с шаблоном и нажмите на кнопку **Preview**. Перед вами появится окно тестирования письма. Именно таким его увидит получатель:

<Img
img="/api/uploads/five_750ea79887.png"
alt="Preview mode"
src="Режим предпросмотра"
/>

В этом окне пользователю доступен следующий инструментарий:

* Переключатель режима предпросмотра для **HTML и AMP-версии письма**
* Переключатель режима отображения **десктопной\мобильной** версии письма
* Проверка отображения письма **в темной теме**. Большинство мобильных почтовых клиентов автоматически преобразуют письмо, если выбрана темная тема, поэтому необходимо учитывать, какой вид примет ваше письмо после изменения темы. Также доступен режим имитации **полной инверсии цвета**, используемый в приложении Gmail на iOS.
* Кнопка **Screenshot** создаст снимок содержимого письма, которым вы можете поделиться, например, с клиентом
* На вкладке **Show Code** можно просмотреть код готового письма и его размер, там же вы можете «сжать» код при необходимости

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

<Img
img="/api/uploads/6_9858c2479e.png"
alt="Export template"
src="Экспорт шаблона"
/>

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

<Img
img="/api/uploads/7_79decc7b96.png"
alt="External services export"
src="Экспорт шаблона в другие сервисы"
/>

## Кастомизация шаблона

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

### Ссылки для кнопок, надписей и изображений

Если вы хотите вставить в кнопки или изображения ссылки для перехода, выделите нужный элемент и перейдите на вкладку **Properties**. В поле **Link address** добавьте URL-ссылку ресурса:

<Img
img="/api/uploads/8_27fe582818.png"
alt="Add URL"
src="Создание ссылки в кнопке"
/>

Для того чтобы добавить гиперссылку в текст, выделите фрагмент текста и добавьте ссылку в меню **Properties**. То же самое вы можете сделать с помощью функции **Create link** в Figma:

<Img
img="/api/uploads/9_275103a5a3.png"
alt="Create link"
src="Создание ссылки в тексте"
/>

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

<Img
img="/api/uploads/10_383937dc05.png"
alt="Button mode"
src="Распознавание кнопки"
/>

### Выгрузка блоков в виде изображений

Плагин может выгрузить некоторые элементы в качестве изображений, а не в виде кода. Для этого на вкладке Properties выбранного объекта нажмите кнопку **Convert to image**. К преобразованному блоку можно добавить описание и заголовок изображения:

<Img
img="/api/uploads/11_8c1e16a4cd.png"
alt="Convert image"
src="Преобразование блока в картинку"
/>

То же самое вы можете сделать с помощью стандартного функционала Figma, для этого оберните блок в группу:

<Img
img="/api/uploads/12_33bdda8094.png"
alt="Grouping"
src="Группирование элементов блока"
/>

### Управление адаптацией блоков

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

<Img
img="/api/uploads/13_04c976bd15.png"
alt="Columns display"
src="Настройка порядка блоков"
/>

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

<Img
img="/api/uploads/vid1_39672b4a17.png"
alt="Reorder preview"
src="Порядок блоков в письме"
/>

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

<Img
img="/api/uploads/14_9071dca1a8.png"
alt="Paddings"
src="Настройка отступов и ширины"
/>

### HTML и AMP-отображение

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

Создайте AMP и HTML-элементы, например, форму для заполнения и сноску со ссылкой на службу поддержки. Для сноски в разделе Properties укажите отображение только для HTML-версии:

<Img
img="/api/uploads/15_82450b571b.png"
alt="HTML and AMP"
src="Настройка отображения контента"
/> 

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

<Img
img="/api/uploads/vid2_2324df4884.png"
alt="HTML and AMP preview"
src="AMP и HTML-контент"
/> 


### Помощь искусственного интеллекта

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

<Img
img="/api/uploads/16_47d0d6e7f0.png"
alt="AI Helper"
src="Использование искусственного интеллекта"
/> 

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

<Img
img="/api/uploads/17_de860fb47b.png"
alt="AI text styling"
src="Генерация текста"
/>

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

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

Узнать больше обо всех функциях плагина, зарегистрировать учетную запись Pixcraft, а также связаться с поддержкой вы можете на странице Pixcraft Email Generator в сообществе [Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates).

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

small_figma-plugin.jpg

thumbnail_figma-plugin.jpg

figma-plugin.jpg

Email-верстка без кода: доступное и быстрое создание шаблонов писем в плагине для Figma

С каждым годом всё больше людей открывают 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, их возможности по настройке и интеграции, а также удобство использования.

Блог