Serpact на конференцията AMP Roadshow в Мюнхен

Основни принципи
The Serpact team participated in the AMP Roadshow in Munich

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

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

Екипът на Serpact™ участва в тазгодишната конференция AMP Roadshow в Мюнхен, организирана от екипа на AMP (Ускорени мобилни страници). Тя се проведе на 7 ноември 2017 г. и на нея присъстваха разработчиците Бен Морс, Пол Бакау и продуктовият мениджър Руди Гълфи.

Конференцията засегна много теми за AMP като неговата интерактивност, на какво ниво на развитие е AMP в момента, както и неговото финансиране.

Nikola Minkov with Paul Bakaus - AMP Developer Advocate
Nikola Minkov with Paul Bakaus – AMP Developer Advocate

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

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

Paul-Bakaus-AMP-Developer-Advocate

AMP е сравнително нов фреймуърк на Google, който има за цел да създаде нов формат на уебсайтовете, така че те да са по-бързи, по-продуктивни и да изглеждат добре.

Къде е AMP сега?

Хронология

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

Според Forbes половината от приходите от електронна търговия в САЩ ще идват от мобилни устройства. Благодарение на намалението на таксите от 36%, има 10,5% увеличение на поръчките и 27% увеличение на конверсиите.

С помощта на AMP има ръст в онлайн резервациите и покупките на самолетни билети….

Ali Express, например, постигна 4% увеличение на конверсиите с AMP.
Wego увеличава растежа си с 49% в конверсиите при търсене и 95% в конверсиите на партньори.

Промяна във възприемането

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

 Хей, някой спомена ли дали имаме нужда от AMP?
„Разбира се, това е единственият начин да се класирате за Google Carousel. По-добре не пропускайте допълнителния трафик от него.“

Е, тогава трябва ли да променям  целия си сайт?
„Не, това е точно като RSS. Просто го генерирайте върху сайта си и кликнете върху него.

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

Основната цел на създаването на AMP е да се подобри цялостното онлайн изживяване, като уеб страниците станат по-бързи и по-лесни за използване.

В момента зареждането на една страница в 3G мрежа отнема около 19 секунди и дори 1% забавяне може да доведе до загуба на седем потенциални конверсии. 1 MB данни може да струва 5% от месечния план за мобилен интернет, а средно мобилните устройства показват около 0,8 MB реклами.

Чрез внедряването на AMP тези проблеми могат да бъдат решени, което води до по-бързо време за зареждане на страницата и намаляване на потреблението на данни. Това от своя страна подобрява потребителското преживяване и повишава ефективността на уебсайта.

За да индексирате страница като AMP, тя трябва да бъде описана като канонична:

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

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

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

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

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

В допълнение, той помага страницирането и респонсив дизайна да изглеждат по-добре.

Някои основни факти за AMP:

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

Всъщност AMP изобщо не поддържа JS, освен за собствените си скриптове. HTML се обработва безпроблемно, като се преобразува в необходимия формат при вмъкване на страницата.

Що се отнася до CSS, трябва да се има предвид, че в допълнение към стандартния, даден ни от проекта, всички CSS, създадени лично от нас, трябва да бъдат описани в персонализиран css таг в хедъра на страницата. Не се допускат local елменти.

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

Конференцията представи някои нови допълнения и ревизии на синтаксиса и функционалността на AMP елементите.

Ето и по-интересните от тях: 

Srcset – респонсив изображения, използващи AMP.  Възможност за създаване на набор от респонсив изображения за екрани с различна резолюция.

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

  • Вграждане

Начини за вграждане на елементи от някои от социалните мрежи в AMP страници, като YouTube и Twitter, чрез тагове като:

<amp-youtube>
<amp-twitter>

  • Още структуриращи части

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

Ето някои от етикетите, които ги описват:

<amp-carousel>
<amp-accordion>
<amp-timeago>
<amp-lightbox>
<amp-video> (с автоматично пускане)
<amp-sidebar>
<amp-fit-text>

  • За напреднали

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

<amp-animation>

Особено впечатляващо беше представянето на анимации на AMP страници. Ключовите от тях бяха тънкият фон около уеб анимациите и отличните пикселни анимации, които не могат да се направят с CSS.

<amp-animation>

Друго, което грабна вниманието ни бяха скролираните анимации, които бяха в процес на експерименти, както и превъртането на паралакс.

<amp-position-observer>

Parallax 3D Cube Animation

Как да започнете с AMP?

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

  • AMP Example (www.ampbyexample.com) – AMP from Example: Interactive Platform
  • AMP Start (www.ampstart.com) – AMP Start: Sample Programs

Имате нужда от още вдъхновение?

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

Подобни статии