Горизонтальные емейлы для мобильных устройств

Горизонтальный емейл, который представлен ниже, StyleCampaign отправили в марте 2011. Он принес им наилучший показатель CTR за последние два года!

Испуганные недоумевающие пользователи не станут использовать горизонтальную прокрутку? Бросьте! Емейл шириной 948px занимает 4 экрана IPhone и вот показатели кликов по ссылкам на страницах: 44% / 30% /14% /12%. Причем с мобильных устройств это сообщение открыли 20% подписчиков.

Распакуй его!

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

Идея довольно проста: делаем отдельный блоки приблизительно по 320px шириной — маленькие странички письма. На каждой из них в нужное место ставим специально подобранные элементы дизайна (кнопки, стрелки и т.п.), чтобы пользователю хотелось нажать на них и таким образом прокрутить письмо до конца.

Panorama

Я был очень рад узнать, что Windows Phone 7 стал поддерживать горизонтальную прокрутку.

«Приложения Panorama — это часть ядра Windows Phone OS 7.0 Они предоставляют пользователю уникальный интерфейс и способы просмотра изображений, благодаря технологии горизонтальных холстов, буквально выходящих за пределы экрана».

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

Разрешение экрана Windows Phone 7 составляет 480 на 800px. А ширина Panorama равна 2100px. Это в точности соответствует максимальной горизонтальной прокрутке, которая поддерживается в Outlook 2007.

Привлекательное содержание

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

Ширина IPhone 3GS равна 320px, поэтому сделаем каждый слайд нашего письма шириной 300px. Каждая следующая страничка будет чуть-чуть выглядывать из-за границы экрана. В этом случае, получатель интуитивно понимает, как просмотреть письмо полностью.

Говорите, Outlook 2007 поддерживает прокрутку в 2100px? Ок, без проблем! Можем создать 6-7 таких «экранов».

Горизонтальные письма отлично работают в fashion-индустрии. Мы взяли фотографии из свадебного каталога Victoria’s Secret, добавили контент и ссылки на видео (обратите на них внимание). Получилось красиво и стильно!

Постраничные индикаторы

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

Стандартный индикатор внизу показывает, сколько страничек еще можно посмотреть.

Скроллинг

Когда вы загружаете емейл через IPhone, на несколько секунд появляется полупрозрачная серая панель — индикатор прокрутки. Он показывает насколько длинное письмо, и в какую сторону можно проскроллить содержимое.

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

Стрелки

Добавьте немножко динамики — используйте красивые изображения и стрелки для указания направления прокрутки. Может быть, будет достаточно привлекательного содержания, может… лучше все-таки провести парочку тестов!

Вот один из возможных вариантов:

Итак, вы можете попробовать внедрить похожие макеты или использовать креативы шириной 320px и 400px. Может быть, в две колонки или узкие, с версткой на стилях. А возможно просто пошлете набор красивых открыток — в любом случае решать вам! Узнайте реакцию подписчиков на новый современный макет. Дерзайте!