Советы по работе с AMP для писем

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

Скорость

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

Удобство и доступность

• При использовании компонента amp-carousel убедитесь, что указан атрибут controls. Это позволяет управлять кольцевой галереей пользователям устройств с сенсорным экраном (таким как смартфоны).
• При использовании amp-form помните, что в iOS поддерживаются не все типы элементов для ввода информации. Для получения дополнительной информации ознакомьтесь со статьей Поддерживаемые значения элемента input в справочной документации Safari по HTML.
• Некоторые приложения и браузеры не поддерживают ряд значений атрибута autocomplete. Считайте функцию автодополнения недоступной и старайтесь не удлинять формы.

Стили

• Следите за тем, чтобы в письмах использовался только CSS, совместимый с AMP для писем
• Не используйте единицы viewport (vw, vh, vmin и vmax) в своем CSS или HTML. Поскольку рендеринг AMP-писем осуществляется в элементе iframe, viewport письма не совпадает с viewport браузера.
• В разных браузерах используются разные базовые стили CSS. При необходимости используйте библиотеку CSS, нормализующую стили. Дополнительная информация о базовых стилях, сведения о нормализации стилей, а также список доступных библиотек приведены в статье Reboot, Resets, and Reasoning.
• При использовании CSS будьте осторожны с внешними отступами (margin), выходящими за границы элементов (overflow): они могут не быть отрисованы из-за ограничения в разметке AMP.

Мобильные устройства

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

Прочие нюансы

Работая с AMP для писем, помните о следующих советах и рекомендациях:

• Конструктор AMP-писем не проксирует XHR-запросы, однако некоторые провайдеры электронной почты это делают.
• Для обеспечения максимальной совместимости с клиентами электронной почты MIME-блок AMP в вашем электронном письме должен располагаться перед MIME-блоком HTML.
• Некоторые атрибуты (src из компонента amp-list, action-xhr из amp-form, src из amp-img, а также атрибут href тега <a>) не могут изменяться компонентом amp-bind.
• Ваши сообщения должны также содержать статичную HTML-версию — на тот случай, если пользователь перейдет на HTML-версию сообщения или перенаправит сообщение.