Web Stories are a new popular tool that allows users creative ways to promote business, products and attract customers. We have gathered some information on designing web stories using the new features and how others succeed!
What are Web Stories?
Web Stories are a web-based version of the popular stories format that blends 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 offer some distinct benefits to you as a developer and web creator.
First, Web Stories are made for the open web, allowing 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 standard web pages, they have no expiration date. Second, it is easy to monetize your stories. Third, you have the creative freedom to tell your story however you want. And finally, you can use the latest interactive components to create a visually immersive storyline.
While 2020 was a difficult and very long year for all, web stories continue to fill the lives of millions of people worldwide with creativity, inspiration, and joy.
Web Stories in Discover
Google aims to help users looking for answers with publishers and creators who have the content they’re looking for, and web stories are no different. Likewise, Google wants to help users find relevant stories about their interests.
Last year, Google brought Web Stories to Discover, part of the Google app on Android and iOS used by more than 800 million people each month. The stories carousel is now available in Discover in the United States, India, and Brazil. This carousel helps you find the best visual content from around the world from the brands and creators you love. In the future, Google intends to expand Web Stories to more countries in Discover and additional Google products.
In addition to Discover, Google continues to surface more stories across Search. Since the Discover Carousel launch, Google has seen content creators using the format to tell engaging stories. Readers saw everything from product reviews to recipes, to first-person travel guides. When tapping on a story in the carousel, you enter a full-screen and immersive experience with the option to tap to move forward to the next page or swipe to an entirely different story in the Carousel. To help jumpstart Web Stories, Google worked with a diverse group of publishers and creation tools to collaborate on the product and build out its features.
Publishers and creators of all sizes increasingly adopt 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 Google 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, putting dynamic storytelling front and center. As a platform for Google teams, it expands 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 in 2021.
Making 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 site can be difficult, especially if you’re not technically savvy. Thanks to the tremendous growth in the web story tool ecosystem, many great ways exist to create, design, and distribute your stories. There are many solutions to choose from, CMS plugins, drag and drop editors, mobile platforms, and more will help you create and distribute your stories. Of course, if you’re technically inclined, you can always code Web Stories yourself. Web creators worldwide are figuring out how Web Stories complement their websites.
We encourage you to tell stories you think need to be seen and get creative. You can command every pixel, and every story can be designed to fit your brand. So if you’re looking for inspiration, check out your Discover Carousel. You will find stories geared towards lifestyle content like beauty, fitness, science, entertainment, and more.
Incorporating Web Stories into Your Website
Now, let’s look at incorporating Web Stories into your website. First, Google encourages users to help readers discover Web Stories through entry points on your site.
Google has developed design elements that help readers instantly identify Web Stories. One element is flexibility, making it easy to integrate Web Stories into the look and feel of your site. Take the experience 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 have been direct-sold ads and affiliate links. Well, recently, Google Ad Manager and AdSense have launched programmatic ad support for Web Stories, enabling publishers to quickly turn on ad monetization and earn more from stories. The story ads are appealing: full-screen ad creatives that integrate seamlessly into the reader’s journey, keeping them engaged and delighted by the story content. As more people and publishers use the format, Google continues to answer questions and provide guidance.
Google Web Creators
Google recently launched a Google Web Creators program to provide tools, guidance, and inspiration for people who make awesome content for the web. You can start by visiting stories and Google for resources, best practices, and inspiration.
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. One of the cool things you will see is the reached support for 360 media. The full-screen 360 media, consisting of videos and images, provides your audience with a truly immersive and interactive experience. There are endless opportunities to use this feature in fashion, travel, gaming, and so much more.
Up next, interactivity. In a demo story, the reader is prompted to pick an outfit on that day for the character. The demo story uses a binary pool that gives a reader a real-time breakdown of the most popular option. The smart feature displays loading percentages and an emoji confetti animation after the reader select, making it a fun way to keep your reader engaged. Using a poll at the right moment of your story is a great way to connect you and your audience. You can level up from a poll with a quiz. Quizzes serve 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, one of which is correct.
Now let’s talk about design flexibility. These interactive components give users control, overlook, and feel while ensuring user experience and interaction consistency. The format provides three main UI themes: light, dark, and transparent, but allows users to customize fine details with CSS or quickly choose between simple levels like shadows. Users 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. Based on their selections, the backend will aggregate results from polls on all the other pages and lead the readers to the relevant result page. You, as a creator, can create customized result pages based on the reader’s choice and offer unique experiences to each of your audiences.
Now, to 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.
Web Story DevTools
Developing content in a portrait-based aspect ratio can be challenging and look great across all devices. So, we made testing easier by creating a tool that shows the matrix design breakpoints. Then, 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 various 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.
Always use the DevTools to ensure 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. Diving into the code allows you to create templatized stories generated from a content pipeline in ways manual visual editors cannot support. We invite you to contribute to the open Web Story format and help Google fill in the gaps, file bugs, and work together on the future roadmap. You can learn more by visiting amp.dev/stories or visit stories.google.
We specialize in internet marketing, including SEO, social media marketing, website design, content marketing, video marketing, email marketing, SMS marketing, mobile web marketing, online reputation management, CRM integration, and more. We also provide consulting services, including conversion analytics.