In this workshop we will create (printable) books programmatically using web technologies and programming languages.
This workshop was originally designed as a way for designers to explore the possibilities of web programming languages as tools for design and self-publishing. It could also be of interest to anyone interested in: learning or experimenting with the finer points of web typography, web-based archival or publishing tools, alternative models for presenting content on the web.
There are probably many differences we can point to between a book and a website (or between analog/digital, old/new, etc.), and most of them have been discussed exhaustively in other places. For the purposes of this workshop, we are interested less in the difference in these media but in how to apply the unique features of each to the other.
We think of a book as a static object. Once it’s been printed, that’s it (until perhaps a new edition is released). The content cannot change, the form will always remain as originally intended, and it is, by definition, scarce. And by its nature, the process of making a book must follow a certain procedure: we create the content that will go inside it, format this content into the design of the book, print the pages, and bind it all together. The book is a finished state.
The internet (by way of its artifacts, websites) works very differently: we start with the form and let the contents flow into it. The design may adapt or even break to match a growing or at least changing set of inputs. There is no finished state.
This workshop explores what happens when you combine finished and unfinished states to create a snapshot in time.
Books are a wonderful format because their form (the best ones, anyway) respond to their subject. The book can be crafted around the story and become another layer in telling that story. In addition, they travel well, don’t run out of batteries, and by their very design tell you how much there is to read and how much you’ve got left.
A website has a harder time doing this because often the rules are written before the story is told. Rules-based design has its own benefits though: once properly set up, we have to do very little.
What would a book be like if:
You’ll need a few important pieces that work together to make this all function:
Finally, you’ll need to download the project template. I’ve gotten the basic set-up working for you so just follow the instructions for installing it in your own project.
After your concept and design is ready, you’ll need to get set up to write some code. We’ll cover some best practices together in class. Once you’re ready to go:
You will receive an invitation to a shared Dropbox folder. This folder is connected to Small Victories. Any files you put into this folder will sync to Dropbox and appear on your website (demo). The URL of your website will follow this structure:
jacobheftmann.com/automatic-book-workshop/projects/course/firstname (I’ll post this in class).*
*if you’re doing this on your own (not in a workshop) you can just make your own new Small Victories website (Feed) and use that instead. (And of course that’s the URL you’ll use.)
In your project folder, there is a file called
_sv_settings.txt. Update this with the name of your project and description. You’ll need at least the following:
title: theme: feed description:
Download the template files and unzip them. Put the contents of this folder into your project folder. When you refresh your website, it should look something like this. You may also want to add some of your own content (or at least remove the deafult content). Other than Bindery, this works just like a normal SV site (check the docs if you have questions).
Depending on your individual project, you’ll need to connect IFTTT or Zapier with your Dropbox project folder. You’ll use one of these services to automate the creation of the content that fills your book based on your own specific parameters. Test the integration to make sure that content is appearing in your project folder (and on your website) as expected.
Anything in this folder will appear on your website, so stay organized!
_sv_custom.js file, there is a function that runs
bindery.js. You can customize this function to set specific margins, page sizes, etc. based on your individual design (refer to the Bindery docs).
After your content and book are working to your satisfaction, open up your
_sv_custom.css file to start designing your book.
Because we’re making both a book and a website at the same time, there are some special considerations to make:
Consider techniques like progressive image loading, and
@screen media queries.
The source code for this website is available on Github.
This workshop was given for the first time at Hochschule der Bildenden Künste Saar in Saarbrücken, Germany in 2019. If you’re interested in running this workshop at your institution, please contact Jacob.