Creating the iPad edition of Inspire with Adobe InDesign CS6

In late 2011, Managing Editor Julie Campagna approached my agency, Wrecking Ball Media Group, about the possibility of creating an iPad edition of Adobe Inspire Magazine. We jumped at the opportunity. As executive creative director at Wrecking Ball, my background is in both traditional print and interactive design. I was excited to have the opportunity to design a publication with a traditional feel, but with the multimedia and interactivity components that bring a whole new experience to the magazine beyond what is offered in the website edition.

In this article, I describe our production workflow which involved Adobe InCopy, Adobe InDesign, and Adobe Digital Publishing Suite (DPS); discuss how we conceived the overall concept, layout design, and interactivity; and review the methods we employed to incorporate best practices for the future. I also clue you in on some of the pitfalls we discovered along the way.

Creating a workflow

Our first challenge was to create an efficient and collaborative workflow between the Adobe editorial team and the Wrecking Ball design team. Figure 1 shows how we developed our workflow for designing and distributing content for desktop, mobile, and tablet devices.

Each issue of Inspire Magazine for iPad comprises a cover, a table of contents, numerous videos and animations, and articles with varying characteristics. Once Julie and Senior Editorial Producer Stefan Gruenwedel receive the final drafts, the design process begins with a review of each article in which we discuss details like how long the article is, which layout will work best, what assets (such as images and video) are available, and how to represent code snippets or demos. 

Then the Inspire editors import each article into Adobe InCopy, a writing and editing solution that integrates with Adobe InDesign. The editors create a unique InCopy file for each article and upload to a shared network drive that both the editorial team and design team have access to. The designer then places the InCopy document into the text frames in the InDesign document.

In this workflow, the text styles in the InDesign document are consistent with the formatting in the original Word document. Any further copy edits made by the editorial team in InCopy automatically flow through to my team's layouts in InDesign. Everything flows seamlessly from Word to InCopy to InDesign. (Yes, it really works.)

The editorial team can edit the text within the InCopy document without changing anything in the InDesign document that might cause unexpected and undesired results in the layout. Whenever they make a change to the text, my team gets a notification in the Links panel in InDesign (or in a dialog box that alerts us when we launch InDesign if the change was made when we didn't have InDesign open).

Once we've completed the initial layout for the articles in an issue, we look at which ones might benefit from additional interactivity such as adding an image gallery, sidebar, or code snippet within a frame. These provide a more elegant and intuitive way of navigating through the content as opposed to swiping through a lengthy set of article pages.

We output the completed folios from InDesign and upload them to the hosted DPS Folio Producer. Then we use DPS to generate invitations for the members of the editorial team (Julie and Stefan) to preview the prototype using the free Adobe Content Viewer app for iPad. By tying the prototype to their Adobe IDs, we can ensure that only they have access to the prototype. If they request any design or interactivity changes, we upload the revised folio to DPS, and it automatically notifies them on their iPad that a new version is available. Once the issue is ready and approved by Adobe, we click Publish in the DPS Folio Producer, and within a few minutes, the new issue is available on the App Store.

The design process

I then began laying out concepts in Photoshop for the design based on the Inspire audience and Adobe's brand guidelines while also ensuring that Adobe Inspire had its own style. The design needed to be sleek with brilliant visuals and content. The team collaborated to develop a strong design direction before jumping into production.

Figuring out the structure

Creating the structure of a digital publication can be a daunting process, only made more complicated by the volume of information that sometimes needs to be organized and incorporated. Sure, as designers, we might create wireframes and mockups to plan out the layout before we get started, but what about non-designers? How do you get the structure of the publication figured out before you turn everything over to your design team?  Just like we would for a website, we created a sitemap. I also explored several ideas on how to flow the content and came up with a user interface that would give us all the elements we would need for navigation, video, audio, and interactive modules. We then reviewed all the content types (articles, tutorials, interviews, etc) and began to visualize how a reader would move through the experience. Figure 2 shows the flow of the August 2012 issue, which then gave us a roadmap to start building within InDesign.

Laying out the design

The first thing that became apparent to me was that the existing design and layout for the Adobe Inspire website would not translate well to the iPad experience. The experience on the iPad is different from a computer monitor in that the user is touching and swiping a screen rather than clicking and navigating with a mouse — an important thing to consider when designing for optimal usability. The other consideration was how to accommodate both portrait and landscape viewing orientations. Since we are accustomed to responsive design, the task was not daunting — but it was definitely time-consuming. Finally, I worked with the team to develop layouts for articles that would be consistent across future issues and properly appear and function in both orientations. These layouts are used for articles like tutorials, features, and videos.

Once I had a sense of the characteristics of each article, I created a document in InDesign for each one using the appropriate article templates. (I created templates for each type of article during the prototype process.) Editors finalize copy using a custom Microsoft Word template that contains predetermined styles, which are very close in terms of the font and font size to the way the copy will look in the final article on the iPad. The template sets the page size of the Word document to the same page size as the iPad. Overall, this provides the editor with a sense of how the copy will look when it's rendered in the final article.

Some of the design challenges we faced forced us to figure out how to utilize and fit text, imagery, photography, video, and interactivity in a consistent manner, while creating a unique look and feel for each article. By creating a library of master templates with common styles in InDesign, I can quickly create additional article templates. In other words, we don't have to reinvent the wheel each time we produce an article that requires a slightly different layout.

I started designing layouts for each article in landscape view at 1024 × 768 and then creating an alternate layout for the portrait view at 768 × 1024. I started with landscape because the images and content are larger in landscape view, so sizing down the assets is easier. InDesign CS6 made it easy for me to create both portrait and landscape layouts with the new Liquid Layout and Alternate Layout features (as shown in the video above). With these new features, I only needed to use one InDesign document for both orientations and the various iPad resolutions (see Figure 3).

Inspire is an image-rich magazine that is read by a visually astute audience, so I wanted to ensure that the images look their best and the content flows nicely no matter what orientation the reader prefers. Of course, I still needed to tweak the layout for each view, but that is much easier than creating multiple documents for each article.

We did discuss the option of providing only a single viewing orientation, but in the end, we all agreed that Inspire should be available in both. We wanted to give readers the flexibility to hold the iPad and read Inspire in either orientation, and we felt it was important to have the flexibility with our layouts.

Adding interactivity

Once we finished the design and the layouts, it was time to figure out the interactivity. I came across many challenges initially with interactivity in InDesign and DPS. Unlike Adobe Flash, which allows for total creative freedom, DPS gives you a set of tools, and it's up to you to use those tools creatively. I used the Folio Overlays panel to create and edit interactive objects (Window > Folio Overlays in InDesign CS6). When I create a folio, all non-interactive items on a page are compressed into a single image — PDF, JPEG, or PNG, depending on the article's image format setting. I opted to use PDF as the default because it gave me the smallest size for my folio. Interactive overlays appear on top of the layout in the folio no matter what (see Figure 4).

Optimization

Just like anything designed and developed to be delivered via the web, optimization is key. The first thing that's important to know is to set the default format for your folio in InDesign to PDF. I have found this generates the smallest possible file.

When possible, I use vector-based imagery, whether it's large-type text designs or iconography, for buttons and other interactive elements. This always results in a smaller file size than using raster-based imagery such as JPEG or PNG files. When the use of raster images is necessary, such as with photographs or complex imagery, it's important to save the images in JPEG format at the lowest JPEG quality possible. Generally I try to stay within a quality of 60–80 percent, and I use a light blur if needed to remove any distortion in the image from the lower quality setting (see Figure 5). It's always a balancing act — size vs. quality — but with some experimentation, it's pretty easy to find the sweet spot for each image, which is the lowest possible size without sacrificing image quality and integrity.

To optimize performance on the iPad, limit the number of animations you add to your publication, and keep them as short and simple as possible. Be sure to test them on both an older and newer generation iPad to ensure they behave the way you want them to.

When adding video content, remember that older generations of the iPad have a screen resolution that is much lower than an HDTV set at full resolution (or most computer screens for that matter). The resolution of the newer generation iPads is double the size so finding the ideal video compression and quality is not hard. Encoding your videos with a frame size of 640 × 360 at a frame rate of 24, 25, or 30 frames per second is all you really need. (You don't get much, if any, benefit by providing video files in 720p or 1080p HD resolution other than making your folio really bloated in file size.) Figure 6 shows the settings we embed in the articles for video using Adobe Media Encoder.

Publishing to the new iPad

When the new iPad was announced, new challenges were introduced into the process. We needed to figure out how to optimize the magazine for the new higher resolution display on the third-generation iPad while maintaining the integrity of the viewing experience on older iPad devices.

The screen resolution of the new iPad is twice that of the older generations of iPad (1536 × 2048 for portrait and 2048 × 1536 for landscape). I purchased a third-generation iPad and compared how my designs looked on it compared to my iPad 2. On the new iPad, the vector-based imagery scaled to the higher screen resolution perfectly, with no loss in quality. However, the large raster-based images, such as photos in the image galleries, looked pixelated and distorted.

I discovered that the best way to handle higher resolution images was to create them from the start at 200% of the size. So I create images that should be 300 × 300 pixels at 600 × 600 pixels instead. Then when placing the images in InDesign, I scale them down to 50%. This technique displays them at half their native resolution on the first iPad and iPad 2 (which translates to 100% resolution on those devices) and at 100% on the new iPad, resulting in optimal image quality on the full range of iPad devices. Read the blog post Guidelines for Creating Folios for iPad 3 for more detail on the options you have for publishing to the third-generation iPad and earlier models.

Quality assurance

I like previewing my layouts on my iPad as I work. Prior to InDesign CS6, previewing was a grueling task. A great new feature of InDesign CS6 enables local previews. This cut down my testing time by at least 80% compared to the workflow with InDesign CS5.5. The previous workflow involved uploading the folios to the DPS server each time I made a change and then downloading them to the local Adobe Viewer app on the iPad. That wasn't the best workflow to preview my work. All I had to do with InDesign CS6 was connect the iPad via USB, and the iPad would show up in my Folio Builder panel (see Figure 7).

Once I was happy with how everything looked on my iPad, I uploaded the folios to the DPS Folio Producer and used DPS to generate invitations for Julie and Stefan to preview on their own iPad. It's crucial to have multiple eyes reviewing the content for grammar and interactivity to ensure everything works and reads as expected. The more testing and review time, the better because it helps ensure there are no errors when the content is published to a mass audience.

Tracking results

We can track metrics on each issue of Inspire within DPS. Figure 8 shows an example of the DPS tracking dashboard. We look at statistics on the issue itself — such as how many times it's been downloaded and opened — as well as on each individual article. This enables us to see what people are reading and interacting with the most, so we can refine our content and design efforts in the future.

What's ahead

Along with my background in traditional and interactive design, InDesign and DPS have enabled me to design a publication with a traditional feel but with the interactive components that add a whole new dimension to the experience. We will continue to look for ways to further refine and optimize our workflow, to make the production process smoother, and, most importantly, to create the best user experience possible.

I'm also turning my attention to creating an Android version of Inspire. The biggest challenge is that there are so many Android tablets on the market, each with unique characteristics. It's impossible to have every Android tablet on the market at my fingertips, and even if I did, there's simply not enough time to properly test, discover, fix bugs, and make the necessary refinements for each device.

If you're in a position where you absolutely must target a broad range of Android devices, my recommendation is to pick a single orientation (portrait or landscape) for your publication. This will increase your odds of success.

I'm delighted to be a part of the Adobe Inspire team, and I hope you found this article helpful. I am in no way an expert in DPS (yet), and I continue to learn from my fellow peers and the community. This is my chance to share some insight on my progression in digital publishing. I would love to hear your comments and thoughts on what we've been delivering so far in the iPad edition, so we can continue to provide you with the best reading experience possible.

Where to go from here

The following are some helpful resources I discovered during the creation of Adobe Inspire that provide more in-depth information:

• Digital Publishing Suite videos on Adobe TV: Adobe evanglists Colin Fleming, Rufus Deuchler, and Terry White show you latest features, news, and tutorials on InDesign and Digital Publishing Suite.
• DPS Tips: Digital publishing expert Bob Bringhurst uses real-world examples from professional publishers and easy-to-follow tutorials to show you how to create visually rich and engaging iPad apps with InDesign and Digital Publishing Suite.
• Secrets & Happiness of Digital Publishing: Johannes Henseler and Mike Ewers blog about digital publishing from an editorial designer’s perspective along with providing practical tips and tricks for designers working with Digital Publishing Suite.
• Adobe Digital Publishing Blog: The official Digital Publishing blog of Adobe has some good tips on designing for the iPad.
• Adobe InDesign documentation: Bob Bringhurst, also lead tech writer for the Digital Publishing Suite, blogs about InDesign product announcements, bonus documentation, and tips.
• Digital Publishing Suite forums: The official Adobe forums for discussing all issues related to working with Digital Publishing Suite.
• Digital Publishing Suite Developer Center: This treasure trove of Digital Publishing Suite resources covers topics such as entitlement, advanced viewer and folio features, distribution, custom storefronts and libraries, analytics, and plugins, scripts, and templates.