Headless CMS for a Printed Pizza Book
How we use our web-development workflow to make a book
At Buro.Int, interactivity is always at our core. This doesn’t mean we stick with digital media all the time, though. In one of our latest projects, we’ve worked on a paper printed pizza book. Yes, I am talking about real ink!
We had the ambition to create a flexible solution that allows to easily scale to any imaginable end-medium: from e-books to apps or websites. To achieve this we used a Headless Content Management System (CMS) from sanity.io.
What is Headless?
A classical CMS, e.g. WordPress, provides two things: Firstly, an easy-to-use graphical user interface (GUI) to create content. And secondly, an integrated solution which outputs the content as web-pages.
A headless CMS however is detached from the second part. Instead it only gives away the pure data through an application programming interface (API). It doesn’t care about the final output type at all. The front-ends can be any: Websites, Apps, Voice Assistants, E-Books, Games etc. The grand idea is that when content is pure data, presentation modes can evolve independently of the content.
The process
Defining the Structure
Through just a few JSON files, we were able to generate an entirely customised user interface. It could be tailored to various content types and their relation to each other. Not thinking about the final presentation at all, we created whole net of information that we could decide on later how extensively we want to use it.
To give you an example: KitchenStories, an app for many delicious recipes, not just lists all ingredients on the very top but also on preparation step level. This can be achieved with our structure easily, too. But that’s not all, supporting a set of multiple languages (localisation) could be accomplished with just a few more lines in JSON.
All this is nothing we decided on in our cooking book. But maybe we do in future? You never know. We are prepared.
Managing the Content
Handling the client’s content and maintaining an overview became also much easier. Without the need of a hosting provider we got a simple interface on sanity.io to collaborate with our client. Everyone could easily insert, review or upload content. No need for Word documents. 😇
This made the process also more effective and failure proof because usually the way things are done is by sending lots of emails and documents back and forth: the writer finishes his work, a person reads through and adjusts, the publisher does the final adjustments, et cetera. Now all of this is done in Sanity. No more emails and misunderstandings.
Fetching the Data
After the content creation was finished, we exported it as XML, a format that integrates well with Adobe InDesign — the design tool of our choice for print projects. In XML content is wrapped in opening <tags> and closing </tags> which define the meaning of the data in between. Unfortunately Sanity doesn’t allow to export XML out of-the-box but we managed to write a small program to do that.
What we’ve got exported was a fairly complex XML-file with a lot of data. But InDesign supports another file type called XSLT which let us trim the complexity to our needs. It allows you to define your desired structure and fill it with contents of your original XML file. Also, if/else-conditions, iteration-loops and many other logics are possible. XSLT is basically just an additional XML but on steroids.
Generating the Book
After the import, we had to link tags with defined text styles through a dialog window and could already run a quick test to see if all data is linked correctly.
To avoid a lot of manual drag-and-dropping we made use of InDesign’s Smart Text Reflow. This generated us as many pages as necessary to fit all content in — completely automated.
The Result
Conclusions
It was impressive how easy it is to automate tedious tasks and also improve client collaboration.
Working as a designer with Sanity.io meant a certain learning curve. But the guys at Bengler who developed Sanity were very helpful in their Slack channel. Apart from that, JSON is no rocket science — once you get used to it, it is actually pretty easy.
Sneak Peek
Below, get a sneak peek of the final book before its release in September.
If you enjoyed this article leave us some claps, let us know what you think and visit our friends at Lofthus 🍕.
If you want to become part of our team in Oslo, Berlin, Porto or Coimbra. Don’t be shy, apply!
