Ajar Productions

How to Publish Interactive HTML to Your Own Server From InDesign

It’s well-known that Adobe InDesign is a powerful layout tool.

It’s slightly less well-known that InDesign is loaded with interactive capabilities (buttons, object states, animation, audio, video, etc).

These interactive capabilities were partially supported by interactive PDFs…until mobile devices came around.

These devices used all different kinds of PDF reader applications, and none supported the Flash-based interactivity inside the PDFs.

Now even the desktop version of Adobe Reader doesn’t automatically come with the Flash Player installed.

So how can a designer make use of all the interactive tools?

HTML can support the interactivity that PDF does not, and it can be viewed on mobile devices.

InDesign has a “technology preview” called Publish Online that publishes a document as HTML onto Adobe’s servers.

This is an amazingly fast way to get your document online and viewable.

However, the content is only hosted on Adobe servers and cannot be saved, moved, or modified.

What if I want to customize my output? Or host it on my own site? Or make it viewable to search engines? Or create an app?

If you want the files to be your own and to host them on your own servers, etc…you’re in luck, but you’ll need to use a tool other than Publish Online.

Keith Gilbert’s free script

Keith Gilbert discovered a hidden scripting object that let him make use of InDesign’s Publish Online export (essentially the same as the Fixed-Layout ePub export) and save the files locally.

The script is awesome and free, but limited in certain ways (e.g., you have to take some extra steps to create working page navigation, but Keith created a script to help with that as well).

in5 (InDesign to HTML5)

in5 is a commercial InDesign to HTML exporter that I launched on Kickstarter several years ago and have fine-tuned over multiple versions.

in5 is fully-featured, supports all of InDesign’s interactivity, and lets you add new kinds of interactivity.

It’s easy to customize, built to host on your own site, has easy search engine optimization features, and the output can easily be converted into a mobile app.

Here’s how it works

Create your content with InDesign
Export with in5 (File > Export HTML5 with in5…)

(Yes, it’s that simple).

Check out what customers have already made with in5.

There’s a free course to get your started with in5, which includes a lesson on publishing to your own site.

I’m here if you have any questions or need help with in5.

Happy publishing!

Sophisticated Animation & Interactivity into InDesign & Out to HTML5 (in5 v3.1 New Feature)

Justin

For a long time, in5 users have been wanting to include content from Adobe Animate or Tumult Hype in their projects.

And there has been a way to do it with HTML files and the Web Overlay panel (used by DPS/AEM Mobile, but supported by in5)…

Note: in5 now has its own Web Content panel under in5 > Interactive Widgets > Web Content.

But InDesign has supported a more natural approach for most designers: placing OAM files (packages of HTML from animation apps) directly on the page.

I’m pleased to announce that version 3.1 of in5 also supports placed OAMs.

Check out the video below to see an example of an OAM with complex animation and interactivity exported with an InDesign document.

Check out our full webinar with the team at Tumult Hype.

It’s just one of the ways that in5 v3.1 puts more publishing power in your hands without having to code.

You can subscribe to get updates on in5 releases.

Viewer Display Options & Control Bar (in5 v3.1 New Feature)

Justin

While in5 is super easy to customize, sometimes it helps some prebuilt tools that your viewer can use to navigate your publication.

In the video below, you can see the new Viewer Display options that is now available with in5 (InDesign to HTML5).

As you can see in the video, all you have to do is check a few boxes to add the following items to your HTML5 output from InDesign:

Jump to Table of Contents (configurable)
Show Page Thumbnails
Zoom in/out
Switch to fullscreen
Download a PDF
Show reading progress (as a progress bar and/or page count)

These updates are available to Pro subscribers as of version 3.1.

See this feature in-depth within the Creating Your First Interactive Document course.

Scaleable HTML5 Layouts from InDesign (in5 v3.1 Feature)

Justin

in5 (InDesign to HTML5) is incredibly flexible. It’s easy to attach custom functionality to your output.

I’ve shared several customizations on this blog and on the Answer Exchange.

The most popular customization by far is the “desktop scaling” code that scales layouts proportionally to the browser window.

In fact, when most people ask me about a “responsive” layout, they actually want to maintain their layout and simply scale it proportionally (a truly responsive layout changes at different sizes—I’m working on that, too).

To make it even easier for you to create flexible layouts (on both desktop and mobile), I’ve folded this scaling feature into in5 and refined it further.

Check out the video below to see it in action.

(It even works with the new page flip transition!)

Update: You can now also create fully responsive layouts with in5.

Download a copy of in5 to try out Desktop Scaling.

Merge InDesign Spreads into Pages: in5 v3.1 Feature

Justin

Are you moving from print to digital?

Need help exporting your spreads to HTML?

Starting with version 3.1 of in5 (InDesign to HTML5) comes with a script that lets you merge multi-page spreads into single pages.

Before running the script

Here’s a screenshot of a document with spreads before the script has been run.

To merge each spread into a page, you’ll simply run the Merge Spreads script that will be installed with in5 v3.1.

After running the script

The script will produce a new document (so your original is left unchanged).

Note that the number of spreads and the number of pages are now the same in the image below.

InDesign Pages panel showing spreads have become pages

You can now finish prepping the modified document for a digital format (web, mobile app, etc).

This is just one of the ways that in5 will help you transition from print to digital documents.

Get a free copy of in5 today to start using the Merge Spreads script.