in5 v3.1 brings the best digital publishing experience so far

in5 v3.1 header collage of new features

Five years ago I had an idea.

I wanted to help my fellow designers publish digitally without relying on coders, and without being beholden to restrictive publishing pipelines.

I launched the project on Kickstarter and 238 people backed the initial version of InDesign to HTML5 (in5).

Thanks to the continued interest and support of many customers, in5 has grown through many updates and has helped designers build better digital publications year after year.

Today I’m announcing another quantum leap forward in what in5 can help designers create—without coding and—using the freedom of an open format.

The new capabilities are almost too numerous to list in a single post, so what follows is a high-level summary of what you can do with in5 version 3.1.

The Big Stuff

These are the game changers.

Several of these features are only available to subscribers of Pro (or higher) plans and are marked with Pro+ after the feature name.

Flipbook with Page Peel (Pro+)

flipbook with page peel option in the user interface of the export dialog

Want to add the flash of curling page turns without the obsolete Flash Player?

Choose Flipbook with Page Peel from the in5 export dialog and your InDesign layout will be transformed into an HTML5 flipbook.

The Flipbook is a two-page layout by default, but can responsively switch to a single-page layout in portrait mode (video).

flipbook pages in action

It can also be dynamically scaled (see below).

Viewer Display (Pro+)

This new section of the in5 dialog lets you control more of the look of the HTML output.

viewer display options in user interface

Not only can you change the loading text that displays as the document is launched in the browser—or if the loading message appears at all—you can now add a control frame for the reader.

in5 viewer control frame - black bar with buttons at bottom of browser

This frame can display the following

  • The document title
  • The current page number and total pages (as well as a reading progress bar)
  • A jump to Table of Contents button
  • A thumbnails button that opens a navigation panel with images of the pages
  • Zoom in and out buttons
  • A fullscreen button
  • A download PDF button which accepts any PDF file you choose or can automatically create a PDF for you

This frame is responsive and the buttons get larger on a small touch device (video).

mobile version of control frame with larger touch buttons

Desktop Scaling

in5 has long offered yoga-like flexibility by letting you attach custom code to the output.

The most popular customization—which scaled the layout to the browser window—is now a first class feature (video).

desktop scaling example from JETS digtital

This setting can also be applied to mobile devices by setting the Mobile Viewport setting to Use Desktop Scaling.

desktop scaling with matching mobile viewport setting in UI

Interactive Widgets

InDesign is nothing short of amazing, and it’s interactive tools are brilliantly designed.

There’s so much you can do with the built-in panels, but I want to help you do more.

That’s why I’ve added a new in5 menu that appears when you install version 3.1.

Inside the menu, you’ll find a set of Interactive Widgets.

in5 menu inside of Adobe InDesign

The widgets let you create sophisticated interactivity with a few simple clicks.

The 3D Flip Card Widget (Pro+)

The 3D Flip Card lets your readers tap on an item to reveal more content…through an animated 3D rotation (video).

3D flip card example

The Mobile Article Explorer Widget (Pro+)

The Mobile Article Explorer lets you render a pixel-perfect layout, while also providing an easy-to-read text version of your articles for mobile devices (video).

mobile article explorer example

This lets your content be responsive to the reader’s needs without compromising your layout. It can also help your Search Engine Optimization (SEO) by storing the full text article in your document.

Image Optimization (Pro+)

Services like TinyPNG have provided a way to shrink images far beyond what Photoshop, Illustrator, and InDesign were capable of.

Smaller images result in faster downloads, which also increases the likelihood that reader’s won’t leave your page because it’s taking too much time to load.

You could always take your in5 output and run the images through an optimizer.

Now, all you have to do is check a box in the output dialog and in5 will shrink the images for you.

image optimization in UI

image optimization results - 75% reduction in file size

The Little Stuff

While these changes aren’t as dazzling as the big ones above, they’ll go a long way toward helping you create better digital publications.

Merge Spreads

The Merge Spreads script lets you convert spreads to pages for digital export (more info).

Revamped Buttons

in5 used to render buttons as a web developer would—by exporting all of the states (on/off/click) as a single image and using CSS to only show the relevant state.

While there were good reasons to do this initially, over time, this rendering technique served to limit the control that you had over how buttons could be exported.

In version 3.1, buttons have been overhauled to render more like Multi-State Objects. Buttons can now contain complex content, which means they can contain live text, SVG text, and/or high-resolution images.

Text Positioning

InDesign does funny things when exporting text as images. It adds an unpredictable amount of transparent space around the text. This behavior can cause the text to shift a few pixels in the HTML output.

Effects like drop shadows can cause similar issues.

Over the the years, I’ve added multiple mechanisms to try and compensate for InDesign’s behavior, but always missed certain things.

Version 3.1 includes the best compensation mechanism to-date. So you should find that text shifting is almost non-existent.

SVG fixes

SVG text rendering is now so good that I’m considering making it the default text setting.

With the disappearance of Internet Explorer 8, every browser in use now supports SVG.

Version 3.1 also renders simple ovals as SVG to prevent InDesign from cropping the edges (and it saves file size to boot).

OAM support

in5 has long supported the Web Content Overlay and the ability to embed external HTML into the output.

To make this even easier, version 3.1 adds direct support for placed .oam files.

So you can easily include content made with Adobe Animate, Dreamweaver, or Tumult Hype in your publication (video).

Revamped Animation

The introduction of the Flipbook page format brought new complexity to the in5 output.

Now—because two pages can be active on screen at once—in5 has to support On Page Load animations for two pages simultaneously.

So I re-wrote a much stronger animation sequencing mechanism. The new mechanism should be able to handle the most complex of animation sequences.

Reuse of Images

Another file size saver.

When Use Source Image is selected, the image is only copied to the output once (video).

HD Text within Groups Rendered as Images

in5 is getting better at reading your intentions.

For example, you’ve chosen to render your text frames as high definition (HD) images, and you’ve also chosen to render groups as images (possibly to support a complex blending mode).

In previous versions, your group would render with standard quality and the text inside the group would look grainy on a retina display.

in5 is now smart enough to render your entire group in HD, so that the text inside will be clear and crisp, just as you intended.

License Stability

The flexibility of a subscription license (e.g., quick upgrades and centralized user management) means that in5 has to make frequent contact with the Ajar server, which requires internet access and a working server.

I know what it’s like to be on a plane and working against a deadline.

So I made in5 version 3.0 smart enough to provide a grace period when you were offline.

Since that release however, there was a day where my primary server and my back-up server had to go down for maintenance.

This produced a type of error from the server that I hadn’t prepared in5 to handle (because I didn’t know it existed).

For the in5 users that were on a deadline that day and needed to export with in5, it was really horrendous timing.

Thus, I’ve made in5 v3.1 much smarter about server outages and keeping your offline license data fresh so that your license won’t be as dependent on a working server and you won’t experience interruptions.

Note that—once exported—your HTML output is not dependent on the Ajar servers in any way.

Publish Anywhere

My continued mission is to help you publish anywhere so that you can control your digital destiny and the experience that readers get with your brand.

My goal is to make in5 a digital publishing tool that acts as your developer, so that you don’t have to become one.

in5 version 3.1 is fully compatible with the newly-released InDesign CC 2018 (and even has basic support for the new paragraph borders feature).

Download the latest version to see these features in action.

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Michael Stradley says:

    This plug in is AMAZING! I have been able to do so much. One issue that I can’t figure out is the ‘Image Sequence’ feature. It works perfectly when exported as HTML5, but when I try to use the ‘Publish Online’ through InDesign to the Adobe CC, it doesn’t work. Does this feature only work as HTML5, or is there a workaround? Need to be able to share the final product with coworkers.

    1. Justin says:

      Hi Michael,
      Yes, the Image Sequence only works when you export with in5. It’s not supported by Publish Online.

Leave a comment

Your email address will not be published. Required fields are marked *