Site icon Samuel Schmitt

What’s new with Web Stories in 2021?

Samuel Schmitt

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:

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.

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:

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:

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:

You have to manage the GET and POST requests coming from the web story in your backend logic.

Both requests have similar fields:

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:

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 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:

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:

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:

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.

Exit mobile version