Best practices for creating a successful Web Story
Important: this documentation is not applicable to your currently selected format websites!
Web Stories are an immersive, tappable and easily shareable storytelling format. Web Stories are built using a subset of the AMP framework. Web Stories are an opportunity for creators and publishers to structure content in a full-screen, visually rich, and engaging mobile-first experience for users.
Web Stories are snackable, and readers like quick bites in their micro moments. Waiting for the subway or grabbing coffee opens up opportunities for condensed content consumption. Ensure each bite engages and delights by following these best practices for creating a satisfying snackable Web Story.
At a glance
The main takeaways to creating a satisfying, snackable Web Story:
- Tell a full and interesting story.
- Maximize the impact of your cover page with high quality imagery and a catchy title.
- Make it visual with videos and images that fit and fill the user's screen.
- You can say a lot, with less, especially when using visual imagery. Aim to keep text below 10 words per page.
- Make sure your visual content is accessible - provide appropriate alternative text for images.
- When using videos, shorter ones are best so try to stick to less than 15 seconds.
- Some people and some situations require viewing without sound. Keep content inclusive by adding captions to videos.
- Give readers something to tap through. An average length of 10 to 20 pages enables most authors to tell a good narrative.
- Don’t overuse animations or embed, and pay attention to transition timing.
Know your narrative
Plan the story introduction, create an arc and build up to a complete narrative. Once you know what you want to say, break it up. Each Web Story page should convey a single idea that works cohesively with the others.
Tasteful and filling content
Each Web Story must be a minimum of 4 pages and ideally less than 30. Web Stories need to be well told and easy to consume. If needed for your narrative, go longer than 30.
Pick me! Packaging
Your cover page is your Web Story's packaging. It's the first thing viewers will see, and, if they don’t open it, the only thing they will see. Make sure it's appealing! A good cover page has two elements, eye catching imagery and a short memorable title.
Imagery
Use a high-quality portrait image or video that fits the full screen. Let your fans know its your brand by including a favicon and logo.
Title
Keep the title clear and clean, ideally under 10 words in less than 40 characters. Include the author and publication name and add a publish date if the story is time sensitive.
Brand and date
Readers need to know who published the Web Story and when. Include a brand attribution and a publication date on the cover page. This fosters trust and, if a user likes your content, loyalty. This Web Story from CNN about traveling in Italy makes it easy to see at-a-glance who published the story and how recent it is.
Visual treat
Allure readers in with quality visuals that captivate their attention and text they can read easily and quickly. Mainly use high-quality videos and images, but add some animation sparkle where it makes sense.
All images and videos should take up the entire screen with minimal use of letterboxing where it makes sense.
Video
Videos are highly engaging to readers, definitely include as many as possible in your Web Story. Aim for videos that are less than 15 seconds. If you have a longer video, consider breaking it up into smaller chunks.
Web Stories are consumed in portrait mode, so keep in mind the following:
- Shoot video in high-end mobile devices when possible.
- Shoot at 720p rotated (1280h x 720w).
- Shoot in at least 24 frames per second.
| 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. |
Ensure your content is accessible. Resize videos to make room for text and captions at the bottom. Not all readers will be able, or want, to hear video content.
| 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. |
Images
Use full screen, portrait images with good resolution (720w x 1280h).
Avoid landscape cropped photos.
Crop 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. Remember that the top and bottom might get cropped on some devices, so please test accordingly.
| 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. |
Text
Ensure text is readable. Size 24 font should be the minimum size used, but make it as large and legible as possible. Contrast text color with the story page background or image. Do not include images or videos that are text only.
| 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. |
Word Nibbles
Text should come in nibbles, not meals. Try to keep it under 200 characters or less per page.
Treat details like an ingredient list, make them available, but only if users ask. Include long-form text content in a page attachment. Page attachments communicate to user’s there's more to read. They can swipe up on their device if interested.
A page with text content longer than sentence may be unavoidable. Try not to let these take up more than 10% of the total story pages.
| 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. |
Animations
Animations are appetizing when done with purpose, such as adding motion to static images. You can animate images and assets with fly-in, rotation, or fade-in effects.
| 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. |
But, use sparingly, as animations can become unsavory if overused. Avoid adding too much of a single flavor and spice with animations sparingly.
Timing is everything
Pages should enter their completed state quickly - an animation should not stop a user from tapping to the next page - but not too fast! 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. |
Consider getting creative with motion. Animate multiple objects into a sequence, rather than having them move together in a single effect. Elements can have different effects and durations that work towards a cohesive animation.
| 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. |
Perfect pairings
Pair your animation style with your story’s aesthetic. Use the available Web Story animation library to help you find a style and intensity that works for you without distracting from content.
| 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. |
Hungry for more
Allow users to explore your topic further by embedding third party content, attaching additional information and linking out to new locations.
Strategic embeds
Embeds provide an added dimension where relevant and presented pleasantly. 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. |
Attach additional content
Keep your Web Story streamlined by putting related content in attachments. This way, readers can dig deeper if they want to learn more about your story. Readers navigate a story easier when additional content is attached to relevant pages.
| 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. |
Attachments work well with long blocks of text, or if your story contains a highlight video you can include the full video as an attachment.
| 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. |
Link to new locations
You can add links anywhere on a Web Story page. Tapping on a link causes a tooltip to appear. This tells the user where the link goes and allows them to confirm the action before exiting the story.
| 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. |
Think strategically about size, location and frequency of your link appearances. Too many tappable elements can complicate navigation and frustrate readers.
Code or create
Web Stories can be hand-coded from scratch or built using creation tools.
If you are hand coding a Web Story, you will build them from scratch using the AMP framework. Follow the Create your first Web Story to get started. After you’ve created your Web Story, make sure it’s valid AMP. You can test yours in the AMP validator. Read Web Story technical details for more information.
-