How To Create A Interactive Pdf In Indesign

tombstone for interactive PDF says R.I.P.

It sounds like I'm exaggerating doesn't it?

I'm not.

Almost none of the interactivity in an interactive PDF actually works, even in Adobe Acrobat and Adobe Reader.

What doesn't work in a PDF

Here's a list of things that you can create with InDesign that don't work in a PDF:

Animation
Video*
Animated GIFs
Multi-State Objects
Embedded HTML content (like YouTube videos)
Button actions related to several of the above items
Scrollable Frames
Custom page transitions (like flipbook pages)
Designer-controlled responsiveness

*Video was supported previously in Acrobat and Adobe Reader,but it was dependent on the Flash Player (which no longer comes bundled with the Adobe apps).

The introduction of smartphones and tablets—almost none of which now support Flash—and a slew of new PDF readers, essentially guarantee that interactive PDF features will not work when your clients view your PDFs.

To see the breakdown of an interactive PDF in action, and to get a sneak peek at the solutions that I describe below, you can watch the following video.

Here's what you can switch to today that supports interactivity

HTML. It's the language of the web page that you're reading right now.

HTML has all of the same layout capabilities that PDF does and has a much greater interactive capacity.

Remember the list of interactivity from above?

Animation
Video
Animated GIFs
Multi-State Objects
Embedded HTML content (like YouTube videos)
Button actions related to several of the above items
Scrollable Frames
Custom page transitions (like flipbook pages)
True responsiveness (some PDF reader do automatic adjustments on small screens)

HTML supportsall of them (and more).

Don't know how to (or don't care to) write HTML? Not a problem.

InDesign can export it for you.

How to create interactive HTML from Adobe InDesign

InDesign logo

I've detailed three ways to export HTML from InDesign (included in the video above as well).

Fixed Layout (FXL) EPUB
Publish Online
in5 (InDesign to HTML5)

Each of these solutions is HTML at its core.

Creating the interactivity with InDesign

It's rather straight-forward to create interactivity with InDesign.

The tools are visually-oriented and easy-to-use, so you don't have to know any code.

Video and animated GIFs can simply be placed in InDesign usingFile > Place.
HTML embeds (like YouTube, Google Maps, Twitter feeds, etc) can be pasted onto the page or inserted viaObject > Insert HTML.
Animation, Button actions, and Object States can be created with InDesign's built-in panels.
Scrollable Frames are supported via the Universal Scrolling Frames panel.

If you want to go even deeper into interactivity beyond a PDF, including with example files, check out the Creating Your First Interactive Document video course.

Any of the HTML options in this article will then export this InDesign-based interactivity, so let's look at each of those options in more detail.

Creating a FXL EPUB

An EPUB is essentially a zipped-up folder of HTML that can read by an EPUB reader app (like Apple iBooks or Adobe Digital Reader).

It's typically used for ebooks.

InDesign lets you export FXL EPUB viaFile > Export.

Pros of FXL EPUB

The EPUB is the only HTML option that produces a single distributable file (an .epub) that can be (fairly) easily read like a PDF.

This makes it easier to email your digital content and, in some cases, easier to sell your content in a marketplace (such as the iBooks Store).

Cons of FXL EPUB

EPUB readers are inconsistent in what they support.

iBooks, for example, has a habit of blocking outside content (or even inside content that appears to be outside content).

The reader app controls the page transitions and the overall experience.

Using Publish Online

Publish Online is a "technology preview" from Adobe. It's been in "preview" mode since 2015, so the future of this option is unclear, but it is super easy to use.

The quick and simple nature makes Publish Online a great tool for client and internal review.

Pros of Publish Online

It's push-button publishing. With a single step, your interactive document is sent to Adobe's servers and you're given a URL (web address) where your content can be viewed online.

Cons of Publish Online

Publish Online content only lives on Adobe's servers. You cannot put it directly on your site (though you can embed it inside of a container).

Adobe can choose to remove or alter your content at any time.

cannot edit - pencil with red circle and slash

Since you don't have access to the files, you also cannot customize them in any way.

Similarly, you cannot repurpose the HTML or convert it to a mobile app (which you could easily do with the actual HTML files).

Your Publish Online link is essentially private unless you choose to share it (though you cannot password protect it), which means it's also not exposed to search engines, so it won't appear in a Google search, or improve the SEO (Search Engine Optimization) of your site like HTML hosted on your own site would.

Publish Online uses the same underlying FXL export, which means it has some of the same underlying bugs, like the Object State rollover bug shown in the video above.

Creating HTML that you own with in5

in5 (InDesign to HTML5) logo in5 (InDesign to HTML5) is a custom HTML export that I created.

Once installed, you can export from within InDesign usingFile > Export HTML5 with in5…

in5 exports HTML to your local computer, so you can do anything that you want with it.

Pros of in5

Unlike Publish Online, with in5, you own the files that you export. You can put them on your own web servers.

can edit - pencil with green checkmark

You can also customize the files as much as you would like and you can create mobile apps from your in5 output.

in5 also offers a huge amount of flexibility with several push-button customizations like flipping pages for digital magazines, responsive layouts, and additional interactive options like 3D Flip Cards.

Cons of in5

in5 is a commercial tool, so there is an additional cost to use it (in5 pricing page).

Unlike Publish Online, in5 doesn't automatically upload your content to the web, so you'd have to take this step yourself.

Bonus option: hacking Adobe's FXL export

If you like the free price tag of Publish Online, but want more freedom with the files, check out Keith Gilbert's free script, which uses the underlying FXL export to save your files as local HTML. It's not as fully-featured as in5, but very handy if your project has no budget.

Which digital publishing option is best for your project?

PDF is still a great format for static documents, but if you want interactivity take a long, hard look at the HTML options that I've outlined above.

cover for digital publishing guide If you need more information about which digital publishing option best fits your project, check out the free Digital Publishing Technology Guide.

Get updates from Ajar Productions

Success! Check your email to confirm your subscription and get your reward.