Ajar Productions

Ways to make HTML5 from your PDF with InDesign and in5

If you have a PDF that you would like to convert to HTML5, you have a variety of options. Because in5 is an InDesign plugin, the interactive features and conversion to HTML5 let you take advantage of InDesign’s features. The best way to convert your content to HTML5 is to start with the original InDesign document and export with in5. However, even though there is no mechanism for directly converting an existing PDF to HTML with in5, there are some ways to start with a PDF and export HTML 5 with in5 without having the original InDesign layout.

Ways to get the PDF into InDesign

There are a few

Convert the PDF back to an InDesign document

This option converts the entire document to something you can edit in InDesign, which will give you the most flexibility.

If the PDF was created in InDesign, you are online, and you have signed into your Adobe account; you can use the PDF to InDesign feature currently in beta at the time of this article’s publishing. Locate the public InDesign (Beta) with Adobe CC to convert your PDF back into an InDesign document. Then you can export the InDesign layout with in5.

You could instead use a third-party tool, such as PDFMarkz (or the older PDF2DTP), to convert your PDF to an InDesign document so that you can export it with in5. These are commercial options, but have been around for much longer and may work better than InDesign’s brand new (beta) feature.

Place the pages of the PDF onto individual pages

Alternatively, you can insert the PDF pages into InDesign as objects, but they won’t be editable and they’ll simply get exported as images.

Place (File > Place…) the pages of the PDF onto individual pages in a new InDesign document as images. Select Show Import Options in the Place dialog box so that you can select All pages.

The cursor changes into a Place Gun loaded with each page of the PDF as an individual image that you can add to each page separately. Then export this InDesign document with in5.

Note: as placed images, the pages from the PDF won’t retain their original interactivity, and you may need to adjust the image quality to increase the resolution so that text in the PDF that has been converted to an image will be clearer.

Create a document that links to the PDF

You could instead decide to create a document that is made to be online and links to your PDF. Here are a few ways to do that:

Export the HTML5 content with the Viewer Display and add a downloadable PDF that in5 can generate from InDesign or that you can create separately and specify as the downloadable PDF.
Create a hyperlink to a PDF.
Create buttons in an InDesign document to go to the PDF and add the folder than contains the PDF as a resource.

in5 vs PDF Flipbook Makers

Although it is possible to create a flipbook from a PDF with an online service instead of in5, exporting your content with in5 directly from InDesign has multiple advantages over these services.

First, be aware that the PDF format doesn’t support most of the interactive features in InDesign.

In order to add interactivity to a flipbook from an online service, you need to learn how to use their proprietary tools.

Additionally, if you need to make a change in the original document, you’ll need to re-export it after making changes, bring it back into the proprietary tool, and re-make all of the interactivity.

Instead of learning how to use proprietary tools, you can create your content using the familiar tools in InDesign and export your content with in5. And your changes will always live with your InDesign file. You can simply re-export with in5.

You also don’t need to be limited to creating a flipbook. With in5, you can turn your content into a variety of types of interactive content:

Flipbooks (of course)
Modern digital (an online publication with fade-in transitions between pages and the Viewer Display which is a navigation bar with a variety of options)
Longform ebook
Mobile app
Web app
One-page site (a vertically scrolling site with no spaces between the pages)
Landing page (responds more like a traditional website)
Microsite
Scrolling Doc (a vertically scrolling publication with spaces between the pages)
Banner Ad (for Google Ads)
Presentation
Animated GIFs (created using InDesign animation presets and the in5 Animated GIF Maker)
MP4s (also created using InDesign animation presets and the in5 Animated GIF Maker)

In addition, with other services, you only have access to your online content there while you have an active subscription with them, and they only store your content for 90 days after your subscription ends. After that, your HTML5 content gets deleted.

If archiving your content is a concern, rest assured that the content you export with in5 is yours to keep and will continue to work–even after your subscription ends. If you need to re-export from InDesign, you would need an active subscription.

If you’d like to try the approaches described here in order to turn your PDFs into HTML5 content with no coding required, download the free trial of in5:

Download the free trial of in5

How to Create an HTML Slideshow with Adobe InDesign

Justin

There are multiple ways to create a slideshow using InDesign. Let’s go through the options and how to export your content to HTML.

We’ll cover the following slideshow options:

Multi-State Objects with Button Navigation
Autoplaying Slideshow using the Animation Panel
Easy Slideshows using the in5 Slideshow and Image Sequence Widgets
Using in5’s Slideshow Builder to make life crazy easy
in5’s Presentation Mode

There are two main ways to create HTML from InDesign: Publish Online, which is built into InDesign; and in5, which is a paid add-on made by Ajar Productions. You can see a comparison of Publish Online and in5 in this post.

Creating an Interactive Slideshow with Object States

You can create a Multi-State Object (MSO) using InDesign’s Object States panel, found under Window > Interactive.

When you create Object States, you’ve effectively created different visual versions of your content.

Each one of these states can act as a slide in your slideshow.

The nice thing is that you can control these states with InDesign’s button actions…the downside is that you can’t easily transition between states with animation when exporting to Publish Online (though you can do it using in5’s Slideshow Widget, see more below).

Animating Between Objects to Create Slide Transitions

You can use InDesign’s Animation and Timing panels to take a stack of photos and animation them from hidden to visible one-at-a-time, showing the top photo last. Each new photo effectively hides the one behind it as it fades in.

This option is a little messy to set up, but it can be exported to Publish Online. in5’s Image Sequence and Slideshow Widgets provide a much easier way to do this (see more below).

Easy Slideshows using the in5 Slideshow and Image Sequence Widgets

The in5 Slideshow Widget (in5 > Interactive Widgets > Slideshow) can take any MSO in your document and turn it into a slideshow with animated transitions.

All you have to do is select the relevant options in the panel and export with in5.

Using this option, you can still have complex and interactive content within your Object States.

If you want a simple image slideshow, using the Image Sequence Widget (in5 > Interactive Widgets > Image Sequence) is even easier.

For an image sequence, you can simply select a folder filled with images and in5 will turn it into a self-running slideshow for you.

Using in5’s Slideshow Builder to make life crazy easy

If you want to build a slideshow the fastest and easiest way possible—be it interactive or animated—and you have an in5 Pro plan or higher, you can simply run the Slideshow builder…which will create thumbnails, navigation buttons, and animated transitions for you.

See it in action in the video below.

in5’s Presentation Mode

If you want to get really sophisticated with your slides using InDesign pages, then in5 can turn your entire document into an HTML slideshow using Presentation Mode with the autoplay feature. You can learn more about in5’s Presentation Mode in this post and see an example of a self-running slideshow in this post.

More UX Design Patterns for InDesign

Do you want to learn how to create more working User Experience (UX) and User Interface (UI) elements from InDesign without coding?

Check out the complete InDesign UX Design Patterns guide (it’s free with an email sign-up).

Get the guide

Stop Struggling with Animation in PDFs: Discover the InDesign Alternatives

Justin

Animation can add a dynamic and engaging element to your designs, but can animation be used in PDFs? Unfortunately, the short answer is no. While it may seem like a convenient option, using animation in PDFs can be problematic due to inconsistent support across different applications, the death of the Flash Player, and the fact that PDF was never built to support animation (e.g., animation from InDesign, or formats like animated GIFs)…all of which can cause playback issues and visual holes in your documents.

In the past, PDFs were primarily opened with Adobe software, which included the Flash Player bundled right inside it. This allowed for some use of animation in PDFs through the use of Flash Player content (though only by embedding SWFs, not using InDesign’s native Animation panel). However, with the demise of Flash, this option is no longer available. So, what are the alternatives?

The answer is HTML5. This browser-native format is capable of replicating the capabilities of Flash and it does not require coding to create content visually in InDesign and export it to multiple HTML-based formats. In this article, we will explore three formats that support animation: fixed layout ePub, Publish Online, and in5 (InDesign to HTML5). All three formats support animation that you can easily create with InDesign’s native Animation panel.

Say Goodbye to Video in PDFs: Why You Should Avoid It at All Costs

Justin

When working with multimedia in design projects, it’s natural to want to include video content in your PDFs. However, it’s important to understand that the use of video in PDFs can be problematic in a number of ways and may not provide the consistent support and playback that you desire.

How to Create a Skip Link for Screen Readers with InDesign & in5

Justin

A Skip Link lets disabled users easily skip over purely visual content and jump ahead to substantial content (e.g., skip over a cover page to the main story).

To create a Skip Link with InDesign & in5:

Create a Button or Hyperlink from the element that you would like to use as a Skip Link.
Point that link to the page with the main content.
Use the Accessibility panel* to designate a text frame on your target page as a <main> element using the Custom Tag drop-down (optional).
In the Accessibility panel, select Treat as Skip Link.
In the Accessibility panel, choose Show ONLY to Screen Reader under the Screen Reader Visibility (optional).

* The Accessibility panel is only available to Elite and Enterprise plans.

Treating the element as a Skip Link means that in5 will move it off the page and into the top of the reading order in the output, ensuring that a screen reader sees it immediately.

You can see in the video below why I suggest that you create the Hyperlink or Button first.