Hi everyone, and thank you for tuning into our talk.
We’re excited to speak to you about what’s new with Web Stories
and how you can use this format to better engage your audience.
My name is Ryan Warrender, and I work on web product partnerships.
And with me today is Wei Hong, the design lead for Web Stories.
On the surface, all story variations may appear to be the same.
They're always full screen, portrait, and immersive.
And of course, stories allow you to tap to go forward
or swipe right to go to the next story.
So what are Web Stories? Well, Web Stories are a web-based version
of the popular stories format that blend video, audio, images, animation, and texts
to create an immersive way to reach new audiences on the web.
Web Stories keep the consistent experience you’ve come to love,
but offers some distinct benefits to you as a developer and web creator.
First, Web Stories are made for the open web
and allow creators and publishers to take control of their content.
These stories are yours.
They're published by you and hosted on your server.
And since Web Stories are just standard web pages,
they have no expiration date.
Second, it's easy to monetize your stories.
Third, you have creative freedom to tell your story your way.
And finally, you can use the latest interactive components
to create a visually immersive storyline.
We wanted to take a moment to acknowledge that 2020
was a difficult and very long year for all of us.
We wanted to say thank you to every creator and publisher.
Thanks for educating us, for inspiring us, and for entertaining us.
Your Web Stories continue to fill the lives of millions of people around the world
with creativity, inspiration, and joy.
Now let's take a look at what's launched recently.
Our goal at Google is to help connect users
look for answers with publishers & creators who have the content they’re looking for.
Web Stories are no different. We want you to find relevant stories
about the things you care about.
So last year, we brought Web Stories to Discover,
part of the Google app on Android and iOS
that is used by more than 800 million people each month.
The stories carousel is now available in the United States,
India, and Brazil in Discover.
This carousel helps you find some of the best visual content
from around the world from the brands and creators that you love.
In the future, we intend to expand Web Stories to more countries in Discover
and additional Google products.
In addition to Discover, we will continue to surface more stories across Google search.
Since the Discover Carousel launch, we’ve seen a diverse group of content creators
using the format to tell engaging stories.
Readers saw everything from product reviews to recipes, to first person travel guides.
The experience was designed so you can easily browse your interests.
When you tap on a story in the carousel, you enter an experience
that’s full screen and immersive.
Tap to move forward to the next page
or swipe to an entirely different story in the Carousel.
And to help jumpstart Web Stories, we worked with a diverse group of publishers
and creation tools to collaborate on the product and build out its features.
We have already seen thousands of websites publishing stories indexed by Google,
and we can’t wait to see what new use cases and narratives the rest of you come up with.
Publishers and creators of all sizes are increasingly adopting Web Stories
to create a compelling narrative experience for readers.
Bustle Digital Group has been working with Web Stories
since late 2019 and has adopted the format
across their nine brands: Bustle, Elite Daily and Input to name a few.
A major champion of Web Stories at BDG
is its editor in chief and executive vice president of culture and innovation:
Joshua Topolsky.
He shared with us his vision for Web Stories and the future of digital content.
He said, “Web Stories are a radical new tool in the evolution of digital publishing,
one that puts dynamic storytelling front and center.
As a platform for our teams, it expands our editorial language in countless ways.
As an experience for readers, it's simply magnetic."
BDG is part of the broader web community
that has made 13 million stories so far in 2021.
Hopefully, at this point, you’re interested in consuming stories or making your own.
Let’s learn how to get started and make the most of your Web Stories.
Whether you're an individual creator or a publisher,
you can easily create your own Web Stories today,
but figuring out how to configure, manage, monetize your own site can be difficult,
especially if you’re not technically savvy.
Thanks to the tremendous growth in the web story tool ecosystem,
there are now plenty of great ways to create, design and distribute your stories.
There are many types of solutions to choose from,
CMS plugins, drag and drop editors, mobile platforms,
and more will help you create and distribute your stories.
If you’re technically inclined, you can always code Web Stories yourself.
Web creators around the world are figuring out
how Web Stories complement their websites.
We encourage you to tell the stories that you think need to be seen.
Get creative.
You have the ability to command every pixel
and every story can be designed to fit your brand.
If you’re looking for inspiration, check out your own Discover Carousel.
You will find stories that are geared towards lifestyle content like beauty,
fitness, science, entertainment, and more.
Now let’s look at how you can incorporate your Web Stories into your website.
We encourage you to help readers discover Web Stories
through entry points on your own site.
Shown here are a couple of snapshots from our newly released playbook
that help you bring your Web Stories to your audience.
These entry point designs are flexible and can show one or multiple stories.
We’ve developed design elements that help readers instantly identify Web Stories.
One element is flexible, making it easy to integrate Web Stories
into your look and feel of your site.
Take the experience one step further by embedding the web player into your site.
The web player makes it easy for publishers
to allow your users to swipe between multiple stories
and even enables you to personalize what story to show next.
When stories are easy to discover, views and engagement can increase,
offering more opportunities to monetize your content.
Speaking of monetizing your stories,
until now, the primary ways publishers have monetized their web stories
has been direct sold ads and affiliate links.
Well, recently Google Ad Manager and AdSense
have launched programmatic ad support for Web Stories.
This enables publishers to easily turn on ad monetization and earn more from stories.
The story ads themselves are appealing:
full-screen ad creatives that integrate seamlessly into the reader’s journey,
keeping them engaged and delighted by the story content.
It's still early days for Web Stories,
so we're all figuring things out together as a community.
As more people and publishers use the format, we’ll continue to be there
to answer questions and provide guidance.
To this end, we recently launched a program called Google Web Creators
to provide tools, guidance, and inspiration
for people who make awesome content for the web.
You can get started by visiting stories.google
for resources, best practices and inspiration.
Also, if you want a crash course to learn the ins and outs of web storytelling,
check out our educational YouTube series Story Time
with a new episode arriving every week.
I’ll pass it over to Wei Hong, the design lead for Web Stories
to walk you through some new interactive components
to make your stories even better.
Thanks, Ryan, now let’s go over the new capabilities
that we added to help you create beautiful stories.
Our team has had a lot of exciting launch moments in the past year.
Now we want to focus on how Web Stories are getting even better
with a new set of highly interactive features.
As Ryan called out at the beginning of this session,
it was a challenging year for everyone.
We built makeshift home offices, spent countless hours on video chat,
and tried to balance our work life with our home life.
So we partnered with Sean Dong, who is an amazing 3D artist,
and built a demo web story together
to showcase the ups and downs of working from home.
With all the newest Web Story features,
the best way to understand just how rich and immersive stories can be
is to check out the experience on your phone.
Please feel free to follow along and get Home Warrior story on your phone
by either scanning the QR code or typing the URL.
One of the cool things you will see is the reach support for 360 media.
As shown in this demo, the reader steps into a pretty cool loft apartment
and is prompted to search for the cat.
A reader can move their phone left and right
and explore the room using the phone's gyroscope sensor.
The full-screen 360 media, consisting of videos and images,
provide a truly immersive and interactive experience to your audience.
There are endless opportunities to use this feature
in fashion, travel, gaming, and so much more.
Please check out the documentation link on screen for more implementation details.
By the way, I never did find that cat.
I hope you will.
Up next, interactivity.
In a demo story, the reader is prompted to pick an outfit
on that day for the character.
The demo story here is using a binary pool that gives a reader real-time breakdown
on what option was the most popular.
In this example here, of course, I'll pick the casual style over formal.
This smart feature displays loading percentages
and an emoji confetti animation after the reader makes a selection.
This is a fun way to keep your reader engaged.
Using a poll at the right moment of your story
is a great way to create a connection between you and your audience.
You can level up from a poll with a quiz.
Quizzes serves a much different purpose from a storytelling perspective.
Posts tend to gather more open feedback while quizzes provide a guessing experience
with two to four options, and one of which is correct.
As the example here, the quiz asks,
"What will be a good indoor temperature to help save energy during summer?"
After the reader makes a selection, it displays the voting percentages
and the correct choice will be highlighted in green and in red if it’s incorrect.
To add a little more fun, you can also add an emoji confetti effect
to celebrate the reader's victory.
Now let's talk about the design flexibility.
These interactive components are designed
to give you reach control, overlook, and feel,
while ensuring consistency of user experience and interaction.
The format provides three main UI themes: light, dark, and transparent,
but allows you to customize fine details with CSS
or quickly choose between simple levels like shadows.
Even better.
You can stitch together an engaging story
by using multiple pages of posts and quizzes.
If you type in the demo URL or scan the QR code,
you can take a phone poll to find out what animal you are.
This use case has endless possibilities
to set up different questions on various pages.
The backend will aggregate results from polls
on all the different pages and lead the readers
to the relevant result page based on their selections.
You as a creator can create customized result pages
based on the reader's choice and offer unique experiences
with each of your audiences.
Now let’s move on and test out your art knowledge.
Because the quizzes calculate correct and incorrect results
from each component, you can set the final result pages
to show different levels based on the reader's accuracy.
Please try out our quiz story here by accessing the QR code or URL.
Now we want to share with you these fantastic Web Story DevTools.
As many of you know, it can be challenging
to develop content in a portrait-based aspect ratio
and make it look great across all devices.
So we made testing easier by creating a tool
that shows you the matrix design break points.
Simply add #development=1 to the end of any web story URL
to access the Web Story DevTools.
With the support of DevTools, you can check your story
against a variety of devices and platforms.
You can also check for valid AMP documents inside the tool
and access a curated list of resources to get started with Web Stories.
Please always use the DevTools
to ensure the design responsiveness and present the best of your design
to all readers who access your story URL from various environments.
If you’re a developer interested in stories,
there’s no need to wait for the latest features to arrive in visual editors.
You can always code stories manually using basic HTML and CSS.
Plus, diving into the code allows you to create templatized stories generated
from a content pipeline in ways that manual visual editors cannot support.
We invite you to contribute to the open Web Story format
and help us fill in the gaps, file bugs,
and the work with us together on the future roadmap.
You can learn more by visiting amp.dev/stories or visit stories.google.
Before we close, would like to thank you for attending the session today.
We’re able to innovate because of the support we get from you,
our web creator community.
The continued growth we have seen
is made possible because of many amazing partnerships.
To end, here's the list of resources and our social handles
so you can stay connected.
We can’t wait to see what stories you will tell.
Thank you.