InDesign Guide to Digital Publications – EPUB 3 and HTML5

• Tweet
• Email
• Sumo

• Tweet
• Email

This is a guest post from Felipe Santos from Dualpixel Digital, in Brazil. He helps designers, editors, authors and digital enthusiasts (EPUB 3, HTML5, and apps) to produce and publish content combining tech and design, even for those who don’t know anything about code. You can find Felipe on Twitter: @_dualpixel.

A long time ago, in a galaxy far, far away … (you remembered the song, right?)

Graphic design and web professionals compete for the market’s attention for both online and offline publications. The past ten years have seen new habits, new devices, and new distribution channels influencing both. In this guide, I’ll give you tips and concepts to start a professionally-made digital publishing project.

As one of the primary means of producing designed content, Adobe InDesign has played an important role in the intersection between graphic and web design. In this article, you, the graphic designer, creative professional or student will learn how to start producing a digital publication, from InDesign.

To better understand the context that InDesign occupies in the segment of digital publications, I recommend reading this article: The Evolution of Adobe InDesign – from print to digital (only in Portuguese).

THE TERM EBOOK

Before you start reading, I need to clarify the use of the term ebook in this article.

The Wikipedia definition says, “Digital book (electronic book or e-book anglicism) is any information content, similar to a book, in digital format, which can be read on electronic equipment.”

However, the term ebook is often associated with digital marketing and can be used as educational material to generate leads and build relationships with potential customers.

In this article, instead of ebook, I am using the term Digital Publication to serve not just books, but any kind of publication in EPUB3 and HTML5 format.

Even though Wikipedia (https://en.wikipedia.org/wiki/Electronic_publishing) begins by describing the term digital publication as a “concept that is difficult to define”, I believe that using a broader term is useful here.

HTML5/EPUB 3 formats

In this guide, I am considering the combination of InDesign and the IN5 plug-in when I refer to the production of HTML5 publications. For the reflowable EPUB3, format I use the combination of InDesign and Sigil.

New document

First step to start a project: new document. But, my dear padawan, don’t rush too much.

Start off with a briefing meeting with your team to figure out a few important details. Besides talking about the visual design, also talk to your customer about the distribution. Some critical questions include:

• Is there a printed version already?
• Distribution for desktop, or mobile? Or both?
• Will you need browser access or only digital bookstores?
• Do you need offline access?

We will go through each of these questions and understand how to create the document that meets the needs of the project.

1. Is there a printed version already?

Well, if there is already a graphic design for print media, the most practical and quick way is to take advantage of this document by, if necessary, adding interactive features, such as: navigable summary, hyperlinks, multimedia, etc.

Production for HTML5 works well from the A4 format, for example, being able to switch between double pages on the desktop to single page on mobile. The Mobile Article Explorer feature complements this type of production well, as it ensures that the reading of the text is separate from the layout.

Regarding EPUB3, production from the printed version is still very common and usual practice. Another characteristic of reflowable EPUB 3, it is to be independent of the document format, that way you can create a document (if necessary) in the format you want.

2. Distribution for desktop, mobile, or both?

For the HTML5 format there is no defined rule, but I can share good practices, based on my experience. However, keep in mind that the table below is just a starting point.

I strongly recommend that you analyze the characteristics of each project, perform tests and try out the best format for the combination of your message and the needs of your audience.

Physical pixel and Logical pixel

Viewport – Understand the difference between physical pixel and logical pixel in this very complete article on the topic: What’s a Pixel?

Regarding EPUB3, we don’t have the concern about orientation, format and resolution, as the publication is reflowable, in other words, fits different screen widths. In the table below, understand the differences between fixed, fluid, adaptive and responsive formats.

Fixed vs. Fluid vs. Adaptive vs. Responsive

In this efficient and didactic video, learn the differences between these format concepts so common on the web, and important in digital publishing projects.

• Fixed – fixed widths, without media queries (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
• Fluid – relative widths, no media queries
• Adaptive – fixed and relative widths, with media queries by device or screen resolution
• Responsive – relative widths, with media queries for content and layout.

3. Browser access or digital bookstores?

If the project seeks to facilitate reading by allowing direct access by the browser (desktop and mobile) HTML5 is the most suitable format, since the EPUB 3 format, despite the efforts of the W3C, it is not (I think it will never be) compatible with current browsers.

Much of the EPUB3 format distribution is directly linked to proprietary platforms and devices, creating closed environments, true silos for content marketing (ebooks) and devices (ereaders).

4. Need offline access?

To meet this requirement, you will need to produce a Kiosk App, capable of downloading the publication (HTML5, EPUB3 and PDF format) for later offline access.

Through browsers, this type of distribution is now viable by combining InDesign and IN5. Learn more about how a Kiosk App works by watching this video – Awesome Kiosk App Built with InDesign & in5.

Getting Started

Now, after analyzing and answering the questions above and approving the distribution profile with the customer, you can create the document to start the project professionally and consciously for digital publishing.

Then, in InDesign on a Mac or PC, go to File → New → New document and set up the following properties.

• Intent: Web
• Pixels as dimension
• Margins and Columns apply to HTML5 projects only
• And of course, document bleed isn’t relevant in digital publications 😊

Workspace

Defining the workspace according to the needs of the project can help you to be more productive in carrying out everyday tasks in InDesign.

After adjusting the panels, the way, you want, save them as a new workspace. You can switch between desktops in the upper right corner of the InDesign application window.

Two workspace presets are provided with InDesign (found in the drop-down menu at the top right), “Digital Publishing” and “Interactive for PDF”.

I believe that a mixture between these two presets will serve you well, both to produce publications in HTML5 and in EPUB 3.

Basically, for EPUB3 the main panels for editing are related to styles, all of them – character, paragraph, object, table and cell. The interactive part of InDesign is further explored in HTML5 format.

The following is a quick introduction to the subset of interactive panels:

Animation

Create animations and determine how objects move. Learn how to create animations in InDesign by watching this YouTube video: https://youtu.be/c-1fh8gTVFQ.

Time

When multiple animations are applied to a page, the Time panel controls the display order of these objects.

Buttons

Convert objects to buttons and control their properties.

Object states

Create objects with multiple states (such as slide shows and drop-down menus). Each state can be shown and hidden using buttons. This is powerful for creating complex interactions. See some examples in this YouTube video: https://youtu.be/udR02nCZvv0.

Hyperlinks

Displays all external and internal hyperlinks (cross-references) applied to the document.

Liquid layout

Set up rules on how objects can be repositioned when the document is viewed in different formats and orientations.

Media

Manage video and audio files imported into the document. You can customize how these media files are played and viewed. Preferably for MP4 format, for videos, and MP3, for audios.

EPUB preview

Visualize the appearance and behavior of an animated and interactive document without having to export it first. Works well for native InDesign features and serves the production of HTML5 and EPUB fixed layout. To produce reflowable EPUB 3 this preview panel does not apply.

Content & HTML

Especially to produce the EPUB 3 format, the association between InDesign styles and HTML tags is essential. There is a direct relationship between each type of style applied to the document and the main tags in HTML. Check the image below.

To perform this association task, open the Paragraph Style panel and choose the option Edit All Export Tags. The panel below will be displayed, apply the tag according to the type of formatting of each style.

Formatting & CSS

STYLES – Character, Paragraph, Object, Table, Cell

As anyone who has used character and paragraphs styles in InDesign can attest, the style saves a lot of time and provides a level of precision and consistency that would otherwise be impossible.

Object styles allow you to format a text box, for example, with padding property, stroke, corner effects, transparency, among other items, all saved in a single style.

Text properties – InDesign and CSS

Many graphic designers have difficulty editing HTML/CSS files, however after a little study (effort and willingness) the relationship between the formatting applied in InDesign and the CSS classes becomes increasingly evident.

The image below shows the formatting of a typical text paragraph, comparing the InDesign panels with the CSS declarations.

Export to HTML5 / EPUB 3

IN5 plugin

How about starting to produce Interactive Digital Publications in HTML5 even without knowing anything in code, combining Adobe InDesign layout and interactivity features, with the main tools of Digital Marketing – Google Analytics, Chatbot and Facebook Pixel, among others.

Check out this YouTube playlist about IN5 plugin and learn that it is possible to go far beyond PDF.

Kiosk App

Create content with InDesign, HTML, EPUB, or PDF and publish straight to app. No programming required, mobile and web compatible. See some projects here: https://en.dualpixel.com.br/applab.

EPUB 3

Check out 20 essential InDesign resources for EPUB 3 Format Production, in the article Ebooks from InDesign: Twenty Things to Consider.