Once we get past simple linear reading books, the real challenge in designing for online, ePub and print in a simultaneous design production environment is planning and executing content flows for the different presentation contexts.
There are a number of options available to create a format optimized reader experience. What works for print, does not work for e-books,
especially with a text-book style document such as this exercise
example, This Dynamic Earth (TDE) by W. Jacquelyne Kious and Robert I.
Tilling.
This book is
available online as a web pages. It was one of the few copyright free
content sources that was adequately "textbook" for this exercise.
Unfortunately there are no print resolution images available, so both
online and print images may look a little fuzzy. But this blog is about
Simultaneous Design, not image processing!
Simultaneous Design for multiple formats
The objective of simultaneous design is to create engaging user experiences in multiple formats. If the user has access to both the print and e-book versions there should be enough similarity in the look and feel of the documents to provide comfortable familiarity.
This post is about simultaneous design considerations, not design itself. I know the book could do with a bit more TLC but it is a spare time exercise.There are a zillion things we could do to turn this into a real book, but that is not the purpose of this post.
It is reasonable to state that simultaneous format design is both a new and an unknown art/science at the time this was written. Because IGP:FLIP (Front List Interactive Publishing) is the only available production environment that can do it, this document is probably the very first practical demonstration of thinking print/e-book at all stages of document design.
The major considerations for simultaneous design are:
- Target formats. In this exercise print is assumed, but it is essential to know what eBook formats and devices will be targeted. In an ideal world it would be all of them, in the digital divide of today that may not be possible depending on the features of devices, and demands of the content. If colour and layout complexity are important, then format target must be a limited range of devices or environments.
- Styling. Appropriate text, block, colour and white space elements to allow the reader to move through the content in an engaging, non-distracting and informative manner. In terms of Simultaneous Design, we specifically do not mean flow layout which is a single format property, whereas style can be applied to all formats.
- Flow. Where and how objects sit on the print page, where they are positioned and how they position and behave in a flow context for a specific format, whether that is print, or e-book formats for a wide range of devices. It probably includes whether or not interactivity is used in the e-book.
There is obviously an overlap between these decision domains but as much as possible we isolate them here for clarity.
Target Format SD Decision Matrix
This book has no tables and no inherent X content (that
means content that demands a certain minimum width to present itself). It was decided to make TDE as an ePub that would work on virtually any device. The narrative is linear, and the Note box sections reinforce and amplify the text narrative. Therefore this version of the ePub has been kept simple, linear and usable, if not brilliant on an eInk device.
Style Design
We are starting with a round-up of style simultaneous design. Print design techniques can be used for most stylistic design decisions. This means font colour, size, position, white space, and general decoration effects on the primary content flow.
It was relatively easy to go for a textbook title page and chapter left opener for print, but how much should that be
replicated for readers? Relative font-sizes, colours and spacing is easy
to translate and has the same communication effect.
Fonts: Families
The rich jungle of discretionary font choices available for print becomes a cruel desert for e-readers.
It is necessary to reduce the print font-jungle to three sticks of bamboo; serif, sans-serif and monospace to address the widest range of readers. Whatever other e-book font strategies are used (device fonts, embedded fonts, etc.), the big three general fonts must always be used as the fall-back for other styles.
A designer has a number of choices they can make for various device support for font-embedding and/or device supplied fonts. In a book that needs colour for full communication value, targeting the capabilities of non-colour devices may be counter productive. E-format font decisions must always be overt, based on current and target device font capabilities. Wishing it was better is futile. It's not.
Font SD decision matrix
- The book is targeted at all possible devices. Think - it has to work with a single font.
- The book is targeted at eInk devices (monochrome). Think - enough contrast has to be included in coloured elements.
- Is font-family presentation absolutely critical. Think - If yes, target only the devices which can do what you need and drop the rest.
Relative font sizes
IGP:FLIP with IGP:Document Designer handle font related metrics by using the primary text line-height to compute all pixels to proportional em units. This is relatively successful for most parts of most documents. There is an over-riding rule that all point to em conversions are capped at 2em, except in a few reserved places.
This includes border, margin and padding properties. IGP:FLIP automatically converts points to em for a good starting point for e-Pub design. In most cases this is an effective working strategy, except the positioning of enough.
Colour Issues
Like styling, colour can be dumbed down to grayscale for print if necessary. Where colour is used for print, CMYK colour choices have to be tested before printing. Because their is no real hue correlation between the RGB and CMYK colour spaces, in IGP:FLIP design is done on the monitor in RGB (what a monitor can do), and print is converted to CMYK. The choices may then have to be "touched up" to get to the final colours after proofs have been pulled. The IGP:FLIP RGB-CMYK correlation colour chart can be used with your printer to assist with this. It is best to treat colour design as a separate process.
In TDE we played with a few coloured blocks, but finally decided for this exercise to keep it simple. If you are targeting eInk devices with a heavily coloured e-book then contrast testing is essential. What looks great in colour may merge when converted to eight shades of gray. Make sure you do a contrast test early in the design.
Where your print books are in monochrome serious think about introducing colour for the e-book editions. It does make a value difference, especially in a multi-section book with multiple heads and notebox sections. It is easier to turn colour to gray than vice-versa, so get it right at the beginning.
Information Images
Graphic artists need to keep in mind screen topography when designing graphics. In this book we had an image with the keys to the left. Looked great in print set across the margins, but the image was unreadable at 600px width for devices, so the key was moved under the primary artwork. This made the image accessible for e-books. The overall image is still landscape so doesn't give any overly strange flow problems.
A second image couldn't
be handled this way elegantly so two versions were prepared. One for
the print book and one for the readers. IGP:FLIP allows the
substitution of images for various formats at rendering or assembly time
so the work overhead is in artwork variant preparation rather than
other production processes such as composition.
Both image/media strategies are needed. But if artwork can be designed and prepared with both formats in mind, the decisions are made at the right point in the production process and not as an afterthought which inevitably raises costs.
Another major consideration for images in readers is aspect ratio. Very large portrait aspect ratios become a big problem in readers. If an image has the value of a plate, keep the aspect ratio between 1:1.3 to 1:1.4, about the same shape as A4. If your image has to be taller, then you must explicitly control the number of pixels in the height of the image to less than the target reader screen pixels. Typically this means keep them under 750px.
Content Reordering
This discussion also raises the question of content reordering. Sometimes content relations just have to be positioned differently from print for e-formats. Ideally you will get this right in the initial flow stage, but keep the options open.
Page and Document Location References
Top. Image of something. Bottom. Image of something else. On the right blah blah, On the left blah blah. On Page 27. Get rid of them if at all possible. Think multi-format. If they have to be in print ensure you have substitute content and hyperlinks. We will discuss Indexes in a later post.
Flow Design
Flow means layout of defined content XML blocks that are referred from the primary content bodytext. Print leads in styling design. Digital content sequence needs to lead for flow design. This is because it is relatively easy to move content blocks such as images, noteboxes, sidebars et.al. for print, but this is difficult for an ebook.
Content Blocks: A named and identifiable block of content that is not part of the primary content flow, and may have independent value as reusable content. Typical structures include images (figures, illustrations, plates, etc), sidebars (many different types), pullquotes, noteboxes, etc.
There are many content blocks that can be positioned outside the primary galley text flow. Different publishing genres have different rules and requirements. For example a general academic layout guideline is an image must appear on the page immediately following its first mention in text. This is usually handled with float top/bottom properties and is particularly easy and elegant with XML content strategies.Unfortunately the same easy approach cannot be taken for education and information content.
With illustrative text where there are no figure numbers (like this example book), the images must be placed in relation to the text to be meaningful and so the images reinforce the text at the point of engagement.
Reader Flow and Float
The restriction of flow and float for Online or e-book content is that "moveable" content cannot be very far from its references in the galley text or context is lost. An alternative is hyperlinking, but for expository informational content such as this, hyperlinking is counter indicated.
There are very few real positioning options available other than floating left and right, or occupying some percentage of the galley width. This e-book requirement becomes the most important factor when deciding where to place images, noteboxes or other content that is not in the primary flow.
This is where XML content varies considerably from print DTP applications. The images and their positioning are part of the XML. In print images are placed on the page and have a page position context. With XML flowed content there is no page context unless the target is a page. This takes some getting the head around for those steeped in Desktop apps.
Image 1. is the reader flow plan for "This Dynamic Earth". Because the book contains very large related noteboxes, these required their own treatment, however the notebox internal flow and float decisions are a near echo of the main galley. The large note boxes also had to be placed in a appropriate position in relationship to the galley text. The decision was to put them at the end of an A-Head section if it was available, else at the end of the chapter.
Noteboxes
This particular book has large informative notebox sections that are intended to be read as stand-alone informative articles. They are set in two columns for print and are generally floated to the top of the page and occupy the full page width. They appear at their insertion point in e-books but do not have columns, even though some readers can display them, because of the length of the blocks.
An alternative design would have been linking to these from the text. It was a decision to leave them in place in this book as they were part of the learning narrative.
Images
There are a number of images that are large with very large captions and there are a number that are small to medium with large captions. This is a challenge as the caption's association with the image is in a content block and significantly changes its height if placed at the bottom. For this book this was an important factor in placement in the flow.
Print Flow and Float
In many respects print is easier than reader content because it does have the very physical constraints of absolute units. The images here are the flow and float options that were planned for this book which illustrates the rich repertoire of layout options available for a page. Of course the constraint is the area of the page and inevitably page count and print cost. Remember this is about XML flow and float layout not manual layout.
Image 2. Text Galley Layout
The page is A4. Chapter openers are set across two pages without margins. The primary text galley is a three column design. One outer margin column, and two columns for the text. The A-Head spans to the margin, and the B-Head is inside the Galley.
We are using XML here, so there has to be a nomenclature that works for the production environment. We call the central text flow the galley (the gray area). This is inside aligned to the inside margin. The outside margin is where the A-Head starts. So we say set to galley or set to margin. Of course in a normal novel type book margins and galleys are identical.
Image 3. Margin Controlled Floats
These are the images that are moved from their position in the XML to positions relative to the margins. There are three types of floats. A. Full margin, but also with page positioning options, top, top-next, bottom and bottom next; B. outer margin to width (could also be inner margin to width); and on Image 4. C. Float into the margin area.
Image 4. Galley controlled Floats
This shows the various galley float relationships. There are two primary galley floats; A. Galley width which also has the options, top, top-next, bottom and bottom next; and B. Float left and right with some percentage of the margin width.
Image 5. Notebox layout
Noteboxes
have been set to the margin width with two columns and a shaded
background to make them standout from the body text. They have also been
set in sans-serif. We made the decision not to float images in columns
in this book as most of the pictures needed to be close to their
referring text. But column images can have all the properties of the
galley positioning described above.
Resolving the Flow Issues
As discussed at the top, the positioning of the floated content is first optimized for e-Readers because other than resorting to hyperlinks, the content must be in a reading contextual flow. It is then positioned for print.
Fortunately IGP:FLIP and IGP:FoundationXHTML has an XML control called PIP - Print Insertion Point. This allows any XML block to be moved to a nominated position in the galley, and it will then render horizontally from that point at print PDF generation time. Remember this is using XML all the way.
This gives a lot of layout power that is easy to use. Very important when working in a non-WYSIWIG environment.
Summary
This has been an exercise in front list Simultaneous Design for Print and Readers. The content was middle-level demanding, mainly because of the relatively large image count, and un-even spacing and placement of images. Other text-book type designs generally will have many more issues. The points that emerged from this and the previous exercises is to produce multiple formats from Digital Content requires some level of planning and forethought and understanding of the characteristics of the target formats.
Resources
The PDF and ePub file can be downloaded from the IGP:FLIP Portals Working Samples Page.
You can view the PDF online here in the IGP:RealSearch Online Document Reader.This is a standard component supplied with IGP:PublisherECMS.
Simultaneous Design V.
Next up is A Comprehensive Outline of World History (Organized by Region) by the late Jack E. Maxfield.
(Take a sneak preview at <http://cnx.org/content/col10597/1.1/ > ) This brilliant life work with 281 Sections is an ideal example of how high value topic based content can come alive for many purposes when managed from a digital environment that allows it to be instantly reused.
Comments