Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 16: Publishing a Mobile App

Sometimes there's just no substitute for a mobile app. Fortunately, your in5 content can easily be packaged into a mobile app. This lesson will show you the best options for creating mobile apps.

Expert Contributors to this lesson

Philip Andrews

Philip Andrews

CEO of Liquid State
Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. DIY with the Baker Framework
  2. Push Button Power with PhoneGap Build
  3. Full Service Publishing with Liquid State
  4. Publishing the Live App

Estimated time for lesson

Today’s lesson should take approximately 25 minutes with the video.

DIY with the Baker Framework

The Baker Framework is a pre-built code library for iOS (iPhone and iPad) that helps you compile a digital book app.

Since all of the iOS coding has already been done, creating an app with the Baker Framework becomes a process of dragging and dropping settings and files.

Note: There is also an Android version of the Baker Framework. This article will focus on the iOS platform.

Exporting your InDesign layout

Once you've finished your layout work in InDesign, you can begin the export process by choosing File > Export HTML5 with in5...

The Title at the top of the export dialog is the title that will be used for the publication.

set the title in the Basic section

While in the Basic section, select Baker Framework (HPUB) from the Output menu.

baker framework export option

The option tells in5 to produce all of the extra elements needed for a Baker Framework publication.

The SEO & Meta section lets you set a few other important options for your publications.

seo and metadata options

With these items configured, click the OK button to export your document.

in5 will generate a book folder that is ready to be used with the Baker Framework code library.

Creating the app

The next step is to download the latest version of the Baker Framework.

Unzip the library and copy of the book folder that you exported with in5 into the newly unzipped books directory.

the baker directory structure

You can also remove the a-study-in-scarlet sample book that comes with the download.

Next, open the Baker.xcodeproj file with Xcode*.

*Xcode is the developer tool for Mac and iOS and can be downloaded for free.

Follow the instructions for configuring a standalone app (it should only a take a few minutes once you get used to it).

Click the Build and run button (it looks like a play button) and in moments, you'll see your app running in the iOS Simulator.

build and run button in xcode

There's a video demo of all these steps with a slightly older version of the framework. The steps in Xcode have gotten simpler since I recorded that video, so make sure you're using the up-to-date steps from the Baker website.

Push Button Power with PhoneGap Build

PhoneGap is a free code library owned by Adobe that lets you package HTML into mobile apps for multiple platforms.

PhoneGap Build is a web service that does all of the packaging for you from a simple dashboard.

And it's basically free.

phonegap build pricing

If you're already a Creative Cloud subscriber, you've got an all access pass.

Exporting your InDesign layout

You can export your InDesign document using any in5 settings that you'd like.

The next step is to create the configuration file. This can be done by hand, but it way easier to use ConfiGAP.

Creating the Configuration File with ConfiGAP

Choose the new config file option.

new config option

Most of the essential settings are found in the General Settings section.

configap general settings

Next, you'll want to make sure you have at least a basic icon for testing.

icon setting

You can also set up platform-specific icons (as well as Splash Screens).

Give yourself credit in the Developer Info section.

developer info section

Lastly, uncheck the Enable All Plug-ins button to remove unnecessary plugins (this makes the package much simpler).

plugins section

Click the Save file... button in the lower right-hand corner and save the config.xml file with your exported in5 files.

save button

Zip the folder with the in5 files and the config.xml file into a single package.

You're now ready to upload to PhoneGap Build!

Building your app(s)

Log in to PhoneGap Build using your Adobe.com login.

Click the + New App button.

new app button

Click the Upload a .zip file button and choose the zip file that you packaged.

upload zip button

Your work is done!

PhoneGap Build will start packaging and let you know when your apps are ready.

complete app inside phonegap build apps section

You can still make updates once the app has been packaged.

Full Service Publishing with Liquid State

Liquid State builds branded publishing apps and provides publishers with the ability to push their content to these apps from a dedicated web dashboard.

liquid state opening image

Using the Liquid State platform, app content can be created from a range of sources including PDF, Word, Powerpoint, HTML and InDesign.

Of the InDesign options, the export created by in5 specifically for Liquid State, easily provides the most powerful and flexible route from InDesign content to app.

If you are familiar with InDesign then you can be publishing content to your own branded apps without the need to code or deal with ‘geeky’ frameworks.

Exporting your content

Publishing InDesign content to an app is simple:

Create your content in InDesign.

create content with InDesign

Export the content using in5 with the Liquid State Publishing Solution selected as the Output option.

export with LSPS option

Build your app(s)

Import the content into the Liquid State publishing dashboard.

import content into ls dashboard

Add details such as table of content entries, custom document title, description and thumbnail.

add details

Publish the content to your app.

publish content to your app

Additional InDesign documents can be added to the app at any time following the same process.

For a more detailed explanation about integrating in5 exports within Liquid State apps, check out the Liquid State Knowledge Base.

Possible in5 + Liquid State use cases

See in5 and Liquid State in action

Check out the video below where in a few simple steps we publish pages from InDesign through in5 to a branded app.

Liquid State’s Top Tips for App Content Creation with in5

  1. InDesign layout is not HTML layout - InDesign can produce great layout. So can well crafted HTML and CSS. But these two approaches are fundamentally different. In5 does an amazing job of converting InDesign layout to HTML/CSS but there are still some design parts that can’t be replicated, so adjust your expectations. Start with simple layout and then add complexity as you gain understanding.
  2. Mobile first - If you are building content from new, always create your pages with phone screens and sizes in mind. We typically use a base page size that is in 16:9 format to suit most phones. The Liquid State system will automatically adapt these pages to suit both horizontal and vertical views as well as scale the page to match large tablet screens.
  3. Export images for complex layouts - The easiest way to get good app results from complex InDesign layouts originally created for print is to use the Image option for Text Rendering in in5 when when exporting. Complex page layout is then rendered as a single image which is easily scaled to match different screen sizes.
  4. Simplify content when using Liquid Layout - If you want to use the Liquid Layout option in InDesign, create super simple single column pages with all graphics inserted into the text as "Inline" content. Then export with in5 using the one of the HTML font settings for Text Rendering. This will create pages with text that reflows automatically when viewed on different screens.
  5. Preview content before publishing - Check how you app content looks and feels before publishing them to your app by previewing the pages via the special Liquid State Viewer app. Simply log into the app using the same credentials you use for your web publishing dashboard and tap to see your uploaded content.

Why publish to a native app?

This is a question we get asked often at Liquid State and we reply with a follow up question, "Are you wanting your audience to engage better with your content?".

All publishers answer yes, so then we let the numbers peak for themselves.

Liquid State will build your app for free

At Liquid State, we love in5!

In fact, we love in5 so much we have created a dedicated microsite just for in5 users who want to publish their content to a branded app - in5-to-app.com

Here we’ll create iPhone, iPad and Android phone and tablet apps to display your content for free. Yes free!

All you need to do is sign up to use our publishing dashboard and for a small monthly amount we’ll build your apps for free as well as provide you the chance to continue to publish your great in5 content directly to your apps.

Check out all the details at in5-to-app.com

Need more sophistication and integration?

If you find your app needs have grown beyond the simple offering at in5-to-app.com then you can easily upgrade to our full platform or even an enterprise account and take advantage of the full power of Liquid State.

Publishing the Live App

With all of the options discussed in the lesson today, we've covered the steps to get your apps packaged.

There are a few extra steps to get your apps published in the app stores.

In most cases, you'll need a code-signing certificate that identifies you (or your company) as the publisher of the app.

To get the code-signing certificate, you'll need to sign up for a developer account with Apple and/or Google.

Take Aways

  • There are several ways to make mobile apps without learning to code.
  • Baker Framework is a free do-it-yourself solution for iOS.
  • PhoneGap Build lets you package all kinds of apps.
  • Liquid State provides full service packaging with special offers for in5 users.

There are some great ways to publish mobile apps without learning to code