Best practices for creating an AMP story
This guide provides recommended practices that you should implement when creating an AMP story.
Tell engaging stories
AMP stories are a great way to reach your audience with visual, immersive storytelling. This document outlines some guidelines for telling engaging stories and for getting the most out of the AMP story format. Before we dive into the details, here are some key things to remember:
Make your AMP story complete and self-contained
Keep your reader engaged with your story. Don’t require them to click links to other websites to get essential information.
This AMP story from The Washington Post is a good example of using minimal text and full screen portrait images and video to give the reader a good understanding of the topic.
Use video and animation
Bring your stories to life with motion. Video and animation can help keep readers’ attention and increase understanding. Don’t be afraid to use video frequently, and then balance it out with static content.
USA Today’s AMP story about Beyonce uses a good combination of animation and video.
Include branding and a date in your stories
Help users understand who created the story and when it was published. Including brand attribution and a publication date on the cover page can help foster trust.
This AMP story from CNN about traveling in Italy makes it easy to see at-a-glance who published the story and how recent it is.
Keep reading for additional tips on making the most of your AMP stories.
This story uses full-bleed images, video, and animations to create an engaging reading experience. It tells a complete story, and it includes branding and a publication date.
Landscape images and lack of motion make this story less immersive and less interesting. The big links to the full article on every page compete with other elements on the page and distract from the story.
Text
Keep it concise
Keep your audience engaged by avoiding large blocks of text. AMP stories is a visually-driven format. Use images to tell your story, and add text to enhance it.
| DO | DO NOT |
|---|---|
| Try to keep text to just the essentials. Varying type size and style to break up blocks of text can increase scannability. | A big wall of text like this can be hard to read and may discourage engagement with your story. |
Make sure it’s legible
| DO | DO NOT |
|---|---|
| A high contrast makes the words easy to see. | With poor contrast, your words and images may blend, making the words hard to read and the story harder to follow. |
| Highlighting the text can make the words stand out and help keep your readers focused on your story. | Using light-colored text over a busy image makes the words hard to read. |
Images
Use portrait, full bleed images
Create a compelling, immersive experience with full-bleed, portrait (9:16 ratio) images, which take full advantage of the mobile screen.
| DO | DO NOT |
|---|---|
| This full bleed image creates an immersive experience. | Landscape images don’t fit mobile screens well. They provide a less powerful experience and may even distract the reader. |
Crop images mindfully
Keep the focus on what’s important. Crop out unnecessary or distracting elements, and make sure the key subject of the photo is in focus and complete.
| DO | DO NOT |
|---|---|
| This image is cropped to align with page content and supports the main idea. | With this crop, it’s unclear where the reader’s focus should be and what idea the image intends to convey. |
Bring still images to life
Make stories more dynamic by adding motion to static images. For example, you can animate photos with fly-in, rotation, or fade-in effects, as long as the animation supports the style of your story and does not distract from your content.
| DO | DO NOT |
|---|---|
|
|
|
| The motion in this example helps support the main idea and adds a dynamic element to the page. | This static page is functional, but it may be missing an opportunity to be more engaging to readers. |
Video
Use Portrait, Full Bleed Assets
Create a compelling, immersive experience with full-bleed, portrait (9:16 ratio) images, which take full advantage of the mobile experience.
| DO | DO NOT |
|---|---|
|
|
|
| This full bleed video helps readers focus on a single key subject. | This landscape video lacks the immersive feeling and may distract readers. |
Use captions
Enable users to experience your stories anywhere. In some settings, listening to audio is not an option. So while sound can enhance your story, listening should not be required. Use captions to keep readers engaged even when the volume is turned off.
| DO | DO NOT |
|---|---|
|
|
|
| Captions help keep your audience engaged, even when they can’t listen to the audio. | Without captions, your audience needs to be able to listen to audio to follow your story. This may limit who engages with your content and when they are able to do so. |
For more technical video guidelines see this section below.
Animation
Pay attention to timing
Animation can enhance stories when it’s visually appealing, easy to understand, and the timing is right. It’s important to deliver the right combination of style and duration. For example, simple animations should take less than 500 milliseconds, but panning on a background image should last longer.
| DO | DO NOT |
|---|---|
|
|
|
| This Ken Burns effect on the background image is subtle and makes the experience more immersive. It creates a right balance with the text overlay together. | Here, the Ken Burns effect is too fast. The motion is distracting and makes it hard to focus on the headline. |
Choose the right style
Pick an animation style that matches your story’s aesthetic. AMP story offers a presets library to help you find a style and intensity that works for you and won’t distract from your content. It's easy to overdo animation, so keep the approach subtle, simple,and clear. You want your story to stand out, not your animation.
| DO | DO NOT |
|---|---|
|
|
|
| Sliding the title up and fading in the subtitle guides the reader to follow the content of the page in the right order. | This rotation animation doesn’t add value to the story. Instead, it creates visual noise and may be distracting to readers. |
Build animation sequences with multiple objects
One way to be creative with motion is to animate multiple objects into a sequence, rather than having them all move together with one effect. Elements can have different effects and durations, but should all work together to deliver one message.
| DO | DO NOT |
|---|---|
|
|
|
| Animating these objects separately makes this visual more interesting and enjoyable. It also helps each item stand out more distinctly. | Adding rapid motion to one big block like this doesn’t add to understanding, and it can be distracting. |
Other story components
Use embeds strategically
Embeds can provide an added dimension to your story when used sparingly and presented in the right way. Include relevant content alongside the embed so that it’s an integrated piece of the story. You may need to enable interactivity for your embed.
| DO | DO NOT |
|---|---|
| The embed on this page integrates well with the rest of the layout. The headline, date, and background graphics help enhance the visual. | Putting the embed alone on the page looks unfinished and does not integrate with the full story well. |
Add additional content with attachments
Keep your AMP story streamlined by putting related content in attachments. This way, readers can easily dig deeper if they want to learn more about your story. You might use attachments for long blocks of text that don’t fit in the main story, or, if your story contains a highlight video, you might make the full video available as an attachment. Help readers navigate your content by designing the attachment to align with the rest of your story.
| DO | DO NOT |
|---|---|
|
|
|
| The embed on this page integrates well with the rest of the layout. The headline, date, and background graphics help enhance the visual. | Putting the embed alone on the page looks unfinished and does not integrate with the full story well. |
| DO |
|---|
|
|
| A highlight video can be a useful element in an AMP story. You can include the full-length video as an attachment, giving readers the option to dive deeper into your content. |
Be thoughtful with links
With AMP stories, you can add links anywhere on a page. When a link is tapped, a tooltip appears, letting the user know where the link goes, and allowing the user to confirm the action before leaving the story. It’s important to think strategically about the size and location of your links, as well as the frequency. Adding too many tappable elements to your pages can complicate story navigation and potentially frustrate readers.
| DO | DO NOT |
|---|---|
| The links on this page are clearly marked and surrounded by related content. They don’t interfere with story navigation. | The links on this page completely block the navigation. Readers will not be able to easily go to the previous or the next page. |
Desktop experience
Improve the desktop experience of your AMP stories by including landscape images. While AMP stories are primarily designed for mobile devices, some people do view them on desktop. By including both portrait and landscape styles, you can ensure that people see images in the format that’s right for the device they’re using.
Ads and sponsored content
Label affiliate links and sponsored content
Sponsored content should be clearly labeled, and any paid or affiliate links should use the nofollow attribute.
Technical Considerations
Background color
You should specify a background color for your AMP story pages. By having a background color, you provide a good fallback user experience even if poor network conditions prevent them from downloading any image or video assets.
- The background color should be representative of the dominant color on the page's background asset.
- Choose a color that allows for a smooth transition with the image or page itself. You can choose to:
- Pick a dominant color representative of the image/video.
- Pick a consistent theme color for all pages in the story.
- The background color should be different from the font color so that the text is readable even before the image loads.
Video
Specify a poster attribute
The poster is an image that displays in the UI until your video is downloaded. The poster can generally be the first frame of the video, although any image can work. However, you should choose an image that is representative of the video and allows for a smooth transition. If you are choosing the first frame, make sure it's not just a blank temporary frame.
The recommended dimensions for a poster image are: 720p (720w x 1280h) .
Example: Specifying a poster
<amp-video autoplay loop width="720" height="1280" layout="responsive" poster="images/kitten-playing.png"> <source src="videos/kitten-playing.mp4" type="video/mp4" /> </amp-video>
Specify <source> vs src
When specifying the source for an amp-video, use <source> child elements instead of the src attribute. By using the <source> element, you can specify the video type, as well as add more video sources. In the <source> element, specify the MIME type via the "type" attribute. For HLS videos, you must specify one of the following MIME types: application/x-mpegurl or application/vnd.apple.mpegurl. For all other videos, specify the video/ MIME prefix and the video format (e.g., "video/mp4").
Example: Specifying multiple source files
<amp-video id="video-page1" autoplay loop layout="fill" poster="https://example.com/media/poster.jpg"> <source src="https://amp-example.com/media/movie.m3u8" type="application/vnd.apple.mpegurl" /> <source src="https://amp-example.com/media/movie.mp4" type="video/mp4" /> </amp-video>
Size/Length of video
- For optimal performance, you should aim to provide videos that are no larger than 4 MB.
- For long videos, consider splitting the video over multiple pages.
- For the cover page, avoid particularly large videos.
Video formats
If you can only provide a single video format, provide MP4. However, where possible, use HLS video and specify MP4 as a fallback for browsers that do not yet support HLS video. HLS performs adaptive bitrate streaming, where the quality of the video can be altered to best suit the user's network connection.
NOTE – The HLS video format is not supported in the Chrome for Desktop browser (not even via emulation), so specifying an MP4 fallback is required for any desktop traffic to your page. To debug HLS videos, you'll need to use an actual mobile device via USB-debugging.
Video resolution
AMP 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:
| Video streaming type | Resolution |
|---|---|
| Non-adaptive | 720 x 1280 px |
| Adaptive | 720 x 1280 px 540 x 960 px 360 x 480 px |
NOTE – For mobile devices that differ from the 16:9 aspect ratio, the video might be cropped horizontally or vertically to fit the viewport.
Video codec
- For MP4, use
H.264. - For WEBM, use
VP9. - For HLS or DASH, use
H.264.
Video quality
Transcoding optimizations
There are various tools you can use to encode videos and adjust the quality of the video during encoding. Here are just a few:
| Tool | Notes |
|---|---|
| FFmpeg | Recommended optimizations:
|
| avconv | Recommended optimizations:
|
| Shaka Packager | An encoder that can also output the HLS format including the playlist. |
HLS segment size
Ensure the size of your HLS segments are typically no more than 10 seconds in duration.
Advance to next page after video ends
If attempting to automatically advance from one page to another after a video finishes playing, you should set the value of the auto-advance-after attribute of <amp-story-page> to the id of the video, rather than the expected length of the video. That is, use
<amp-story-page auto-advance-after="myvideo">
not
<amp-story-page auto-advance-after="9s">
This is because the video may not start playing at exactly the same time as the page is displayed, or the given length may not be correct, leading to a different between the exp
System Layers
System Header
The system header contains controls such as the mute and share icons, appears at a higher z-index than the background image/video. Ensure that no essential information is covered by these icons.
Aspect ratio
The page height varies across different browsers and devices. When designing assets on the page, use full-bleed assets based on a 9:16 aspect ratio. Don't leave any essential content close to the edge of the page as it may be cropped on some devices.