-
Book Overview & Buying
-
Table Of Contents
AMP: Building Accelerated Mobile Pages
By :
In the last chapter we briefly saw how to fix validation errors with amp-img by adding layout="responsive" to the image element, but there wasn't much explanation about what was happening. When we added the layout attribute, we were tapping into AMP's powerful layout system.
AMP's layout system is key to reducing rendering and scrolling-jank. AMP uses a static layout system that relies on a set of attributes to define the layout and sizing of elements. These are layout, width, height, sizes, and heights. With these attributes, AMP is able to efficiently calculate the layout and size of each element even before anything is fetched from the network.
AMP's layout system is built on web technologies, and to use it effectively, you'll need to have an understanding of CSS and HTML, and to be able to use them constructively to support your desired AMP layouts. We'll see this later in this chapter.
The layout attribute...