Почему вам следует использовать адаптивные шаблоны писем

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

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

## Что такое адаптивное письмо и почему это важно?

Адаптивное письмо — это письмо, которое выглядит одинаково на любом устройстве: компьютере, планшете или мобильном телефоне. Это важно не только для поддержания узнаваемости бренда, но и в связи с тем фактом, что 60% писем просматриваются на мобильных устройствах (хотя пока остается открытым вопрос, как защита конфиденциальности почты Apple (MPP) в конечном итоге повлияет на это поведение). Если вы не оптимизируете письма для просмотра вне десктопа, вы можете потерять значительную часть аудитории.

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

## Как лучше всего сделать шаблон письма адаптивным?

Адаптивные письма используют медиа-запросы CSS (CSS media queries), также известные как @media, чтобы превратить таблицы и изображения фиксированной ширины для десктопов в резиновые (гибкие) элементы для маленьких экранов, обеспечивая максимальную совместимость.

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

Чтобы упростить процесс и масштабировать его, можно создать адаптивные шаблоны писем. Шаблоны помогают избавить HTML-дизайн от рутины.

## Рекомендации по адаптивному дизайну писем

Создание адаптивных шаблонов, оптимизированных для мобильных, — это не просто придание письму свойства «мобильной дружественности». Вам следует тщательно продумать изменения в макете и пользовательском опыте.

Вот несколько советов по созданию успешных адаптивных шаблонов писем:

**Используйте макет в одну колонку.** Письма с двумя и более колонками требуют более тщательного тестирования и создают больше возможностей для ошибок. Придерживайтесь одноколоночного макета шириной около 600 пикселей для достижения наилучших результатов на мобильных устройствах. **Создавайте осмысленные призывы к действию (CTA).** Согласно рекомендациям Apple, кнопки CTA должны иметь минимальную область нажатия 44 x 44 пикселя, чтобы пользователю было удобно нажимать на них. Это также снижает трение в пользовательском опыте. **Выбирайте подходящие веб-шрифты.** Не все веб-шрифты работают в каждом почтовом клиенте. Из-за этого важно объявить выбранный шрифт (и размер), а затем указать резервные шрифты (font stacking). Включение нескольких названий шрифтов гарантирует, что если один шрифт не сработает, будет использован резервный шрифт вашего выбора. Вы также можете использовать безопасные веб-шрифты, чтобы быть уверенным в правильном отображении текста. **Расставляйте приоритеты в отображаемом контенте.** При адаптации под маленький экран вы можете подумать о том, какому контенту отдать приоритет для наилучшего восприятия. При необходимости вы можете скрыть часть контента в мобильном макете. **Не забывайте о темной теме (Dark Mode).** В большинстве операционных систем есть настройки темной темы, на которую приходится около 27% открытий писем. Если не учесть этот фактор, читатели могут увидеть ваше сообщение в невыгодном свете из-за инверсии цветов фона и текста. Внедрение цветовых схем как для темной, так и для светлой темы в ваши шаблоны обеспечит наилучший пользовательский опыт. **Сделайте отписку простой.** Отписки могут быть полезны для бизнеса. Они позволяют отсеять незаинтересованных и неактивных пользователей. Никакое количество писем вряд ли изменит их мнение, поэтому лучше сократить потери и дать им возможность легко отписаться или изменить свои настройки, чтобы получать интересующий их контент.

## Оценка эффективности

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

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

Адаптивные письма — это не «приятное дополнение», а жизненная необходимость для успешной email-программы. Учитывая такие факторы, как доставляемость писем и сохранение доверия к бренду, адаптивные шаблоны могут помочь вам масштабировать ваши усилия, создавая бесшовный и единообразный опыт взаимодействия с письмами каждый раз!