Если вы сталкивались с разработкой дизайна email рассылок, то знаете, насколько дизайн должен быть примитивен, и даже не технологичен.
Недавно ситуация начала меняться. Появились, так называемые, AMP рассылки. AMP письма интерактивны и динамичны, в них пользователь может взаимодействовать с контентом, не выходя из почтового клиента.
Сейчас эту технологию активно поддерживает Google и Mail.ru. Чтобы отправить AMP письмо, ваш сервис рассылок тоже должен поддерживать эту функцию. AMP шаблон прикладывается в дополнение к основному. Если клиент получателя не поддерживает AMP, отобразится ваш основной шаблон.
AMP – фреймворк для создания сайтов, баннеров и пр. Он имеет ряд готовых универсальных компонентов. Таких как: слайдер, галерея, формы и др. Кроме того фреймворк позволяет динамически отправлять и принимать данные с сервера.
Данная статья не учит делать дизайн или разрабатывать AMP рассылки. Она рассказывает про возможности AMP framework. Чтобы при создании дизайна AMP письма было понятно, что можно или не можно. Я сам дизайнер, поэтому статья для дизайнеров, но подойдет и для тех, кто решил попробовать AMP рассылки. Теперь поехали.
Раскрывающиеся списки
Описание: amp-accordion
Есть возможность по-разному кастомизировать их поведение, даже сделать простую анимацию раскрытия:
Использование анимированных изображений. Обычно GIF
Описание: amp-anim
Конечно GIF можно было использовать и ранее. Но AMP позволяет расширить использование. Например: пока загружается GIF подставить изображение-заглушку.
Привязка контекста
Описание: amp-bind
Позволяет логически связать элементы в письме в зависимости от состояния других элементов. Возможно даже получать данные с сервера. Простой пример: интернет-магазин. Мы отправляем человеку какой-нибудь товар, одежду. И в зависимости от выбранного им размера(он выберет его прям в письме), будет меняться панель с доступными цветами для данного размера.
Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-bind
Слайдер
Описание: amp-carousel
Слайдер, он и в Африке слайдер(наверно). Кнопочки кастомизируются, есть разные варианты поведения и возможность добавить в пагинацию микропревью изображений в слайдере.
Формы
Описание: amp-form
Теперь в письма можно вставить формы. Для инпутов в форме можно настроить маски, правила валидации и пр. Возможно использование текстовых, числовых, скрытых инпутов, радио кнопок, чекбоксов, рейнджей, инпутов с датой(да-да будет календарь) и пр.
Лайтбоксы для изображений
Описание: amp-image-lightbox
Теперь доступно и увеличение изображений.
AMP Лайаут
Описание: amp-layout
Компонент-обертка, от которого зависит, как будут позиционироваться дочерние компоненты. Имеет ряд видов: скрытый, фиксированный по высоте и ширине, фиксированный по одному из измерений, сохраняющий пропорциональность при изменении ширины, заполняющий все доступное пространство и т.д.
Лайтбокс или попап
Описание: amp-lightbox
Теперь можно добавлять попапы(всплывающие поверх контента окна).
Вывод списка данных
Описание: amp-list
Получает данные JSON и отображает их в виде списка, используя предоставленный шаблон. Можно использовать например для получения списка товаров для ИМ.
Пример: https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/components/amp-list
Выбор элементов
Описание: amp-selector
Позволяет пользователю выбрать один или несколько элементов из списка. Список необязательно должен состоять из текста.
Сайдбары
Описание: amp-sidebar
Это скорее похоже navigation drawer из android. Сложно представить, как его использовать письмах. Но такая возможность есть.
Временные отметки
Описание: amp-timeago
Предоставляет нечеткие временные метки. К примеру мы получили дату публикации новости. Мы можем вывести ее динамически таким образом: 3 часа назад или 3 дня назад.
Возможность интегрировать форму в письмо выглядит интересной.
Спасибо за статью.
Молодцы, парни!
спасибо)