Episode 27: Web Stories for WordPress

Transcript

Jackie Hey everybody, it's Jackie D'Elia with rethink.fm and I'm here with Cathi Bosco and Monique Dubbelman for season three, Episode Three. And today we are going to be talking about Web Stories, formerly Amp Stories, and all of the things that that entails. And I think we'll kick it off and let Cathy kind of give us a an overview of amp stories and how it's moved into web stories. And for anybody who's not familiar with it. Cathi?

Cathi Awesome, awesome. I'm very passionate about Web Stories. So you should be warned. If you're talking to me about it. It's contagious. And then you're gonna want to experiment and you're gonna want to help your clients with it. And it's, it's new. It's in beta right now. So the beta release came out last week. And people are beta testing and you know, helping them fix bugs. And there's a few features still missing that will be part of the stable release, hopefully next month around that period of time. So let me give a little background. This project was kicked off in 2018. So it's been a long road to get here. And some of the most talented engineers that I've had the opportunity to work with have worked on this project. So it's been thrilling for me to go and work on the project a couple times throughout the lifespan of it thus far. So I have some insights on how things developed in 2018, it was developed as a proof of concept built on top of Gutenberg, which was still in development. So Gutenberg offered some nice opportunities with block based systems, things we could build, you had the ability to go and redo and undo thing, some versioning so it seemed like a good easy start to build a proof of concept to start building on Gutenberg. Then in 2018, Gutenberg launched do you do you both remember when Gutenberg kicked off right before WordCamp US like? We were I think, Jackie, you and I were in a car on a road trip to Nashville and it kicked off. And people were on planes on Twitter going, Oh my god, I'm sure my plugin just broke and I can't get my things to work with Gutenberg. It was so chaotic and was missing some really important accessibility things. I'm sure you can speak to that, Monique.

Monique I'm not saying anything.

Jackie I've got a I've got a question to interject here. So okay, for those that are not familiar with amp stories and web story, it does exist outside the WordPress ecosystem as well. In fact, I think it started outside of there and then was brought into WordPress. So can you just talk about how that how that works right now. in the world. Sure,

Cathi yes, amp stories exist. And publishers have been experimenting since 2018, I think was about when the big publishers like National Geographic, The Washington Post, all I mean, it, let's tell people what it is if they don't know. And then we can use those publishers as examples. So it exists in the in the world and in the team at Google was bringing it to the WordPress platform, so that WordPress, users could publish stories, own their own content, not be relying on fenced, walled gardens of Instagram and Facebook and things like that. So it's got a lot of noble starting points, which excite me still to this day. So publishers are using it. It's It's a tappable interface. It's a multimedia experience. It's new media. So it's a blend of mixed media. It's video, it's animations, it's copy. It's short format content. A lot of research has proven that the web needs better short content format content, if you will. So it's immersive. So you tap through, it's mobile, but big publishers are also building gorgeous, immersive desktop experiences as well. So it's photo journalism, it's video. It's text, the ads are not disruptive in the content. A page in a story could be an ad. It's, it's, it's just gorgeous. I really love it. I think it's something we need. I think that the teams have done a great job of building a proof of concept in WordPress and creating this custom post type for WordPress. So it was built with some amp components and it still is built on some amp components. The original proof of concept again was built on Gutenberg, that, that proved to be unsustainable. The Gutenberg editor is just changing and growing to updating, it was breaking multiple times a day. I mean, the engineers that work, oh, it's broken every hour throughout the course today, you know, something was breaking the editor. And I don't know how they sustained that type of work for as long as they did, but they got a working version on Gutenberg. We did some usability testing with it. It was not it was not terribly usable for end users. So there was a project restart a couple of times in ultimately, what they've built is a platform neutral or platform agnostic editor that sits in WordPress and the beta version you can download. We'll put the link in the show notes and you can experiment with it. It's really lovely. It's obviously a react app if you are tech savvy, and if you're not, you won't be using Gutenberg. But it's really gorgeous and useful interface. And it's a work in progress. I I spent a lot of time writing and thinking about the implications of web stories because as a UX person and as an open source advocate, we want to enable all of our users to be able to do things on their own and own their own content. And I think that's sort of the WordPress way like, everyone should own their own content, you should get your you should get SERPs, you know from your content. These you get your own URL for your own story. There's so many things that I just love about it. And I'm so excited to have. We need rich media experiences on the web to improve. Every time I walk by my bookcase in our house we have like my husband, I collected these all these hard bound copies of National Geographic like from you know, decade's worth and I walked by, I think, wow, that's that's what web stories could be for our generation of digital experience of like National Geographic and, and seeing what it's like in different places and photo journalism needs a leg up. It's really hard for photo journalists in this day and age, so yeah, I'm sidetracked.

Monique Yeah, well, yeah, I feel your excitement because I was, I was never really involved with amp stores are now web stories. And you both go web stories! web stories! I was like, "Ah, yeah. What should I do with that?" Who needs that? You know, I'm old fashioned. And we've got these stacks of National Geographic graphics in our house because people who've seen my talks maybe or you may know my partner is a book hoarder. So he's got like, all these books everywhere in our house somewhere. They're sorted by color, which is easy with National Geographic because they're all yellow. But we were talking about web stories and obviously for publishers there's a use case because you can make more and you can tell more engaging stories and that will be attractive for advertisers as well. But we've been also discussing like, Oh, where's the advantage for the end user and for me not working with this from development perspective. I started thinking like how can I use this? What what would be a good use case for me and I was thinking oh, I could tell you example about what what and I was explaining to the two of you what 'bitterballen' werer and you're going bitterballen, never heard of it. I was going 'croquets, croquets'! And you were like: croquets, never heard of it. Oh, I could tell this in a web story and you know, use some content. So I've been trying with that with the beta version. And obviously, it still lacks some functionality, right? It's in beta that's that's why it's in beta. Because you still miss I think some essentials, but the overall interface is pretty nice. I mean, you install the plugin and you get maybe I can tell a little bit about how it looks is that would that be interesting people can just shut their eyes and imagine, right. So once you've installed it, you get a new custom post type. With with its own, I think well thought icon in front of it, which totally makes sense to me. It's a big block with two small blocks on the site, which sort of simulates the horizontal scroll. Whereas with normal like tech space, things and blogs, you do a vertical scroll, but this is horizontal scroll. So you get one full screen. At the moment, it's more like optimized on the front end for mobile views. And for me, although it's different, you can best compare the output with Snapchat or Instagram. And my first thought was, well, why would I want to use something like web stories because yeah, it's already there, my Instagram, but you see a trend where where people move away from platforms like Medium or Facebook or whatever and want to go back to owning their own content, because then you're in control. And I think the same is here like with Instagram and platforms like that you never know what they're going to do with your content, who is like looking at your content through your camera and stuff like that. So I think that's one of the main advantages for the end user that you're the one who's in control of the content. You own it for the rest of your life. You know, you're the one who's who's using everything. So I tried to put out a web story about Bitterballen and I recorded it but I'll have to do it again because it took me forever and it will be really boring to watch me do some stuff because it's the software the plugin was good for me. It was very usable. But while I went I had to think about my story and think about what I wanted to say so I think, usually when this doesn't work, I don't know how you feel about it. It's not the software, you know, it's that people haven't thought about the content yet. And what they want to tell them what the purpose is. So yes, I think always the starting points, like think about the purpose of what you want to tell.

Cathi you hit the nail on the head. Monique, this is unforgiving. If you don't have something to say, yeah, unlike a blog post where you could drop in some, you know, random thought. Yeah, I mean, this is unforgiving. You really do have to have something to share and say I have something of value.

Monique So that was something I noticed. But then when you go in there have some really nice examples, templates that you can use. So if you change some pictures, then you've got your story within seconds. The things I was still, the interface looks nice. It's for me, it was intuitive. I'm not sure if you're not If you've not been working with more advanced content software or editing software before, if it's still that intuitive I've been struggling a bit with videos because I can see a use case for videos here. But the only way I got them to autoplay, or to play at all was to put them in my media library in WordPress. And that, for me is not the ideal situation. So I'm hoping once they launch the official version, you can embed like Vimeo or YouTube. And also it's still vertical way mobile based. So you've been talking and we'll share you examples about some really great desktop versions or examples. So it would be nice if you could like choose or if it will be responsive, right? If you could just make something that looks great on both desktop and mobile, but the overall experience was pretty good. They make it easy to do nice stuff with images like cut them out or share, do shapes and stuff. Like that the fonts and everything is it's very intuitive. So I liked how it worked. But it took me a lot of time to figure out my story at first. So that's, that's a tip I can give. And, yeah, I think in the end, you know, you have to choose like do do I make a podcast? Or do I do a vlog? Or do I do a blog or whatever. And now you can sort of combine all those techniques into one story, right? So that's, you don't have to choose?

Cathi Yeah, and you can have a story that sort of leads to longer format content. So you can have a story promoting a project or, you know, a series of classes or recipes or whatever. So I think it's a really exciting way to interact with content that is value. Also, there's an archive. Through the development of this project, there's been various things at one point He actually built an archive page on my website of my stories. And she also made it so that my story is populated into my blog archive page, which was really awesome. I think they're going in a little different direction. Now, I can't say for sure. But now they have embed, you can embed your amp story. It's not an app store anymore. It's wet story. You can embed your story into a page or a post. So imagine just dropping a story into a page or a post but also having a page or a post that has a series of stories that you could tap through or experience on the site. So I think that's a really exciting use case for stories in the WordPress experience.

Jackie What about, I know last year we worked on like you were saying, creating an archive page. And then also at one point, they had some features in there where you could put a category in that would give it a landscape. mode that would help you do a desktop experience. I don't see that in this new version, which now, just just to be clear, originally last year am stories required that you had the AMP plugin for your WordPress site. Now, that's completely separate. So you can actually use web stories on a site that doesn't have amp enabled and isn't using the AMP plug in at all. It's completely separate. They don't have some of those features in there, like how easy it was for us to put together an archive page of all of your stories or to intermix them in with your blog post. But I see I did some testing last week, and we could get it you could do some styling, there's some ways to enable an archive page for a custom post type. So it looks like there's possibilities for that. Whether or not that's a practical use of it. I don't know yet. I don't know how web stories On a WordPress site are going to be shown right? So are they are you going to be providing a link to a web story on social media or somewhere else where you, you open it up and get an experience and you're not really coming in the front door of your website like through your homepage and then going on for an Amp story.

Monique undefined

Jackie very well could be it could be great for showcasing products like even for a garden center, right? You know, I love garden centers, and I work with them quite a bit. So, um, one way would be to tell a story about maybe introducing somebody to a garden center that's never been there. And a web store is a beautiful way to do that because you can intermix the video, the still images and some really nice text that kind of walks you through and explains the experience you would get going there. The educational aspects are fantastic, and a lot of those web stories that we've seen from National Geographic In the Washington Post, and others tell a really nice educational story where you learn about a topic about, you know, clean water and Africa or some space program and the progress that they're making. And you get to, you get to take a short bit of information, but it tells it in such a compelling way that you actually remember things and you learn some things about it. So yeah, I think those applications are really good for this.

Monique Did you remember Encarta? The Microsoft DVD with an encyclopedia on it. Was it Microsoft Encarta?

Jackie I do I remember hearing that I don't think I've ever seen it.

Monique Right. I bought it because I always loved encyclopedias but the DVD experience and still looking at it now. It was probably not working very well from the knowledge we have now. But for me, it's sort of I remember that being like web stories because you could just click on a topic. So I don't know if this makes it a bit more like in the now, but I saw the comet last night! Did you get to see it as well? And then someone said, oh, there's a meteorite in that image. And I thought oh, I don't think I know the difference between a comet and a meteorite. And, you know, I can remember like on Encarta, you could just go click on comets, and then you get this lovely picture of comets and the solar system and you could zoom in and into a star and then get that full story or maybe get a video spinning and stuff like that. So I can imagine with web stories, you can make your own like Encarta encyclopedia kind of thing and go organically through different types of content. Yeah, one thing we've like we care about and that we've discussed and maybe that this is the moment where we get to that point? *Coughcough* Accessibility No? Yeah, ready for that? There's still some accessibility issues. And we've, well, we've had our things with that. And we're WordPress. Like I said, I wasn't gonna say anything about that. But still, accessibility is sort of like a closing thing. You know, you build something that oh, I, oh, we have to do something with accessibility. And a recent example was Twitter. They launched this audio feature, where you could like, listen to audio tweets with an animation in front of it. But that's not very accessible for people with hearing impairments. So a lot of people fell over them going like, Well, why are you launching this feature without taking this, you know, in the back of your minds go like, Oh, we need accessibility. And then it was like, Yeah, yeah, we wanted to launch it first. And then you know, maybe build accessibility at some point when we're a bit further. But I agree with a lot of people who made comments there. And I think that may be an issue here as well that it may be pushes back the launch date, but building an accessibility afterwards, instead of in the beginning will eventually cost you more and take more time. So now you're, it seems like they're gonna launch a feature product or plugin that's not usable for a lot of people like either in editing part of the site or as an end user because you can't add captioning. I saw a bit about alt text on images, I think that was there. But it would be nice if you could embed like audio features or like small like subtitles and stuff like that.

Jackie I think that's going to be a challenge. Based on, you know, it's a very visual experience, right? So if you're if you're impaired visually and can't see your screen, right, are you going to have the same experience as a sighted person who's viewing a web story?

Monique At least you should be able to give them an alternative experience. Right? That's not the case.

Jackie How easy is it to create an alternative experience? Right?

Monique Yeah, yeah. And are people going to do that? But still, I mean, reading an alt text is not the same as looking at a picture, obviously. Right. But reading no alt text is definitely not the same as looking at a picture. And, yeah, I'm, I'm really advocating for like, using it as a standard in your building process. And I know it's possible because there are a lot of agencies Well, no, not a lot. There are some agencies who just do it who build things from scratch. And make them accessible. And if they can do it like others can do it's it's it's I think it's basically a mindset within a team or within leaders of a team to say like, oh, we're not going to do this without keeping accessibility in mind.

Cathi I think it's great that we're advocating for that from the beginning of project work, you know, prioritizing it sooner. I think when teams start building proof of concepts at the bleeding edge, it's even more important because you're going to lose so much time and so much resources. Doing it the inverse way of putting it in after the fact. I will say this team is prioritizing it. And trying to walk that walk at this stage and it's really the last restart. The lead designer is like if it's not performance, security, secure and accessible, I don't want to I don't want us to ship it. So I know they're working really hard on this and care deeply. Paul what's Paul's last name? Paul is the lead designer on this project at this point. And he's published some really cool, do you remember seeing that code pen that he did with the text accessibility? So no matter where it is on an image, the background color and styles change automatically. So I know they're working really hard to resolve as much as possible, if not everything on accessibility. But it is true that should be part of the initial development. These engineers do care deeply and I have faith that they're gonna bring it to accessibility standards. <p

Monique Yeah, and I think there's one more thing if you want this to work within WordPress, since it's such a mobile based experience. Even for the editing, like if people, if you want people to adopt it and use it, for instance, over Insta stories, WordPress' mobile experience, I haven't touched it for ages. It's not a path you want to go. It's it's, it used to be a horrible experience and I know people have been working on that, but they need resources and they need help there too. You need that to be good as well. To have this working. So...

Cathi A lot of dependencies, you know, with Gutenberg and WordPress. Yeah, it's super exciting to think about the future beyond web stories. It's only in beta. But I get really excited thinking about what other problems we could solve with products like web stories. I think there's so much toxicity in social media platforms that are closed where people are the product, like it's free, but you're the product kind of situations like Facebook and Instagram and all those places.

Jackie Oh two of my favorites!

Cathi Yes, Jackie, I know you've got a flag that just, you know, you fly from the top of your studio. No toxic culture here. But I think it's, I think one of the great problems that we should be solving as designers as engineers is how we interact with each other's stories and how we can build something that's not toxic, where maybe people do pay, but you can interact with each other's stories like I don't have the solution for that, but I am wrecking my brain with Wow, I would love to see that problem get solved.

Jackie I've got a question here. I'm wondering what kind of research has been done or if any has been done, about how long a web story should be? Right. So just thinking about, you're building a story, you're the slides. At what point does it become monotonous? And you kind of want to fast forward to the end to get it finished. Because I noticed that on a few web stories where there was a lot of slides in it, and at some point it crossed over from not being a short story kind of a platform into something a little longer. And I think maybe on a desktop that might be, you know, a tolerable experience, but the swiping the continuous swiping, we're now you're into the 13th, or the 14th slide, and you're still trying to read and watch. At what point does that experience kind of degrade for you? And, you know, when is it too short? Maybe you're not you don't have enough information, enough slides to make an impact. And I'm curious, well, I guess we'll find out eventually, you know, for different types of stories, what kind of research shows you know, the optimum number.

Cathi Yeah, that's a really good point. Also, like how long should you leave it published, like stories on Instagram disappear after 24 hours. And there's a good use case for junk stories. Maybe I want to publish my own junk stories while I'm traveling in wherever. But I don't want them to be almost okay.

Monique Post COVID you mean?

Cathi Yeah, I don't get to travel anymore.

Monique You can travel inside your brain?

Jackie probably set them to expire or something or link back to another page or something like that. But I agree,

Cathi you should be in control of that you I personally,

Jackie one of the good benefits of having the web stories on your own platform is you benefit from search results from it, right. So that's another avenue where you can generate traffic to your own website versus to other platforms when you're building the stories on other platforms. So that's a big advantage. And I think people are looking for ways to increase the traffic on their own websites and get more exposure, right, especially with all of the social media competition that there is for eyeballs right so That's another way of engaging with users, I think. And I think that's positive.

Cathi Yeah. And like, my mom is not on Facebook or Instagram, so she doesn't see some family pictures, because she's not there. And she, she misses out on that experience. So I go and I, I take screenshots and share them with her. And it's, it's more inclusive. If you make your content available to everyone, you know,

Monique and it doesn't have to be to everyone, right? You can just make a website with a login just for your family or, you know, can well you can make your own little social web I once learned about a project. It was a Dutch startup or a suggestion from a woman here who said like we need a mini social web where you can only add 50 people at max and if you want to add someone new, you have to let someone go because I think it was 50 but she'd done some kind of research that the average like, first circle like the warm circle, like family and friends could never be more than 50 people so so that you can create something like that with this right?

Cathi Kind of reminds me that new email platform, Hey.

Monique we'll talk about that time, another time.

Cathi You control, people are getting more control over their experience, which I think is good.

Jackie It's the backlash of like you said, becoming a product. The person is the product. So people are starting to be more resistant to that. We're just more aware of what their role is in it. So I think that's good. I think scaling back on all of that is a positive.

Cathi one takeaway I'll leave is in the notes. I'll leave a link to the web story that when the Pulitzer Prize, that was great the first story to ever win a Pulitzer Prize happened at the beginning of 2008 Team and it was more torn Yemen. So I'll leave a link to that so people can experience that as well.

Jackie Okay, well that about wraps up this episode and just wanted to say thank you to you both for joining me on this and we will see you in the next episode.

Team UXATT Bye!

[Birds chirping]