Ajar Production’s in5 … a graphic designer’s fast track to a WebApp

Screen of InDesign button settings

Using InDesign’s interactivity panel to create navigation buttons with rolloever effects.

Ajar Production’s in5 allows graphic designers to export InDesign layouts as HTML5, which can be uploaded as websites or self-hosted WebApps or converted to apps for distribution through app stores.

Since in5 is an extension to InDesign (for CS and CC versions), anyone familiar with InDesign can easily translate a design into a website and/or app without any coding knowledge. With in5, graphic designers can offer a new service to their clients without a huge investment in time or money to learn a new skill (coding).

This extension goes miles beyond InDesign’s built-in export-to-HTML feature. The HTML5 code that in5 generates retains the geometry, fonts, stylings and interactivity you included … not just the content. The generated HTML5 is flexible and can work on desktop or mobile devices.

Another benefit is that the code is open — meaning if you can edit it directly. It belongs to you –move it, zip it and email it, and upload it where you want.

This is one of its strongest features, in our opinion, and has great application for businesses that do not want the expense of the developer fee to host an app on an app store or hassle of going through approval each time there is a change.

Take the example of a restaurant which changes its menu often … say for a daily special. No need to print new menus or have a set for each day of the week. All that’s needed are a few tablet readers and a self-hosted WebApp created with InDesign and exported with in5. Open the menu-of-the-day on the tablet, and it’s done. New prices because the cost of ingredients? Simply upload a new version, and the app can update itself.

Or take the example of a business with a sales kit, that marketing reps use as sales tool in the field. It’s not a general distribution app, so ideally is should be self-hosted. (Apple and Android like their apps to have wide audiences.)

This second example is the scenario we used as we tested the in5 extension. (It is possible to export with in5 files that ready for the Baker Framework or for Liquid State, but we tested the creation of a self-hosted WebApp.)

We set up a multi-page sales kit for “Our Imaginary Co.”. The sales kit had a splash page with menu buttons linking to the sections inside. We used InDesign’s interactivity panel to create buttons with rollover effects. We set up pages with vertical scrolling on long text blocks and enabled swipe navigation to browse forward and backward through the pages. We exported the design with in5 and uploaded the files (images, CSS, Java Script, HTML) via FTP to the web and then downloaded the WebApp to our device.

We enabled image caching so that our WebApp could be viewed offline, for those times when an internet connection isn’t available. Short videos can also be embedded. Note: Because Apple limits the size of WebApps that don’t come from the Apple Store, large videos cannot be embedded / cached. In the case of a large video, it’s possible to create a button that opens a YouTube window, for instance.

Button to open YouTube video

Adding a button to open a YouTube video.

Because we wanted self-hosted WebApps that would work in vertical and horizontal orientations for tablets and smartphones, we had to create two documents. One was sized for phones, the other for tablets. Having to make two documents was somewhat disappointing, but understandable. But the same WebApp worked on Apple and Android devices alike. The phone-sized WebApp worked on an iPhone and different phones running Android. The tablet-sized WebApp worked on iPads and tablet devices running Android (including a Nook).

Although, some learning-curve experimentation was needed to get the settings right, we were happy with the results. (A 22-lesson course on digital publishing with in5 was announced at the end of January 2016. Learn more here.) Whenever we had questions, we found our answers on the in5 forum. The developers offered great support through the forum and through email directly. They answered our questions in a timely and professional manner.

Overall, we can recommend in5 as a fast sand painless way to design a UI and publish a WebApp with no knowledge of coding.

Acreenshots of app

The finished product. On the left the icon on the homescreen. On the right, the splash screen of “myApp”.