Making an Impression - Layout and Page Design in AMP

In this chapter, we will learn about layout and design techniques in AMP. We'll build on the news article example page from the previous chapter by adding typical article page features. We'll explore various presentation techniques, such as related-content thumbnail lists, and pull-quotes, and we'll see how to handle layout on larger screen sizes with responsive design. We'll look at how to include custom fonts and options for laying out text. We'll also expand our understanding of CSS in AMP pages by seeing how media queries can be used to deliver alternative styles and layouts at the page or the individual element level.

The following list summarizes what we'll learn:

• AMP layout and design, and the layout attribute
• Responsive images in AMP
• Art-directed images and image srcset
• CSS styling, media, and element queries
• Fonts and text layout