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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: blog.listrak.com
Array
(
    [0] => WP_Term Object
        (
            [term_id] => 1425
            [name] => Статьи
            [slug] => articles
            [term_group] => 0
            [term_taxonomy_id] => 1907
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 534
            [filter] => raw
            [cat_ID] => 1425
            [category_count] => 534
            [category_description] => 
            [cat_name] => Статьи
            [category_nicename] => articles
            [category_parent] => 0
        )

)
Поделиться статьёй
Подписаться на рассылку