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

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

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

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

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

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

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

Пример: https://amp.dev/documentation/examples/components/amp-accordion/preview/?format=emails

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

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

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

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-bind

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-carousel

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

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

Пример: https://amp.dev/documentation/examples/components/amp-form/preview/?format=emails

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-image-lightbox

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

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

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-lightbox

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-list

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-selector

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

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

Пример: https://amp.dev/documentation/examples/components/amp-sidebar/preview/?format=emails

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

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

Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-timeago