Reading Time: 4 minutes

The Serpact ™ team participated in this year’s AMP Roadshow conference in Munich, organized by the AMP (Accelerated Mobile Pages) team

Екипът на Serpact взе участие в AMP Roadshow в Мюнхен
The Serpact ™ team participated in the AMP Roadshow in Munich

The Serpact ™ team participated in this year’s AMP Roadshow conference in Munich, organized by the AMP (Accelerated Mobile Pages) team, which took place on November 7 this year. The event was attended by developers Ben Morse, Paul Bacau, and Rudy Gulfi – Product Management Manager. The conference touched on many aspects of AMP as interactivity, what level of development is AMP currently in, also funding. Some of the topics were: “AMP-friendly Web Page Library”, “Enhanced AMP Interactivity”, “Create AMP”, “Fun & Profit AMP”, “Progressive AMP Pages”.

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

Here is one of the presentations shown at the AMP conference:

Basic Principles

AMP (accelerated mobile pages) is a relatively new initiative from Google that aims to create a new website format that is faster, more productive and looks good.

Where is AMP now?

Timeline

  • AMP first developed in 2015. Top AMP developed sites launched in Google Search in February 2016
  • AMP reaches all Google Search results in September 2016.
  • The first AMP conference is being held in March 2017
  • In May 2017, the top Carousel Stories reach the world.
  • There is a total of 2bn. pages
  • There are 1.2 million domains producing AMP
  • 90 AMP pages are created every second

According to Forbes, half of US e-commerce revenue will come from mobile devices. Thanks to a 36% reduction in charge, there is a 10.5% increase in orders and a 27% increase in conversions.

AMP improves growth in online bookings, bookings, airline ticket purchases ….

Ali Express, for example, achieved a 4% increase in conversions with AMP.
Wego boosts its growth by 49% in search conversions and 95% in …. (partner’s conversion)

A change in perception

Here are some of the more important questions and their answers we heard at the conference:

“Hey, did anyone mention me about the AMP, do you need it?”
“Of course, this is the only way to qualify for Google’s carousel, you better not miss this extra traffic.”

“Well, should I change my entire site then?”
“No, it’s just like RSS, just generate those on top of your normal site and click them. ”

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

One of the main reasons for the creation of AMP is to restore the online glory to its former glory and increase the speed of web pages and their user-friendliness.

It takes 19 seconds. load on one page per 3G network, and with a 1% delay, a total of 7 conversions are lost.
1MB data can cost 5% of the monthly installment 0.8MB is the average amount of advertising on a mobile device.

To index a page as AMP, it must be described as canonical

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

AMP improves the visualization of both the desktop page and the mobile page. This is achieved through the use of several pre-generated script and style libraries specifically tailored to look good, functional and comfortable and responsive, containing everything you need to quickly and easily visualize your pages.

Google says, “Focus on the user and everything else will come from itself.”

2. “AMP-library of beautiful and responsive web pages”

 

“AMP library of beautiful and responsive web pages (also fast and easy to use)

AMP improves the design of the mobile version and beautiful desktop rendering. In addition, it enhances pagination and responsive design.

 

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

It does not require JavaScript and HTML, only CSS

In fact, AMP doesn’t allow JS at all, except for its own scripts. HTML is processed seamlessly, converting to the required format when submitting the page. As for CSS, it should be borne in mind that in addition to the standard one given to us by the project, all CSS created by us personally must be described in a custom css tag in the header of the page. Local style elements are not allowed.

  • AMP HTML Library

The conference introduced some new additions and revisions to the syntax and functionality of the AMP elements. More interesting are:

srcset: Responsive Images using AMP – the ability to create sets of responsive images for different resolution screens

Media: Media searches for each item

  • Embedding

Ways to embed elements from some of the social networks on AMP pages, such as YouTube and Twitter, through tags such as

<amp-youtube>
<amp-twitter>

  • More building parts

Other building blocks already standardized and implemented for general use in AMP libraries, such as carousels, videos, lightboxes, sidebars and more. Here are some of the tags that describe them:

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

  • Use for advanced

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

<amp-animation>

Particularly impressive was the presentation of animations on AMP pages, here are some key points:

Thin background around web animations;
Excellent pixel animations that can’t be done with CSS

<amp-animation>

Scroll-bound Animations (in the process of experimentation);
Parallax scrolling

<amp-position-observer>

Parallax 3D Cube Animation

 

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

Here are some sources that have been introduced to us and would be helpful if you decide to start with AMP:

Need some inspiration?

If you need some inspiration to make your awesome AMP pages, see some examples below.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван.