A discussion with Byline Times editor Peter Jukes (@peterjukes) and Yeswework team members Andrew Staffell (@yeswework) and Thomas Eagle (@thomaseagle) about how custom blocks allow journalists to compose engaging layouts without the help of designers, and how ACF Blocks makes testing and iteration easier for developers.

---

---

Resources

• Byline Times
• Byline Festival
• Yeswework
• Wikitribune

---

Transcript

Birgit Pauli-Haack:  Hi there. Welcome to the 17th episode of the Gutenberg Times Live Q & A. My name is Birgit Pauli-Haack and I am the host and curator of the Gutenberg Times. Thank you all for watching. It’s great to have you. In today’s show, we will discuss using Gutenberg to bring speed and flexibility to news and editorial sites. It will be a discussion around how custom blocks allow journalists to compose engaging layouts with the help of designers. It sounds a little bit technical, but we remedy that in a bit, when we do some live demos.

 I am extremely honored to have Peter Jukes, a dramatist, screenwriter, author, journalist, and now publisher from London. Thomas Eagle and Andrew Staffell. Is it Staffle or Staffell?

Andrew Staffell:  Staffell I think, yeah. That’s fine.

Birgit Pauli-Haack:  Staffell… 

Andrew Staffell:  As far as I know, yeah.

Birgit Pauli-Haack:  All right. You’re Staffell, from the agency Yes we work–

Andrew Staffell:  Hi there.

Birgit Pauli-Haack:  – who wrote both Byline Times, not only on the online newspaper, but also in the print edition, and they’re here to tell us how they did it.

Thomas Eagle:  Thank you very much Birgit.

Peter Jukes:  Thank you Birgit.

Birgit Pauli-Haack:  You’re welcome, I’m glad you’re here. We’ll do some proper introduction in a minute, but I have a few housekeeping notes. So, this week at Gutenberg Times we published the second episode of our Gutenberg Changelog podcast, and you learn about the presentations we’ve heard at conferences and WordCamps. Work in progress in Gutenberg enhancing columns, multi-block handling and enhancing tables. We also answer listener questions.

 Speaking of questions, for those who are watching this on YouTube livestream, use the textbox next to the video player to pose your questions, or just have a conversation with us. Include where you’re watching from.

So over the next fifty minutes or so we talk the start of Byline Times, I think, the technology challenges it faced and we talk about the decisions on editorial aspects, technology aspects, workflow and publishing processes. We will hopefully talk about the road before Gutenberg, and after Gutenberg was introduced into the culture and production process, and whatever lessons learned from the publishing side, as well as from the technology side.

 So let’s get started with some short introductions. Peter, you are a legend in the 21st Century journalism. Large Tweeting of the phone hacking trial in… Was it 2013?

Peter Jukes:  Yeah. Yeah. And 14, so yeah.

Birgit Pauli-Haack:  And 14, yeah, it was about an eighteen month trial, right? And you were the first to take this Twitter, I believe, to the next level to getting the word out to more people and not just in the “news bubble” kind of thing. You are also a screenwriter, of award-winning, two premieres. The list of the Internet Movie Database is over a mile long, so… Very terrific.

Okay, you are the CEO of Byline Media Limited. So how did those conditions come about? Moving from fiction to non-fiction and being a business manager and journalist?

Driven out of fiction by the fierce urgency of fact.

Peter Jukes:  Well there’s a long version. I’ll give you the short version.

Birgit Pauli-Haack:  Well no, we’ve got an hour.

Peter Jukes:  You’ve got an hour! Okay, so sit back, take your cocoas out. No, basically it’s… I might have put this in my Twitter bio the other day. I was driven out of fiction by the fierce urgency of fact. I mean, I’ve known a lot of journalists, the mother of my kids, a senior BBC journalist. I kind of, I always stole stories from journalists as a dramatist. But at some point about ten years ago, partly inspired by my mentor and hero, the historian Tony Judt who said “The only true public intellectuals these days; like Robert Campbell or John Pulsace, were investigative journalists”, I wrote a bit of journalism about the BBC which rather curtailed my career there.

 So I wrote about what’s going wrong there, why Britain can’t write things like The Wire. And then when the Murdoch, the phone hacking came along, I was already doing quite a lot of political blogging. I worked on the Obama campaign. But I realized it was probably a monopoly, like I couldn’t criticize the BBC for. And then I got to know Nick Davis, you know, became a friend, and the amazing hinterland of journalists. And since things have got worse, since I started, I assumed the phone hacking trial was kind of an instruction manual for Cambridge Analytica.

 And so as life’s got worse, I’ve done more journalism. It’s a brilliant profession. You get to meet with new people. I do feel I will go back to fiction. I still do write some fiction. Some famous podcasts I did, Untold – The Daniel Morgan Murder, which got ten million downloads, I want to turn that into drama, but in the meantime, it’s much more exciting writing an article knowing you could lose your house, than writing a t.v. show, thinking you might just get a bad form.

Birgit Pauli-Haack:  All right. Well thank you, that’s very interesting. Investigative journalism needs to be totally different from it, than with the other publications. There is a big international collaboration going on with the Center for Investigative Journalism, I think.

Peter Jukes:  Yeah.

Birgit Pauli-Haack:  I know that in my hometown there are two journalists that did the Panama Papers. Well, spearheaded that, with two of our journalists involved in that. It’s very interesting how that field can do so much more for democracy than any other political institution if they were wanting.

Peter Jukes:  Two problems there, one is my son is writing first for The Daily Beast as a journalist under… Because I knew Harry Evans and Tina Brown, his partner. I wrote back in 2013, I realized that Google and Facebook were taking forty-billion out of publishing. So when I became not only a freelance journalist… And it’s how to fund journalism, we had a crowdfunding platform, but that sometimes works. There’s so many stories not being told, I’m overwhelmed by stories. Amazing stories came today but we can’t cope.

We’re going back, just moving over to the Byline Times, a slightly more traditional model, subscriptions, print editions and advertising. We’ve been talking to advertisers about, you know, now we’ve got enough traffic to get on board. It’s not a complete solution, and we will do some crowdfunding as well. Andrew and Thomas are helping us with the crowdfunding I’ve got coming up soon. It’s gonna do everything, because nobody wants to pay for journalists. Because they never did, this is different. Advertisers pay for it. And the cost of a newspaper, the cover price then paid for the times, that paid for the print cost. All the journalism is paid for, throwing McCullough in, going to Vietnam, all that was paid for by the Gucci ad. And now Facebook and Google intervene, take all the money, and don’t really provide the content.

 So we are, and I think a lot of the things we’re seeing with Trump election and Brexit, and the rise of the outright, more populist movements around Europe are partly down. But not in Germany, very good some places keep it going. The klein of good local Germans. Of good national Germans.

Birgit Pauli-Haack:  Yeah, and Germany, most of it is probably funded as well.

Peter Jukes:  Well. I’m moving.

Birgit Pauli-Haack:  Interesting. So Thomas, you’re the director and designer of Yes we work, and you and Andrew build the tools to improve information and collaboration online. As an agency you focus on academic, editorial, cultural and social projects. That’s a big, big balloon.

Thomas Eagle:  Yeah, I mean, we don’t all of it. Of course, yeah. 

Birgit Pauli-Haack:  Come again?

Thomas Eagle:  In fact, when I met Peter at a press regulator event in London, one of our…

Peter Jukes:  Fun party.

Thomas Eagle:  Sorry?

Peter Jukes:  Fun party. A press regulator event. That’s a party.

Thomas Eagle:  Yeah. Exactly.  It was quite good. Being the only designer at a press regulator event it was a good… It was a fascinating event. Andrew and I had discussed getting to that because we’d done some work before with WikiTribune. So we built some backend, technical things in the journalism space. In the collaborative journalism field, trying to make WordPress more like a WikiTribune. And because of that…

Editorial processes and collaboration tools

Birgit Pauli-Haack:  Yeah, I know you did a project with WikiTribune for the new… WikiTribune which is a new initiative by, well not so new anymore, but Jimmy Wales, who is a founder of Wikipedia.

Thomas Eagle:  Yeah.

Birgit Pauli-Haack:  What were the issues that you worked on there?

Thomas Eagle:  Well, there it was making… it was very WordPress technical so really Andrew should, as a developer would be the best person to describe it.

Andrew Staffell:  We worked on two very specific problems for them to do with collaborative editing. This was made definitively in a pre-Gutenberg era, which I suppose is relevant. Although the things we were working on, they weren’t really to do with the editor experience itself. They were more to do with what happens when several people try to edit the same content at the same time. The other problem was, they needed, basically to be able to have… Because in WordPress, I think even now, once a piece is published, if someone makes a change to it, that change can’t be put in a queue for moderation. It’s basically an edit is an edit that goes immediately live. They needed, mainly for legal reasons, to have moderation functionality built in.

 So those are the problems we were looking at for WikiTribune. It feels relevant to say that it was in a pre-Gutenberg era because I think some of the other problems that they were dealing with at the same time around… Because of course they were trying to allow everyone, the whole premise was to allow everyone to collaborate, absolutely everyone, even people with no knowledge of WordPress or content editing at all. So they came up very quickly with problems relating to, issues concerning the editor experience. We knew, obviously that Gutenberg… This was a year and a half ago, was it? End of 2017.

Thomas Eagle:  End of two thousand… yeah.

Andrew Staffell:  We Knew that Gutenberg was on the way, but it was still far too early. The fact that Gutenberg is still the goalposts are still moving around. I don’t know if that’s the right metaphor but the things are still changing very rapidly with the underlying tech is an issue that we are continuing to confront now. But anyway, that’s a slight digression, and that’s the WikiTribune.

Birgit Pauli-Haack:  Yeah, but you still would get some help from Gutenberg with the phase three, which actually has that problem about collaboration and moderation for the next year probably.

Andrew Staffell:  That’s right. There were some conversations taking place at the time in fact, Jimmy Wales, who we were working for directly on WikiTribune. He spoke to Matt Mullenweg about the collaborative issues we were having. We’re not sure, but it’s possible that some of the planning that then came out for phase three and four were influenced by those conversations that were taking place at the time.

Birgit Pauli-Haack:  Yeah, I think you might be right that that’s kind of a catalyst of the planning for. Because the fourth phase is going to be internationalization. Which-

Andrew Staffell:  Yeah.

Birgit Pauli-Haack:  …also leads into this worldwide information-

Andrew Staffell:  Yeah, I mean it’s very clear the problems we were looking at for WikiTribune, they still exist. Actually, revisions remains a big… What’s the right phrase? Revisions haven’t really been touched in Gutenberg at all. Now because of the comment tags being part of the content, what you see when you look at the revisions manager in Gutenberg is something that’s not very easy to use, especially for editorial people. There are things like revisions of images, which are code take placing code. You can’t see visually, at least with the current revisions editor, what the consequences of those would be. That’s one of the things we developed for WikiTribune at the time was a visual view for the revisions editor.

Birgit Pauli-Haack:  Well thank you for getting us down a little bit that lane. With what’s needed now and what might come in Gutenberg. So Andrew and Thomas, I noticed that you are in business now together for eleven years.

Andrew Staffell:  Ah, yes. We’ve been working together for all of that time, yeah.

Peter Jukes:  You can’t be that old.

Thomas Eagle:  Well Andrew’s not, I am.

Birgit Pauli-Haack:  Oh, was it wrong?

Thomas Eagle:  No, that’s right. We met through a mutual friend in Spain. We were both living in Spain, well Andrew still is, but I lived in Spain at the time. So we met outside a bar in Seville and Andrew said “I build websites, but I don’t like designing them.” Then I said “I build websites, but I can’t code really.” And so we started working together and since then it’s been working solidly together. And honest, there are a few other people that come in and help, another developer who works on these sort of things, but the bulk of it is just the two of us.

Andrew Staffell:  Yeah.

Thomas Eagle:  Especially everything that was done on Byline Times. We’re lucky to have worked with Peter, and Hardeep, and Steven, and Ella and all of the writers who, incredibly, will do everything. Tackle every single task, do anything, try anything. Like I said, it’s a remarkable thing to work with somebody who can do anything.

Andrew Staffell:  I think it’s relevant to say that a lot of what we’re doing, a lot of our thinking around what we’re going to do next with the tools we built for Byline. Maybe this is jumping ahead, but we are thinking in terms of these tools being useful for small teams like us, and like Peter and his team. In contrast to maybe other solutions that are being conceived for massive newsrooms and so on. I guess we think along those lines because it’s specifically how we’ve always worked, being a small team, and now working with small teams. I’m probably jumping ahead, we’re cutting out the part where we explain what we’ve done so far.

Birgit Pauli-Haack:  Well, let’s take it back and let’s say let’s start at the beginning of Byline Times, Peter. We already talked how you started out and what the daily technology challenges were. Okay, I need to get Andrew and Thomas in to help us out. How far would you push it yourself?

Peter Jukes:  My company is called Duende Productions because I love flamenco music and the concept of Duende, the dark spirit of chance, and creativity. So it’s complete duende, that I met Thomas. I believe each of you’ll recall what I was talking about, which is; with the previous platform byline.com which I kind of inherited. The crowdfunding one was built bespoke by South Korean games developers. And Jason, who is impossible to deal with. But I also was a bit worried about WordPress. Everybody’s saying “WordPress, how do you make it different?”. And I looked, I’ve actually written to Arc, you know the publishers of the software made for Washington Post. They never got back to me, because they’ve got to see that my shit would not be anything big enough for them. And it’s just really fortuitous, especially with the background and visual sense.

The challenge I sort of presented them was can we have something that doesn’t look all singing, dancing, pop-ups, click-bait, videos, podcasts, techie, something a little bit old-school that has the quality of print. And for me, having moved away from the crowdfunding thing, we wanted to edit heavily, we wanted the masthead to have authority. Before any of this happened after I met you, really working with designers on how to get… What he wanted to do was unlike the era fake news where you, you know, can follow the Russian trolls or the Macedonian spam houses. You know, you create these fake news sites. They had these something or other and put fake news out there. And so you lost all trust in the masthead. Byline.com was “do you trust the writer”. But still that’s not enough.

I still wanted to create something where you trust the brand, and the whole thing, no matter what individual rights, this is a common span of, you know, separated fact from argument. It’s not just common you make an argument with a fact. And also legally edited and designed, so I said, can you create us a paper which a superhero would make? Because the Byline Times is sort of based on The Daily Planet, you know, it’s that idea, the days when journalists were superheroes, because in the UK, they’re some of the most distrusted people. So that was my challenge to you guys, wasn’t it?

Thomas Eagle:  Yes, it was.

What are the Collaboration Tools?

Andrew Staffell:  Yeah, and we should say that how we picked it up from there, should we?

Birgit Pauli-Haack:  If I understood that correctly, you were not, kind of, hacking on team. Kind of on worker’s side and then brought an outside team in. You moved away from a different platform to WordPress.

Peter Jukes:  The other thing is this…

Thomas Eagle:  But, Peter, you were already in WordPress when we started working with you. You already had bylinetimes.com as a WordPress site, which you put together… actually yourself.

Peter Jukes:  Don’t tell anybody that because it was terrible.

Thomas Eagle:  Don’t say you bought it.

Andrew Staffell:  No, it was very good. It was.

Peter Jukes:  I think it was just a test style by the way. I think it was simultaneously with Metia’s. We had about four month of ebb and fade before launch, maybe a bit longer, maybe five. And I was just testing out WordPress. Pretty soon I met you. It was about the same time.

Thomas Eagle:  Right, same time. So as Peter said the brief was to do something that was a mixture of The Daily Planet and print news of the 50s, 60s, 70s sort of thing.

Andrew Staffell:  We picked it up when there was an existing beta site, it was wordpress.com. It was using one of the wordpress.com templates. It was amazingly. There were already very complete editorial pages on there. It’s very relevant to mention that it was pre-Gutenberg. This was November or something so it was 4.9. The situation was from a technical view, or a design view was that Peter had installed, because of course, a theme. An off the shelf theme. More or less you always run into limitations with what you want to do. Peter had installed CSS Hero, or one of these things that gave you deep control over CSS. I was using that very skillfully to make changes, but I suppose that we feel that, even at the same time as something like CSS Hero got plenty of flexibility, but actually so much that your power realized deductions and you lose consistency.

 We were absolutely certain that we were going to use Gutenberg for it because of all kinds of reasons. It was just obviously the way to go. But also because of the way much closer towards real Whizzywig. So if you can use it for layout stuff, then you’re going to be able to see it in the editor in a way that you never could before. We used to use the flexible content field in ACF to achieve the closest thing we could possibly achieve. We were never fans of page builders, because we liked to be able to do all our code, but we liked to use the flexible content filter in ACF. We then set about figuring out exactly how much flexibility they would need as an editorial team in order to achieve, in order to meet the brief that Peter’s just described, and then to deliver that as a set of not option paralyzing tools, as blocks in Gutenberg so they could build the layouts they needed to build.

 So that was our brief, achieve the flexibility. This is the content management system brief across the board isn’t it. Achieve the flexibility you need without creating paralyzing decisions for the people who have to manage the content. Judging by the first few months of operation, I think we’ve done a decent job at getting to that point. Then we’ve got plans to evolve from there.

Thomas Eagle:  In fact, we’re never needed on the website. We’re just never needed. There was a phase at the beginning where we thought they would need design work every month, and we’ll get some more work in that phase, and they never needed us. Which in a way, is the pinnacle of success at the same time as being a terrible for us.

Peter Jukes:  We kept you busy.

Thomas Eagle:  My editorial team can do everything they need to do with Gutenberg without ever calling you, without ever paying for that extra service. If that’s all the contribution that we can do is try to make local reporting and investigative journalism more sustainable, just make it easier for people to manage their own things, then that would be a fantastic result. As Andrew said, we took the original brief and decided that internal pages would just use standard Gutenberg. We’d nail things down in terms of files and fonts.

Andrew Staffell:  And the frame, yeah.

Thomas Eagle:  …Frame, but it would use normal Gutenberg so that people could put in… So that Peter and his team and Hardeep, could put it an image, and then a reusable block to point to some other post, and then headlines and drop caps. A limited number of things, but it would still be consistent. Also we did an image filter so you could apply, you could make any selection of images look like they belong to the same thing. So we used CSS filters to do that. And that seemed to me to be quite an important thing because it…  The variation in imagery if you’re using stock, if you’re not a huge newsroom with a huge photo budget and five photographers. The variation in photography that you have is vast. Anything you can do to make your photography look more like it’s a part of the same trustworthy brand, seemed like a good thing to do.

Andrew Staffell:  For that we could plug into the register block style functionality in Gutenberg straight away with very little complication. That API was really, really useful for us to be able to add that consistency without too much additional coding.

Thomas Eagle:  Then what we really concentrated on to achieve what Pete had asked for, the editorial front page…You could use it for any editorial lists page, but it’s unused at the moment on the front page. From there it was breaking it down, breaking down news layouts, newspaper layouts, into abstracts. We’d divide the page into rows, then within each row you could have one, two, or four columns. Then within each column you could have either a single article preview, or you could have a list of articles. For each single article you could have a photo above, a photo below, a photo as a background, or no photo. You could have black on white, or white on black. You could change the font between the two fonts that were accessible, that were available to Gutenberg.

Andrew Staffell:  The template, yeah.

Thomas Eagle:  And then if you have a list you could choose list by category, list by most recent things or you could manually go and choose stories. So if you were putting together a page about, for example, Trump, then you could have a big feature story on Trump on the left-hand side and then a list of secondary stories that you went to manually choose. This is quite important because all of this that Andrew built with Gutenberg, and it’s fairly accessible.

Editorial Decisions

Birgit Pauli-Haack:  Let me ask you some questions, Peter, on that. So now you have this great editorial, editing platform, how do you do the standards of that. Are you teaching everybody who’s creating articles how to change your homepage? Or who is doing that, or who’s responsible for that, for which piece?

Peter Jukes:  For editorial legal reasons, there’s only about two to three of us who do that. All of us are full-time employees, everybody else is freelance so they don’t get access to the packet.

Birgit Pauli-Haack:  Correct.

Peter Jukes:  It comes through myself. Hardeep, who would love to be here, sort of balance things out a bit. She doesn’t think she knows about software. Actually she does. She does it now. It tends to be myself or Ella. I’ll color editorials for Gus to look at on the front page, because they have mastered it. Hardeep has now become full-time editor and she’s not only changing, she’s discovered this new thing, she’s timing out the pros, brilliant copy editor, brilliant proofreader. But going “Ah, she’s discovered the article preview system.”. So now we’re getting a lot of sideways traffic. There’s an article, I’m trying to think of like an event or something. Justice, she’ll pull up photo background, another article on that subject or by that author to break things up.

Andrew Staffell:  This is when your embedding the block in a not normal article, I think.

Peter Jukes:  Yeah.

Andrew Staffell:  I noticed her doing this a lot. So this is actually using one of the blocks that we built, mainly with the homepage in mind, but honestly not having to be restricted to that. It’s now able to be used to produce a block of an article preview in any article throughout the site. So that provides a way of lateral movement through the site. It’s kind of a natural consequence of the conceptualization of content as blocks, which we didn’t particularly need to think of doing in that way.

Peter Jukes:  We stumbled across it. “Now we can do this in a post.”. You could add shit up, “Well let’s do it, us.”. We’ve never done a list preview of the post, we should think about that.

Andrew Staffell:  Is it worth us doing a quick run through of this at this point?

Design Decisions

Birgit Pauli-Haack:  I think it would be a good time to show what you’ve been doing with it.

Thomas Eagle:  So let’s say you do a quick couple of rows of something like the current homepage, how that might be put together.

Birgit Pauli-Haack:  Not changing the live homepage, right?

Thomas Eagle:  On the live site.

Peter Jukes:  I thought you had published it.

Thomas Eagle:  We won’t say anything about that. So let me go to… Okay.

Birgit Pauli-Haack:  Right.

Thomas Eagle:  This is the current website. The current homepage. As you can see, it’s got a full article preview block, then it has some excerpts, then it has some lists and things like this. I’ll just show, roughly how one might go about doing something like that. I won’t do it on this page, but…

Birgit Pauli-Haack:  It’s a little thing, but I like that you only have five items in your top navigation. That’s really good.

Thomas Eagle:  Let’s find him again, he’s there.

Birgit Pauli-Haack:  All right, that’s your dashboard, yeah?

Thomas Eagle:  Yes, actually this is a dashboard that we, well it’s a plugin that Andrew and Joel built. It’s kind of like an editorial flow for teams, for fairly small teams, compared with something like published press or Let it Flow, it’s much more simple. But it gives you a view of content that’s often hidden, especially with custom post types Gutenberg and things like this. Anyway. We have some custom blocks, so pick an article preview.

Andrew Staffell:  And by default it shows the latest. But then we simply pick.

Thomas Eagle:  Exactly. So we’ll do the title of this one and see if its… Okay, so then it will automatically load the content in. And to get this particular layout, you have these layout options down the right-hand side. So you’d say I want a photo background for this layout. Obviously black text on this isn’t really going to work, so you want light on dark. You might then want to hide the date of the article. You might want to keep it left alone, because that’s how it is at the moment. Then you can customize the content, because the title that you added when you made the post may not be relevant in the context of the homepage so we’ll do something like that. Some of the options are just to make font sizes bigger or smaller. You might have a lead, you might want a custom lead. You might want to change the image. And then under that we’ll have a row.

Andrew Staffell:  We implemented this before the column block was in the release version of WordPress so now of course we can have the column block. But we had, the other reason for having our own two out and four out blocks is that we have very specific behaviors when it’s responsive, which as we know, Gutenberg is still kind of catching up with.

Birgit Pauli-Haack:  Oh yeah, absolutely.

Andrew Staffell:  We implemented those two and those four column blocks specially to contain these layouts on the homepage. Sorry Thomas, to cutting you off.

Thomas Eagle:  No, it’s good. I’m glad if you talk while I’m doing this, because it helps me, it’s quite…

Birgit Pauli-Haack:  I like that you can change the lines on that, yeah. On the current homepage you have this S kind of line down…

Andrew Staffell:  The borders. I want to say at this point as a developer that we couldn’t have done this without ACF blocks because it’s such a great tool for fast prototyping. In a way it has so many components, and it’s not just to do with the fact that you can do more writing less code, it’s also the fact that it has UI elements which Gutenberg still doesn’t have. The UI element to pick another piece of content, which is called either post object, or relationship field. There is no component for that in Gutenberg still, or yet. HumanMade have done a plugin component, or a library that you can use. For very fast prototyping of things, also without having to worry about the deprecation path of blocks if you change their content. I think that ACF blocks is a very, very powerful tool, even if the long-term goal is to remove it as a dependency.

Peter Jukes:  Maybe.

Birgit Pauli-Haack:  Sorry, say that again.

Peter Jukes:  Sorry, he’s looking for ship, because I changed the headline.

Birgit Pauli-Haack:  What was it under?

Peter Jukes:  Maybe is the search word.

Andrew Staffell:  As you can see from Thomas’ quick work on this, he put together a homepage with a lot of visual diversity, yet without actually having to do lots of design work, or lots of layout work or lots of duplicate content entry.

Birgit Pauli-Haack:  Are these all completely linked. You can click on an image and then it…

Andrew Staffell:  Yeah, exactly.

Thomas Eagle:  So if I wanted to pick a different image for that one, let me try to find…

Birgit Pauli-Haack:  Another chicken image?

Thomas Eagle:  Well if I find this one which is what’s used…

Andrew Staffell:  Then you can switch the image in place. And then apart from the single previews, I don’t know if, Thomas, you’ve already demonstrated that we have kind of lists as well so you can have a list of the latest articles.

Thomas Eagle:  Yeah, I’ll do that. I’ll put one in now. So let’s find for example…

Andrew Staffell:  Pick a category.

Thomas Eagle:  You pick a category so you could have for example, Brexit, or something like that.

Birgit Pauli-Haack:  Long enough for that.

Thomas Eagle:  Yeah, exactly.

Andrew Staffell:  And if you switch on the images.

Thomas Eagle:  Yeah. So I can switch on images, maybe switch off the date.

Peter Jukes:  Title as well, you can give the whole row a title.

Thomas Eagle:  Yeah

Peter Jukes:  See this title, I wish while I remember that, I wish we could sometimes change the font of that, that’s all.

Thomas Eagle:  Oh, yeah.

Andrew Staffell:  No, I don’t think we want you to be able to change the font.

Birgit Pauli-Haack:  You don’t want this, but-

Andrew Staffell:  We’ll discuss it.

Peter Jukes:  Or left and right alignment.

Andrew Staffell:  No, I mean these conversations are very relevant because these are the things that you have to decide, should those be features that can be modified by the editorial team or not? What you don’t want is every single piece of content everywhere to be put in every single available font and every color, because you’re guaranteed to end up with chaos. This process of abstracting exactly what needs to be flexible and discarding everything else is I think the kind of key of thought processes getting to where we’ve got to now.

Peter Jukes:  I was going to say, and my point about that is, one of the few things I think about, maybe after four months, right? You’ve had no complaints, at least I think. We’ve got so many options, yet there’s a stark distinct unity. It’s very easy to use once you get it up it takes half an hour.

Andrew Staffell:  Yeah, that’s my next point to make is that this is a work in progress, and what we want to do now, is take the work that we’ve done so far, and start refactoring it so we effectively have a theme that can then be used by other news publication and editorial projects that want to make use of the same kinds of functions.

Birgit Pauli-Haack:  So Thomas…

Thomas Eagle:  Yes.

Birgit Pauli-Haack:  When you go back, the sidebar changes for every block, but the tools are always at the same spaces. Is that what I’m seeing? In the editing.

Thomas Eagle:  The sidebar is a different thing the sidebar we…

Birgit Pauli-Haack:  The block sidebar. So when you have a block selected…

Andrew Staffell:  Not the page sidebar, the block editing tools.

Thomas Eagle:  Yes, and the moment they are…

Birgit Pauli-Haack:  They’re in the cycle.

Thomas Eagle:  Yeah.

Birgit Pauli-Haack:  They’re always in the same places because you always have mostly the same changes that you make, just how they are…

Thomas Eagle:  Because a lot of the time we are just selecting existing stories, but if you want to build something use the classic Gutenberg blocks, like title blocks. I took a moment on this page. There’s a block that says at the top “What Next”. So I mean if you’re back in kind of classic, you can still use the classic themes.

Birgit Pauli-Haack:  So when you go back to one of the other blocks, and you had one section in there that is to change the font of the headline?

Thomas Eagle:  Yes. In the design-

Birgit Pauli-Haack:  Which headline is it?

Thomas Eagle:  Sorry?

Birgit Pauli-Haack:  Any headline that you’re just going to… okay, all right.

Thomas Eagle:  So that’s basically the number of fonts that are basically, there are like… Actually IA Writer doesn’t get used very much, but it uses Avaria. That was chosen to basically give this kind so slightly, ink that’s soaked into the page. Then there’s Alt Gothic when you need a… well it’s actually Franklin Gothic. But when you need that “news”, big all-caps kind of headline. Then there’s Caslon, which is the body font of the site. So it allows you that amount of flexibility. It updates automatically. It updates from here at the moment. Whether that will change because we’re now … Andrew we’re about to build these blocks as native Gutenberg blocks, so some of the position of controls of things will change from being to here to being more familiar so we take the…

Andrew Staffell:  Some of the individual editing things will be moved in line, because these, at the moment are still ACF blocks, because really everything was prototyped in a very short space of time and the site was launched in a kind of perpetual beater mindset. But now we’re at the point where we’re convinced that these blocks serve their purpose, and so we’re in the process of implementing them as fully native. So there are things that are content specific, rather than block level. The controls that you can see now are block level, they will stay as they are, but the things that are content specific, so, editing a headline and tweaking an image, will be moving them in line.

Birgit Pauli-Haack:  Yeah, absolutely, yeah.

Andrew Staffell:  So yeah, I think that’s a pretty good run down of how that works.

Thomas Eagle:  Let’s get out of it, let’s stop sharing now.

Birgit Pauli-Haack:  I’m glad that you guys are utilizing and doing that. So what else is kind of helping educating that editorial process. Is that… We only saw that on page.

Thomas Eagle:  Yeah.

Birgit Pauli-Haack:  You’re doing those also to category pages I understood.

Thomas Eagle:  No, actually at the moment we could do category pages, but that was another thing, was to take out some of the paralysis, at least initially was to just build category pages and using…

Andrew Staffell:  As automatic lists basically. Although, on a code level they use the same, almost identical markup and CSS as the Gutenberg blocks themselves. So you see, there’s a lot of consistency even though the code that’s rendering the list pages is not passing through an editor.

Birgit Pauli-Haack:  Yeah, when it’s PHP rendering there.

Peter Jukes:  What if we were talking and you explained to me how you did this? One of the key things I think I explained at the beginning was that I wanted to separate fact from argument, and actually, Jay Rosen, the great NYU professor in a… He wrote this essay in 2013 on a talk he gave in Australia. He said “All newspapers should be separated in a quadrant.”. So instead of so much PR, we used to have appearances, realities. And you should have facts, and arguments. That’s an old Russian and Polish thing. Fakty Argumenty. So I kind of took that, and then of course when I was playing around pre-Gutenberg, and you know, WordPress site with this, what’s it called. Superhero CSS. I made some terrible mistakes, I was ruining everything, but I found it very difficult to find a way of categorizing those four things so Thomas and Andrew have come up. Not only does everything come up under those four sections we allocate. I’ll try to find one. A dedicated investigation. We call them subsections or investigations, so when you go there you have… I think you get a fact or an argument.

Thomas Eagle:  Basically we built custom taxonomies. So when we started to work for the site there was a standard taxonomy, and then there were tags. That meant it was impossible to guarantee that that story would be under one of these four quadrants. And since we just said, okay this is fundamental to the rest of the site. So we’ll have a custom taxonomy that is only fact, argument, reportage, and culture, and the story has to belong to one of those. Then you’ve got a sort of standard category-tree for things like countries or people or whatever. Then you have another custom taxonomy for investigation, or lines of reporting that Peter and the team are following. Although the lists are generated automatically, at least for now, there’s quite a lot of flexibility in terms of what sorts of lists you can end up on, or how you can see things. At the same time there’s not quite as much scroll as you can get on WordPress websites where the temptation is just like fifteen categories and four to seven tags.

Birgit Pauli-Haack:  Yeah.

Andrew Staffell:  Yeah.

Thomas Eagle:  Then everything is everywhere and you’ve got no delineation of content. Luckily people are very clear…

Andrew Staffell:  I think one of the list page so to speak on the site that uses the homepage template, so it can be used for thematic groupings. Allowing the lists to just auto populate I think is the friction reducing choice in most situations. And for a small team that’s obviously very intriguing. Rather than having to manually generate the category page for every single category, but there is the choice. It’s possible to make this setup using the homepage template that we’ve just demoed.

Birgit Pauli-Haack:  Cool.

Andrew Staffell:  It just adds up any other thematic page and populates it in the same way. Then because the list blocks for example, can use latest content, you can still manually set up an editorial overview page, which will then automatically update as articles are published in that category. So you have that choice if needs be. If you want something a bit more pictorial, with a larger image and so on, you can manually use the template that we’ve shown there to set up that kind of page.

Thomas Eagle:  And then when we can eat it, then we can have it.

Birgit Pauli-Haack:  Now your operation is not only online, but also as a printed edition, and I think it’s very unique. It’s not unique to the space, but it’s unique that an online magazine has actually weekly editions. Normally…

Peter Jukes:  Monthly at the moment.

Birgit Pauli-Haack:  At the moment, because normally you just got to put the news stuff up there and then it kind of rolls on the front page and you have to update it every day with new stories coming in. But you make the decision to just have the same week, one week, the same homepage. Like a newspaper.

Peter Jukes:  Oh, yeah, so you’re right. Weekly we do a fixed homepage. What we do is, we screenshot it, thank all the writers and that’s our summary of the week, and what happens on that form, basically your homepage is there, and you’ve got your side columns. We play around with those. And then on a Monday we flip it over so the latest articles are the first you saw on mobile view, and a non-ad for the festival, and then the homepage remains static until the next five days. And that’s a model for…for we’re only doing it once a month for the moment since it’s a huge design overload. I almost can tell you.

 We do a monthly paper, a newspaper which is beautiful, this is the best edition so far. Have you seen the physical copy of it, either of you?

Thomas Eagle:  I’ll have to look at it when I get back.

Peter Jukes:  Yeah, well yes, they’ve all been mailed out, today I think. So this is a weird synergy. I don’t know why, you know, Thomas is mainly involved, unlike Angela, on the physical newspaper, and I was ill last weekend so he was heavily involved. I think some of these divine innovations for the website, they tend to go back and affect the newspaper. I don’t see the website emulator physical newspaper to a certain amount. I mean we used some of the colors from the website. It’s just a very interesting kind of backwards and forwards between the physical and the digital.

Thomas Eagle:  Yeah, so has…

Birgit Pauli-Haack:  So was… Go ahead.

Thomas Eagle:  No, it’s okay. Carry on.

Peter Jukes:  I was hoping one of you guys would step in.

Andrew Staffell:  I was going to mention something that was slightly tangential, but then we…

Birgit Pauli-Haack:  Well, let me save back to the print edition. You are not setting the print edition with copy paste articles from… or are you doing that? Or are you pushing data from…

Andrew Staffell:  That was what I was going to say…

Thomas Eagle:  Well Andrew was going to say…

Andrew Staffell:  That was what I was about to mention, actually. We built a very lightweight plugin which exports plaintext versions of the articles, so it needs to strip out the Gutenberg comments and deliver plaintext in order to be imported into InDesign. And we’ve discovered, interestingly, InDesign isn’t receptive at all to HTML or pretty much any format that we could naturally get out. Nothing like… We were thinking of doing data merges and XML merges, and kind of hoping that we’d be able to get at least header hierarchies into InDesign.

Birgit Pauli-Haack:  It’s also not doing any markdown or any of that?

Andrew Staffell:  No, it’s terrible.

Thomas Eagle:  It’s brilliant, but it doesn’t do any of that.

Andrew Staffell:  Yeah, but it’s not interested in the web, so we built a very lightweight plugin to basically generate a plaintext, a sort of human formatted plaintext list of all of the articles that have been published on the site in a particular date range. That then serves as the basis for, yes, copy pasting, but with some of the friction removed.

Thomas Eagle:  Actually it serves as, if anything, it can serve as a basis for then further subediting. But in theory if one were to use this plugin, and I’m not sure we actually use it that much on the site yet. But it could be a boon, because it can allow you to have things structured for how you want things to appear. It can extract just the meta fields, in the order that you want, the header, the lead paragraph, the author byline, the bits that you need, in the order that you need from your website. Theoretically one could allow, if it weren’t for legal things, a distributed news team to feed into the CMS rather than sharing Google Docs or sharing word documents back and forth, like how other clients are forced to do.

 Everything you put in the website, you can get out of the website, and you can make the most of what WordPress offers, the eye provisions, and user specific editing and this kind of thing. Which by which I mean, users editing their own stuff. So it’s very promising but…

Birgit Pauli-Haack:  So you do the body of the article, you still copy and paste over?

Thomas Eagle:  Yeah, exactly.

Peter Jukes:  I’ve, you know, well Hardeep’s been doing mostly… She tends to work with the Google document. She doesn’t quite got her head around this built in export, and she certainly doesn’t understand InDesign. So, if I was starting that maybe I could just feed that straight into the InDesign Story Editor. And you know Thomas has set up these brilliant tags and we’ll recognize somebody’s name, and we’ll format it. Fuck formatting for compressed Gothic, you know? But we also, we do edit down for the newspapers. It’s basic news. You often edit down a thousand words down to eight-hundred. Something you don’t want to be too busy on the page. But the interesting thing is, and this is why thing have got a premium, we’re at about a thousand subscribers now, to break even we have to get five-thousand subscribers annually. It’s very, very different.

 I wish I had brought a copy with me here today. I’ve probably got one in the other room. But you know, to see things juxtaposed with full color. I did a poem illustrated by a famous cartoonist, which you will not read on the web it’s so detailed, but it’s also the sense that most are, I think when we produce the monthly paper, and as we increase articles, we’ve got bi-weekly and then weekly. As a lot of people miss stuff. Mainly from social media people go to the front page and not look around, but generally they’re going straight from a Facebook or Twitter. And they might go to another article, but often they don’t. The stumble upon, that sort of heuristics of physicality. Oh, that’s somebody who loved your picture of the moon. Thomas did a brilliant thing, that whole thing about the desolate, you know something about the moon landing. It was like two in the morning I think he did this, when I was ill. He went to the manual didn’t you? And you did it all on style of the Punter Manual.

Thomas Eagle:  The things you can do in print that are very nice, very satisfying as a designer. But of course if you start doing that online then your in the realm of The Garden or The New York Times or The Washington Post where you need dedicated data visualizers and dedicated designers, and front end developers and a whole… a much bigger newsroom. So it’s fantastic to be able to do that on the print version, but that’s not what the aim is.

Peter Jukes:  We might feed back some of these ideas or something, because we’ve created now, such a clean-cut pallette, we haven’t… Thanks to Thomas, you’ve given us these good limitations. They’ve been enough. But maybe, I don’t know, we could think about it.

Thomas Eagle:  Yeah.

Peter Jukes:  The problem is, most people are meeting on the fray, so why would you bother designing amazing Apollo manual.

Thomas Eagle:  That’s actually quite straightforward because that at least was done on a typewriter, so you could do that. But it would be lovely to do these things. I kind of agree, like what you said there about limitations from the things that we’ve done in Gutenberg specifically. The limitations are what allow you more freedom or more creativity because it still remains consistent. You’re not having to worry eternally about choices and what format. Should I do it as an SVG or a PNG, or this or that or the other, whatever. It’s the limitations that make Byline Times look trustworthy and consistent. So I agree, we could do a lot more, and a lot more things would happen.

Peter Jukes:  No I just wonder occasionally it would feed back, like a consistent in speed for us. Because sometimes we have no problems with great speed, lawyers, everything’s been filed, we want a scoop. Not that most things aren’t features. Instead of designing a whole new paper just because of the feature stuff. But when you’re pouncing at a news story, you know you then… You can get out or the opposition get out.

Thomas Eagle:  Right.

Birgit Pauli-Haack:  This is lovely and I probably could talk another two hours with him.

Peter Jukes:  It’s only been one hour, but did it feel like two?

Birgit Pauli-Haack:  Yeah, it really…

Thomas Eagle:  No, felt like about twenty minutes.

Andrew Staffell:  Oh yeah, oh yeah

Birgit Pauli-Haack:  Well we don’t have a limit, but I have a limit.

Thomas Eagle:  Yeah, yeah, yeah.

Birgit Pauli-Haack:  I want to give Thomas and Andrew the chance to also talk about what’s next with this part when you say “Well you had it but then you want to get out and extract it to be used by more news outlets or local news that have small teams.”. Maybe you can elaborate on that a bit.

Thomas Eagle:  Andrew do you want to talk about that today?

Andrew Staffell:  Yeah sure, given how well it seems to have gone, we feel… and encouragement from Peter, and also some of the, there were some projects connected to Byline Times that already seem like they could make good use of these tools. So the plan now is basically to evolve what we’ve done specifically for Byline Times into the beginning of a platform which will include a suite of tools around layout, and also editorial workflows, for collaborative setups. The idea is then to make them available for other people to use. We’re working already, but the next key step is that we’re… There’s a Byline festival at the end of August that we will be hosting some workshops at. So anyone watching who is keen to continue to hear more can look into that.

Thomas Eagle:  Coming in from there.

Andrew Staffell:  Yeah we are. I suppose we’ve been talking about it internally as the white label version of the Byline template so it doesn’t have an official name yet, but it will. I suppose that we should mention that it’s in the space, same space as Newspack, which is this fledgling platform for – 

Birgit Pauli-Haack:  Mm-hmm, by Auttomatic.

Andrew Staffell:  Sorry, exactly from Auttomatic also using WordPress. Whereas, I think we are probably talking about different target audiences, whereas they’re talking about investing whatever it is, millions, into a platform that then will cost thousands to license. I think we’re talking about doing something but we’ll be licensable to smaller newsrooms on much tighter budgets who we feel… Like I said, we’ve been encouraged by Peter in this, and need to be able to do things without giant budgets because it’s difficult for journalists now, very very difficult, and it’s become more difficult. So that’s kind of the roadmap, or the general overview of what we’re looking to do with this. Make it available to more users.

Thomas Eagle:  Yeah, and so people could get in touch with either, because we’re still at the gathering feedback and deciding what direction this is going to go. Whether people get in touch with us through Byline, with Byline Times and Peter, or through yeswework.com or at Byline Festival. We’d be really thrilled…

Andrew Staffell:  Yeah, we’d love to have feedback and have as many conversations as come our way. So about what would be useful, what people want to see, what the editorial challenges in digital are for journalists in small teams at the moment.

Business Model Decisions

Birgit Pauli-Haack:  So tell people, what exactly is your business model? You have a paywall? I didn’t see one, that’s why I’m asking. The business model is not a paywall that you pay for?

Peter Jukes:  No. Now we have talked about involved in a kind of, some strange bitcoin micro tipping system called ByWire but I only thought about that. Actually Thomas Knight spoke about micro tipping. We’re open to all options, that’s the thing, any. So we’re going to launch the crowdfunder soon which Andrew is developing the actual software for it, the plugin. But I think I…

Andrew Staffell:  It would be a Gutenberg block, I think that’s relevant to say in this talk.

Peter Jukes:  It’s a Gutenberg block. As a crowdfunding. But our primary art is going to be… Now we’ve got up to 400,000 boosters by the last few months. Back into the advertising model, especially if they can advertise and also can do things at the festival. And subscriptions, that surprised us. How many people, and the profit margins on you know, people will pay two pound fifty that we can discount as something that if you print enough costs a pound to print because they want it. So it’s kind of, it’s an old-fashioned model you know, that people will pay for the content and advertising well. I don’t think, we do hold some back, some exclusive content. There’s a print edition. But people don’t really mind about it, I think they like the experience of having read it online, and then seeing it in print slightly edited down, next to something else. Our stories, I think our journalism is quite… It’s not long-form, it’s short, but we are talking about big stories like Trump, Russia, Brexit. And unreported elsewhere like Ukraine, and so they don’t got a thing.

Birgit Pauli-Haack:  So it’s a subscription model but you don’t have a PayPal app that people are not paying you, so it’s more of a public radio kind of model that is funded by a few but listen to all of them.

Peter Jukes:  Yeah I suppose it’s that but the print edition. And the other thing we found, we haven’t got to this yet and we’re still developing it but people pay a premium to have their name on the front of the paper, to come to a club. So that’s when I took over byline.com the crowdfunding site. I could write student background advertising, but you’ll never make money out of this. What you will make money out of, and vast amounts, enough to pay more journalists, is events.

 We have a monthly, quite a big event, you missed it last month Thomas. We had a hundred people to talk about criminal justice and miscarriages of justice. If you get in the gentlemen next September, this is the Wind Rush Scandal, these immigrants, migrants for you, they were British citizens, got sent back to the Caribbean. It’s really doing everything.

Birgit Pauli-Haack:  Yeah.

Peter Jukes:  We might get into the micro tipping thing. I don’t think we’ll ever have, I’m not sure about paid, maybe exclusive, or premium content on a time-limited paywall. Options there maybe. But, you know.

Birgit Pauli-Haack:  But there’s also an advertising model that you offer your advertisers, ads in your print model, as well as online.

Peter Jukes:  And then sponsorships are the best ones. Some ethical investment company. So people like Lush. And, many advertisers who want to make an impact, but as we grow, I think after you get up to half a million, you do unlock some of that, we’ll have to see how, really.

Thomas Eagle:  Another thing that Andrew and I have discussed, from the point of view of the right label. I think we discussed it with you. It’s that, because we built it for somebody else, this idea of almost small ad listings…

Peter Jukes:  Yeah, yeah.

Thomas Eagle:  … By way they’ll read this themselves, your community is able to advertise. We’ve done this for a Greek and Cypric cultural center that we built the website for in London, and they have ads for and from the Greek Cypric community in London. And they charge a decent amount to put an ad, a time-limited ad on their website, but they aren’t the Gucci ads…

Peter Jukes:  They’re classifieds. The classic classifieds.

Andrew Staffell:  They are, that’s absolutely what they are.

Thomas Eagle:  Paid by week.

Birgit Pauli-Haack:  Craig Newman made his…

Thomas Eagle:  Yeah.

Peter Jukes:  If that works, let us know. We had an interesting thing we saw along that line. We don’t charge for the moment, but it’s like a fourth most popular regular page. It’s called Radical Cities, and that’s an activist calendar. Where every week they fill this calendar with what’s going on across the UK. All kinds of activism not any political. So I think that’s really to get, sometimes it can be advertising, sometimes it might be other forms…

Thomas Eagle:  Peter is incredibly dynamic, like open to absolutely everything, doing a million different things.

Birgit Pauli-Haack:  It’s quite inspiring to see someone have this vision and go out and try it and see how it works, and then bring it in a bigger context and say “Well, that didn’t work,” but let’s go to the next thing.

Peter Jukes:  We’re really lucky to have met Andrew and Thomas, I’m not just being a Muppet.

Thomas Eagle:  No, we’re really lucky.

Peter Jukes:  But also you get it immediately you know and sort of it’s, you know I think it’s this background in journalism and design and code, but in a kind of holistic way. And it’s just been, I just thank God for that press regulator meeting. I’d just met Thomas, you wouldn’t think that’s where you’d find your nirvana, your technical nirvana. Hopefully we can spread this out. The white label thing is also that, monetizing a bit, making everything sustainable.

Andrew Staffell:  Yeah, absolutely.

Peter Jukes:  But you know other people can build these attractive and authoritous sites.

Birgit Pauli-Haack:  Yet a local news operator out there that don’t get any help, they just muddle through it, and have a really hard time for themselves, because they’re not the technology savvy, they don’t look around over the hill, so to speak. And then they are stuck in their old 20th Century advertising.

Andrew Staffell:  Okay, that is precisely the target market of what we hope to now make, and Gutenberg is fundamental to that happening. Just to bring it all together. In that sense I think we are, you know, we followed all of the controversy around Gutenberg and we were in two minds about certain things and still are. But, for this kind of project, it’s undoubtedly a blessing compared to what we had before. And it still has a long way to go and there are lots of things that need to be improved.

Birgit Pauli-Haack:  Well it’s the first year, right?

Andrew Staffell:  Yeah, exactly.

Birgit Pauli-Haack:  It really needs to though, and they are doing a lot of things from the ground up. A lot of people have already solved the problem, they kind of want to push it a little bit further than anybody had it before, so it’s an interesting time, in kind of talking to the developer team and around the Gutenberg platform. All right, well I’m so happy, as I said, I could talk to you another two hours, and I’m so glad that you took the time to be together and tell us about your Byline Times work and that’s the future for local news and I’m glad to be… You heard it here first.

Thomas Eagle:  Brilliant, thank you for inviting us.

Birgit Pauli-Haack:  Do you have anything that you want to point people to, apart from your own websites and bylinetimes.com?

Thomas Eagle:  We’ve just set a page, because we thought it might be useful to have somewhere for anyone that does see this can go to. So we actually put a page on yeswework.com/newsplatform, where people can go to to just get in touch with us and ask us what we’re doing with Peter and with Byline and where it goes from there on. We’ll build it there.

Birgit Pauli-Haack:  Well we have some…

Peter Jukes:  Going there now.

Andrew Staffell:  Yeswework.com/newsplatform to contact us.

Birgit Pauli-Haack:  One lady came in after a few, and it’s Anne and she said “Thanks everyone, looks like a very useful tool. Yeah. So, waving towards Anne, saying goodbye to you, and then we’ll put the link in the YouTube thing so…

Andrew Staffell:  Brilliant. Thank you so much.

Birgit Pauli-Haack:  All right, thank you.

Thomas Eagle:  Thank you very much, bye everyone.

Peter Jukes:  Bye.

Birgit Pauli-Haack:  Bye, take care.

Andrew Staffell:  Cheers.

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.

---

Resources

• AMP Project
• AMP Plugin for WordPress
• AMP Stories
  • Washington Post: Yemen San Francisco Chronicle: Ballet Camp Fire: National Geographic: Stonewall at 50
• AMP-Ready Themes
  • GoDaddy PrimerGenesis Themes (WPEngine)
• AMP-wp.og
• Understand how AMP looks in search results

---

Table of Contents

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.