Episode 16: AMP Stories and Gutenberg w/ Pascal Birchler, Cathi Bosco, Alberto Medina and Weston Ruter

In this Live Q & A we covered some general news from the AMP Project, and AMP plugin and then discussed AMP Stories and their creation with our expert panelists: Cathi Bosco (@BeTheBreeze), UX Architect and Designer, while working with XWP worked on AMP Stories with the Google team, Pascal Birchler (@swissspidy), developer at Google WordPress team and lead for the AMP Stories in the AMP plugin and Alberto Medina (@iAlbMedina), CMS Developer relations team at Google. Surprise Guest: Weston Ruter (@westonruter), Technical Lead of AMP Plugins at Google.

Show and Transcript sponsored by Pantheon

Transcript

Birgit Pauli-Haack: All right. So welcome to the 16th episode of the Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack and I’m your host. I’m the curator of Gutenberg Times. Thank you all for watching and it’s so great to have you. In today’s show, we will discuss the AMP project, AMP stories, and Gutenberg. I’m going to start with what’s AMP and what are AMP stories, what have publishers been able to do with them, and how you can take advantage of AMP and AMP stories in the worker’s speaker system.

And I’m thrilled to have these brilliant experts here with us today. Thank you for coming and, as you can see, we have a surprise guest, as well. So we have Alberto Medina. He leads the CMS development relationship team at Google and works on additional types of technologies aimed at making the web the best platform to publish and consume content. Hello.

Next to him is Weston Ruter. And he is the lead for the AMP plugin on the AMP project team. The AMP plugin for WordPress. And then we have Pascal, who is the lead developer for the AMP stories on the AMP plugin for WordPress project. I get it right, everybody’s nodding their head. Thanks. And then I have Cathi Bosco. She’s a UX architect and designer. And while working with XWP, she worked on the AMP stories with the Google team. So we do a proper introduction in less than a minute.

I have just a few announcements. This show is sponsored by Pantheon. Pantheon is quickly becoming the go-to WebOps platform for alpha developers and agile marketers who are seeking to deliver the world’s best web experiences on Google and WordPress. Pantheon considers AMP a first class technology enabling the open web to deliver results faster. A big thank you to the team at Pantheon for sponsoring this live Q&A. While I have you all paying attention, I just want everyone to know that the next live Q&A is already next week.

So we did a break between April and July. And then do two in a week almost. And next week is a discussion with Byline Times editor Peter Jukes and Yes we work team members Andrew Staffell and Thomas Eagle about how custom works allow journalist to compose engaging layouts without the help of designers and how ACF blocks making testing and iteration easier for developers. So August 2nd at 2:00 PM Eastern and 18:00 UTC.

New Podcast: Gutenberg Changelog

If that’s not enough, you probably already know that Mark Uraine, designer at Automattic and core contributor and I co-host a new podcast called the Gutenberg Changelog. Subscribe to it with your favorite pod catcher. We will keep you up to date on what’s released, what’s in development, and what’s next for Gutenberg in phase two.

All right, so that’s all the preliminaries, a little housekeeping. So this phone line today is like all those Live Q&A went before, is we do use the Zoom Q&A feature if you want to, but we can also use …

Sorry. Went over to YouTube and it was automatically playing. So the YouTube chat, if you have questions, that would be great. So where’s everybody from? Do we have people here? Yeah, we have Fabian from Germany. Hi, Fabian. You did great work at the JavaScript role WordPress conference two weeks ago or something like that. And one of the others will chime in later. Yeah, so groovy. We hope you all have questions, but let’s get going. Let’s start with the speaker introductions. Alberto, we are following each other on Twitter. And for a while now, but we met at WordCamp US last year, but we didn’t get to talk much. I did watch some of your talks in Google IO and AMP Conference, of course. And tell us a little bit about … Yeah, you’re from Venezuela. How did you get to San Francisco and what do you do for fun?

Alberto Medina: Yeah!

Birgit Pauli-Haack: If it’s not WordPress? Yes.

Alberto Medina: Yeah, so I’m from Venezuela and I came to San Francisco via Boston where I went to school. So I went to grad school in Boston and then I learned in San Francisco. Yeah, so for fun, I work for Google. And when I’m not having fun, I like to play the guitar and waste time. So that’s, maybe, you know …

Birgit Pauli-Haack: That’s pretty good. Have you ever played in a band?

Alberto Medina: I have, but fortunately I don’t have to make a living with that.

Birgit Pauli-Haack: Yeah. So next to you is the surprise guest of this Gutenberg Live Q&A. It’s Weston Ruter. Do you want to introduce him to us or, Weston, what are you doing in our talk? I know you’re in Australia and we normally could get you in the other time zones and everything.

Weston Ruter: Actually, no, I live here in Portland right now. This is where I live, but I was on vacation in Minnesota for …

Birgit Pauli-Haack: Why do I think that you’re in Australia?

Weston Ruter: I don’t know.

Birgit Pauli-Haack: Well, I put Alberto into Italy, so that’s a common theme.

Weston Ruter: Yes. Yeah, we work together on the CMS DevRel team at Google. And we’ve been integrating with WordPress for a long time. And I’m involved with AMP since about two years now. About a year and a half.

Alberto Medina: Yeah, three years. And he’s the main engineer, the lead engineer. So everything that good stuff are his fault and the bad stuff is also his fault.

Weston Ruter: Except for AMP stories, that’s all Pascal.

Alberto Medina: Yeah.

Birgit Pauli-Haack: So Pascal, you’ve been a WordPress co-committer for quite a few years. Do you live in Zurich? I got that right, right?

Pascal Birchler: Yes, I live in Zurich, Switzerland.

Birgit Pauli-Haack: So what do you do for fun and what do you do at Google apart from making these awesome AMP stories?

Pascal Birchler: So I’ve been contributing to WordPress for quite a while. It takes up a lot of my time, spare time and all, but I usually go snowboarding, meeting with friends, and traveling is a big part. At school, I’m part of the same team as Alberto and Weston. I’m a developer programs engineer, so I help build solutions in the content management system space to allow publishers to be successful on the web.

Birgit Pauli-Haack: All right. And Cathi, we have been Twitter followers for a while, but you grabbed my attention when you showed off your AMP stories and your photos from Japan from the AMP conference. So what do you do now? And when you’re not in front of a computer, what’s your day job?

Cathi Bosco: Well, I’m a consultant and a UX architect, so I work with agencies and companies to improve their presence on the open web. And I like improving the open web in general on projects on a contract basis. For fun, I used to run a lot and I’m recovering from some injuries, so now I hike a little. And for fun, I like to really party, and cuddle with my greyhound, and watch movies, and read, and cook.

Birgit Pauli-Haack: That’s awesome. Yeah, I’m sorry that you got injured. Yeah, I got injured on February 2 and I haven’t been back to running since. And it’s really hard to do because it helps us with the mental … Well, myself with the mental health.

Pascal Birchler: Yes, definitely. Yes.

What is AMP?

Birgit Pauli-Haack: Well, thank you all four of you to be with us here and take your time. Let’s get into the middle of things. So the AMP plugin for WordPress 1.2 version was released a little over a month ago. Before we do that, maybe we can talk a little bit about the AMP project itself.

What is it set out to do? And do you want to that, Alberto, and get us into the groove of this? [00:09:10]

Alberto Medina: Sure. So to make it quick, so in a nutshell AMP is a component based web framework that is designed to make it easy to build sites that are beautiful, performing, and what used to call user first. So that put the user on the forefront of the object, of the web presence. And the project is characterized by several key parts, right? First, it’s an open source project. Everybody’s working to contribute and there are hundreds of contributors around the world. It’s an HTML framework, that means that there are a library of constant components that are designed for efficiency and high level complexity.

But that can be used in an easy way. It’s built for speed. It provides a lot of coding and performance practices out of the box. So that’s one of the main strengths of the framework. It’s completely cross-browser compatible. Everything that you’re doing now, you’re cascading all browsers. Yeah, doesn’t that mean elements are defined on project.

Weston Ruter: Yeah, and it’s just HTML, CSS, and JavaScript. There’s nothing proprietary about it. And if you want to have an AMP page, you would have to publish it to your own website. That’s not something that you have to host somewhere to be considered a valid AMP page. If you publish it to your website, and it’s valid, if it conforms to the specification that indicates what an AMP page is, then it’s a non AMP page. And then once it’s an invalid AMP page, then it’s eligible to also be cached from an AMP cache.

And it’s not just a Google thing, there’s also a Bing cache, AMP cache, there’s a conclave cache, there’s other AMP caches, as well. And those AMP caches are an additional layer on top of the AMP page that you surf from your origin, which enables for your pages to be served even faster when you’re encountering that content on a provider like Google search or Bing search.

Birgit Pauli-Haack: Well, technology. You need to switch it on. So for the first couple of years, AMP has received a fair amount of flack from the publishing industry. And I don’t know any time where Google hasn’t received any flack from commercial industries, but some of them it was seen as the big land grab by Google because it cached content on its own servers. And at some point, assets that were also linking back to Google and not to the publisher’s website.

This seems to have changed in the last two years. So what have you learned as project leaders from this criticism and controversy?

Alberto Medina: Yeah, that’s a very important question, right? So in order to answer it in context, it’s very important to realize where it came from. So when AMP was developed, it emerged as a response to the origin need of doing something about performance with the mobile web. So the situation around 2010 was so bad that a lot of people thought literally that the web was dying. And that the whole guiding platform were going to basically take over and the web was going to die.

So that was the situation that actually triggered the decisions that we need to do something or we are going to be all out of business, right? So at the moment that AMP was developed, there were a lot of decisions that needed to be made, right? So how do we achieve near instant loading, right? In an environment like the web? How do we prevent the addition of components in a website that block the rendering of the site? So there were a lot of questions, challenging questions that actually were reflective of the bad performance of the web.

And then a lot of decisions were made. Many of them were right on target, some of them were more difficult to make. For example, the addition of an AMP cache. Given the technology available at the time, needed to be served with a URL of the cache rather than the URL directly of the origin, and so on. For example, also given the limitations of the library at the beginning, it was decided that AMP would be served as a third mode to the original side, and that kind of thing. And that also people complain about it, and you have other side, and then so on.

However, to put things in context, AMP has gone a long way in the last three years. And we have actually addressed many of the concerns. And some of the concerns have been addressed by actually improvement in the Word platform itself. For example, serving the AMP pages from the cache with the origin URL has been addressed via a new web API, a new web standard that’s called Site Sign. It changes that allow you to distribute certified content from a given publisher no matter from what platform it’s delivered.

Without going into details, as you said, the situation has improved so much. And also, it’s very important to mention that an objective of the AMP project, as well, is try to get the learnings. AMP has provided a well leap pad to provide awesome experiences in the web. And then one of the objectives is to try to get some of those learnings and then bake them in into the web platform so everybody can get advantage of them without using AMP. And we will be making AMP more lean. And then we would focus on providing high level, complex functionality that actually can be done efficiently.

Birgit Pauli-Haack: Awesome. Thank you for walking us through this. So with the AMP plugin for WordPress, a site owner can now make their own AMP site AMP ready, so to speak. But that’s not the only thing that is needed to success. What are the pieces that need to be in place for that? Pascal, or Weston, or Cathi. [00:15:52]

Cathi Bosco: I mean, if I can do it, anyone can do it, right?

Birgit Pauli-Haack: Right.

Weston Ruter: Yeah, well, their plugin, it strives to allow you to use AMP in WordPress the WordPress way. So you can use WordPress themes or plugins like you world normally, but the AMP plugin then ensures that the output of these things or plugins don’t violate AMP’s specification. And so if you have some disallowed markup, like a script, or some HTML tag that isn’t allowed on my AMP for performance reasons, then AMP plugin will intercept that and remove it so that it won’t cause the page to be invalid and to hurt the performance of the page.

And so when you use the AMP plugin on your site, it’s best to do so using a theme or a plugin that has already learned to be AMP compatible. And you can find a list of those on AMP-WP.org. But as well, if you are using any theme or plugin that isn’t already known to be credible, the default behavior when you use it with AMP plugin is as if you had JavaScript turned off in your browser because it just removes that custom JavaScript. In large part, that’s one of the major things that it does.

And so as long as you have a theme or plugin that is an acceptable fallback experience for when you don’t have JavaScript turned on, then you’re going to get that as the baseline experience in your AMP page. But then with that as a baseline, then you can go back in and you can add the components that add interactivity that you would want otherwise.

Where has AMP been most successful?

Birgit Pauli-Haack: Yeah. And this is where I think we can ask our first set of questions. I got them via email and this is Andrew Taylor, some of you know him, asks, “Where has AMP been most successful?” And I’m thinking from the question, it could be either industry and/or geographical area because AMP is the fastest way to do it on mobile. So it will also be in emerging countries and developing countries.

Alberto Medina: Yeah.

Birgit Pauli-Haack: I assume, but you probably have a better feeling for that.

Alberto Medina: Yeah, we got into the industry. AMP started with a focus on the news ecosystem. So that’s what it was called as a ready mobile page. It’s not called that anymore, it’s just AMP, but at that time it was very useful for news publishers that have simple pages that needed to be found quickly. But since then, now with all the power that the lab already has, AMP is used in any industry and can because the objective is not AMP itself or the experience. AMP actually can cause a huge impact in any domain.

Respect to the geographic area, it is true that your perception of AMP is different if you’re sitting on a 4G network with an iPhone 10 than if you are sitting in Bangalore, India, with a 2G connection and a $50 phone, right? So for everybody, AMP represents awesome experience, but for some people AMP represents the different between being able to read the news and not. So I would say in areas where there is problems with connectivity, low end devices, it’s previous. I mean, we can see how people in Asia and Latin America actually embrace because they see the value.

Birgit Pauli-Haack: Yeah. I can see that, yeah. So Drew Gorden, also Pantheon, asked

What things to trip up teams when they’re want to be deploying AMP? [00:20:03]

So Pascal, what are you seeing WordPress support forums, or on GitHub, in that regard?

Pascal Birchler: So as Weston mentioned before, AMP has certain restrictions. And one of them is that JavaScript is not allowed on your website. So when users first installed the AMP plugin and they realized that some plugin they use at some custom JavaScript website. And they realize it doesn’t work, you at first have to explain to them why it doesn’t work, and then you have to show them how they can achieve the same level of interactivity using the components that AMP provides. That’s what we usually see more.

But a good thing is more and more plugins and themes see the potential of AMP. And have built in AMP compatibility right from the get go. So when you have the AMP plugin and you have some other plugin, like JetPack then you don’t have to make any changes. And it’s automatically AMP compatible, for example.

Weston Ruter: Another big one is the amount of CSS that a theme is using. The AMP specification limits the amount of CSS to 50 kilobytes. And that has to be in lined inside the page. And the AMP plugin automatically gathers up all the CSS that’s being used on a page, including external styles, and styles, and style elements. And then it will concatenate all together into the single style element that AMP requires.

And then it’ll also perform tree shaking to remove the styles that are not clearly being used on a page. But stepping the case, there is still a lot of themes out there that have way more CSS than even the tree shaker can possibly reduce it to the 50 kilobyte limit. So that’s another issue that you may encounter, is the themes and plugins that are just using too much CSS to be compatible.

Birgit Pauli-Haack: So I say hi to Jaqueline Delia and she brought in a question:

What is the roadmap for future versions of the AMP plugin that might improve adoption?” [00:22:28]

Alberto Medina: Yeah, so I will start that one. One of the main objectives that is in our team is to make a content page in WordPress as successful as possible to everyone, right? And WordPress is an amazing ecosystem for many reasons. And one of the things that I really like is that it’s very inclusive, right? There are developers of all skills level, there are users that know nothing about technology, but they take advantage of WordPress. So we are working towards the notion of tonky solutions for the WordPress ecosystem.

Now, AMP itself is a component of that strategy, right? The plugin does amazing work. And we estimate that about 80% or more of the work that is needed to make a site AMP compatible, the plugin does it for you. And our object is in the roadmap, it’s closing that gap in between what can be automated and what needs to be developed by the user itself. And so a lot of the tasks that are in our roadmap are in that goal.

Birgit Pauli-Haack: Well, Weston mentioned that there are already some things out there that already support AMP out of the box. Would you have an example there? [00:23:46]

Weston Ruter: Yeah, the GoDaddy primer theme just added AMP compatibility, for example. And their child themes are also in the process of being made compatible, but also the core theme.

Alberto Medina: Genesis.

Weston Ruter: Yeah, Genesis. Genesis’ framework is AMP compatible and the core themes are AMP compatible in WordPress.

Alberto Medina: WP forums.

How to get AMP for your own site?

Birgit Pauli-Haack: Good. Cool. All right, and then well, what advisement would you have for teams who are considering using AMP on their own site? [00:24:32] It’s just put it on the staging site and see what shakes loose, the tree shaking. Not only restricted to CSS, do it with all of it, and the plugins, and everything. That’s pretty much how I would do it. What else would be good?

Alberto Medina: I would say that a good start is there are two paths, right? So if you are starting a new site or you are trying to convert an existing site to AMP compatibility. The first one is easier because you started from scratch, you know what the limitations are, and your focus is to … Let’s take advantage of the power of AMP to build a beautiful site. And then you get a core theme that is AMP compatible and you style it and that’s a beautiful path. The other path is that you have from big site, with a lot of JavaScript, and huge amount of CSS, and then you want to make it AMP.

And that is a more challenging, but the good news is that the plugin comes loaded with powerful tools and guidance to help developers to identify what needs to be done, contextualize what things need to be done, and then in many cases automatically doing them for them. So it’s an analysis and I want to let Pascal and Weston to pitch in more on the details of how you engage with the plugin.

I guess that the compatibility tool is that we cannot go probably into too much detail here because of the sake of time, but it’s a process in which you have to, what we call ‘AMP debug your site’ and the plugin basically tells you, “you have a problem here.” There is a JavaScript and then you see and the plugin tells you exactly where the problem comes from. And then you have to identify how to fix it or find a solution. “Oh, I’m using a forms plugin that is not AMP compatible.” There is one that is AMP compatible, just then switch the plugin and so on.

And engage with the forum, okay? So the forum is vibrant and they’re really excited to see what is happening. Weston, Pascal, you know I pitch in anytime that I can. But this team and James Osborne have been doing a great job also, tackling questions there. So we are here, so let’s make this happen.

Favorite AMP Stories

Birgit Pauli-Haack: All right, well, awesome. But if you’re still skeptical about AMP, then you still can use the AMP stories because the plugin actually you can switch off the overall AMP part and still use the AMP stories. I find this really is an entry drug, so to speak. Very smart move, so let’s talk about it a bit. Before we get into the technology, and the thoughts about the AMP stories, do you have all a favorite story that you want to show off and that you want to talk us through why? Cathi? [00:27:09]

Cathi Bosco: Yes. I have so many that I love. I love AMP stories. I think the way we use the web has changed the way we communicate. And AMP stories is the natural product of that. So the San Francisco Chronicle has published some beautiful AMP stories with immersive video, beautiful photography. I love one that they did about a ballet camp that resurrected itself after the fires there. That’s a beautiful one. It’s nice the way the San Francisco Chronicle and the Washington …

Birgit Pauli-Haack: I’m going to share my screen and go there.

Cathi Bosco: Oh great. They have the slide over slide presentation and the side by side presentation. So in their desktop version, you get the same content as a viewer as you would if you were looking at a mobile. Maybe a little bit more immersive.

Birgit Pauli-Haack: Is that what you’re seeing? The show must go on.

Cathi Bosco: We are not seeing that. No.

Birgit Pauli-Haack: You’re not seeing it?

Cathi Bosco: We’re seeing YouTube Channel.

Birgit Pauli-Haack: Well, I need to … Technology, you know? How about that? Nope. I’m showing the wrong one.

Weston Ruter: Now, yes.

Cathi Bosco: Now we see it. We can experience what that’s like, to be immersed in this visual storytelling media. Beautiful. You can own your own story with the WordPress plugin. So you don’t have to use a third party, you can publish your own. I think that’s powerful. The stories are discoverable in search. You can link to them from your website and link out of them through the stories. You can embed them. Monetization is possible with three different kinds of ads. So I think this is theme developers, and plugin developers, and just product developers need to be building in AMP if only for the performance and the visual communications of stories. They’re just incredible.

It’s a real opportunity for WordPress ecosystem. And I’ve got it on my site, I experiment with it. And because we’re in beta, some of the stories are still broken, and the teams are working really hard at this phase to bring this to it’s success finale. But don’t overlook AMP, it’s not the same as it was four years ago. It is powerful and it is going to be the way of the future, I think. I don’t work for the project.

Birgit Pauli-Haack: Well, thank you very much for walking us through this. So we have two questions. Jacqueline, “What is the roadmap for the AMP stories in WordPress?” And I think we’re going to move that a little bit later when we first talk through it before we talk about the roadmap, what’s in the future. So I hope you don’t mind, Jacqueline. So Alberto, what’s your favorite AMP story? [00:30:58]

Alberto Medina: One of the one that has both impressed me and shocked me at the same time is a story that was published by the Washington Post on the Yemen War. It won a Pulitzer Prize for the story. The images are a little bit disturbing because it’s a lot about the war in Yemen that nobody is talking about too much surprisingly. But I think that the reason why it won the Pulitzer Prize is it shows the power of the format to actually connect the reader emotionally with a story that you are telling, right? So actually, you can feel the pain, right? And you “Wow.” And then the story ends and you are like, “Wow. I went there and came back.” So it’s an amazing example of the power of the format for me.

Birgit Pauli-Haack: Yeah. And I like how the pictures, like this one, and then the following text is on the background of the last, so …

Alberto Medina: Exactly.

Birgit Pauli-Haack: Yeah, it’s really …

Cathi Bosco: It’s the first AMP story to win a Pulitzer Prize.

Birgit Pauli-Haack: Right, yeah.

Cathi Bosco: Right?

Birgit Pauli-Haack: That’s awesome. Yeah, and how about you Pascal? Do you have a favorite one? [00:32:16]

Pascal Birchler: Yes, indeed. So the Washington Post one is really a great story, as well, but just recently, I stumbled upon a story by the National Geographic about the Stonewall Riots 50 years ago. So I haven’t heard of it before, but when I tapped through the story to learn more about it, it really caught my attention. It’s this the immersiveness that we all take about. You see these pictures, you heard the voices of people in the videos. So it’s a very amazing way of consuming the contents.

Birgit Pauli-Haack: So we have sound coming through, but it’s not from me. Maybe it is.

Pascal Birchler: From the story. Yeah.

Cathi Bosco: It really gives you a sense of what it’s like to be there or to talk with these people. You get their gestures, you get their voice.

Birgit Pauli-Haack: Yeah. So the AMP stories are actually mobile first. And that really grabbed me. It was the first mobile experience that I actually enjoyed going through. So hang on.

So I had a few sound things in here. But it was the first mobile experience I really said, “Well, this is new. This is totally exciting.” And you can combine the pictures, you can combine text, you can do animation, and video. So this is really cool. What about you, Weston?

Cathi Bosco: Can I say one more thing about AMP stories because I’m a little bit passionate about AMP stories. The other thing I want to say about AMP stories is stories as media exist, right? So there’s stories on Instagram, and Facebook, and these private channels where you are the product for those companies. With AMP stories, you own your own content and you are not a product of some other business. It is so much healthier. It is like a non toxic version of stories on top of the fact that you can do such amazing journalism.

So I think that’s important to point out.

Birgit Pauli-Haack: Yeah, absolutely. And this one, I have always had a hesitation with Snapchat, and Facebook, and Instagram because their stories, most of them are ephemeral unless you put a certain effort behind it. And as a professional content producer, but most businesses don’t have someone who needs to connect every single day with new audiences and keep it going. They can’t afford it.

Cathi Bosco: I would argue that it also feeds into a dark pattern of addiction on phones, where you’ve got, “I might miss out on something. It’s only going to be there for a second.” And I don’t think that that’s good for society.

Birgit Pauli-Haack: Yeah. Absolutely. FOMO is real, fear of missing out. Yeah, so Weston, now that you joined us, there is that exercise to show off your favorite AMP story. Do you have one that you can think of?

Weston Ruter: Well, I was just thinking of the one that Alberto referred to, so I’m just going to copy him.

Alberto Medina: That has impacted all of us because this one is very revolutionary.

What’s next for AMP Stories in WordPress?

Birgit Pauli-Haack: Yeah. Okay. Well, let’s grab Chatleen’s questions on what is the roadmap for AMP stories in WordPress? I did a little research and so my idea was there was these other story things. Can we push it to those other places? And you cannot because none of them have open APIs for that. So we’re getting a little bit away from the question. Pascal, what you’re going to do next on the AMP stories? [00:36:36]

Pascal Birchler: Well, there’s just so many thing I would love to work on. So what we did around work in Europe, we released the first version of the AMP pack and it contains the AMP story editor. And now, we’re just working on making it better and better everyday, making it more user friendly as authors to create amazing stories using basically Gutenberg editor under the hood. And that contains a lot of things … I’m hearing some sounds.

Birgit Pauli-Haack: Sorry.

Pascal Birchler: So next, we’re going to release a minor version with minor bug fixes and improvements to the editor. And then we have a long roadmap with new features coming up in the editor, making it easier for you to create this immersive experience without having all this knowledge, without having to develop a famous single thing. So yeah, lots of stuff coming up.

Cathi Bosco: Jackie, my colleague and I, we have a request. We’ll put it in GitHub, too, but we would love to be able to turn desktop view off or on, on a per story basis.

Birgit Pauli-Haack: On a what basis?

Cathi Bosco: On a per story basis. So as you publish a story, you should have the option of whether or not it should be also a full landscape mode or not. I’ll put it in GitHub, but I just wanted to plant the seed.

Pascal Birchler: That’s another excellent suggestion. And, of course, having desktop support always means you need a way to make sure it looks great on desktop, too, while editing. Which causes lots of challenges for us developers to make this happen and make it as seamless as possible.

Birgit Pauli-Haack: So a minor request, if I may chime in there, is what I really would like is to have a Ken Burns effect on the still images to actually make them move a little bit, or zoom in slowly. I don’t know. Is that a pipe dream? [00:38:41]

Alberto Medina: Granted. Granted. We are going to do what you wish.

Pascal Birchler: Yeah, you’re not the only one.

Birgit Pauli-Haack: I wouldn’t think so.

Alberto Medina: Ken Burns questioned that too, so we’re going to.

Pascal Birchler: So yeah, for those who don’t know Ken Burns effect, is when the image is moving and zooming at the same time. If you would want to build that on your own using web technologies, it might be a bit more difficult. So what we want to do is make it possible with a click of a button. So that’s one of our goals.

Birgit Pauli-Haack: Yeah. That’s the Gutenberg goal for anything, right?

Alberto Medina: And to resume answering to that, credit to Pascal, and Weston, and the team that are doing it now because one of the things that is important is that developing the AMP stories editor for WordPress have actually required deep knowledge of how Gutenberg works. And working with the Gutenberg team to actually … There’s a synergy between both projects, right?

That we discover something and probably they are doing it, or we see them, and then they improve the Gutenberg, or we take things that they’re doing and bring it to the editor. So we have been working on the leading edge of WordPress as a platform and at the leading edge of formats for the web that is as AMP stories are read in a new format. So as I said, you know, we have the best team.

Cathi Bosco: Yeah, it’s really good.

Birgit Pauli-Haack: Did you say leading edge or did you say bleeding edge?

Alberto Medina: I intended to say bleeding edge, but I said leading edge.

Birgit Pauli-Haack: Yeah, if I understood, so Weston and I … And I know now why I thought you were in Australia, because it was in the middle of the night that were meeting on Slack, and you were telling me about new things. Not midnight, but it was four o’clock in the morning or five o’clock in the morning. And then normally, I wasn’t up at that hour. And you mentioned that you needed a certain Gutenberg, that you need a Gutenberg plugin. You cannot do this with a WordPress 5.0 version right now. You need the Gutenberg plugin. What are the things in the plugin that you specifically needed for or need for AMP stories? [00:41:09]

Weston Ruter: Pascal can better answer that question?

Pascal Birchler: Yeah, probably. So when we started working or building on top of our prototype that existed when we started working on that in January, we used the version or we used WordPress 5.0 to build on top of that. And during development, we encountered some issues here and there in Gutenberg. Gutenberg was also under heavy development. It still is, there’s a new release every two weeks or so, or every month. And sometimes, there are things in it which were crucial for the AMP stories editor, as well. Not only new features, but also bug fixes.

So once we were working on it, and then the editor was crashing. And obviously, that’s not a good thing. And that’s when we came to the conclusion that it makes more sense to require this specific or the latest version of the Gutenberg plugin because it offers just the best user experience.

Best Practices for creating AMP Stories

Birgit Pauli-Haack: Right. Well, what I was really fascinated about is that I can turn my text into the vertical text. That’s really cool. All these little things, but it makes a nice visual experience. But Cathi, I have a question for you. You work on the design implementation for that, but do you have ideas what is best practices to create AMP stories? When is too much to watch? [00:42:58]

Cathi Bosco: Yeah, sure. I think it’s a minimal story, visual storytelling medium. And at amp.dev, the documentation for AMP and AMP stories at amp.dev is incredible. Before you make an AMP story, you should look through the best practices there because it will save you a lot of frustrating hardship. You don’t want to put large volumes of text, you don’t want things moving around too much. Maybe you want one or two videos. I can’t wait for Ken Burns effect for things.

So when you put text over a picture, it can be difficult to read. So using a background color in your text over a picture in an image in the background is nice, or video in the background. It’s just fantastic, but you have to use restraint because sometimes less is more. My first story was crazy. And I was like, “Okay, now I know how everything works. Let me go in and refine my presentation.” So the documentation is great.

Birgit Pauli-Haack: Good to know. Good to know. I just came back from Boston and I have not stopped talking about it yet. And I was at the Institute for Contemporary Art. And right now, they have an exhibition called “Less is a bore”.

Cathi Bosco: Less is a bore, huh?

Birgit Pauli-Haack: Less is a bore. Yeah. An architect and design artist. They fuzzy the line between decorative art and fine art. And say, “Yeah, who cares? We want to do this and it’s art.” And it doesn’t matter. Yeah, so I had to laugh when we were talking about this, but it depends on your audience and who you’re telling the story to.

Cathi Bosco: Right.

Building AMP Compatible Gutenberg Blocks

Birgit Pauli-Haack: Yeah. Jacqueline has another question. Thank you, Jacqueline, for the questions. Are there any considerations developers need to pay attention to when building custom blocks in WordPress for AMP compatibility? So not so much about AMP stories, but I think we have the experts here to talk about this. [00:45:08]

Weston Ruter: Yeah. Well, in terms of the editor itself, there’s not really anything special that you need to do for AMP. The main thing is make sure that if you have custom styles, that your block depends on them. You should enqueue those styles only if you are including the bottom of the page. The tree shaker does remove styles that most styles that are not being used, but the tree shaker is very effective at tree shaking something that didn’t exist to begin with. So if you don’t need the CSS on the page, don’t include it on the page. And that’s the best way to go.

And then if you have dynamic functionality in the block, then you may want to make use of a writer callback that will have a check inside of it to see if it is being a pinpoint function returns true. And if so, then you can return AMP specific markup using AMP components. Otherwise, you could fall back to the original content. So you could do a conditional block in that way. And generally, your blocks can be just the way you normally develop them.

How to fit AMP Stories into Your Content Strategy?

Birgit Pauli-Haack: Awesome. Yeah, good. So that’s a relief to hear, actually. So when we talk about a business case for AMP stories, now we’re playing around, we find it cool. We’re photographers, we’re doing it on our private site, but what’s a business case … What are stories that businesses could build together or put together for showcasing things? What ideas are you pushing around? [00:47:03]

Alberto Medina: We started ones with the question it has multiple things that can be set. I think that it’s important to always keep the ultimate goal. Success as a web publisher is all about user experience. And user experience entails many components. One of them is content quality. What is your content strategy? AMP stories is an awesome way to expand your content offering to your users. It is useful to have something to say in a story because … So you have to have something of value to communicate to your leadership, right? But I see AMP stories as an addition to your repertoire, or tools, right?

So you could have, for example, a blogging strategy in which you augmented it with AMP stories that allows users to go and get immersed into something that you want to say and then come back to your blog. For the travel industry, right? So if you’re selling travel bag ideas, you could, A, we sell these packages, and you don’t check this one, and then you go. And suddenly, “I want to go there.” And then at the end of the tour, you say bye. And then you go back to your site and then you close the deal.

And so overthinking how we’re going to make our users happy. And one thing to consumer we are producing. Yeah, that’s my perspective.

Cathi Bosco: Yeah, it’s a huge compliment to your existing content strategy, for sure.

How to include Ads into your AMP Stories?

Birgit Pauli-Haack: Yeah. I would argue that before they get in too deep, they probably want to see AMP stories with the highlights of things. And then if something really interests them very much, you need to definitely provide also the connection with the deeper content or the details and all of that. When you work with the news sections, news need to accommodate ads. So I can see that you just now have one panel. That would be an ad and then go back to your story, but are there other ways to implement that? [00:49:28]

Alberto Medina: Yeah, so basically that is the monetization strategy, is you have to have pages that are advertisement. The question is how do you do that in a way that doesn’t interrupt the user experience, right? So you will not be allowed to insert an ad at the second page of your story. You will not be allowed to insert two pages of ads back to back. Or like certain percentage of pages of the overall story. So some kind of user experience on the ads part.

If it’s possible to do that, the monetization capabilities of AMP stories is evolving. Right now, I would say that it’s simple and their run-time then helps to ensure that these premises are satisfied. And you’ll say that you want ads and then without going into details of how the communication with the algorithm and do they have these sales or not. But basically, the run-time is going to say, “Okay, you want to put an ad, I’m going to let you put it here.” And so on.

Weston Ruter: Yeah. I mean, you could manually create a page that has an image on it that you consider to be an advertisement. But generally, if you’re connecting with an ad provider, then there’s a thing called an AMP story auto ads that you configure with a filter. And then you supply the configuration that declared adjacent array object that just tells the ad provider how to configure the ads to be injected into the story. And then it’s done for you so you don’t manually create the story pages with the ads on them.

Birgit Pauli-Haack: Okay. All right, so how are the ad provider, publishers adopting to the AMP story ads format? [00:51:52]

Alberto Medina: That is more like the AMP project itself. So AMP has support from many, many, many ad providers and ad networks. So AMP stories is tapping into that ecosystem, as well. And the advantage of AMP that is very declarative as question indicated, right? So you notify which provider, and what is your account ID, and things like that. But it’s always this interaction between the AMP ecosystem and the ads ecosystem. Similar to what’s happening with analytics, as well.

Cathi Bosco: It’s much more readable format, though. It’s not like when you’re reading a post of a webpage content and it’s ad every other paragraph, and you’re scrolling through. You can’t even read those. I think the format that’s being introduced with Google AdSense and AMP stories, it’s old magazine. One page would be the ad. You know you’re at the ad, you scroll past the ad. It doesn’t disrupt and push so much stuff into your … It’s pretty effective.

I think it’s a good format. I’m sure it will improve, but …

Birgit Pauli-Haack: Brings us back to the original why is AMP even in the world, is because advertising and publisher are ruining the web for all of us. And now, we need to go back to the basics. So Anne Katzeff has a question. And it is, “Do you think Google will start penalizing sites for not using AMP?” [00:53:21]

Alberto Medina: No.

Birgit Pauli-Haack: So I think …

Alberto Medina: Sorry, the perspective that I bring to this is like … We’re not interested in AMP because of AMP. The ultimate goal is user experience. Google wants users to get a user experience that is also what they engage with the web. We may penalize and I cannot talk for search or anything. It’s my perspective, but speed is a factor in ranking. That is one little in this humongous equation that you’re ranking in the search results. So if you offer bad user experience, then you will not succeed.

And if you don’t succeed, you will not show up in search results because people are going to want to be looking for you. People aren’t going to want to be linking to your content. People haven’t interacted in your site because they don’t want to see it. Most people, you’re going to abandon your site if you’re loading more than 5 seconds, 10 seconds. So AMP is not a signal by itself. It’s quality.

Birgit Pauli-Haack: So if you get to a very fast website with the tools that you’re already using, you don’t need to apply AMP to the site because it also will have a fast user experience. So that’s good to know. Are there other things that you need to do with the AMP stories, for searching? Meta tags or anything like that? Is that built into or what makes Google find those AMP stories? [00:55:04]

Cathi Bosco: Pascal?

Pascal Birchler: So, I mean, in the AMP, under the hood, an AMP story is just a regular HTML document that can be found and linked to on the web. So if you link to your story somewhere, to Google, and users, and other search engines can find it, then there’s no difference. I’m not sure if it’s still experimental, but in Google search, it highlights visual stories separately.

Birgit Pauli-Haack: In carousel, right?

Cathi Bosco: The carousel.

Alberto Medina: Yeah, so besides features that could be part of the search product, right? The search’s holes are different than the certain features as a product, right? So the AMP story’s carousel doesn’t mean that we are notifying the services hole to show AMP stories. And the AMP stories carousel is a feature of this search results page. But to compliment what Pascal said, AMP stories are just HTML content, just open web. So anything that you do for SEO also applies for AMP stories. You know, make sure that your title representative of what people could be searching for.

Make sure that you name your AMP stories exciting so people lean to them. So you have a lot of people lean to your stories, you’re going to show up at the top. And you could take advantage then of the features of the search product that actually highlight stories. Your story has to be good. So just because you have an AMP story doesn’t mean that you’re going to put a bunch of like single-color pages with emojis and then you’re going to show up in Google, no.

Birgit Pauli-Haack: Well, except you’re in the travel industry, right? Because Google in IO this year announced that they are favoring AMP stories from the travel industry as a first time … So people get a little bit more excited about it and get some benefit out of it to advertise their destinations. So I hope that a lot of tour guides and travel bloggers actually take advantage of that because all of a sudden they cannot get ahead of … Maybe TripAdvisor, maybe other travel sites that have been on the web and helpful to the web for everybody.

Cathi Bosco: We did notice today, some of us who are experimenting with optimizing our stories for search did notice that stories are coming up under image search.

Birgit Pauli-Haack: Okay.

Cathi Bosco: So I think as stories are more adopted, they’re going to have to be good solutions for sharing them beyond what we have now. I experiment on my site and I’m using Yoast to optimize my content and my stories. So it works well for search, but AMP stories is still in beta. It’s new, it’s not a criticism, but when I share a link to one of my AMP stories, the featured image doesn’t come with it. The description doesn’t come it, but you can still share out links. So that’s going to get better and better. We’re going to make sure, right?

Weston Rudder: Yeah, and the AMP plugin provides an RSS feed for the latest stories. So even if you don’t directly link to them anywhere, they will still be discovered by crawlers. And it does also automatically generate the schema.org metadata. And so I’m curious, Cathi, why you didn’t see a featured image when you shared it. So that might be a bug.

Cathi Bosco: Yeah, okay. It might be. I was surprised. I keep testing it with the new versions and it’s just the link.

Birgit Pauli-Haack: So it doesn’t come with a card on Twitter or on Facebook that doesn’t pull the image in. Yeah, so-

Weston Rudder: It should. So if it’s not, if you can post an issue, Cathi, and I can report that.

Cathi Bosco: I will. I’d be happy to.

Birgit Pauli-Haack: You wanted to say something, Pascal?

Pascal Birchler: No, just wanted to say thanks for testing and raising this issue.

Birgit Pauli-Haack: Good. So we’re up to our last question. I’m sorry, we’re a little bit over, but Chatleen has … When building AMP stories, how does image sizes, video clips, et cetera, affect the performance on serving those best practices? [00:59:36]

Pascal Birchler: That’s an excellent question. So there’s two things. First of all, in the AMP story’s editor for WordPress, we try to encourage you to not use too big images or too big videos. So there will be warnings in case a video is too large. And of course, we also try to use reasonable image sizes. Not like the full size image, but one that is contained to the size of the story. And second, because AMP stories use AMP under the hood. It will try its best to not load images and videos too early. So if you have a 20 page story, the images and videos from the last page won’t get loaded until you get near there.

Which just makes it very user friendly.

Cathi Bosco: And can you talk-

Birgit Pauli-Haack: Go ahead.

Weston Rudder: We have a board request open for JetPack to extend its photon module to add special support for stories, as well, to ensure that if you have a full size image that you drop into a story, and it doesn’t have the image size generated for the story page, then it will constrain the height. So they won’t be excessive. And then for video, though, that’s an open question. Still trying to figure out the best way to … WordPress has the ability to resize images when you upload them, but it doesn’t have any ability to trans code videos or resize videos. So that’s a big challenge.

Cathi Bosco: It seems like a great opportunity for someone to create a platform where you can upload your video and have it AMP story ready, and take it away. That could be a service.

Birgit Pauli-Haack: It wouldn’t be so nice if Google didn’t have a video thing.

Weston Rudder: And there’s options like VideoPress and Cloudinary and other options. But that’s an open question that we need to still figure out the best solution.

Alberto Medina: It’s in our roadmap to solve that problem because it’s definitely a must.

Birgit Pauli-Haack: Yeah, it’s also probably interesting to see what happens with the image when you have them one on mobile. But then you flip the switch and somebody sees it on desktop, that’s a whole different aspect ratio. And obviously, also a different size in terms of downloads. So that’s going to be really interesting on how that’s going to be handled.

Cathi Bosco: Can I ask one more question quickly?

Birgit Pauli-Haack: Sure.

Cathi Bosco: In terms of live stories, live stories are part of the roadmap for the WordPress plugin. Is that correct? [01:02:24]

Pascal Birchler: Yes, so live stories itself, like in the AMP stories picture, is a rather new thing. And we’re excited to play with it for the WordPress editor as well.

Cathi Bosco: I can see that in a sporting event, where there’s a whole number of four on a golf course. And you show that progression of the game with your AMP story and updates live. That’ll be awesome.

Pascal Birchler: I’m not golfing, but nice.

Cathi Bosco: I’m not golfing either, but it was the only example that popped in my mind.

Birgit Pauli-Haack: Yeah, so I think I could talk with you four all day long because I’m so excited about the AMP stories, but I think that’s all the time we had for today. It has been very interesting and inspiring. Wow, I’ve got so many ideas to go back and … Well, I’m not going to do anything else now. I’m going to do all my photos and do something with that. At this point, I have two more questions for you. And first of all, do you have any announcements you couldn’t get in before or that you want people to keep in mind? And the other one is if people want to get in touch with you, what would be the best way.

Birgit Pauli-Haack: So do you want to start, Pascal? You get all the noise anyway.

Pascal Birchler: I think this is a good reminder for people to mention that AMP is an open source project. And so is the AMP purpose plugin. And especially because the AMP stories, editor is so new, we’re looking forward to year around feedback. So if you’re interested in getting involved, then just let us know. We’re listening. And the best way to get in touch with us, so for the plugin, would be GitHub. So it’s github.com/ampproject/amp-wp.

And otherwise, it’s Twitter. For me it’s @swissspidey. Alberto, what’s your Twitter handle?

Alberto Medina: @IAlbMedina. It’s like the twitter handle of a kid, but that’s mine. I don’t know how to change it.

Cathi Bosco: You keep it. That’s good.

Alberto Medina: Yeah, I would like to say that, just to remind all of us at the CMS DevRel team that AMP stories is one element of our more comprehensive story that we are trying to push by making WordPress an awesome platform for creating awesome content. And there are similar aspects to that. And this one, we’re also working on the Google site kit that brings search console analytics monetization and page speed insights in an easy way to your site. We are working with the ecosystem on trying to advance the notion of tonky solutions.

But all this is going to happen is we all work together. I’m so looking forward to what we are going to do as an ecosystem, as a community. So let’s do it.

Weston Rudder: Yeah, we also are going to be releasing the 1.2.1 version shortly. And there’s a beta out available on GitHub right now that you can test. Also, in addition to AMP and Sitekit, we’re also working on PWA for WordPress. And so that enhances a WordPress site with the ability to access content offline, to do things like installing it to your home screen, and add more app like functionality to WordPress site without having to radically change, even not having to do anything special to do that.

Birgit Pauli-Haack: Just an intersect, PWA is progressive? [01:06:40]

Weston Rudder: Progressive Web App. Yeah. And the 0.3 version should be published soon. And this is what was used on the WordCamp Europe website to allow for the scheduled page to always be available, even if the WiFi connection was flaky.

Alberto Medina: Progressive Web App, just quickly, is an umbrella term that refers to a set of technologies that allow you to create app like capabilities to your web application. The ones that wasn’t mentioned. Just for the audience maybe some have not heard the word PWA before.

Birgit Pauli-Haack: Yeah. Thank you so much. I’m grateful. Cathi?

Cathi Bosco: What was the question? Oh, my goodness. Okay.

Birgit Pauli-Haack: You have an announcement that you couldn’t get in before.

Weston Rudder: Well, I want to compliment the project because I think that the project, being open sourced and having a written governance document is such a healthy sign and a great foundation for the community, to grow with it, and understand it, and communicate well within it. I’m working with the governance project for WordPress to try to just put a little bit of structure in place. Not make rules or change anything, but just illuminate and have things written down. So I’m doing that. That’s a little announcement. You can find me at cathibosco.com where I’m experimenting with AMP stories and AMP now, thanks to help from my colleagues like Jackie, who called in with some great questions.

And I’m on Twitter @BeTheBreeze. So I’m slightly obsessive, so once I get really immersed in a project, I tend to hang on for quite a while. And I really love this.

Birgit Pauli-Haack: Well, thank you so much. So my announcement is that next Live Q&A will be next week August 2nd at 2:00 PM Eastern and 18:00 UTC. We’ll be talking about using Gutenberg to bring speed and flexibility to news and editorial site and not be AMP. But it was not part of it, but yeah. So a big thank you to our viewers. There were some great questions. And if you have more questions, you can always reach me on pauli@gutenburgtimes.com. And if I can’t answer it, I know where the experts are. And the recording will be available in a few minutes on YouTube, but I pushed it actually to the wrong channel.

Birgit Pauli-Haack: I tweeted it out, though, the link. And I will move it over to Gutenberg Times in a bit. And the transcript will be available in a few days and then we’ll publish both of it on the Gutenberg Times. As mentioned, this show was sponsored by Pantheon. Big thank you, again, to the team. And if want to sponsor our next Live Q&A’s, please contact me, as well. Thank you Cathi, Pascal, Alberto, Weston. It’s been a privilege to have you on the show and a great joy talking to you all.

Cathi Bosco: Thank you for all you do. I really appreciate it.

Birgit Pauli-Haack: Well, thank you. So everybody, be well. Goodbye and good luck. Bye.

Alberto Medina: Bye. Thanks.

Pascal Birchler: Bye, everyone.

Birgit Pauli-Haack: Okay, let’s get out of here. There’s my link. Bye.