Introducing Stories in WordPress Visual storytelling for the open web
A presentation at WordCamp Asia 2020 in February 2020 in Bangkok, Thailand by Cathi Bosco
Introducing Stories in WordPress Visual storytelling for the open web
➔ Discover this new media: Web Stories ➔ Experience a Story on the open web together ➔ Explore use cases for Stories ➔ Learn how Stories for WordPress has come to be ➔ Demo! Walk through the visual editor together ➔ Review ads and how to add Stories to a site
What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat and so on… ➔ NEW: Stories live in the open web and now they are coming to WordPress next!
What and where are Stories now? ➔ Instagram ➔ Facebook ➔ ➔ NEW: Stories live in the open web and now they are coming to WordPress next!
What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat, TikTok short format video, and so on… ➔ NEW: Stories live in the open web and now they are coming to WordPress next!
What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat, TikTok short format video, and so on… ➔ NEW: Stories now live on the open web and they are coming to WordPress next!
How do Web Stories work in WordPress? Why does it matter? What problems are we solving for Users?
Awesome visual editor in the dashboard plugin in WIP
Own your own content! The WordPress way…
Engaging, fast-loading, full screen experiences with tappable interactions.
Searchable We want our Stories to be searchable! Web stories appear in Search under Images, Discover, Search, and News
Short format and visual content with ads can be a better user experience on the web!
User experience focused design Research shows us the way
User experience focused design Research shows us the way ● ● ● Performant Accessible Secure plus…
Healthy open web ecosystem Content creators decide how long the Web Stories lasts. No dark patterns.
Share across platforms & gain SEO benefits We want maximum SEO benefits for our content creation work.
Integrate and Share Publish Web Stories on your site and on your client’s sites, beautifully.
Marketing So many use cases to highlight!
Monetization and Ads
Example from the wild Link & QR Code Audience participation
What media and features can be included in a Web Story?
● ● ● ● ● ● ● ● ● ● Video Photos Text and hyperlinks Animations Ken Burns effects Extensive color palettes & styling with the visual editor Attachment pages Call to action (CTA button) Sidebar & Sharing Readiness to publish tabs…
Links in presentation story - interactive experience (add as Page Attachment) Note the Pulitzer prize awarded in early 2019 Demo attachment page
Use Cases and User Groups for WordPress
User groups ● ● ● ● ● ● ● Blogs (Hobby & Pastime) Business Ecommerce Membership (Community and Organizations) Enterprise (Publishing for example) LMS (Learning) Higher Education
Specific use cases
Travel stories “How to” stories (makers, builders, most things) Recipes Sports Events & Reporting Breaking News Plant & horticultural indexing Educational Political Cartoon/ commentary Stories for children - picture book Learning for children ABC’s, language, people, places, things Nature Fashion Popular Culture trends Visual blogging (personal & professional) Advocating for a cause Fundraising Community building Marketing and Promotional purposes Illustrations & animated storytelling Invitations Ambassadors for eCommerce - (See me climb this mountain, buy these shoes) eCommerce Historical Lessons Interviews Social Justice Health and Wellness Lifestyle A single and specific website experience as a story Stories that grow with live updates for events and specific live experiences Schools + Organizations for community building Fan appreciation stories (Lady Gaga love etc) Museum and gallery exhibitions Event albums - engagements, weddings, etc Announcements for events all scales Artists & Art Hobbies A story as a stand-alone Ad Photographers & Videographers Simple articles The digital National Geographic or Life Magazine of the 2020s Paid Ambassadors for YourTube and Insta etc… Animals Humor Podcasting attachment page 10 tips on how to save money for example Travel stories “How to” stories (makers, builders, most things) Recipes Sports Events & Reporting Breaking News Plant & horticultural indexing Educational Political Cartoon/ commentary Stories for children - picture book Learning for children ABC’s, language, people, places, things Nature Fashion Popular Culture trends Visual blogging (personal & professional) Advocating for a cause Fundraising Community building Marketing and Promotional purposes Illustrations & animated storytelling Invitations Ambassadors for eCommerce - (See me climb this mountain, buy these shoes) eCommerce Historical Lessons Interviews Social Justice Health and Wellness Lifestyle A single and specific website experience as a story Stories that grow with live updates for events and specific live experiences Schools + Organizations for community building Fan appreciation stories (Lady Gaga love etc) Museum and gallery exhibitions Event albums - engagements, weddings, etc Announcements for events all scales Artists & Art Hobbies A story as a stand-alone Ad Photographers & Videographers Simple articles The digital National Geographic or Life Magazine of the 2020s Paid Ambassadors for YourTube and Insta etc… Animals Humor Podcasting attachment page 10 tips on how to save money for example Specific use cases
The Story Behind Stories
Gutenberg and Proof of concept in 2018
Project Restart at the beginning of 2019
Another Restart: Moving away from Gutenberg
Why did we choose Gutenberg?
Existing block based system
Existing needed features
Starting with little effort
Why did we move away from Gutenberg?
Design conflicts
Working “against” Gutenberg
Not being in control of the tool
Implementation overview
Options we considered
Choice: React App
Connection to WordPress
The WordPress way…
Using templates Having something of value to say
How the Web Stories tool helps to create beautiful stories: Walk-through Demo
3 types of ads ● A page in a story - like in a magazine ● ●
3 types of ads ● A page in a story - like in a magazine ● An entire story can be an ad ●
3 types of ads ● A page in a story - like in a magazine ● An entire story can be an ad ● Affiliate links
How to integrate Stories into your blog
Work In Progress: Web Stories Plugin
Legacy: via AMP plugin
Do I need an AMP compatible website?
Embedding Stories to your posts
Future planned features
Shared open template library
AI features
This presentation was built with Stories!
Presentation link Special thank you to XWP, Google & WordCamp Asia 2020 Cathi Bosco @BeTheBreeze Miina Sikk @MiinaSikk
