Email-дизайн для интерактивных писем: эффекты наведения, раскрывающиеся блоки, встроенные формы
Большинство писем работают по одной схеме: баннер, текст, кнопка. Читатель видит это сотни раз в неделю и перестаёт замечать. Интерактивные элементы меняют механику взаимодействия — вместо пассивного чтения пользователь что‑то делает прямо внутри письма.
Разбираем три инструмента: эффекты наведения, раскрывающиеся блоки и встроенные формы. Как они работают, где поддерживаются и когда их стоит использовать.
Как интерактивность работает в письмах
Интерактивность в письмах строится на CSS — без JavaScript. Всё, что можно сделать в браузере через скрипты, в письме недоступно. Зато CSS-анимации, псевдоклассы и чекбоксы работают там, где почтовый клиент их поддерживает.
Главная проблема — поддержка. Один и тот же элемент отлично работает в Apple Mail и полностью игнорируется в Outlook. Поэтому любой интерактивный элемент требует запасного варианта — статичного отображения для клиентов без поддержки CSS.
| Почтовый клиент | Эффект наведения | Раскрывающиеся блоки | Встроенные формы |
| Apple Mail | Да | Да | Да |
| Gmail (браузер) | Частично | Нет | Нет |
| Outlook | Нет | Нет | Нет |
| Mail.ru | Частично | Нет | Нет |
| Яндекс Почта | Частично | Нет | Нет |
Интерактивность работает в первую очередь на устройствах Apple. Для аудитории с высокой долей таких пользователей — весомый аргумент. Для корпоративных рассылок с преобладанием Outlook — это рискованно.
Эффекты наведения
Эффект наведения — изменение внешнего вида элемента при наведении курсора. В письмах чаще всего применяют к кнопкам и изображениям.
Кнопка с эффектом наведения. Кнопка меняет цвет фона или добавляет тень. Это усиливает ощущение интерактивности и визуально подсказывает, что элемент кликабельный.
Изображение с эффектом наведения. При наведении на товар или баннер появляется дополнительная информация: цена, кнопка, описание. Работает как мини‑карточка товара внутри письма.
Технически эффект реализуется через псевдокласс :hover в CSS. В письме его нужно прописывать в теге <style> в <head> — встроенные стили псевдоклассы не поддерживают.
Типичная ошибка. Эффект наведения без запасного варианта. В Outlook пользователь увидит статичный элемент, и это нормально, если базовый дизайн самодостаточен.
Раскрывающиеся блоки
Раскрывающиеся блоки скрывают часть контента за заголовком. Пользователь нажимает на заголовок и блок разворачивается.
Где это полезно. Длинные письма с несколькими разделами: часто задаваемые вопросы, программа мероприятия, каталог с описаниями. Блок сокращает визуальный объём письма и позволяет читателю выбрать, что читать.
Как это работает технически. Через чекбокс или радиокнопку, скрытую с помощью CSS. Нажатие на заголовок переключает состояние чекбокса, CSS реагирует и показывает или скрывает блок.
css
input[type=»checkbox»] { display: none; }
.block-content { display: none; }
input:checked ~ .block-content { display: block; }
Типичная ошибка. Прятать за раскрывающийся блок важную информацию. Если читатель не разворачивает блок, то он её не увидит. Этот элемент подходит для дополнительного контента, не для ключевого сообщения.
Встроенные формы
Встроенная форма позволяет собирать данные прямо внутри письма, без перехода на сайт. Опрос, оценка, выбор предпочтений.
Где это работает. Apple Mail и некоторые другие клиенты поддерживают HTML-формы в письмах. Gmail и Outlook — нет.
Практический сценарий. Письмо с опросом из одного вопроса: три кнопки‑ответа прямо в тексте. Пользователь нажимает, ответ уходит на сервер. Никакого перехода на сайт, никакой отдельной страницы.
Типичная ошибка. Форма без запасного варианта. Если в Gmail вместо формы пользователь видит пустой блок — это хуже, чем если бы формы вообще не было. Запасной вариант — ссылка на внешнюю страницу с тем же опросом.
Ещё одна ошибка. Длинные формы. В письме работает один‑два вопроса максимум. Если их больше, переводите пользователя на сайт.
Общие правила работы с интерактивностью
Запасной вариант обязателен. Любой интерактивный элемент должен корректно выглядеть в клиентах без поддержки CSS. Базовое письмо должно работать само по себе.
Тестируйте в реальных клиентах. Браузерный предпросмотр не показывает, как письмо выглядит в Outlook или мобильном Gmail. Используйте реальные устройства или специальные сервисы проверки.
Не перегружайте письмо. Достаточно одного интерактивного элемента на письмо. Несколько одновременно превращают письмо в аттракцион.
Интерактивность не заменяет содержание. Эффект наведения на слабом предложении не поднимет конверсию. Интерактивность усиливает хорошее письмо, но не исправляет плохое.
Как Letteros работает с интерактивными элементами
В Letteros интерактивные элементы добавляются через блок HTML — вставляете кастомный код с эффектами наведения или раскрывающимися блоками прямо в нужное место шаблона. Остальные блоки при этом остаются в конструкторе: фирменный стиль, адаптивная вёрстка, корректное отображение в Outlook. Это удобно, когда нужно протестировать один интерактивный элемент в рассылке.