Written by A lot of improvements are coming to the web stories.
Since Google launched the Web Stories format back in 2018 (formerly known as AMP Stories), many great features emerged over time.
So, what’s new with web stories in 2021?
At the Google I/O 2021, the team in charge of web stories shared the newest features:
- 360° images and video components
- Polls, quizzes and results
- A testing mode
- A playbook to help you design your website with web stories embedded the right way
If you are already using web stories (or didn’t start yet), these new features will give you more ways to shine on the web with your blog, website and SEO activities.
Table of Contents
Web Stories, immersive storytelling content for the open web
Web Stories are stories made for the open web.
They share similar features to the ones from social networks. The main difference is that you can embed them on your website and they can be found on Google Search.
You can get organic traffic from those web stories.
If you are not familiar with Web Stories, start with this introduction article explaining what is a web story. It might be helpful to understand the rest of this article.
Today, we will explore the latest news and most recent features offered by web stories in 2021.
In May 2021, at Google IO, the team behind the web stories format shared great insights. You can watch the replay.
They also created a fantastic demo web story showcasing the newest features. Watch it here. (Better from a smartphone.)
We will now decorticate the new features and understand how you can leverage web stories for your blog, content marketing and SEO.
Embed 360° images and videos, explorable by gyroscope
A great feature, you can embed 360° media assets, images or videos in web stories.
Then the user could from his mobile explore the scene by moving around his smartphone. This is an excellent way to enhance the experience and offer more immersion.
On the technical side, it is pretty simple to add this new element to your web stories.
First, add the following script to the page.
<script async custom-element="amp-story-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script> Then if you want to create a new page/slide with a 360° image or video, simply add the tag <amp-story-360>. Its child element must be an amp-img or amp-video.
<amp-story-page id="p3">
<amp-story-grid-layer template="fill">
<amp-story-360 layout="fill" controls="gyroscope">
<amp-img src="mountain.jpg"
layout="fill"
alt="360 image of a mountain">
</amp-img>
</amp-story-360>
</amp-story-grid-layer>
</amp-story-page>Some recommendation and other things to know:
- Use a 2:1 aspect ratio for the asset
- The recommended size of the asset is 2048 x 1024
- You can define an initial point of view and as well create a movement between 2 points
How to create a 360 image?
While checking this new features, my main question was: How to create a 360° image? (Maybe you are asking yourself the same question!)
My solution to creating a 360° image is straightforward: Take a panorama picture with a smartphone.
Maybe there is another solution to create such 360 images. Anyway, the panorama feature of my iPhone did the job.
You can judge by yourself here with a demo story. The result is pretty good.
(Please note that your device must have a gyroscope feature to view the story and its 360° images, so grab your smartphone and click on this link).
For more information about this feature, read the official documentation about 360 media components.
Make interactive polls and quizzes from web stories
Interactive elements such as quizzes, polls and results are now available:
- Poll let you select between 2 to 4 options and display the percentage of votes already done (by other users).
- Quiz creates a kind of trivia game experience, the story displays options, and you have to guess the correct answer.
- Result is a special component that is used together with poll and quiz. Based on the user selections, it will display a personalized page/slide. You can use aggregate data from the polls and quizzes and build a multi-page experience.
I let you imagine the fun and gamification tactics you could implement in web stories to promote a product and gather user information.
These interactive elements are easy to create (on the front-end). You define the question and set of options and the answers.
<amp-story-interactive-binary-poll
id="pickoutfit-poll"
class="outfit-poll"
animate-in="scale-fade-up"
prompt-text="Which style?"
prompt-size="large"
chip-style="transparent"
endpoint="https://webstoriesinteractivity.googleapis.com/v1/interactives"
option-1-text="Formal" option-1-confetti="👔"
option-2-text="Casual" option-2-confetti="👖"
></amp-story-interactive-binary-poll>However, you might be wondering how to store and retrieve the user selections.
For this, you will need a backend server.
You will have to develop your own backend and storage logic. Also, to communicate with the web stories, you have to respect some rules.
Let me describe the main points to consider and how to design a backend to collect polls and quizzes data from a web story.
Create a backend server for web stories
You might have noticed the following properties in the AMP Interactive tag: endpoint.
This is where you define your backend server URL and its endpoint.
By creating a backend server, you collect user inputs from web stories and send back to the story the result of the previous polls entered by other users.
The interactive component communicates with your backend in two ways:
- With a GET request: Calling your backend to retrieve information about the previous polls or quizzes and display information within the web story.
- With a POST request: Once a user selects an option in the poll or quiz, the answer is sent to the server and stored.
You have to manage the GET and POST requests coming from the web story in your backend logic.
Both requests have similar fields:
- interactiveId: the base64encode(CANONICAL_URL of the webstory) + “+” + element.id
- interactiveType: 0 for quiz, 1 for poll, 2 for results
- endpoint: your endpoint
- ampId: client ID that identifies the session
Basically, the web stories will communicate with your server with these kinds of URL (example from the demo web story seen above)
You have to understand the API structure to store the information and return the correct data when needed.
To store data, the web story will make a post request to your endpoint and send you the selected option.
On your end, you have to store an interactive object in your database (e.g. MongoDB) and store the following element. Here how this element could look like:
- Id = Unique Id (generated by the DB)
- InteractiveId = interactiveId
- Type = 0 or 1 or 2 (poll, quiz, result)
- Client = ampId
- Option = option_selected
To retrieve data and display percentage to the user, the web story will make a get request to your endpoint.
You have to create the logic on your end and retrieve all the interactive objects (in your database) with the correct InteractiveId and aggregate their options and count them.
In your response, send an options object.
That’s the overall design to build a backend server. (Easy, isn’t?)
As a side note, I didn’t build a backend server but just shared its logic with you today.
I assumed that you could have a backend developed with NodeJS or your favourite framework in a couple of days.
However, if you are a blogger (like me) and you are writing content and creating a few web stories to grow your blog: Building a backend server might be an overkill.
Hopefully, the web stories builders will offer the poll and quizzes features very soon (or are already offering them), and you could use one of them to create web stories.
If you have a larger website or are a publisher and plan to create web stories at scale and want complete control over the data collected, building your own backend for web stories could make sense.
You know now the way to go (or ask me again.)
For more information, read the official documentation about AMP interactive components.
Test your web stories on multiple devices
Simply add #development=1 at the end of your story URL, and it will open a test mode.
Then you can select on which mobile devices you want to test your story. As you can see below, it will display side by side your story rendered by different devices.
It is a great way to check the consistency of your story and be sure that texts and images are correctly displayed.
Learn how to make a fabulous UX with the Web Stories Playbook
How to embed web stories on your website? How to blend the user experience with web stories?
It is the aim of the web stories playbook: giving you UX best practices with web stories.
The playbook shows the main scenarios to embed web stories on your website and come with a Figma file to support your design.
The main takeaways of the playbook are
- Your web stories must be easily identifiable by your users.
- Design the right entry point on your website based on your need.
Your web story must be identifiable in one sight
First, be sure that web stories within your site are correctly identifiable by your visitors. You can leverage some UI elements to highlight them:
- Use a poster image with a round corner
- Add a page stack to show that an asset is a web story
- Include the web story icon over the poster image
- Set the headline and optionally add the author
A good practice is to visually indicate the story against the other assets (text, images, video) on the web page.
Each entry point type is designed to fit different needs
The second important point of the playbook is the various way to use web stories in your website or how to offer entry points to your stories.
The author, Ryan Warrender, of the playbook highlights the main entry points as follow:
- Singleton: To showcase a single story inside an article
- Carousel: To showcase multiple web stories
- Compact display: Organize web stories by categories
- Author highlight: Organize web stories by author – similar to the view on social network
- Dedicated page: Create a page where users can see all our web stories.
On my website, I’m using the dedicated page approach, and you can visit this page where you will find great web stories about SEO.
If you want to dig more into this guide and find out the best approach for your website, below interesting resources:
Going further with Web Stories
Do you want to start creating your first web stories?
Your next step is to check this complete guide about Web Stories. You will learn everything in 6’000 words:
- What is a (Google) web story
- Why it’s important for SEO
- How to start creating your first web stories
A dozen of companies are offering great tools to build stories. Check out the complete review of the web stories builders and editors.
Finally, don’t hesitate to share your most beautiful web stories here in the comments.