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.
Topics covered in Chapter 3 include the following:
- AMP layout and design, and the
layoutattribute - Responsive images in AMP
- Art-directed images and image
srcset - CSS styling, media, and element queries
- Fonts and text layout
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for examples: news-start.html
- Responsive feature image with
amp-imgandsrcset: feature.html - Related content layout with
float: related-float.html - Related content layout with
flex: related-flex.html - Related content layout with
flexand media queries: related-flex-media.html - Related content layout with
flex, media queries, and art-directed images: news-related.html - Using placeholder images: placeholder.html
- Using custom fonts: fonts.html
- Pullquotes: pullquotes.html
- Final AMP news page: news.html
Download code
Download all code for this chapter: ch3.zip