Адаптивный веб-дизайн писем

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

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

1. Пишите и сокращайте

Самое большое отличие писем на десктопе и в мобильной версии — объём рабочего пространства. На узком экране мобильного устройства каждое слово имеет вес. Если можно обойтись без какого-то слова или целого предложения — смело его удаляйте.

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

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

2. Составьте чёткий план

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

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

Хотите добавить что-то ещё? Можно включить в адаптивный дизайн две идеи. В таком случае первая идея должна выделяться и быть основной, а вторая — ненавязчиво дополнять её.

DryBar передаёт только одну важную цель в письме, и это прекрасно.

В письме HOMEPOLISH отчётливо виден основной посыл, а всё остальное дополняет главную идею.

3. Изображения — ваши лучшие друзья

Картинку пользователь воспринимает в 60 000 раз быстрее, чем текст. Используйте изображения, чтобы передать эмоциональный посыл и выразить основную идею как можно более кратко. Самыми вовлекающими считаются изображения, на которых изображены люди в реальной жизни, — lifestyle-картинки.

Инфографические иконки сэкономят пространство, скомпонуют информацию и подогреют интерес читателей.

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

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

Эта компания сократила текст с помощью иконок и использовала текстовые фрагменты.

4. Используйте социальные доказательства

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

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

5. Акцент на Call-to-Action

Помимо хорошего контента у ваших писем должен быть ярко выраженный Call-to-Action. CTA особенно важны для мобильных клиентов. Убедитесь, что они достаточно большие, чтобы по ним было удобно кликать с мобильного устройства.

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

Протестируйте текст на кнопке. Фразы «Купить сейчас» или «Посмотреть» — универсальны, но слишком избиты. Придумайте более креативный текст, подходящий под стиль вашей компании.

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

Компания Briogeo хорошо знает свою аудиторию. Текст на кнопке «Купить новинку» добавляет лёгкую персонализацию. Кнопки крупные и расположены интуитивно.

С чего начать создание дизайна?

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

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

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