How to Make Ebook Design Count

Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.

How to Make Ebook Design CountI 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:

Code

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.

Ornament

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.

Prologue

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 Code to render the bullet):

ScreenHTML Shot 2016-02-23 at 2.24.56 PM

In the CSS:

Code

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 Code, 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 Code, 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 Code by inserting an image in the CSS, like so:

Code

Color

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.)

iBooks Author

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!

5 thoughts on “How to Make Ebook Design Count

  1. gmarksflgmarksfl

    As an award winning author/designer/publisher I too began helping authors with formatting their ebooks because of the limitations of the ‘tools’ available to non-designers. Preparing your ebook design and layout is not a one-step process. It only the beginning. Tweaking the code is the ONLY way to ensure your ebook looks its very best across device platforms.

    I am glad to see that Kindle has begun allowing text wrapping in their newer devices, but knowledgeable ebook formatters know we still have to code for the older devices too or you may encounter issues.

    Ginger Marks
    Author of Kindle Publishing, Yes You Can!

    Reply
  2. Dave Bricker

    Thanks for your good advice, Kevin. Unfortunately, though eBooks are composed with HTML and CSS (the same technologies used by the web), the variances in how they’re rendered by different devices and platforms are reminiscent of the \browser wars\ of the 1990s that had web developers labeling their sites as \optimized for Internet Explorer\ or \ … for Netscape.\ Designing for ePub produces diminishing returns.

    I developed the PubML® eBook format (short for Publishing with HTML) as a free, open-source alternative because web browsers offer much greater consistency in rendering, web fonts, \wired\ functionality, and none of the \can’t do that\ obstacles associated with popular eReaders. A custom WordPress plugin makes web-based eBook production easy for amateurs and non-coders, and it also exports ePub files (because for all my idealism, authors still want to sell books in popular bookstores). If eReader technology is that inconsistent, why not turn to a free and open medium that does a better job?

    None of this conflicts with your good coding and eBook design advice, but web-based eBooks are worth mentioning because they provide many more typographical options than your average traditional eBook, visual tools that accomplish some of your design goals, and a much more book-like reading experience.

    Reply
  3. Merry Banerji

    Great tips! I’ve been formatting books–mostly romance with some mysteries thrown in for a few years now. My favorite trick is to steal elements or designs from the author’s cover. For example, if the title on the cover has no capital letters, neither does the chapter titles. If there’s a visual element on the cover that can be made small I’ll steal it and use it for section breaks within the book. These little touches are, in my opinion, what makes formatting ebooks fun!

    Reply

COMMENT

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>