Summary

In this chapter, we learned about layout and presentation in AMP. We improved our article page with the help of various AMP layout techniques, SVG graphics, image art-direction, and CSS styling. This added flair and improved the appeal of the page. While building this we learned about the AMP layout system, the layout attribute, the use of custom fonts, and some new custom components.

We also saw how to use responsive images, and how to build responsive canonical AMP pages. We saw how to implement the blurred placeholder image technique that are used by sites such as Medium and Facebook. And we saw how to use SVG in AMP pages, and how to implement text that will fit into any container.

The layout and style techniques we introduced are static with respect to user interaction: Users can consume the content, but they can't interact with it. We'll see in the next chapter how we can improve on this and engage the audience further by introducing interactive layout and components.