Chapter Description

With InDesign and Adobe’s complementary set of tools, known as the Digital Publishing Suite, a whole new world of design and interactivity has opened up to designers and publishers everywhere. This chapter covers the Digital Publishing Suite apps, design and workflow considerations, setting up your document, interactivity and digital overlays, the Folio Builder Panel, Folio Producer, and publishing your app to a store.

When Steve Jobs introduced the iPad on January 27, 2010, the world expected another game-changing product from Apple. But few of us in publishing and design realized how profoundly it would change our world. Today, an increasing number of books and magazines are read with a swipe and a touch onscreen. Buttons and video are becoming as commonplace as editorials and classifieds. And the experience of reading is becoming much more immersive and engaging in the process.

InDesign is at the center of the publishing world for print, so it’s not surprising that it has now become a key part of publishing to the iPad and other tablets. With InDesign and Adobe’s complementary set of tools, known as the Digital Publishing Suite, a whole new world of design and interactivity has opened up to designers and publishers everywhere.

Understanding Digital Publishing Suite Apps

Several third-party products allow you to convert your InDesign layouts to tablet apps for the iPad, Kindle Fire, or Android tablets. Most of them provide a set of free plugins for creating interactive overlay elements, along with some means of converting your documents into an app. Our focus in this chapter will be on Adobe’s solution: the Digital Publishing Suite, also known as DPS.

Adobe’s Digital Publishing Suite consists of several components that allow you to bring your InDesign layouts to life as applications on tablets that include the iPad, the Kindle Fire, Android tablets such as the Samsung Galaxy, and even the iPhone (though our focus throughout this chapter will be on tablet apps). The DPS tools allow you to add interactive features to your publication and to publish your file in a folio format that allows it to be shared and published to tablet devices.

DPS tools

DPS tools include several components. Each plays a different part in the process of creating a tablet app from your InDesign layout.

Folio Overlays panel: An InDesign panel that allows you to add interactive features for tablets to your layout.

Folio Builder panel: An InDesign panel that allows you to assemble your files into folios, which are files that can be previewed and shared.

Adobe Content Viewer (desktop version): A computer application that allows you to preview your content and interactivity as it will appear on a tablet.

Adobe Content Viewer (device version): A free application that is installed on your iPad (or other tablet) and allows you to preview your content and interactivity.

Viewer Builder: An Adobe AIR application that allows you to build a custom viewer app for your content that you can submit to Apple’s App Store, Amazon’s Appstore for Android, or Google Play.

The Folio Builder panel is part of the standard installation of InDesign CS6. When you first open the panel, you will be prompted to update the panel by clicking a link. This takes you to Adobe’s website, where you can download the latest version of the DPS tools. Installing this package will add the Folio Overlays panel to InDesign and install the Desktop Viewer on your computer’s hard drive. As the DPS tools are updated, the Folio Builder panel will prompt you to download the latest version.

To finally publish your app and make it available for sale requires that you sign up for one of three DPS subscription programs. At the highest and most expensive level are the Enterprise and Professional Editions, which are geared to mid-sized or large publishers. These allow publication of an unlimited number of single-issue folios or subscription-based, multi-issue folios (such as monthly magazines) on the iOS and Android platforms. Both also provide analytics, or data, about the folio downloads, with the Enterprise Edition offering additional services, such as the ability to create in-app custom navigation.

The Single Edition, which allows you to publish single-issue folios only, offers a more affordable entry point for small and individual publishers. In fact, the Single Edition will be made available to all Adobe Creative Cloud members for free. Non-subscribers to Creative Cloud have to pay a one-time license fee, which at the time of this writing is $395. The Single Edition is currently available for iPad only.

No matter which version you use, the tools and the creation process are the same. And anyone with an Adobe ID can use these tools to create and share folios with others.

One important thing to note is that the components of DPS are regularly updated, so you’ll want to check out the resources mentioned at the end of this chapter.

The first step is to design your publication for viewing on a tablet and to add interactivity where appropriate. Design issues are discussed in the next section, “Design and Workflow Considerations” on page 125. Interactivity is added using InDesign’s built-in features (covered in Chapter 2) and the Folio Overlays panel, discussed in the section “Interactivity and Digital Overlays,” on page 130.

Next, your individual InDesign documents, called articles, are assembled into a folio, which you can think of as the file format for a tablet app. This assembly is done using the Folio Builder panel in InDesign, which is discussed in the section “The Folio Builder Panel” on page 157. You can also import HTML articles into your folio, but we’re going to focus on working with InDesign files.

Once you’ve created your folio, you can preview it in a number of ways. You can view it on your computer by clicking the Preview button in the Folio Builder panel, which opens the Desktop Viewer. Or, install the Adobe Content Viewer on your iPad or other tablet, then sign in with your Adobe ID. The folio will then be available on your tablet. Both of these options are discussed further in “Previewing folios and articles” on page 167.

If you need to share your folio with others on your team or with a client, you can do so by clicking the name of the folio in the Folio Builder flyout menu and choosing Share from the menu. You can then enter multiple email addresses inviting others to view the folio. In order to view the folio, invitees must have an Adobe ID to sign in, and they can view the folio either on their tablet (using the Adobe Viewer) or in their Folio Builder panel in InDesign. See “Sharing folios” on page 170 for more information.

Once your folio is complete, use the Folio Producer to publish it to Adobe’s distribution system, the first step to getting your app in the Apple App Store, Amazon’s Appstore for Android, or Google Play.

DPS app navigation and user interface

Whether you create a folio to share with a few colleagues or publish your app for sale to the general public, all DPS apps allow you to navigate pages in the same way, and all share a common user interface, or chrome—controls that appear when the user taps the screen. The only exceptions are Enterprise Edition apps created with a custom interface. But the vast majority of DPS apps share the same “look and feel.”

When you download the free Adobe Content Viewer for your tablet, you’ll find an illustrated help file that explains this basic navigation and interface. It’s also common when publishing an app to include a similar help file so that users unfamiliar with the interface can fully experience and engage with your app.

Most DPS apps are set so that you read an article by swiping vertically. The article may be set as individual pages or as one long, scrolling article. Swiping horizontally moves to the next article. However, a folio can also be set so that the user swipes horizontally only, much the way a print publication is read. With this navigation, the user basically swipes through every page of the publication.

When the user taps the screen, standard DPS navigation controls appear. These controls include the following icons: