EPUB: Designing eBooks for the iPad

By:

Colleen Cunningham Adams Media

Avon, Massachusetts

Presented at: ACLEA 47th Annual Meeting

July 30 – August 2, 2011 Boston, Massachusetts

Colleen Cunningham Adams Media Avon, MA  

Colleen  Cunningham  is  Senior  Book  Designer  at  Adams Media,  a  division  of  F+W Media,  Inc..  After getting her start  in newspaper and journal production, she found her home  in book  layout and design, focusing on  trade non‐fiction  in categories as diverse as business, self‐help, humor, and cooking. As a print book designer, she has  found that having a strong sense of order, organization, and  information hierarchy can be directly applied to ePub design. She has now transitioned to digital production full time at Adams Media and also trains  layout designers how to  integrate eBook production  into existing print workflows.  She  has  spoken  at  the  2010  HOW  Design  Conference,  the  2011  Digital  Book  World Conference,  the  Book  Builders  of  Boston  2011  Spring  Forum  Series,  and  the  Boston  InDesign  User Group. Colleen lives in the Boston area with her husband and step‐son and enjoys photography, cooking vegetarian dishes, and running. Visit her blog at www.thebookstudio.wordpress.com.                                   

Presented by Colleen Cunningham, Senior Book Designer, Adams Media 07.31.11

WORKSHOP B

Designing eBooks for the iPad and other eReaders

ACLEA’s 47th Annual Meeting, Boston, MA

• The EPUB format is the open eBook standard developed by the International Digital Publishing Forum (IDPF). It is based on a number of other open standards including XHTML and CSS, just like the web.

• The EPUB format is like not an app (software-like) or a PDF (not re-flowable).

• EPUBs and eReaders go together. It’s best to get familiar with both.

• The EPUB format is about reading convenience. Users can read on a wide variety of devices, but this creates production challenges: different screen sizes re-flow the text; reading engines support different code complexity; users can change text size and sometimes the fonts.

• Currently ideal for straight text and content that does not require a lot of formatting, but this summer EPUB3 and HTML5 will support more formatting. Device support will follow . . . by the end of 2011?

What is EPUB? It’s a Container.

Required Reading!

EPUB Straight to the Point by Elizabeth Castro

book: http://elizabethcastro.com/epub

blog: http://pigsgourdsandwikis.com

Kindle Formatting by Joshua Tallent

book: kindleformatting.com/book

website: http://ebookarchitects.com

Cannot specify a cover image

Cannot include Publication

Year metadata

Cannot break text (all text

frames must be linked); images

must be inline or anchored

Cannot export nested styles

Cannot automate chapter

breaks; break ID file for chapter

starts (use book palette)

Cannot specify a CSS template

Cannot specify a cover image

Cannot include Publication

Year metadata

Cannot break text (all text

frames must be linked); images

must be inline or anchored

Cannot export nested styles

Can automate chapter breaks

(Bug: xrefs in multiple

documents can break)

Can specify a CSS template

Can specify a cover image

Can include Publication Year

metadata

Can specify order of unlinked

text frames and images in new

Articles panel

Can export nested styles

Can automate chapter breaks

(Bug still there?)

Can specify a CSS template

(Some) InDesign Version Improvements

CS4 CS5 CS5.5

Steps in the InDesign to EPUB Workflow

1. Create file in InDesign and export 5. Validate

2. Unzip (if necessary—not using editing

software that un/zips automatically)

6. Test on device(s) for

quality assurance (QA)

3. Edit code for finessing and validation7. Upload to eBook seller (buy an ISBN,

supply metadata in separate feed)

4. Zip (if necessary)8. EPUB to Kindle conversion

(if necessary)

More information at http://digitalbookworld.com/resources-going-from-indesign-to-ebook

❍ Tools for visual hierarchy of content: font weight, font size (in relation to other content), white space, and indents.

❍ Style text with paragraph and character styles to translate into HTML (no “+”).

❍ Replace multiple returns with space attached to paragraph styles—they register as no space. Remove soft returns in running text—they register as hard returns.

❍ Remove special spaces (non-breaking, thin, etc) as they can create odd characters. Try using tracking or “no hyphens” in print file.

❍ (CS4/5) Thread text in order and anchor all images/captions and floating sidebars—unthreaded text and unanchored objects are pushed to front or end of the EPUB file.

❍ Hyperlinks: Create in hyperlinks panel.

❍ Cross references: Replace page references from the print file with cross references to chapters or sections in hyperlinks panel.

❍ Include chapter numbers, titles, and subheads in EPUB TOC menu.

❍ (CS4) Break up single InDesign file for section/chapter starts. Use the book palette. XHTML files have to be < 300 K for validation.

❍ (CS4) Place cover image as .jpg in first ID file.

❍ Enter metadata (File / Info)

❍ Consider converting complex tables into art. See http://ebookarchitects.com/conversions/enhanced.php for examples.

InDesign File Prep: Best Practices

InDesign CS4 used for demo

What will not export:

• Anchored master page items (watch for unanchored master page items, they will be pushed to the end of the EPUB)

• Elements on the pasteboard

• InDesign-generated TOC and index

• Drop caps, caps, small caps, white spaces

• (CS4/5) Outlines created or placed within the InDesign document (shapes and fonts)

• Rules attached with paragraph styles

• Font weights besides roman, italic, bold, and bold italic (like medium)

❍ Choose “Defined Styles” over “Local Formatting” to keep your EPUB file size low. Manual formatting = more code.

❍ Lists: map bulleted lists to unordered lists and map numbered lists to ordered lists (but the code will need to be fixed in the EPUB).

❍ Consider choosing “original art” option and re-sizing art to 100% in Photoshop for control over output quality:

❑ 600 pixels on longest side is a good size for detailed images

❑ keep images < 10 MB

❍ Avoid embedding fonts. This increases the file size and there are rights issues. Embedding = redistributing the font.

InDesign to EPUB Export: Best Practices

InDesign CS4 used for demo

EPUB Editing: Best Practices

❍ Unzip the EPUB file (if necessary)

❍ Edit the EPUB file:

❑ (CS4/5) add date metadata to content.opf<dc:date>2011</dc:date>

❑ (CS4/5) add cover file to the content.opfin metadata and manifest

❑ fix spacing of headers called out in TOC[in CSS] margin-top:

OPTIONAL EDITS:

❑ add additional metadata to content.opf

❑ make images scalable in relation to width of eReader screen[in HTML] style = “max-width: 100%;”

❑ fix list formatting[in CSS] p.bullet to li.bullet, indent=0

❑ add more space to the outside margins[in CSS] set body and @page margins

❑ avoid page breaks after heads (not support on the iPad yet)[in CSS] h1 {page-break-after: avoid;}

❑ set font preferences (see iosfonts.com)[in CSS] font-family: sans-serif; serif; [etc];

❑ add cross-referencing[in HTML] use #xx and id=“xx”

❑ embed audio/video files, set long tables in non-linear files (see ebookarchitects.com for examples of EPUB enhancements) use HTML5 <audio> and <video> tags

❑ apply div HTML/CSS for images/captions

❑ fix drop caps / caps / small caps

❍ Zip the EPUB file (if necessary)

Dreamweaver CS4 used for demo

Compiled by Anne-Marie Concepción of InDesign Secrets:

Apply Nested Styles (hard-applies character styles)

http://in-tools.com/scripts.html#apply_nested

Turn GREP Styles to Character Styles

http://indesignsecrets.com/downloads/TurnGrepStyles2CharStyles.zip

PrepText (converts manual to character styles), CS4/CS5

http://indesignsecrets.com/downloads/preptext.zip

EPUB with Correct Links (read the special installation instructions), CS5 only

http://teusdejong.nl/thome/ho_body5.html#scripts

If you need help installing scripts, read this post:

http://indesignsecrets.com/how-to-install-scripts-in-indesign.php

Free InDesign Scripts for EPUB workflows

Inject QA into your eBook workflow!

❍ Your EPUB file must pass validation in order to be accepted by eBook retailers:

❑ http://threepress.org/document/epub-validate

❑ http://code.google.com/p/epubcheck

❑ http://code.google.com/p/flightcrew

❍ Review on multiple eReaders if your EPUB is meant for multiple vendors:

❑ use ADE for rough proofing

❑ can only proof iBooks on the iPad

❑ use eReaders whenever possible

❑ use eReader apps whenever possible

❍ Remove copyrighted content specifically for print from eBook editions.

❍ When reviewing, check the following:

❑ formatting: clear information hierarchy, spacing, indents, character styling, capitalization, page breaks

❑ TOCs: click-able menu works and TOC page cross-references work

❑ cross-references: work and correctly point to other parts of the book (and that there are no unlinked “see page xx” left over from print material)

❑ hyperlinks: work and correctly point to web address, try to avoid deep web addresses as they may change when web sites are edited (“&” will break a link when used in a hyperlinks, Amazon uses them in their hyperlinks)

❑ art: is scaled correctly and is placed at the correct dimensions

Adobe Digital Editions used for demo

❍ EPUB files are not used on a Kindle. Kindle eBook formats include .mobi, .azw, and .prc (similar). Amazon’s Kindle Publishing Programs page has all the information you need.

❍ InDesign does not export directly to the Kindle format, so use conversion software on an InDesign-generated EPUB file such as Kindlegen.

❍ It’s recommended that the newer version of Kindlegen (v1.1) only be used for files with audio/video. Otherwise, the new version needlessly inflates eBook’s file size.

❍ Download the Kindle Previewer to check the formatting and validate your Kindle eBook.

❍ Common changes to formatting during EPUB to Kindle conversion include:

❑ lost space between paragraphs

❑ lost hanging indents

❑ inconsistent handling of drop caps

❑ image re-sizing on the Kindle (small images are expanded to fit screen unless dimensions are set inside the image tag)

❍ Amazon Kindle Publishing Guidelines has specific instructions regarding how to code the cover in the content.opf file. Their preferred format for the cover is a .jpg image of 600 x 800 pixels.

Converting EPUB to Kindle

Experiment

Reach out to the EPUB community

Have fun!

Last Words

EPUB Resources

TWITTER http://twitter.com–use #ePrdctn

DBW http://digitalbookworld.com (@digibookworld)

MY SITE http://thebookstudio.wordpress.com (I’m @BookDesignGirl)

ADOBE http://adobe.com/digitalpublishing (@adobe)

LYNDA.COM ($) InDesign CS4/5 to EPUB Kindle and iPad video tutorials

INDESIGN SECRETS http://indesignsecrets.com (@amarie)

LIZ CASTRO http://pigsgourdsandwikis.com (@lizcastro)

EBOOK ARCHITECTS http://ebookarchitects.com/resources.php (@jtallent)

Presented by Colleen Cunningham, Senior Book Designer, Adams Media 07.31.11