The 3 Benefits and 8 Best Practices of AMP Stories to Maximize Engagement

The AMP open source initiative paved the way for faster mobile web experiences. The adoption of the AMP format not only increased the speed of mobile web pages, but it also improved conversion rates. AMP pages helped generate a 10% increase in website traffic and a 20% increase in sales conversions:

Even with those impressive numbers, the format lacked one thing — a story based immersive web page experience. AMP stories were launched specifically for this purpose.

AMP stories follow the same format as Snapchat, Instagram, and Facebook stories and allow brands to create visually striking content to capture user attention with storytelling.

This post will highlight everything you should know about AMP stories — benefits, the components to create them, examples, and whether or not the format applies to advertising.

What are AMP stories?

AMP stories is a visual storytelling format for the open web. The stories allow readers to immerse in a tappable, full-screen content. The format enables publishers and marketers to create visual content that is fast, open, and user-first:

The format was initially launched with eight publishers including Vox Media, CNN, Mashable, and the Washington Post. After the format gathered good traction for these brands, it was opened to all AMP developers.

Users view a lot of content on their mobile devices, and this format uses bold text, images, videos, and graphics to get the mobile user’s attention as quickly as possible and allows them to consume content in a way that’s not taxing:

AMP stories appear in Google Images, Discover, Search, and News.

The portrait format is naturally conveyed in the Google Feed with the story card featuring a tall image that dominates most of the screen. The stories are labeled as “Featured visual story,” tapping on the story opens the standard Chrome Custom tab for an AMP story.

The overflow menu in the top right lets you access the standard browser controls, and the Google ‘add to collection’ feature is also present in the app bar.

AMP stories appear in the Google feed to the left of the home screen and also in the Google app.

Here’s what you can expect to see when tapping to open an AMP story in Google search results:

Benefits of AMP stories

Similar to other web pages, brands and publishers can host AMP story HTML on their website and can link to it from any other page to drive views. Discovery platforms use techniques like pre-renderable pages, optimized video loading, and caching to optimize delivery to users.

The Google AMP story format comes with preset, flexible layout templates, standardized UI controls, and components for sharing and adding follow-up content.

You should consider creating AMP stories because they are:

• Fast: AMP stories load quickly and provide users a smooth experience.
• Immersive: The stories make for an immersive experience since they expand and visually fill the user’s screen. The tappable format offers creative opportunities for storytelling with design flexibility that engage audiences.
• Open: AMP stories are a part of the open web and can be easily shared and embedded across websites and apps without being limited to a single ecosystem.

Finally, since stories are built on top of AMP’s component library they support features like analytics, that you to collect and analyze user data for your AMP stories.

Creating an AMP story

To successfully create an AMP story, you have to first understand the parts that make up that story.

An AMP story is made up of individual pages, which are comprised of individual layers that contain basic HTML and AMP elements:

Each of these parts is translated into AMP components, where the story is presented by ‘amp-story’, the page is represented by ‘amp-story-page’, and the layers are represented by ‘amp-story-grid-layer’:

Now that we’ve outlined what makes up an AMP story, let’s look at the prerequisites before you move forward:

1. Basic knowledge of HTML, CSS, and JavaScript.
2. A basic understanding of AMP’s core concepts.
3. A browser of your choice.
4. A text editor of your choice.

After you have these things set up follow this tutorial to create your first story.

Best practices and specs

Consider the following best practices when creating an AMP story to capture user attention.

Choose a background color

When you select a background color you provide a good fallback user experience in case of poor network conditions. The background color should be representative of the dominant color on the page’s background asset, so it provides for a smooth transition with the images on the page itself.

Ensure text readability

This point refers specifically to text overlays. Choose a font color that contrasts with the background color because that provides a better user experience. Another thing you can do is add a gradient overlay between the text and the image to add contrast.

Use minimal text

To maximize engagement and ensure each word is read, don’t add more than one or two sentences per page.

Make it meaningful even without audio

If your story includes audio, make sure the story is meaningful even without sound because a lot of users view AMP stories on the go and may choose to watch it on mute. You can also add captions to convey your message while the sound is off.

Specify a poster attribute for video

The poster is an image that displays in the UI until your video is downloaded. It is usually the first frame of the video, although any image can work, you should choose an image that is representative of the video and allows for a smooth transition. The recommended dimensions for a poster image are: 720p (720w x 1280h).

Specify source for video

When specifying the source for an amp-video, use child elements instead of the src attribute. By using the child element, you can specify the video type, as well as add more video sources. In the child element, specify the MIME type via the “type” attribute.

For optimal performance, aim to provide videos no larger than 4 MB. With longer videos, consider splitting the video over multiple pages.

Story videos are always vertical (i.e., portrait view), with an expected aspect ratio of 16:9. Use the recommended resolution for the video streaming type:

1. For MP4 videos use H.264.
2. For WEBM videos use VP9.
3. For HLS or DASH videos use H.264.

Optimize videos

There are various tools you can use to encode videos and adjust the quality of the video during encoding but it’s recommended you use the following video optimizations:

Proceed to the next page after the video ends

To automatically advance from one page to another after a video finishes playing, set the value of the auto-advance-after attribute of to the id of the video, rather than the expected length of the video.

AMP stories examples

AMP stories are intended to communicate a message to your audience. Successful AMP stories contain high-quality assets, are visually rich, and share user relevant information.

Washington Post

Washington Post’s AMP story revolves around Hurricane Michael’s catastrophic damage:

Wired

Wired’s AMP story takes users on a tour of the Museum of Ice Cream:

People Magazine

People magazine’s AMP story features the royal wedding:

Regardless of the tone of your content, you can use AMP stories to convey your message in a more visually impactful way.

Advertising on AMP stories

Here’s how you deliver ads to AMP story pages:

AMP stories currently support two types of ad formats:

1. Single page ad: Each single page ad has a pre-defined CTA button and, ideally, directs visitors to a post-click landing page.
2. Sponsored story ad: This ad type is a standalone multi-story. It works like a sponsored story and publishers can drive traffic to it from the CTA URL button of a single page ad.

AMP stories also have new bookend capabilities which enable richer component support of visual layouts. You can add CTA links, text boxes, and portrait and landscape cards in ads.

The following is an example of Google Pixel 2 single page ad within a CNN AMP story:

As with all other ads, to ensure an optimized post-click landing page, make sure your AMP story and CTA button take visitors to a dedicated post-click landing page instead of a busy homepage.

Create mesmerizing visual experiences with AMP stories

The AMP stories format allows you to create lightning fast, visually rich storytelling experiences for your audience. Since the format is open source you can easily create stories for your brand, and because they exist on your website they can be found in search results, too. Plus their visually immersive format lends itself to more audience engagement.

Excited to experience what the AMP format can do for your brand? See the Instapage AMP builder in action and discover why Instapage is the most robust post-click optimization platform on the market.