Packt+ | Advance your knowledge in tech

You're reading from AMP: Building Accelerated Mobile Pages Create lightning-fast mobile pages by leveraging AMP technology

Product type Paperback

Published in Oct 2017

Publisher Packt

ISBN-13 9781786467317

Length 370 pages

Edition 1st Edition

Languages

JavaScript

Tools

AMP

Concepts

Web Design

Author (1):

Ruadhan O'Donoghue

View More author details

Table of Contents (17) Chapters

Preface

1. Ride the Lightning with AMP FREE CHAPTER

2. Building Your First AMP Page

3. Making an Impression - Layout and Page Design in AMP

4. Engaging Users with Interactive AMP Components

5. Building Rich Media Pages in AMP

6. Making Contact - Forms in AMP

7. Dynamic Content and Data-Driven Interaction

8. Programming in AMP - amp-bind

9. When AMP Is Not Enough - Enter the iframe

10. Ads and Analytics in AMP

11. AMP Deployment and Your Web Presence

12. AMP - Where It's At and Where It's Going

13. AMP Components

14. Actions and Events

15. amp-bind Whitelisted Functions

JavaScript whitelisted functions

16. amp-bind Permitted Attribute Bindings

Laying out elements in AMP pages

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.

The AMP-HTML 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.

Note

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

The layout attribute...

The rest of the chapter is locked