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

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

Екипът на Serpact взе участие в AMP Roadshow в Мюнхен
Екипът на 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
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 страници, вижте някои от примерите долу.

 

Като продължавате да използвате сайта, Вие приемате използването на "бисквитки". повече информация

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close