Tag: formless content

In-Browser Design

The page is changing in so many ways – time-based media is making its way into book pages, reactive content, scrollable space, and a multitude of differing display devices make designing pages pretty hard work these days. How to design for so many possibilities? How to understand so many possibilities?

Craig Mod of flipboard makes a very compelling argument for two forms of page : formless and definite content in an article he wrote for Book: A Futurists Manifesto – the first book to be produced by PressBooks. Craig’s argument, in a nutshell and in his own words is:

the key difference between Formless and Definite Content is the interaction between the content and the page. Formless Content doesn’t see the page or its boundaries; Definite Content is not only aware of the page, but embraces it. It edits, shifts, and resizes itself to fit the page [...] Put very simply, Formless Content is unaware of the container. Definite Content embraces the container as a canvas.

Craig argues that most book content we know is formless – the text can reflow into other containers without affecting the meaning. This position is in tension to the thinking of most book designers today. Designers of paper books design contained space and desktop publishing applications are built to manage pixel-perfect manipulation within a strictly defined and known container. If the finished digital article does not exactly co-relate to the printed artefact then something went wrong; it is assumed that either the designer, or the tool, has done a bad job.

Those familiar with this kind of process are uneasy with designing formless content – how can you design a page when you do not know its container? It is literally like asking a book designer to design a book without telling them the page dimensions. Web designers, on the other hand, have been thinking about page design too, and they have for a long time, at least in part, been designing for formless content.

The design of formless content is really a partially-formless, partially-constrained design process since elements within the page have some kind of relationship to each other, and they can have relationships to characteristics of a page, such as top or top left, for example. These relationships are defined by rules, the same rules I have discussed previously – CSS aka Cascading Style Sheets. Relationships can be articulated with CSS which will be preserved when displayed in different contexts. The meaning is preserved by the relationship between the elements and page features more than by their relationship to the the exact x,y position of a page with a specific dimension, although strict placement is possible. This is the job of Cascading Style Sheets – the design language of the web. It is rule-based design with some conditional arguments and it is the method for designing electronic books; it will become, increasingly, the technology for describing the layout and design of paper-based print.

All of this can be manipulated in the browser. In fact, the browser is the best place to design flowable text since it is the flowable type environment of our time and, as mentioned before, the browser (Webkit) is the background technology for many e-readers. We have not yet seen the development of very good flowable design environments in the browser, but that is changing. The closest we have seen so far are the ‘in-browser’ design environments that some internet service providers make available for their customers to ‘design their own website online!’ While actually quite powerful, these environments are generally horrible to use, but this practice is applicable to the design of ebooks.

The desktop publishing world is not taking this lying down, and Adobe, in particular, has been pursuing what they call “Adaptive Design Tools” for the production of ‘liquid content’. Liquid content is flowable content, content that can rescale and position itself to fit the container. Adobe’s tools are intended for content targeted for mobile devices and tablets, although they also identify a role for it in print production. Adobe’s yet-to-be-released Adobe Edge is the product targeted at this flowable design process and their background technology for this design environment is – Webkit, the same browser mentioned earlier. Webkit is the ‘design surface’ for the new generation of desktop design tools coming from established publishing technology providers.

Coming back to the paper book. Until recently it has been extremely difficult to generate a PDF that exactly co-relates to what you see in a browser. Until now the browser accessed the PDF-creation features of the operating system. Hence a PDF from the same browser would look different if that browser were running in Windows, Mac or Linux. Just recently this has changed and the browser itself is now making the PDF. Chrome has been pioneering this ‘Native PDF’ output from the browser and the output looks exactly as you see it in the browser. One to one co-relation of content in the browser to the content in the PDF is a breaking point which points the way to designing your paper book in a browser. We are getting to the point where you can use a browser just as you would a desktop publishing application to design paper books.

The browser can now play every part of the book production process except the actual printing (although from the browser you can upload PDF to print-on-demand services such as Lulu.com).

What this means is that you can write a book in the browser, while at the same time it is being proofed and edited, and designed. Each part of this formerly-linear production cycle can now become synchronous. You can now write, edit, proof, design the book ‘in the book’.

Formless Content

There is a lot of interesting stuff happening to the page right now. The page is changing in so many ways – time-based media is making its way into book pages, reactive content, scrollable space, and a multitude of differing display devices make designing pages pretty hard work these days. How to design for so many possibilities? How to understand so many possibilities?

Craig Mod of flipboard makes a very compelling argument for two forms of page in an article he wrote for Book: A Futurist’s Manifesto : formless content and definite content. (This was the first book to be produced by PressBooks.)

Craig’s argument in a nutshell and in his own words is:

The key difference between Formless and Definite Content is the interaction between the content and the page. Formless Content doesn’t see the page or its boundaries; Definite Content is not only aware of the page, but embraces it. It edits, shifts, and resizes itself to fit the page [...] Put very simply, Formless Content is unaware of the container. Definite Content embraces the container as a canvas.

Craig argues that most book content we know is formless – the text can reflow into other containers without affecting the meaning.  It’s a really well-argued position and one that is in tension to the current design methodologies of book designers today. Book designers are taught to design contained space – books are a very definite context in which they work. Desktop publishing applications are built to meet this methodology and are designed to enable pixel-perfect manipulation within a strictly contained space. If the designed digital article does not exactly match the printed artifact then something went wrong. A lot of energy has gone into this process.

Formless design principles are uneasy to consider for traditional book designers – how can you design for a page that does not yet know its container? It is literally like asking a book designer to design a book without telling them the page dimensions.

As it happens, web designers have been thinking about page design too. For a long time now web designers have made pages that embrace differing containers – they have been working, at least in part, with formless content.

What is missing, however, are good tools for taking the web designer’s aptitude for working with formless content to enable them to produce books. A good tool set for designing formless books should not work with constrained page dimensions. It is tempting, for example, to think of working with a design environment with constrained page-like artifacts – think of Google Docs as an example. Could something like Google Docs with its digital, scrollable, yet fixed page size be a good starting point for some kind of design tool? Place layout and typographical controls on top of Google Docs and do we have the next book design environment?

I don’t think so, because it is exactly the kind of idea that is blinded by the media of the past and cannot accept that things have changed. We must design tools that enable book design for formless content. What those tools look like is a very interesting question and one which Aleksandar Erkalovic (Booktype lead dev) and I have been working on with students (Hannes Bernard and Aiwen Yin) from the Sandberg Institute in Amsterdam.

Our argument is that the design of formless content is really a partially constrained environment, since elements within the page have some kind of relationship to each other. This is an argument web designers are familiar with when using design tools like position:relative – a rule which sets a relative position relationships between objects. Relationships can be constrained or shaped by rules which will be at least partially preserved when displayed in different contexts. The meaning is preserved by the relationship between the elements, more than by their relationship to the constraints of a page.

This is the reasoning behind Cascading Style Sheets – the design language of the web. It is rule-based design and even partly conditional. It is possible to express conditions in CSS even though it is not done that often. A CSS rule such as :

h2+p {page-break-inside:avoid;}

is a conditional CSS rule which will apply the style only when a paragraph follows heading 2 (h2) element.

Web designers know this kind of thinking, but book designers are going to have to let go of pixel-perfect design and enjoy thinking and designing this way. It seems like a simple idea but it takes a lot to overcome legacy. The legacy is so strong that designers are pretending the issue does not exist. There are tools now appearing and sold as design environments for iPad books. They give near 1:1 page relationship between the design environment and the final result. However, we all know what happens to digital hardware – it changes. What is true now will not be true 5 years from now, so the idea that an ebook is a contained space is very appealing to traditional book designers but it will be a short-lived myth. iPads might keep the same form for 5 years, they might not but they certainly will not keep it over the next 5-10 years. Better to learn how to design in the new way than be fooled into thinking you can bring all the old methods to a new medium and get away with it for long.

What we are working on now, is a way to meet the designers half way – a visual design environment which is used for rule and condition based design. Can book designers accept a tool like like this? Will web designers just step in and take the role of book designers? Its an interesting question and one we hope to have some more experience with soon.