What does “mise-en-page” mean in a responsive book?

There’s been a lot of activity in responsive typography and adaptive web design since I launched Scripta four years ago. Yet the fundamental questions remain: how to create sophisticated, capable tools for designing text to be read onscreen, and how to use the new techniques that are being developed daily.

What does “mise-en-page” (layout) mean in a responsive publishing environment? In print – whether a book, a newspaper, a magazine, a brochure, or a poster – the layout is based on the size and dimensions of the page. Onscreen, there is no fixed page. The dimensions and proportions of your screen are fixed at the moment you look at it, but as soon as you turn your phone on its side, or choose a larger font size, or switch to a different device to do your reading, that digital “page” changes.

Web designers like to quibble over “responsive” vs. “adaptive” design. One of the best simple explanations of the difference seems to be from Geoff Graham, who describes it as “the difference between smooth and snap design.” Responsive layouts shift fluidly as the viewing conditions change, while adaptive layouts have several alternate versions and snap from one to another when the changing conditions reach a predefined breaking point. (By “conditions” I mean usually the size, orientation, and resolution of the screen, but it can also mean changes in the font size.)

It’s probably easier to adapt your text typography in an adaptive design, where you can simply create several different layouts with appropriate choices in the text typography for each version. But what’s really needed is a way to create fully fluid layouts that incorporate flexible microtypography, with full control by the designer over how line length, line spacing, spacing between letters, hyphenation, number of columns, and choice of typeface should change as the conditions change. What we’re after is not iron control by the designer over the form of the page, but fine control over variables so that a typographer who thinks responsively can program their design to give the best possible result in every situation.

And yes: the design of ebooks is really just a subset of web design. Only now, however, is web design getting sophisticated enough to be considered as a way of delivering books online.

The biggest difference between tools for website design and tools for ebook design, as far as I can see, is the ability to break the content into pages. A web page may extend well beyond the “viewport,” the area displayed on the screen at any particular moment. By contrast, an ebook page is what’s shown in the viewport. And that’s where the interesting design problems come, the ones that we still need to solve.

September 9, 2017