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+)
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).
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.
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.
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).
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).
This setting can also be applied to mobile devices by setting the Mobile Viewport setting to Use Desktop Scaling.
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.
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).
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).
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.
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.
The Merge Spreads script lets you convert spreads to pages for digital export (more info).
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.
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 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).
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).
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.
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.
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).
Get updates from Ajar Productions
Sign up today and get the InDesign Split Text premium extension for free!