Екипът на Serpact™ взе участие в AMP Roadshow в Мюнхен

Екипът на Serpact™ взе участие в  тазгодишната конференция AMP Roadshow в Мюнхен организирана от екипа на AMP (Accelerated Mobile Pages)

Екипът на Serpact™ взе участие в AMP Roadshow в Мюнхен

Екипът на Serpact™ взе участие в  тазгодишната конференция AMP Roadshow в Мюнхен организирана от екипа на AMP (Accelerated Mobile Pages), която се състоя на 7-ми ноември тази година. Едни от участниците на събитието бяха разработчиците Бен Морс, Пол Бакаус, Руди Галфи – ръководител на продуктовия мениджмънт.  Конференцията засегна доста аспекти, свързани с AMP като интерактивност, на какво ниво на развитие се намира AMP в момента, също финансиране. Някои от темите бяха : „AMP-библиотека от удобни за ползване уеб страници“, „Подобрена интерактивност с AMP“, „Създаване на AMP“,  „AMP за забавление и печалба“, „Прогресивни  AMP страници“.

Nikola Minkov with Paul Bakaus – AMP Developer Advocate

Ето и една от презентациите, показани на AMP конференцията:

1. Основни принципи

AMP (accelerated mobile pages) е сравнително нова инициатива на Google целяща да създаде нова форма за уебсайтовете, която да е по-бърза, по-производителна и добре изглеждаща.

Къде е АМР сега?

Времева линия

  • AMP за първи път се разработва през 2015 топ сайтове разработени AMP  стартират в Google Search през февруари 2016
  • AMP достига всички Google Search резултати през септември 2016.
  • През март 2017 се провежда първата AMP конференция
  • През май 2017  топ  Stories Carousel  достигат целия свят.
  • Има общо 2млрд. страници
  • Има 1,2 милиона домейна произвеждащи AMP
  • Всяка секунда се създават 90 AMP страници

Според списание Форбс  половината от доходите на електронната търговия в САЩ ще идват от мобилни устройства. Благодарение на намалянето на зареждането с 36% има 10.5% ръст в поръчките и 27% ръст в конверсиите.

AMP подобрява ръста в онлайн поръчките, резервациите, покупките на самолетни билети….

Ali Express например постига ръст в конверсиите с 4% с помощта на AMP.
Wego  повишава ръста си с 49% в конверсиите при търсенето и 95% ръст в конверсиите на ….(partner’s conversion)

Промяна в представата

Ето някои от по-важните въпроси и техните отговори, които чухме на конференцията:

“Хей, някой ми спомена за АМР, необходим ли е?”
“Разбира се, това е единствения начин да се класираш в  Google’s carousel, по-добре не изпускай този допълнителен трафик.”

“Е, трябва ли тогава да си променям целия сайт?”
“Не, това е също както при RSS, просто генерирай тези отгоре на нормалния ти сайт и ги налинкни. ”

Уеб мрежата- безкрайни възможности

Една от главните причини за създаването на AMP е да възвърне на онлайн мрежата предишната слава и да увеличи  бързината на уеб страниците и тяхното удобство за ползване от потребителя.

Необходими са 19 сек. за една страница да се зареди при 3G мрежа, а със всяко забавяне от 1% се загубват общо 7 конверсии.
1MB данни могат да струват 5% от месечната вноска 0.8MB е средният размер на реклама при мобилно устройство.

За да се индексира една страница като AMP, тя трябва да се опише като canonical

<link rel=“amphtml“ href=“https://www….com/page.amp.html„>

Чрез АМР се подобрява визуализацията както на десктоп страницата, така и на мобилната страница. Това се постига чрез използване на няколко предварително генерирани библиотеки от скриптове и стилове, специално пригодени да изглеждат добре, да са функционални и удобни и респонсивни , които съдържат всичко необходимо , за  бързо и лесно визуализиране на страниците Ви.

Google казва:“Фокусирайте се върху потребителя и всичко друго ще дойде от само себе си.“

2.“AMP-библиотека от красиви и responsive уеб страници“

 

„AMP-библиотека от красиви и responsive уеб страници (също така и бързи и удобни за ползване)

С помощта на AMP се подобрява дизайна на мобилната версия и красива визуализация на десктопа. Освен това, подобрява пагинацията и респонзив дизайна.

 

Някои основни факти за АМР:

Не изисква JavaScript и HTML, а само CSS

Всъщност AMP не позволява наличието на JS изобщо, освен своите собствени скриптове.  HTML се обработва без проблеми, като се преобразува в необходимия формат при подаването на страницата. Относно CSS трябва да се има в предвид, че освен стандартния даден ни от проекта, всичкия CSS създаден лично от нас трябва да се опише в custom css тага в хеда на страницата. Локални style елементи не се допускат.

  • Библиотека за AMP HTML

На конференцията бяха представени някои нови допълнения и редакции към  синтаксиса и функционалността на AMP елементите. По интересните са

srcset: Респонзив Изображения, с помощта на AMP  – възможността да създаване на сетове от респонсив изображения за различните екрани резолюции

медия: Медия търсения за всеки елемент 

  • Ембедвания

Бяха представени начините за ембедване на елементи от някои от социалните мрежи в AMP страниците, за пример YouTube  и Twitter, чрез тагове като

<amp-youtube>
<amp-twitter>

  • Още градивни части

Други градивни елементи, които вече са стандартизирани и имплементирани за всеобщо ползване в библиотеките на AMP , като кароусели, видео, лайтбоксове, сайдбарове и други. Ето някои от таговете, които ги описват:

<amp-carousel>
<amp-accordion>
<amp-timeago>
<amp-lightbox>
<amp-video> (with autoplay)
<amp-sidebar>
<amp-fit-text>

  • Употреба за напреднали

<amp-image-lightbox>
<amp-fx-flying-carp>
<amp-fx-flying-carpet>

<amp-animation>

Особено впечатляващо беше представянето на анимации в AMP страниците, ето някои основни точки:

Тънък background около уеб анимации;
Анимации с отлични пиксели, които е невъзможно да се направят с CSS

<amp-animation>

Scroll-bound Анимации (в процес на експериментиране);
Parallax скролиране

<amp-position-observer>

Анимация    Parallax   3D Cube

 

Как да стартираме с АМР?

Ето и няколко източника, които ни бяха представени и биха ви били полезни, ако решите да започнете с AMP

Нуждаете се от вдъхновение?

Ако се нуждаете от вдъхновение за да направите свои страхотни AMP страници, вижте някои от примерите долу.