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
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.
1 Comment
This is awesome, can’t wait to see more on how to use gutenberg for not just news sites but also for technology blogs something like a magazine style look and feel of course designing it using the gutenberg editor.
Thanks
Nhick