Important Components of AMP for Email

AMP for E-mail has emerged as a tool to raise the bar of user-experience by bringing fun and interactive elements into play. With AMP, you can provide your Email subscribers with a dynamic experience inside their mailboxes.

The inclusion of such elements becomes possible due to the support of certain AMP-enabled components. In this article, we will introduce you to the AMP components that support AMP for Email.

MEDIA COMPONENTS OF AMP FOR EMAIL:

Amp-img

This tag replaces the tag of basic HTML. However, you also need to add "width" and "height" in the map tag. This helps in calculating the layout as per every e-mail. Your code will look like this -

<amp-img src="img.jpg" width="350" height="200"

Moving on, you can also make your images responsive by adding a simple attribute called "responsive". This attribute controls the layout. You code will look like this -

<layout="responsive" alt="My Image">

Also, you can use an attribute called srcset attribute which helps in specifying images to different viewports and pixel densities. This attribute behaves the same was as they do with non-AMP images.

Amp-anim

This attribute is similar to in treatment and helps in embedding gif to your amp e-mails. However, it lets the AMP runtime to lessen the CPU usage while the animation is not on-screen.

There is also a possibility of adding playback functionalities in the future.

DYNAMIC COMPONENTS OF AMP FOR E-MAIL:

Amp-form

With this attribute, you can use the forms and the input fields in an AMP document. The amp-form helps form submission of HTTP and XHR(XMLHTTPRequest). You can also render assess success and error response with submit-success and submit-error attributes.

Amp-selector

With , you can control the list of options and help the users in choosing an option. Also, the contents can go beyond text. For example, you can include as a list in your AMP e-mails.

Amp-bind

Amp-bind adds the elements of interactivity with the help of data binding and JS-like expression. Here is an example code to help you out -

Amp-state

Amp-state is the null at the beginning an helps in adding interactivity beyond the pre-built amp components.

Amp-list

The helps in fetching dynamic elements from the endpoint of CORS JSON. The endpoint contains data and it sends a response back to a specified template.

LAYOUT COMPONENTS OF AMP FOR E-MAIL

Amp-accordion

An accordion helps the viewers in having a glance at the content's outline. After this, they can directly jump to a section of their choice. The outline of the content is expandable and collapsible. This tag contains many sections. Every has two direct children. The first child is the heading of the section; you can click and tap to expand or collapse a section.

Amp-Carousel

The amp-carousel helps in displaying the images in a very attractive manner. The images can be of different sizes and thus, you need to mention the height attribute in advance. Every amp-carousel component's immediate children are an item in the carousel. Every node, also, has an arbitrary HTML child. The carousel contains items and navigational arrows.

Amp-fit-text

This attribute helps in adjusting the fit and the size of a text within a particular area. When a content is present in an amp-fit-text element, it finds a particular font size to fit in a specified space.

Amp-layout

This attribute helps in maintaining the aspect-ratio and makes the layout more responsive. This is quite similar to the existing AMP component but support every HTML markup as children.

Amp-sidebar

This component helps in displaying meta content like navigation links, menu, buttons etc. The sidebar reveals the outline while the main content remains hidden.

Latest Articles

article

How to write high-converting persuasive copy for emails

mailmodo-arrow-right
article

How to verify emails and clean email list

mailmodo-arrow-right
article

How to preview and test an AMP email?

mailmodo-arrow-right