Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.
I got into the ebook development game when a typesetting client was seeing terrible results from their machine-made ebooks. Content was garbled and the books were ugly. It was impossible to open a book and tell what you were reading. So it became my mission to create ebooks that were nice-looking individuals, just like their print counterparts.
You hear a lot from those who read on devices that they miss the feel of paper and the sensation of turning pages—of knowing where they are in a book and how many pages are left.
Ebook design certainly cannot recreate the print experience; running heads, page numbers, blank pages between chapters, and even drop caps are all print technology features. But in my opinion, ebook design can fill some of those functions, even provide some new experiences.
Here are a few things I do when possible. And I’d love to hear how other designers and developers boost the visual interest of their ebooks, as well.
Start with Page I
The title page is usually the first page in a print book, and its design often reflects the cover: type treatment and decoration are identical or else modified. For the digital edition, though, rather than embedding (fully licensed) fonts and spending a lot of time with CSS trying to duplicate an intricate type design, a frequent solution is to instead capture the print mechanical’s title page as an image and add it to the ebook.
This technique is sometimes used for chapter openers as well, where type and ornament are impossible to recreate for the ebook.
How to Do This
Whenever you turn live type into an image, though, be sure to include the alt text in the html. Describe the image: Title Page, My Book by Joe Smith-Jones, published by Joe’s House.
And don’t forget the epub:type for the entire page (here, it’s titlepage). You can add this in InDesign (in Object Export Options for the image) or directly in the html:
Table of Contents
Many print books don’t include inside-the-book TOCs, but ebooks should. Amazon recommends them, and I think they’re a handy tool for readers.
The device TOC and in-the-flow-of-the-book TOC are both found in the toc.xhtml, which you can build on your own. Or you can use InDesign’s table of contents builder. Joshua Tallent gives great tips on using the toc.xhtml for an in-the-book TOC in this blog post here on DBW.
The toc.xhtml is an ordered list, or a numbered list, and as an HTML file, it can be styled by CSS. You can dictate the color, the alignments, and space between elements.
I always ask the print designer to come up with a TOC design if it’s not already in the book. The goal is to use color and alignment to make a simple, usable contents listing. And I might add a book-specific ornament, as well.
Speaking of ornaments, think about adding a little decoration of some kind—something that will ground a reader in the book so she is reminded what it is she’s reading.
This is especially useful if you’re not using any text-as-image tricks (like capturing chapter openers as images). You can end chapters with a decoration.
Here’s a section opener with a simple set of bullets beneath. I used these bullets beneath each chapter title, and also as decorations in sidebars.
How to Do This
In this sample, the chapter title (Prologue) is an h1 head. To place the line of bullets in the HTML (here I use the numeric entity to render the bullet):
In the CSS:
A Break in the Action
Time breaks, narrative pauses or thematic breaks are indicated in print by a blank line space followed by an un-indented paragraph. That works fine in print, but in an ebook, text can reflow so the designer never knows where that blank line will land (at the top, middle or bottom of a page). So you want to have enough of a visual cue that a shift is happening.
The solution is to add a simple , or horizontal rule, in the HTML. That’s semantic (it’s understood by reading systems to indicate a thematic break) and straightforward. You can apply style via the CSS to the , and if you don’t want a line running across your page, you can hide the rule in the CSS (by giving it a value of width: 0;).
If you want a decoration of some kind, you can also add an ornament to your by inserting an image in the CSS, like so:
Using color is a great way to add personality to an ebook. Since color is free in ebooks that are read on tablets and smartphones, why not use it? In my ornament sample above, I chose to go this route (color:#A70F12;).
Now that’s all great for tablets. But what about e-ink devices?
If you use a very pale yellow, will it read on a Nook Simple Touch or will it disappear? Test, test, test. Sideload your EPUB and MOBI onto different types of devices, not just a smartphone or a tablet. Don’t forget the e-ink.
And, as I said in my previous post, never use color to indicate meaning. A pale yellow chapter title should not be the only signifier introducing poems about the sun. E-ink readers won’t pick that up, and neither will assistive technology.
And on the Fixed-Layout Side
Fixed-layout books mirror the print edition. Type, art, color and design are exactly reproduced. That’s fine on the EPUB3 (iPad, Kobo, etc.) side of the fixed-layout presentation.
On the Kindle side, though, you get region magnification, too: the pop-up. A reader double taps a bit of text and it pops up to be more easily read.
There’s a tool, Kindle Kids Book Creator, that generates these books. But the pop-ups are generic—same magnification amount throughout the book, same grey border around the pop-up, same white background.
Here’s a chance to distinguish your book from all the others. Adjust the magnification so it makes sense for your book. Tailor the border of the pop-up box to the art on the page (make it red or blue or even pale grey, if that’s what you want). Add a color to the background of the pop-up, or even an image. (Check out my Lynda.com course, “Creating a Fixed-Layout Book for the Kindle,” for tips on accomplish this.)
Apple has an application that’s only available to Macintosh-based designers: iBooks Author. It creates multi-touch iBooks, which can be sold through Apple, or distributed by the creator. You can create spectacular books with this tool, with audio, video, scrolling sidebars, and many other kinds of add-ons. Suffice it to say that no two books created in iBooks Author look alike. They can be as individual as any print layout.
So how do you embellish your ebooks? Leave a note in the comments saying what you’ve seen in books that increased your sense of place and brought a little pleasure as well.
In my next post, I’ll look at some typographic tricks to improve the reading experience. And I’ll talk about some content you can add to make an ebook a complete individual, not simply one of the pack.
To get all the ebook and digital publishing news you need every day in your inbox at 8:00 AM, sign up for the DBW Daily today!