Go With the Flow: Responsive Tips for Book Design

By Lee Wyndham

“Ease of production is where it all started for Gutenberg and it is starting again for us. […] Making books in the browser will have an enormous impact on society as a whole, and just like the printing press, it will not revolutionise the old order, but create a new one.”1

Adam Hyde, Booktype Project Lead

Publishers today are faced with a challenge. Their traditional print workflows are not efficient for creating ebooks. For the most part, publishers have cobbled together some sort of print-to-ebook conversion, and struggle to make the content work for the many different devices that exist today.

Their challenge echoes a question in the minds of all companies, organizations and individuals who have websites that must now render well on mobile devices, tablets, and any number of screen sizes, resolutions and browsers. One possible answer has emerged: responsive web design, which embraces a flexible, grid-based layout and flexible media.2

Publishers can no longer afford to play catch-up. The tools exist today, in web design and programming, to create responsive content that, following a set of pre-determined rules, will appear as the designer intended in any number of outputs, including print layouts.

Design is not dead – on the contrary, the tools are getting more sophisticated and now offer the same level of detailed control as print design suites. However, there is a gap in knowledge in traditional publishing that will need to be filled. Bring on the designer/programmer.

The Great Divide: E-readers and Tablets

Since the launch of the iPad, there has been a split in ebook formats. One format is the e-reader (Kobo, Nook, Kindle), which uses an e-ink screen and generally displays just text, with minimal images. The second format is the tablet (iPad, Kindle Fire, Nexus 10), which uses a backlit, high definition screen and works well with media-rich content, apps, and fixed-layout content (PDF).

With the current divide, publishers can use a fairly simple workflow to convert long-form content into ebooks for the first type of device. Generally, the text is converted from an InDesign file into EPUB through a combination of mark-up and export. However, book designers have expressed dissatisfaction with the design and typography options of e-readers. For example, since users control the font size and text is justified by default, gaps called rivers form between the words, which can make reading difficult.3

Now that the iPad has gained prominence in the market, tablet devices seem to be the way of the future. In September 2011, Amazon released the Kindle Fire, the first tablet device in a long line of e-ink readers. The Kindle Fire does not have the same legibility as e-ink screens, but the most recent version does have reduced screen glare and improved pixel density.4 If tablet devices can compete with e-readers for easy legibility, their other functionality (media-rich display, internet connectivity, etc.) will secure tablets as the e-readers of the future. It is up to publishers to learn how to make their content work in this new medium.

Behind the Scenes: HTML & CSS

Both e-reader and tablet content are based in the language of the web. EPUB, the international standard for ebooks, is essentially a zipped folder made up of XHTML and CSS.5 Ebooks are really just webpages, and the devices that render them are browsers. For example, Webkit, a fully featured browser similar to Firefox or Chrome, powers the iBook reader that is used in the iPad.6

John Maxwell has said:

“An ebook is a website in an envelope with HTML+CSS inside. At heart, ebook production is web production. Conversely, InDesign is being used for page layout, but building ePub files out of InDesign is hard, because you’re trying to serve two masters: print (page layout orientation) and structure (flow orientation). InDesign has no real separation of content from format, and digital formats are about structure.”7

The MPub cohort of 2010 ran an experiment to produce a book in print and electronic formats using an XML-based workflow. The Book of MPub was written and revised in WordPress, then converted by way of a script from XHTML to IDML. IDML is a simpler XML-based file format that can be read by Adobe InDesign.8 The real achievement was a streamlined workflow that produced well-designed content suitable for both print and electronic outputs.

Thinking of book production from the web first is a real breakthrough. First, it means that publishers can produce content that is easier to tailor to the devices of today. But more importantly, by adopting the principles of responsive web design, publishers can prepare their content to flow into the devices of the future.

Content Management and Rules with Foresight

The first principle to embrace in responsive design is that content (text or media) is not fixed in any way. Instead, the goal is to have a set of relational rules that will respond in a fluid way to any device. Mark Boulton argues, “We need to start talking about content in terms of bits, not pages. And we need systems that help us think that way.”9

From the Book of MPub example, we know that a web content management system (CMS) can be used to develop book-length content. These systems allow writers to mark up content with metadata so that it can be pulled and displayed in a number of ways. Also, they now allow designers to style content in terms of proportions and relationships, rather than fixed sizes and locations. For example, using the measurement ‘em’ rather than pixels allows fonts to be resized proportionally. Likewise, images and other media can be sized by percentage rather than pixels, and controlled by a rule that will not allow the image to exceed the size of its container. Lastly, designers can create fluid grids, using the same principles, that will ensure the content displayed matches whatever device the user is accessing it with.10

As Karen McGrane, a user experience consultant, says:

“No one has ever regretted saying I want to plan for the future. I want to plan for flexible reuse. I want to imagine ways that I can use my content again in the future. I want to start now in thinking about what I have to do so that I can make my content free for whatever platform or device it needs to go onto.”11

Leveraging Web Tools for Book Design

The above principles can be applied to book design. Print book designers have full control over the reader’s experience of the printed page – line length, font, spacing, alignment, kerning, etc. That level of control is actually possible, to a certain extent, for electronic content. The key is to use the same set of rules and proportionality as responsive web design.

For example, the issue of rivers formed on e-readers from justification and large font sizes can be solved with a set of rules to control hyphenation and justification. InDesign has a sophisticated system that allows the designer to control where and when words can be hyphenated. The same rules can be applied through HTML markup and Javascript. Likewise, a set of rules called “keep & break controls” can be used to determine which elements should stay together and which can be broken up onto a new ‘page.’ In theory, with web design tools, we are not far from having “a flexible system for intelligently and elegantly adapting to the size, resolution, and rendering methods of any device at all.”12

This is not just a dream of the future – many of these tools exist. With respect to typography, CSS controls type with a set of cascading rules, and Javascript allows for dynamic manipulation of text objects. For example, kerning.js allows designers to control individual characters and the spaces between words, just like with print typography. TypeSet optimizes line breaks in justified text using an algorithm, and Colorfont allows for multi-coloured fonts.13 This functionality is made possible by using OpenType fonts, which contain script information and allow for detailed mapping between characters.14 “CSS and Javascript are fast becoming the new tools of the typographer – not just for the web, for ebooks and for print, and not just for printed books, but for all printed material.”15

This accounts for the fine points of typography, but what about images and other media? Most CMSs have WYSIWYG editors that provide a simple window for editing text and inserting media, including basic text wrap options. However, these editors do not let the user move and edit elements on the page directly. A new generation of HTML5 editors allows users to do just that. Content bits can be moved directly on the page, even in multi-column layouts. There are also plugins for javascript typography and tools that allow the designer to see the effect of CSS changes directly.16

Two new HTML5 editors stand out. The first, called Mercury, is still in development. The demo shows how you can change the page content directly, by dragging boxes and clicking within text fields to edit.17 The second, called Aloha, is a little more intuitive. Aloha works with WordPress, Drupal and other CMSs. Changes such as resizing images, inserting links and formatting text are done instantly and directly.18 These tools are still in development, but soon they could merge with the sophisticated design tools of Adobe’s Creative Suite, which already features web design tools, CSS, and fluid-grid layout options.

Fine for Ebooks, But What About Print?

The most important aspect of leveraging web design tools for book publishing is that it does not exclude print production. In fact, a web-first workflow would make print production faster and more fluid. The same tools – CMSs, CSS, javascript – can reflow content into fixed PDF layouts with all of the design controls described above.19 For example, the CSS Generated Content for Paged Media Module offers advanced functions for controlling the layout of elements on a fixed page, like footnotes, table of contents, page numbers, margin controls, and page size.20

The new HTML5 editors can also be used for web-to-print conversions. “We are beginning to turn our attention to the tools for making webpages, to make books, and this, it turns out, is much easier than with Desktop Word Processing and Publishing software.”21 One of the Aloha editor demos shows the possible applications for a multi-column print layout.22 Using such tools, print layout becomes a straightforward output from structured web content. More importantly, this output is not restricted to a set of pre-designed templates. All of the sophisticated, custom design features are there.

Take Control of the Future of Publishing

Tools like Mercury and Aloha are becoming increasingly intuitive, which is good news for staff at publishing houses who may be more comfortable with traditional desktop publishing. However, for web-based book design to work, someone on staff must be able to understand the programming language behind these handy tools.

The design profession has been going through rapid change since the digital age began, with some designers specializing in print and others in web. I think publishing houses would benefit from the expertise of a designer/programmer, someone who knows how to leverage the tools of web design to achieve the same fine craft as print designers. In his treatise on the Future of Publishing, Thad McIlroy argues, “Graphic design is essential to the future of publishing but its role and methods must change. Many graphic designers will require additional training.”23

The lesson is this: Don’t play catch-up to the proliferation of devices on the market. Plan ahead, make your content rich with metadata, and design with rules that will respond to the constraints of the device. We shouldn’t leave the future of publishing in the hands of Apple or Microsoft. Publishers have the greatest asset: beautifully written, thoughtfully edited content. It is up to us to showcase this content in a rich variety of formats, according to the aesthetic we have designed, to make the best possible books for our readers.

“In order to profit – literally – from the new digital markets, publishers must rethink the way they create, manage, publish, and deliver content. They must re-engineer their processes to create more flexibility and guarantee a sustainable and certain future. They must re-imagine a production process that frees their content to be transformed — on-demand — into whatever new formats, devices, and uses consumers require, now and for the future.”24

Dev Ganesan, President and CEO of Aptara

 


Notes

  1. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  2. Ethan Marcotte, Responsive Web Design (A Book Apart, May 16, 2011), 1-160. Accessed January 13, 2013, http://proquest.safaribooksonline.com/9780133053029
  3. John D. Berry, “The Typography of Ebooks,” Easily Amused (blog), May 10, 2010. Accessed January 17, 2013, http://johndberry.com/blog/2010/05/10/the-typography-of-e-books/
  4. Jakob Neilson, “Kindle Fire HD: Much Better Than Original Kindle Fire,” Alertbox (blog), December 19, 2012. Accessed January 14, 2013, http://www.nngroup.com/articles/kindle-fire-hd-usability/
  5. International Digital Publishing Forum, “EPUB.” Accessed January 18, 2013, http://idpf.org/epub
  6. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  7. John Maxwell, “Publishing Books: Web-First” (lecture, Simon Fraser University, Vancouver, BC, July 20, 2011). In “Insert Book Designer Here: Adjusting ebooks for Readability Over Novelty,” Kimberly Budziak, PUB 802. Accessed January 12, 2013, http://tkbr.ccsp.sfu.ca/pub802/papers-september/insert-book-designer-here/
  8. John W. Maxwell and Kathleen Fraser, “Traversing The Book of Mpub: an Agile, Web-first Publishing Model,” The Journal of Electronic Publishing, Volume 13, Issue 3, December 2010. DOI: http://dx.doi.org/10.3998/3336451.0013.303. Accessed January 16, 2013, http://quod.lib.umich.edu/cgi/t/text/text-idx?c=jep;view=text;rgn=main;idno=3336451.0013.303
  9. Mark Boulton, “Adaptive Content Management,” The Personal Disquiet of Mark Boulton (blog), October 19th, 2012. Accessed January 16, 2013, http://www.markboulton.co.uk/journal/adaptive_content_management
  10. Ethan Marcotte, Responsive Web Design (A Book Apart, May 16, 2011), 1-160. Accessed January 13, 2013, http://proquest.safaribooksonline.com/9780133053029
  11. Karen McGrane, “Adapting Ourselves to Adaptive Content (video, slides, and transcript, oh my!),” Karen McGrane (blog), September 4, 2012. Accessed January 14, 2013, http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
  12. John D. Berry, “What is Needed,” Easily Amused (blog), March 6, 2012. Accessed January 13, 2013, http://johndberry.com/blog/2012/03/06/what-is-needed/
  13. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  14. Microsoft, “Advanced Typographic Extensions – OpenType Layout,” Microsoft Typography. Accessed January 17, 2013, http://www.microsoft.com/typography/otspec/ttochap1.htm
  15. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  16. Adam Hyde, “WYSIWYG vs. WYSI,” O’Reilly Tools of Change for Publishing, December 3, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/12/wysiwyg-vs-wysi.html?goback=.gde_104765_member_192074761
  17. “Mercury Editor,” GitHub. Accessed January 15, 2013, http://jejacks0n.github.com/mercury/
  18. “Aloha Editor.” Accessed January 15, 2013, http://aloha-editor.org/
  19. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  20. W3C Advisory Committee, “CSS Generated Content for Paged Media Module,” W3C, Editor’s Draft, August 23, 2012. Accessed January 16, 2013, http://dev.w3.org/csswg/css3-gcpm/
  21. Adam Hyde, “The New Typography,” O’Reilly Tools of Change for Publishing, October 18, 2012. Accessed January 11, 2013, http://toc.oreilly.com/2012/10/the-new-new-typography.html
  22. “Mercury Editor Demo,” GitHub. Accessed January 15, 2013, http://aloha-editor.org/demos/3col/
  23. Thad McIlroy, “The Future of Graphic Design,” The Future of Publishing, July 4, 2009. Accessed January 15, 2013, http://thefutureofpublishing.com/
  24. Dev Ganesan, “The Best Reason for Re-Engineering Book Publishing,” Digital Book World, January 25, 2010. Accessed January 13, 2013, http://digitalbookworld.com/2010/the-best-reason-for-re-engineering-book-publishing/

3 comments:

  1. Lee, nice coverage of this emerging technology.

    Regarding approaches to print; whether the work is done by a trusted old formatting engine like InDesign (like we did with Book of MPub) or via emerging methods using the browser and various .js tools, what is clear is that HTML has proven itself as a robust, common content platform that can serve both digital and printed outputs. That makes the web – as a platform, if not a delivery mode – the safe bet for publishers today.

    And definitely check out Champagne’s report on responsive design!

  2. Agreed, great paper and connection between responsive design and book production. With html5 and css as the basis for so much of our reading experiences today, I’m 100% with you. The trick now is to have javascript supported by those pesky ereaders and reading apps. Then we’d be cooking with fire.

Comments are Closed.