The AMP framework provides you the flexibility to create various types of layouts in your AMP emails. And the amp-layout is used to achieve layout construction in AMP emails.
This guide will discuss what amp-layout is and different ways to use it in your AMP emails.
Table of contents
What is amp-layout?
The amp-layout is an AMP email component that allows you to create custom layout types in your AMP emails. The supported layout types include: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive, container.
With the help of these components, you can create layouts that adjust according to the user's device screen size or stay fixed no matter the screen size or follow the flexbox model and more.
Features of amp-layout
Here are some notable features of amp-layout:
✅ Make elements to fill all the available space
If you want your elements to fill the entire available space, add the fill attribute to their parent container. Now the elements will fill their parent container, both horizontally and vertically, in your AMP emails.
✅ Create fixed elements
Instead of filling up all the available space, you may want your elements to maintain their exact size in your AMP emails. For such scenarios, you have to use the fixed layout type. This will make your elements keep their size without any support for responsiveness.
✅ Add any HTML markups
If you’re familiar with the HTML and its tags, you can use those in the amp-layout. For example, you can include the <img> tag to add images or use the <b></b> tags to bold text content. You can also include SVG elements to draw diagrams that don’t pixelate with changes in screen size.
Applications of amp-layout
Here are some scenarios where you can use the amp-layout:
1. Create responsive email layouts
Incorporating responsive email design in your email campaigns is a great way to make your emails more accessible and adaptable to different devices, screen sizes, and email clients. For example, the responsive layout type allows elements to take available space and resize their height as per their aspect ratio.
2. Rearrange layout elements
If multiple elements are placed in a horizontal layout, they may not look good if the screen size shrinks too much. To tackle this, you can use the container attribute and set it up so that it will rearrange items from that horizontal layout and shift them to the bottom. This makes your email layout cleaner and hence better experience for your users.
Wrapping up
There is a lot of room for experimenting with email layouts, and amp-layout gives you the tools to create different layouts.
If you’re curious about the other AMP components, then check out our guides on amp-form, amp-autocomplete, amp-accordion. These components help you create things like interactive survey forms, custom accordion layouts, autocompleting text fields that make your AMP emails more appealing.
