Функциональность дизайна AMP: что еще можно сделать с помощью фреймворка?

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

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

9 возможностей дизайна AMP, о которых вы могли не знать

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

1. Создайте прогрессивное веб-приложение (PWA).

Хотя мобильный Интернет прошел долгий путь, ему еще предстоит пройти долгий путь. Отчеты показывают, что, хотя 1000 лучших мобильных веб-сайтов посещают в 4 раза больше людей, чем 1000 лучших мобильных приложений, они привлекают пользователей в течение 20 раз меньше минут. Мобильные сайты привлекают посетителей, но они не могут обеспечить интуитивное удобство использования нативного приложения. Вот где приходят прогрессивные веб-приложения.

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

В сочетании с AMP эти PWA можно ускорить. Вот несколько способов их совместного использования:

AMP как PWA

Если вашему прогрессивному веб-приложению не требуется полноценное использование языков кодирования, ограниченных AMP, фреймворк может предоставить все необходимое для создания собственного PWA. Фактически, «AMP by Example» - это рабочая демонстрация комбинации:

AMP в PWA

AMP и PWA - это еще не все или ничего. Дело не в том, что вы не можете использовать макет AMP для некоторых из ваших PWA, но не для всех. Если вы обнаружите, что ваше прогрессивное веб-приложение не может работать с ограничениями кодирования AMP CSS, вы можете использовать форму фреймворка под названием «Shadow AMP». Это позволяет AMP встраиваться в другие разделы вашего веб-сайта, поэтому вы можете использовать AMP то, что хотите, а не то, что вам не нужно.

AMP в PWA

Даже если вы не думаете, что ваш PWA может работать с ограничениями AMP, вы все равно можете использовать стиль AMP, чтобы привлечь к нему пользователей. Благодаря повышению видимости AMP в поисковых системах, публикация новостей и сообщений в блогах с помощью этой структуры становится простой задачей. Когда они перейдут на вашу AMP-страницу, посетителям будет предложено загрузить ваш PWA.

2. Чтобы создать страницу оформления заказа

Хотя AMP все еще работает над расширением разнообразия транзакций, теперь вы можете принимать платежи на страницах, разработанных для AMP. С помощью простых форм собирайте данные, необходимые для оплаты, такие как имя, адрес, данные кредитной карты, и даже принимайте промокоды:

Следующим важным приоритетом для команды AMP будет «более надежный» платежный компонент для пользователей. В своей дорожной карте продукта они пишут:

В настоящее время AMP поддерживает транзакции только в ограниченном контексте, например через amp-iframe с API-интерфейсом платежного запроса, однако при этом не учитываются многие важные варианты использования. Эта деятельность будет реализовывать более надежный платежный компонент в AMP, потенциально включая интеграцию со сторонними платежными процессорами, виджетами, кошельками и т. Д. (Они должны как-то поддерживаться в любом случае).

3. Чтобы создать раздел комментариев

Если все сделано правильно, раздел комментариев может стать источником продуктивного обсуждения, идей по содержанию и даже потенциальных клиентов. И теперь, с помощью AMP, дизайнеры могут создавать раздел комментариев, где пользователи могут участвовать в этом обсуждении и даже требовать входа в систему, что позволяет пользователям обсуждать в более личной манере:

4. Истории AMP

Если вы видели истории из Snapchat, Instagram или Facebook, истории AMP покажутся вам очень знакомыми. По словам Руди Галфи, менеджера по продукту AMP в Google, истории предлагают издателям «ориентированный на мобильные устройства формат для доставки новостей и информации в виде визуально насыщенных, сквозных историй»:

По словам Галфи, такие издатели, как CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media и The Washington Post, принимали участие в ранней разработке формата. Теперь он доступен для всех пользователей, и, что касается возможности обнаружения, вы можете найти истории AMP в Картинках Google, Поиске, Поиске и Новостях.

Вот пример того, как может выглядеть видение:

5. Получите дополнительную видимость в Bing

В недавнем сообщении в блоге Фабрис Канель, главный программный менеджер Bing, объявил о новой функции для поисковой системы компании:

В 2016 году Bing присоединился к инициативе Accelerated Mobile Pages (сокращенно AMP) с открытым исходным кодом, чтобы помочь вам «находить» и «выполнять» поиск быстрее, независимо от того, где вы находитесь, и на любом устройстве, когда ищете информацию. Сегодня мы рады объявить о выпуске средства просмотра Bing AMP и Bing AMP Cache, позволяющих веб-страницам с поддержкой AMP работать непосредственно с результатами мобильного поиска Bing, что позволяет Bing предоставлять более быстрые мобильные возможности пользователям Bing.

Эта программа просмотра похожа на Google - карусель с изображениями с молниями для обозначения контента с поддержкой AMP:

Теперь, помимо трафика поисковых систем от Google, пользователи AMP могут рассчитывать на приоритетную недвижимость на страницах результатов поиска Bing.

6. Создавайте эффекты с ограничением прокрутки.

В большинстве случаев эффекты с ограничением прокрутки мешают взаимодействию с пользователем. Они интересны, но не такими, как вы хотите. Они отвлекают от основного содержимого страницы и могут значительно увеличить вес страницы в зависимости от реализации эффекта.

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

Однако, если этот дизайн не будет реализован должным образом, он может увеличить вес страницы, что замедлит ее загрузку и снизит вероятность того, что потенциальный клиент останется. Чтобы решить эту проблему, вы можете объединить amp-position-Observer с amp-animation, чтобы создать ряд привлекательных, но быстро загружающихся эффектов:

Прокручиваемая анимация

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

Затухание и переходы скольжения

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

Карусель

Эффект перехода также можно использовать с каруселью AMP:

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

Окна параллакса

Определив окно разрыва меньшего размера, чем изображение, вы можете создать эффект параллакса:

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

7. Добавьте свой адрес электронной почты.

Вы знаете об ускорении веб-страниц, но как насчет электронной почты? AMP для электронной почты обеспечивает такую ​​же скорость и удобство использования страниц AMP в Gmail. Позволяя разработчикам отправлять электронные письма в виде документов AMP, потенциал AMP для электронной почты заключается в его способности создавать богатые возможности для пользователей.

Аакаш Сани, менеджер по продукту в Gmail и Chat, говорит, что новая спецификация AMP для электронной почты станет «мощным способом для разработчиков создавать более увлекательные, интерактивные и действенные почтовые сервисы». С его помощью пользователи могут выполнять задачи через Gmail, например отвечать на приглашения на мероприятие, записываться на прием или заполнять анкету, и многие другие.

Pinterest, Booking.com и Doodle одними из первых протестировали AMP для работы с электронной почтой:

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

8. Чтобы легко создавать высокоскоростные целевые страницы после клика.

Когда дело доходит до повышения коэффициента конверсии, оптимизация целевой страницы после клика должна быть приоритетом. Но создание целевой страницы после клика для каждого продвижения, будь то AMP или нет, может быстро истощить ресурсы команды. Вот почему мы создали функционал AMP в конструкторе Instapage:

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

В процессе сборки вы будете уведомлены, если вы приблизитесь к превышению лимита веса страницы AMP в 75 КБ. Когда вы достигнете 80% предела, в нижней части экрана появится этот предупреждающий индикатор:

Если это не так, вы можете опубликовать в WordPress или в своем собственном домене:

9. Чтобы оптимизировать целевые страницы после клика

Создание отличной целевой страницы AMP после клика - это одно, а улучшение - совсем другое. Когда дело доходит до поиска способов повысить коэффициент конверсии целевой страницы AMP после клика, лучше всего начать с A / B-тестирования.

A / B-тестирование включает в себя тестирование исходной страницы, называемой элементом управления, на альтернативной странице, называемой вариантом. Проще говоря, после того, как на каждую из них будет направлен равный трафик, победит лучшая страница (более подробное объяснение см. В руководстве по A / B-тестированию Instapage).
Теоретически это кажется простым, но это, конечно, не так. Требуются знания о дизайне тестирования, угрозах достоверности, программном обеспечении и многом другом. И что особенно тяжело, так это то, что при каждом запуске теста вам нужно создавать как минимум одну совершенно новую страницу.

К счастью, Instapage позволяет дублировать целевую страницу AMP после клика одним кликом:

Просто выберите «Создать A / B-тест», затем «Новый вариант», и вы продублируете свою страницу и отредактируете оттуда, или полностью начнете и импортируете сохраненные текстовые блоки, блоки изображений, виджеты и многое другое с помощью «Instablocks» характерная черта. Затем запустите тест и реализуйте победивший дизайн.

Узнайте больше на веб-семинаре Google AMP

Принятие AMP только растет. Сейчас более 31 миллиона доменов создали более 5 миллиардов страниц AMP. А согласно межконтинентальному исследованию WPengine, 99% пользователей видят преимущества использования AMP для своей организации.

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

Думаете, вы знакомы с AMP? Узнайте больше о мифах о фреймворке с Instapage и создателем, Google, на нашем эксклюзивном веб-семинаре. Затем получите пользовательскую демонстрацию AMP здесь и посмотрите, как легко создавать молниеносные AMP-страницы.