{"id":13799,"url":"\/distributions\/13799\/click?bit=1&hash=865a89ddf5e1b9e468c75aafc8397c3511c1f5c9a63c9b3d346956d539f26271","title":"\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u00ab\u041c\u0430\u0440\u043a\u0435\u0442\u0435\u00bb ","buttonText":" \u041a\u0430\u043a?","imageUuid":"f7affe9f-a742-5820-ac81-04ba4a1a8f84","isPaidAndBannersEnabled":false}

Дизайн интерактивных AMP рассылок

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

Недавно ситуация начала меняться. Появились, так называемые, AMP рассылки. AMP письма интерактивны и динамичны, в них пользователь может взаимодействовать с контентом, не выходя из почтового клиента.

Сейчас эту технологию активно поддерживает Google и Mail.ru. Чтобы отправить AMP письмо, ваш сервис рассылок тоже должен поддерживать эту функцию. AMP шаблон прикладывается в дополнение к основному. Если клиент получателя не поддерживает AMP, отобразится ваш основной шаблон.

AMP – фреймворк для создания сайтов, баннеров и пр. Он имеет ряд готовых универсальных компонентов. Таких как: слайдер, галерея, формы и др. Кроме того фреймворк позволяет динамически отправлять и принимать данные с сервера.

Данная статья не учит делать дизайн или разрабатывать AMP рассылки. Она рассказывает про возможности AMP framework. Чтобы при создании дизайна AMP письма было понятно, что можно или не можно. Я сам дизайнер, поэтому статья для дизайнеров, но подойдет и для тех, кто решил попробовать AMP рассылки. Теперь поехали.

Раскрывающиеся списки

Описание: amp-accordion

Есть возможность по-разному кастомизировать их поведение, даже сделать простую анимацию раскрытия:

amp-accordion

Использование анимированных изображений. Обычно GIF

Описание: amp-anim

Конечно GIF можно было использовать и ранее. Но AMP позволяет расширить использование. Например: пока загружается GIF подставить изображение-заглушку.

Привязка контекста

Описание: amp-bind

Позволяет логически связать элементы в письме в зависимости от состояния других элементов. Возможно даже получать данные с сервера. Простой пример: интернет-магазин. Мы отправляем человеку какой-нибудь товар, одежду. И в зависимости от выбранного им размера(он выберет его прям в письме), будет меняться панель с доступными цветами для данного размера.

amp-bind

Слайдер

Описание: amp-carousel

Слайдер, он и в Африке слайдер(наверно). Кнопочки кастомизируются, есть разные варианты поведения и возможность добавить в пагинацию микропревью изображений в слайдере.

amp-carousel

Формы

Описание: amp-form

Теперь в письма можно вставить формы. Для инпутов в форме можно настроить маски, правила валидации и пр. Возможно использование текстовых, числовых, скрытых инпутов, радио кнопок, чекбоксов, рейнджей, инпутов с датой(да-да будет календарь) и пр.

Лайтбоксы для изображений

Описание: amp-image-lightbox

Теперь доступно и увеличение изображений.

amp-image-lightbox

AMP Лайаут

Описание: amp-layout

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

Лайтбокс или попап

Описание: amp-lightbox

Теперь можно добавлять попапы(всплывающие поверх контента окна).

amp-lightbox

Вывод списка данных

Описание: amp-list

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

Выбор элементов

Описание: amp-selector

Позволяет пользователю выбрать один или несколько элементов из списка. Список необязательно должен состоять из текста.

amp-selector

Сайдбары

Описание: amp-sidebar

Это скорее похоже navigation drawer из android. Сложно представить, как его использовать письмах. Но такая возможность есть.

amp-sidebar

Временные отметки

Описание: amp-timeago

Предоставляет нечеткие временные метки. К примеру мы получили дату публикации новости. Мы можем вывести ее динамически таким образом: 3 часа назад или 3 дня назад.

0
3 комментария
Александр Савченко

Возможность интегрировать форму в письмо выглядит интересной.
Спасибо за статью.

Ответить
Развернуть ветку
Александр Перебейнос

Молодцы, парни!

Ответить
Развернуть ветку
Компания Раумплюс

спасибо)

Ответить
Развернуть ветку
Читать все 3 комментария
null