DPS authoring with InDesign for iPhone and iPod Touch

The May 2012 update to the Digital Publishing Suite introduces new opportunities for workflows and new outlets for publishing. A prime example of this is the addition of iPhone and iPod Touch to the platform/device support for folio content.

Note: Fourth generation iPod Touch is supported. This DPS update coincides with the release of Creative Suite 6, but the DPS tools also allow CS5 and CS5.5 users to design for iPhone and iPod Touch.

The addition of these smaller screen devices as a publishing target extends the reach of DPS to more readers, but introduces a new screen size. Of course, the primary question to ask is how to generate content most efficiently for these devices. Developers are accustomed to designing for the larger iPad screen and currently face the challenge of authoring for two iPad screen resolutions. The support for four additional iOS devices (iPhones 3GS, 4, 4S, and iPod Touch) and the two screen resolutions for these devices adds to the workload for DPS authoring and production. So how do you best address these new devices in your workflow?

The challenge publishers face will be how to design folios efficiently for six iOS devices. The key is in finding and taking advantage of the common attributes these devices share. The critical attributes are the dimensions of the devices and the resolution of the screens. Ultimately you are designing for only two screen sizes and two screen resolutions. The solution lies in how you create your InDesign files and leverage them to generate two layouts (or layout pairs for a dual-orientation folio) which then can generate the four folios for the four device classes. Four folios generated from two designs can take care of all six iOS devices. A DPS feature called renditions will deliver the correct folio to each device. There are two workflow aspects to cover when discussing DPS authoring for iPhone. The first is how to make the files for iPhone; the second is how to streamline the process and whether to connect your iPhone design to your iPad design process.

Are you going to iPhone?

Adding iPhone folios will extend your content to more readers. Are you going to invest the time into building content for this device? No tablet layout will work on these smaller screens; text would be too small to read and the experience of reading by zoom/pan seems untenable. If you intend to supply an iPhone publication, you will need to invest in designing an appropriate article and folio for this device.

Choosing an iPhone for your design

Will you initially build for the Retina display of the iPhone 4, 4S, and iPod Touch, or will you initially design for the older and lower-resolution iPhone 3GS? This choice may be more heavily influenced by how you design for the iPad than the iPhone you are thinking of targeting first. The lower-resolution displays on the original iPad, iPad 2, and iPhone 3GS have the same proportional PPI relationship to their Retina-resolution counterparts, so design for these screens will be very similar. Although they have very different dimensions, text sizes work the same way on these devices. If you build DPS layouts for iPad 2, then you should primarily design for iPhone 3GS. If you build DPS layouts for the new iPad and its Retina display, then you should build your iPhone layouts for iPhone 4 and 4S.

The connection between these distinct groups of display devices and related layouts is even more apparent when using InDesign CS6 to adapt pages by using Liquid Page Rules or when building Alternate Layouts. More on this in the iPad and iPhone workflow topic.

Which orientations?

Many DPS publications for iPad support both horizontal and vertical layouts; will you choose to do the same for iPhone? Or is it better to build only a single orientation that's better suited to the iPhone? A single-orientation folio also has the benefit of being one half the download of a dual-orientation folio.

Renditions

Renditions are folios with different dimensions but with the same folio name and metadata. A given rendition will only appear on a matching iOS device. You can use renditions with iPhone, and a high-resolution folio will be delivered to iPhone 4 and 4S and iPod Touch, while a lower-resolution folio will download to iPhone 3GS. While the newly supported iOS screens have different pixel dimensions, they have the same aspect ratio. This means that you can use one design file to build the renditions for both resolutions (see Figure 1).

I generally avoid giving design advice for the iPad. The device and screen are large and there is plenty of space for interactivity and navigation. Sure, I think that designing both consistent navigation areas and using a consistent indication of interactivity are great ideas, but that's about as far as I go. Likewise, when I discuss font choices, I typically stick to suggesting body copy set to 16–18 pixels so that it's readable. I find that I have more opinions when discussing DPS design for iPhone.

Text size

The original iPad and iPad 2 have screen resolutions similar to the iPhone 3GS, this means I will use similar font choices for these three screens. The body copy type specification I use for these iPads (16–18 pixels) will work well on the iPhone 3GS. I can use the same paragraph and character styles or even import styles from my iPad design files and use them for my iPhone designs (see Figure 2). Of course, if you prefer to design for the higher-resolution iPad, you will find that fonts are twice the size that I have indicated. You will also find that you can use the styles for the new iPad in your designs for iPhone 4 and 4S.

If I use my iPad layout to design for iPhone, these settings translate directly to iPhone 3GS dimensions, and I can use this layout for both this phone and for Retina display iPhone folios. I also find that using a leading value of 22 pixels on my body copy results in good readability and a balanced number of lines in a single screen.

Navigation and interactive regions

The smaller screen on iPhone is going to strongly influence how developers design navigation and interactivity on these devices. Consider how people hold the iPhone: typically in one hand, and they frequently use a thumb to interact with content. Likewise, consider how people hold their phone for reading: I think a vertical orientation will prove to be a more popular orientation for these devices. So this leads to a couple of ideas for how to design both your publication for iPhone and where interactivity is found.

We may decide that a publication with only a vertical layout is appropriate for iPhone. The navigation system in the viewer has all controls along the lower edge. Keeping other navigation and reading actions in the lower part of the screen will help deliver a consistent reading experience. Designing overlays and interactivity into the upper portion of a page will help maintain a consistent reading/navigation experience.

Safe areas

When designing for iPad 2, I tend to keep a safe area of 44 pixels at the top and bottom of my design. This is the area covered by the standard navigation interface for DPS applications. iPhone DPS apps use a similar navbar area with the same dimension: 44 pixels on the iPhone 3GS (see Figure 3) and 88 pixels on the iPhone 4 and 4S and the new iPad. I find that keeping this space clear of important content improves the reader experience, and this is more critical on the smaller iPhone screens.

Recap: Design decisions

• Should you use a single-orientation design for the iPhone?
• Design a consistent area in your layout for page swipe and navigation.
• Design interactivity only in the upper area of the page.

When you use Viewer Builder to create your custom app, you have a couple of choices when it comes to iOS devices. An app can work on only theiPad or only the iPhone, or it can work on both. You control this in Viewer Builder once you choose to target iOS. It is important to note that the Viewer on iPhone (and iPod Touch) has some limitations when compared to the iPad version (see Figure 4).

iPhone/iPod Viewer limitations include:

• No social/sharing
• No bookmarks
• No scrubber navigation, only table of contents and browse mode
• Single-column Library View
• Folio deletion by using an iOS swipe gesture to reveal the Archive command
• Enterprise apps allowed up to three custom icons
• No Single Edition available for iPhone

Designing for the iPhone is just like designing for other DPS devices, but with a different set of dimensions. Understanding that DPS supports three iPhone devices with two screen resolutions, but identical dimensions, is key in developing a workflow. You experience a similar situation on the iPad with three devices, two screen resolutions, and identical dimensions.

The key to streamlining your design process while maximizing your output options hinges on the fact that all iPhones share the same screen aspect ratio. These shared aspect ratios allow you to design once and then efficiently generate renditions for each resolution, much as you can with iPad design and production. For additional information on authoring for the new iPad, see the Adobe white paper Tablet publishing on the new iPad .

Design dimensions

Build your InDesign files with dimensions that match either type of iPhone, as shown in Table 1. Which dimensions you chose may depend on whether you are also designing for iPad and your workflow for those devices (see Figure 5). See the iPhone workflow and production topic for more information on this.

Create your layouts and add interactivity as desired. Consider the design guidance provided elsewhere in this document to create a good reading, navigation, and interactive experience.

Table 1. Screen dimensions and aspect ratios for iOS devices

Preview with Adobe Content Viewer

The dimensions of your design document will influence what you see when you use the desktop Adobe Content Viewer. The Viewer will show the pixels of your design 1:1 on your monitor. Reviewing an iPhone 3GS file will be the right size on your monitor, but an iPhone 4 file will be twice its normal size and you will have to back away from your monitor to judge your design and the readability of your text. This is one reason I prefer building my design files for iPhone 3GS.

The DPS tools update of May 2012 adds controls in the desktop Adobe Content Viewer to scale the display of your content. This feature will help you preview iPhone 4/4S layouts accurately by zooming out to reduce the relative size of your folio. Zooming out to 50% will show an iPhone 4/4S folio at a size comparable to your iPhone.

Ultimately, your workflow is going to be formed by a couple of choices. If you are using InDesign CS6, you can take advantage of new features to help adapt an iPad layout to an iPhone layout; and this can either be in a separate file or in the same file as your iPad design. If you are using InDesign CS5/5.5, you will need to dedicate more time to the adaptation of your content to a smaller document, and you will need to use separate files for your iPhone layouts, just as you do for each tablet layout.

If you design for both types of iPad screens, you may mimic your method for the iPhone layouts. If you design for the iPad 2 first and then make renditions for the hi-res new iPad, you will likely want to build first for iPhone 3GS. Since it has a resolution that's related to the iPad 2, styles and measurements will map directly to this smaller device.

Power of the Page Tool

The Page Tool was introduced with InDesign CS5. It allows a designer to change the size of an individual page in a document or change the orientation of the page. While this tool has new features in CS6, it's important to note that it is the only tool that lets you work on more that one spread at a time. You can use this tool to select any or all pages in a document and then change the page dimensions with a single command. This makes it really easy to apply page changes to an entire InDesign document. It is a great way to start the process of converting a design document into an iPhone design.

The outcome of changing page dimensions in CS5 and 5.5 can be drastic: the layout adjustment system can occasionally help with the change, but it has limitations. You will likely face a lot of manual adjustments to your page content to suit the smaller screen size.

CS6: Liquid page rules and alternate layouts

InDesign CS6 introduces a couple of new tools and techniques which will help make converting pages from iPad to iPhone much easier, faster, and more accurate. Liquid page rules are applied with the Page Tool; select one or more pages with this tool and apply one of the rules either in the Control panel or in the Liquid Layout panel (see Figure 6). If you now change the dimension or orientation of your pages, the content will adapt based on the liquid page rule applied to each page. These rules can be applied either to a master page or a document page, and a document page rule will have precedence over a master page rule by default. See InDesign Help for more information about liquid page rules.

Alternate layouts are another new feature for InDesign CS6. Alternate layouts are a way to create a page with a different dimension or orientation within a single document. When you create a new layout, Liquid page rules can be used to adapt the content to the new dimension. This adaptation happens only when the alternate layout is created; but you can create a link to the "parent" layout for text content, images will be duplicate links, and you can choose to create new style groups to control the paragraph and character styles used in the alternate layout (see Figure 7). See InDesign Help for more information about alternate layouts and managing content.

An incredible aspect of using alternate layout is the linking of text between the layouts. This means that if you make a change in the "parent" text you will also have the option of updating the linked (or child) text. This feature works across alternate layouts in a single file and can be created by using the Content Collector tools in CS6 to extend this parent/child system between files.

iPhone-only workflow

This workflow is just like any other DPS design and production workflow, but using InDesign files built with the dimensions of the iPhone. The workflow in InDesign CS5 and 5.5 will use separate files for horizontal and vertical layouts if you plan to support a dual-orientation folio on iPhone. You can use separate files for InDesign CS6 workflows or take advantage of alternate layout features introduced in this release.

Build your InDesign layouts (horizontal, vertical, or both) with iPhone dimensions and add interactivity (see Figure 8). InDesign documents should be either 480x320 or 960x640 pixels (see Figure 9). Styles can be imported from an iPad layout file of the same resolution class.

Use Folio Builder panel to create a new folio for iPhone 3GS (see Figure 10):

Since all three iPhones have a 3:2 aspect ratio, a single InDesign file can be used to generate articles for both the low- and high-resolution displays.

Separate files, InDesign CS5/5.5

1. Save a copy of your iPad InDesign document to use for the iPhone design.
2. Open the copy and use the Page Tool to select all pages in the document.
3. Change the page dimension and orientation to your preferred iPhone device.
4. Adjust your layout by adding pages, moving content, editing master pages and styles as needed.
5. Use the Folio Builder panel to create a new folio for iPhone 4 or 4S.
6. Add articles to this hi-res folio.
7. Use the Folio Builder panel to create a new folio for iPhone 3GS.
8. Add articles to this standard-res folio.

Separate files, InDesign CS6

1. Save a copy of your iPad InDesign document to use for the iPhone design.
2. Open the copy and use the Page Tool to select pages in the document and apply liquid page rules to each page or master page.
3. Use the Page Tool to select all pages, and then change the page dimension and orientation to your preferred iPhone device.
4. As required, adjust your layout by moving content and editing master pages and styles as needed.
5. Use Folio Builder panel to create a new folio for the iPhone 4 or 4S.
6. Add articles to this hi-res folio.
7. Use Folio Builder panel to create a new folio for the iPhone 3GS.
8. Add articles to this standard-res folio.

One file, InDesign CS6 (alternate layouts)

Use the same InDesign document for both iPad and iPhone layouts.

1. Use the Page Tool to select pages in the document and apply liquid page rules to each page or master page (see Figure 11).

2. Create an alternate layout with the Layout menu or in the Pages panel:

3. Select the appropriate size and orientation for the alternate layout and choose how to apply liquid page rules and options for how content is treated.
4. If required, adjust your layout by moving content and editing master pages and styles as needed.
5. Use the Folio Builder panel to create a new folio for iPhone 4 or 4S.
6. Add articles to this hi-res folio. The iPhone layout will be selected when you add the article, since it matches the aspect ratio of the iPhone.
7. Use the Folio Builder panel to create a new folio for iPhone 3GS.
8. Add articles to this standard-res folio. The iPhone layout will be selected when you add the article since it matches the aspect ratio of the iPhone.

This article introduces the workflow to design and publish DPS content to iPhone and iPod Touch. This workflow is closely related to that used for the iPad 2 and the new iPad. The article Tablet publishing on the new iPad should be consulted to get a broader understanding of publishing for all iOS devices.