Author Archives: Paul Bakaus

Five steps to create your first Web Story

Creators everywhere have embraced stories, the new tappable storytelling format made up of videos, GIFs, images, text and other visual elements. Audiences love engaging with stories content — and the best part is that they’re not just limited to social platforms. Web Stories are available on the open web, meaning they’re crawlable by search engines and you can share them — and link to them — just like any other webpage. Web Stories also don’t automatically disappear and can stay live as long as you like.

It’s easy to create your own Web Story — and takes just five steps. Here’s a deeper look at the process.

1. Choose a visual editor

A visual editor is a program that enables you to produce and customize your photos, videos and graphics. They often come with simple functionality and built-in templates, so you don’t need to be an expert at video editing or design to make beautiful and engaging content. Web Stories for WordPress, MakeStories and Newsroom AI are just a few examples that might work for you. See more suggestions here.

2. Draft the story

The best Web Stories tell a complete narrative from the moment they are published to keep the reader engaged. Since all pages of a story are published at once, it's important to think through the narrative of your Web Story in the same way you would for a blog post or video. 

Although the creative process varies from person to person, we recommend outlining your Web Story in Google Docs. The Storytime team uses this script template to plan each page’s content and any text, videos, photos or animations we plan to use.  

3. Find the visual assets

Choosing the right imagery or videos is essential to creating a compelling Web Story. This can be the most time-consuming task, but if you’ve been blogging, you probably already have videos or other images you can use. It’s important to remember all full-page videos should be formatted vertically. That way your Web Story will use less bandwidth and load more quickly. 

screenshot of storytime episode with dog

How to convert a video into a Web Story helps you repurpose your existing videos.

4. Create the Web Story

Once you have your story drafted and all your assets in one place, it’s time to start building. When you’re first starting out, using your visual editor’s pre-made templates is the fastest and easiest method to build your Web Story. To begin, you’ll want to drag in an eye-catching video or image into the tool and add a call to action that will motivate your audience to click to learn more.

Stories are an inherently interactive form of media. Viewers can click forward and backward through the pages and follow links to engage. You can also try including quizzes and polls to increase engagement and interaction.

5. Publish the Web Story

Once you feel good about your Web Story’s media, layout and text it’s time to send it out into the world. When you’re using a visual editor, this is as simple as clicking the Publish button. 

And that’s it! Once you work through these steps you will have created your first Web Story. To see this process done live, check out our video Creating your first Web Story in less than 5 mins, from start to finish. And if you want inspiration from other web creators, here are some examples of best-in-class Web Stories.

storytime episode photo with mobile screenshots

 The Grand Web Story showcase features 10 great examples of Web Stories.

Three steps for turning a video into a Web Story

If you run a website, YouTube channel or blog, chances are you’ve produced a video for it. And you can easily reuse that content by converting it into a Web Story, which offers a few key advantages. As a Web Story, your video can be consumed at the viewers’ own pace, page by page, and they can navigate forward and backward. This makes it ideal for content like recipes or other instructional materials. Web Stories are also more flexible than videos because they can include links, quizzes and other interactive elements. In addition, Web Stories may appear in a carousel on Google Discover which can help you reach a new audience. 

In the video below, I share how to convert a video into a Web Story in three steps. This process is also useful for turning text-based content like blogs into Web Stories.

Here are the three steps:

1. Revisit the original video.

Videos and Web Stories are different formats. Don’t just aim to cut your video into Web Story-sized clips. You’d end up with way too many pages and the Story would lose its focus. Instead, revisit the original content and find sections where you can boil down the content to the core messages you want to convey. Each page of a Web Story should feature a single, contained thought to ensure a smooth flow. You’ll also want to start your story strong as most readers will decide to keep reading or quit within the first three pages.

2. Write a script for your Web Story.

Once you have identified the key points of your original video, you’re ready to build your Web Story’s script. It helps to include a summary of each page; any video, animation or photo assets that will be included and any text you’ll want to show on the screen. The Storytime team has this script template you can use to structure your script. It helps you maintain a balance between pages with video and pages with text. It also prompts you to decide if you want to dress up a page with gifs, quizzes, polls or other Web Story features

3. Create your Story.

The final step is to prepare your assets, trim your video clips to the desired length and jump into your favorite visual editor. We’ve listed some of the most popular ones on stories.google.   With the script as guidance, you can build your Web Story page by page. To optimize your workflow, use placeholders for videos and photos and import your assets once the design is finished. Also, be sure to add important metadata like alternative text and captions before you publish. 

Everyone has a different creative process. Some people create mock-up pages while scripting, while other people allow these steps to overlap as they work. You are the author of your own Web Story, so free to write, design and create in whatever way works best for you. 

What’s different about Web Stories

Stories have become a popular format for digital content and social media. It seems that most social apps have their own take on stories, but what about Web Stories? On the surface, all story variations may appear to be the same. For example, they all allow you to tap to go forward and backward, swipe up to open an attachment, or swipe right to go to the next story. That said, let’s check out some features that distinguish Web Stories from other story formats.  You can also see a full breakdown in the video above.


Web Stories:

1. Are designed for high-quality editorial or journalistic content. You write a full Story on your topic before publishing it instead of posting one page at a time. 

2. Have no expiration date. You can publish a Story, and it will stay up as long as you like.

3. Are published by you and hosted on your servers.  You host and own your Web Stories and content instead of posting them to an app or other platform. Your copyright, your content, your rules.

4. Have no editorial restrictions. Create what you want, not what’s defined in someone else’s terms of service.

5. Let you earn money from ads or sponsored content. Unlike stories on other apps and platforms, when you include ads in your Web Stories, you get to keep the revenue.

6. Are accessible like any other webpage. They can be accessed on any browser or device you use to access the web — instead of just in one app. They can also be created in a number of ways, including the tools listed on stories.google

7. Are indexed by search engines.
People can find your Web Stories through search and they can be linked to from your other pages.

8. Are highly customizable. You can use any web font and can add custom animations or even modify the underlying CSS.

Web Story Editor in WordPress

Web Story creation tools offer many formatting options.

9. Can have embedded links. There’s no friction in getting to the content you need or to say “link in bio.”

10. Act like standard web pages. This means you can view them in different browsers, on different devices, and use tools like Google Analytics to measure their performance.

11. Are responsive. A Web Story can automatically resize and adapt to fit different screen sizes, like those for desktop computers, mobile phones, and tablets. (Not yet supported by all Story creation tools.)

12. Can feature interactive elements. You can run quizzes and polls from inside your Web Stories.  (Not yet supported by all Story creation tools.)

Quiz functionality within a Web Story

Web Stories can have polls and quizzes.

13. Can include new content. New pages can be added in real-time to your Web Stories, and users will be notified of them and able to view them without having to refresh their screen.

To learn more about Web Stories check out our Web Stories site, and the “Storytime” videos on our YouTube channel.

New in Web Stories for WordPress: animations and ads

If you’ve boarded the Web Stories train in the last few months and are using WordPress as your website’s content management system, then chances are you’re creating stories using Web Stories for WordPress. To help you make the most out of the visual editor, here’s a roundup of all the latest and greatest features since we’ve released version 1.2 in early December (and subsequently 1.3 this week).


Monetization via Ad Manager and AdSense

AdSense and programmatic demand via Ad Ad Manager is supported in the updated editor.

One of the best advantages of Web Stories compared to their social counterparts is that they can be monetized by you, the creator. That’s one of the reasons we consider stories primary content for your website, similar to blog posts or videos. The Web Story ad ecosystem is still emerging, but AdSense and even programmatic demand via Ad Manager is already supported. You can now enable these integrations for your stories in the plugin’s settings without any coding necessary.


Page Layouts

Page Layouts section of the plugin makes designing stories more flexible.

Sometimes you don’t want to switch to an entirely new story template. You just want more choice for list styles, sections or covers without changing the rest of your story. To make designing and layouting stories more flexible, you can mix and match individual pages easily via the new Page Layouts section.


Basic Animations

Text can animate in using one of the built-in animations in a Web Story template.

The new built-in animations allow you to add a dynamic pinch to your Web Stories. Better yet, templates come with built-in animations beyond the basic effects. Test how one of your story pages will animate using the play button in the right bottom corner below the current page.


This is only the start of animations in the editor. In the subsequent months, we’ll follow up with combined effects like Ken Burns-style animations and a powerful timeline that allows you to control properties like easing, delays and more in more granular detail.


Border and Corner Radius

Borders and border radius are can be used around text blocks

These two additions might not be as flashy as some of the other new features, but borders and border radius are basic building blocks that should make your life easier for many types of layouts.


Pre-Publish Checklist

A check list feature shows any critical issues with your Web Story before publishing

Remembering everything you should do as part of your Web Story creation process is a lot, even if you’ve internalized all episodes of Storytime. To help you not forget anything important, the editor now has a pre-publish checklist tab.


The pre-publish checklist is alerting you about critical issues that may make your story ineligible to appear on platforms such as Google Discover, and offers recommendations about common accessibility shortcomings like low contrast and more.


In addition to these new capabilities, the team has fixed many dozens of bugs and improved interoperability with other plugins. Best of all, since all development happens in the open, you can find all the details in the public release log, and explore what’s coming next in the public roadmap.


Have a burning question we didn’t answer? Ask us anything on Twitter and Instagram, request product support in the plugin forums and file bugs or feature requests on Github.

Web Stories, not Web Teasers

We've seen amazing momentum from web creators trying their first steps with Web Stories. With more adoption comes more content exploration, guidance and questions, and it’s still early days for Web Stories, so we’re all figuring things out together as a community.


Web creators around the world are figuring out how Web Stories complement their portfolio, and one particular thing we've seen folks try out is teaser content: Web Stories that are essentially advertisements for some other content, like a blog post or full-length video.


Unfortunately, from what users are telling us, this isn't what they want. Instead Web Stories are best when they tell a full story and aren’t used to “tease” other content. Readers don’t like to feel forced to click through to a connected blog post to finish reading. While Web Stories can help grow traffic to your domain and raise your visibility, they likely will not work as a pure acquisition channel where users have to click through to complete their content journey. We want to see you succeed, so let’s discuss what to do instead. 


Let’s address the elephant in the room, the reason why we’re talking about all of this in the first place: monetization. We know that many blogs and websites have their monetization strategy well crafted and want to drive users to their main property. That makes sense. However, with Stories, it's important to think about the users consuming them and how Google showcases them.


Web Story Ad

Web Story advertisements

What you might not know is that you don't have to rely on converting traffic to your blog pages to monetize. You can directly monetize Web Stories with in-between-page ads. Well-optimized blog posts might still make you more money today, but ad networks are working on building out and expanding their Web Story integrations, so you should see both CPMs and fill rates improve over time.


Quality content will make your Web Stories find an audience

Google wants to send users to the best content, so the quality of your stories is very important in determining if they show up on Search and Discover. In other words: A critical ranking signal at Google is the quality of your content. And a one- or two-page teaser for your blog post doesn’t tell a satisfying story to a reader, so Google will do its very best to not show these to users.


To be clear, this doesn’t mean that you can’t link to more extended deep dives on your blog. Like always, there’s nuance, and acceptable ways of adding value in the moment while directing readers to your blog, YouTube channel or e-commerce storefront. Here’s how you can do it.


A great example of a recipe story from Pinch of Yum

A recipe Web Story from Pinch of Yum

Dos:

  • A shopping inspiration list that highlights products and links out to places where you can buy them.

  • A short version of a recipe with complete ingredients listed that leaves more detailed instructions behind a click. It inspires readers to cook and see the end product, plus allow them to dive deeper into the recipe if they prefer. But it is still a story with a beginning and an end.

  • A story that connects to an article about the same topic, but both convey the information with different angles. For example, creating a story about the “making of” the recipe. 


Don'ts:

  • A three-page story that is a list of the “10 best sci-fi TV shows,” but stops at #3 and forces the reader to click through to your blog for more.

  • A one-page story that mentions a recipe in the headline, but is just a bunch of photos that redirect to the website.

  • A list highlighting beautiful cities in Europe, but just listing a city and a photo and pointing to the blog link for any actual information..


To readers of Google Discover, Google Search and other places, Web Stories are a standalone form of engaging content, so please treat them as such. After all, I'm pretty sure you’d be equally frustrated if you went to a magazine rack and discovered that it’s only the covers and all pages are missing! 


Showcase your Web Stories proudly on your website

When you focus on quality storytelling and give Web Stories that first-class treatment next to your blog posts and videos, don’t be afraid to proudly showcase them on your website. Embedding Web Stories in a carousel or gallery on your site doesn’t just refresh the look and feel of your site, it also makes content much easier to consume to your most loyal readers, improves the organic ranking of your stories and diversifies your traffic sources.


Web Stories allow you to reach an entirely new audience on Discover and beyond, and contrary to their social story counterparts can have links, so publishing the best stories will build your brand, help you acquire new loyal readers and engage readers organically.


We can’t wait to see what stories you’ll tell.

Web Stories, not Web Teasers

We've seen amazing momentum from web creators trying their first steps with Web Stories. With more adoption comes more content exploration, guidance and questions, and it’s still early days for Web Stories, so we’re all figuring things out together as a community.


Web creators around the world are figuring out how Web Stories complement their portfolio, and one particular thing we've seen folks try out is teaser content: Web Stories that are essentially advertisements for some other content, like a blog post or full-length video.


Unfortunately, from what users are telling us, this isn't what they want. Instead Web Stories are best when they tell a full story and aren’t used to “tease” other content. Readers don’t like to feel forced to click through to a connected blog post to finish reading. While Web Stories can help grow traffic to your domain and raise your visibility, they likely will not work as a pure acquisition channel where users have to click through to complete their content journey. We want to see you succeed, so let’s discuss what to do instead. 


Let’s address the elephant in the room, the reason why we’re talking about all of this in the first place: monetization. We know that many blogs and websites have their monetization strategy well crafted and want to drive users to their main property. That makes sense. However, with Stories, it's important to think about the users consuming them and how Google showcases them.


Web Story Ad

Web Story advertisements

What you might not know is that you don't have to rely on converting traffic to your blog pages to monetize. You can directly monetize Web Stories with in-between-page ads. Well-optimized blog posts might still make you more money today, but ad networks are working on building out and expanding their Web Story integrations, so you should see both CPMs and fill rates improve over time.


Quality content will make your Web Stories find an audience

Google wants to send users to the best content, so the quality of your stories is very important in determining if they show up on Search and Discover. In other words: A critical ranking signal at Google is the quality of your content. And a one- or two-page teaser for your blog post doesn’t tell a satisfying story to a reader, so Google will do its very best to not show these to users.


To be clear, this doesn’t mean that you can’t link to more extended deep dives on your blog. Like always, there’s nuance, and acceptable ways of adding value in the moment while directing readers to your blog, YouTube channel or e-commerce storefront. Here’s how you can do it.


A great example of a recipe story from Pinch of Yum

A recipe Web Story from Pinch of Yum

Dos:

  • A shopping inspiration list that highlights products and links out to places where you can buy them.

  • A short version of a recipe with complete ingredients listed that leaves more detailed instructions behind a click. It inspires readers to cook and see the end product, plus allow them to dive deeper into the recipe if they prefer. But it is still a story with a beginning and an end.

  • A story that connects to an article about the same topic, but both convey the information with different angles. For example, creating a story about the “making of” the recipe. 


Don'ts:

  • A three-page story that is a list of the “10 best sci-fi TV shows,” but stops at #3 and forces the reader to click through to your blog for more.

  • A one-page story that mentions a recipe in the headline, but is just a bunch of photos that redirect to the website.

  • A list highlighting beautiful cities in Europe, but just listing a city and a photo and pointing to the blog link for any actual information..


To readers of Google Discover, Google Search and other places, Web Stories are a standalone form of engaging content, so please treat them as such. After all, I'm pretty sure you’d be equally frustrated if you went to a magazine rack and discovered that it’s only the covers and all pages are missing! 


Showcase your Web Stories proudly on your website

When you focus on quality storytelling and give Web Stories that first-class treatment next to your blog posts and videos, don’t be afraid to proudly showcase them on your website. Embedding Web Stories in a carousel or gallery on your site doesn’t just refresh the look and feel of your site, it also makes content much easier to consume to your most loyal readers, improves the organic ranking of your stories and diversifies your traffic sources.


Web Stories allow you to reach an entirely new audience on Discover and beyond, and contrary to their social story counterparts can have links, so publishing the best stories will build your brand, help you acquire new loyal readers and engage readers organically.


We can’t wait to see what stories you’ll tell.

Tenor, text sets, captions come to Web Stories for WordPress

If you’re already using Web Stories for WordPress, we have a sweet new update for you—and if you’re not, now is the time to get started.


Web Stories for WordPress 1.1 is the first major update after the initial stable release and includes three big updates: Great typography at your fingertips with the help of the new font-aware text sets, countless high performance GIFs powered by Tenor and caption support for videos.

High quality text sets are available in the Text Tab of the editor

On the text tab, you’ll now find a list of high quality text sets created specifically for editorial use-cases. We partnered with the typography experts at iA, known for its award-winning app iA Writer and  world-class typography craftsmanship. The result is a set of carefully created combinations that let you mix and match different harmonious typography, and a dynamic toggle (“Fonts in Use”) that shows you only text sets that match what you’re already using, so you can be confident that your choices pair well together.


GIFs can be embedded in your Web Stories with Tenor integration

While Web Stories are a natural way to tell editorial stories, that doesn't mean they can't include fun visuals. Go wild and embed the perfect animated GIF into your story, just one click away courtesy of Tenor. And as an added bonus, we use high performance video instead of the GIF format behind the scenes to make sure stories load quickly.

Video captions make your video more accessible.

Video captions make your video more accessible.


Finally, watching Web Stories is getting a little easier for those who have hearing loss, or are simply in a situation where they can't turn up their volume. You can now upload video captions directly in the editor, making things easier to reach audiences who require text. Learn about the required VTT format and start adding them to all your videos today.


If you’ve made a cool story with the editor, tell us about it on Twitter or Instagram. And if you’re experiencing any bugs, let us know in our Support forum. We can’t wait to see what you make next.

New in Web Stories: Discover, WordPress and quizzes

Things are moving fast around Web Stories. To keep you in the loop, we’ll be rounding up the latest news every month. You’ll find new product integration and tooling updates, examples of great stories in the wild and educational content around Web Stories. 

Web Stories arrive in Google Discover

Web Story carousel on Google Discover

Last month we announced that Web Stories are now available in Discover, part of the Google app on Android and iOS that’s used by more than 800 million people each month. The Stories carousel, now available in the United States, India and Brazil at the top of Discover, helps you find some of the best visual content from around the web. In the future, we intend to expand Web Stories in Discover to more countries and Google products.

New tools for the WordPress ecosystem

Web Stories for WordPress by Google

There are more and more ways to create Web Stories, and now WordPress users now have access to not just one but two visual story editors that are integrated into the WordPress CMS: Google’s Web Stories for WordPress and MakeStories for WordPress.

MakeStories also gained six new languages (English, German, French, Italian, Portugese and Russian), and has new features including new templates and preset rulers. They’ve also made it easier to publish your Web Stories with a new publishing flow that highlights critical pieces like metadata, analytics and ads setup. You can also now host stories on MakeStories.com, but serve them off your own publisher domain.

MakeStories new publishing workflow in action in WordPress.

MakeStories new publishing workflow in action in WordPress.

There are many different options out there to build Web Stories, so pick the one that works best for you from amp.dev’s Tools section.

Quizzes and polls are coming to Web Stories

We’ll also be covering Web Story format updates by the Stories team here as they’re at the forefront of innovation of Web Stories: you can expect the features they bring to Stories to appear in the visual editor of your choice sometime after.

Web Stories with interactive components like polls and quizzes.

Web Stories are getting more interactive with quizzes and polls, or what the Stories team call Interactive Components. These features are currently available in the format, and you can learn more about them in developer documentation.  Several visual editors are working on supporting these new features so you can use them without any coding necessary on your end. 

Learn how to create beautiful Web Stories with Storytime

One of the best ways to learn the in’s and out’s of Web Story-telling is our educational Storytime series, with a new episode arriving every week. If you haven’t yet started watching, we encourage you to give it a try.

In October, we interviewed the Product Manager behind the Google Discover integration; talked about the art of writing, remixing, optimizing and promoting Stories; analyzed the fabric of a great Web Story; and covered all sorts of editorial patterns that work for Web Stories.

And you can check out all of these videos as Web Stories:


5 inspiring new Web Stories

We wanted to highlight some of the amazing work from our creator community this month: Pinch of Yum’s story on broccoli cheesesoup was mouth-watering, and we learned so much from USA Today’s FAQ on gold. On Input Mag, we saw an artist turn gadgets into pixel art, and NDTV showed us how to make keto chicken momos. And right in time for Halloween, there’s Den of Geek’s roundup of Amazon Prime horror movies.

We’ll be back next month with more updates. Until then, let us know if you made a cool story you think we should feature. Tell us about it on Twitter or Instagram.

10 Web Stories, and what’s great about them

Web Stories are a new content format on the web, so we’re all learning together what works and what doesn’t when it comes to creating them. To help web creators develop a sense of what makes a story great, we’re kicking off a series to share tips and ideas from high-quality Web Stories we’ve discovered in the wild. Watch the above episode of our YouTube series “Storytime” for this first batch of stories, read it as Web Story on your phone, or scroll on if you prefer reading.

The tablet-friendly high adrenaline story

Not only does this story turn it to 11 from the very start through smart use of video and a super streamlined font, it’s also a great example of a responsive story—that is, a story that works just as well on tablets and desktop as on mobile.

The video-first completely bonkers jet set story

Many of the best videos are those whose content simply wouldn’t convey anything in written form. Similarly, there are topics that work much better as a Web Story. This story is completely bonkers to look at, and it’s a great example where the media carries the story, not the text.

Why not just do a video? Well, for one, the same content as a video would be awkward to consume when you’re on your phone but not in a position to turn up the volume, and you can click through at your own pace when you’re in a hurry.

The ultra-relatable first-person cooking story

A typical recipe blog post doesn’t convey the aspect of cooking well, and most videos are too stressful as you can’t easily skip or pause at the right moments!

This story solves both problems with an ultra-relatable, first-person narrative from a chef that calmly walks us through the process of making Japanese Curry at the pace that works for you.

The ultra-efficient, skip-ahead edutainment story

The educational skip-video technique works not just for recipes! It’s also great for edutainment stories that a user would want to consume at their own pace.

The shoppable book recommendation story

Stories can be a great format to present shoppable listicles like this summer reading list featuring 10 Black-authored books. Unlike the many slow, ad-plastered full-page slide shows on the web, this story is extremely accessible and pleasant to consume.

The inspiring food truck owner portrait with immersive background audio

This story does a lot of things right. First, it uses background music to great effect, making it very “lifestyle-y.” Then it simultaneously zooms in on the food and the subjects, told in a first-person narrative. Web Stories are great for portraits like this.

The curiosity-inspired “You’ll never guess what this is” story

Stories aren’t just useful for lifestyle topics. Here’s a science story presented in a very engaging way. The cover page gets one hooked immediately by asking the audience to participate, which makes the reveal and subsequent explanation even more satisfying. Beautiful.

The “I-tricked-a-teenager-into-learning-art-history-by-packaging-it-in-a-story-that-slaps” story

This story about Salvador Dali uses psychedelic visuals, modern text highlighting, formatting and animations to teach art history in a surprisingly accessible way. 

The nature-always-looks-better-with-Ken-Burns story

Not all stories need flashy animations, illustrations or even video. Sometimes it’s enough to pick a classic typography style and let the content breathe and speak for itself. This story by Lonely Planet demonstrates this beautifully, using only subtle Ken Burns-style animations on images to immerse the reader.

The whimsically illustrated animated how-to story

Right from the cover, this story understands you. It’s instantly relatable not just because of the whimsical illustration, but because this story is about the reader. It starts with a reader question, then continues with bite-sized, easy to grasp quotes from an authoritative subject expert, and finally ends with a strong call-to-action on where to find more. 10/10, would read again.


That's it for today! Subscribe to the blog for more great Web Stories, and if you see a great story we should feature, let us know on Twitter.