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

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. Additional Options
  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.

Additional Options

There are premium services that will turn your HTML5 into apps and offer all kinds of neat extras.

These services seem to come and go, but Paperlit is one of the better options at the time this article was last updated.

Amazon also has a super easy solution. Just upload your files and Amazon does all the app creation work. More info is available in this article.

Publishing the Live App

With all of the options discussed in the lesson today (other than Amazon), 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.

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