DPS authoring with InDesign for iPhone and iPod Touch (May 2013)

A year ago, the May 2012 update to the Digital Publishing Suite introduced new opportunities for workflows and new outlets for publishing. A prime example of this was the addition of iPhone and iPod Touch^[1] to the platform/device support for folio content. The May 2013 update to DPS adds full-screen support for iPhone5, further extending the reach of publishing to a larger screen with a new aspect ratio.

Support for these smaller screen devices as a publishing target extends the reach of DPS to additional readers beyond those found on tablets. A critical question to ask is how to most efficiently generate content for these devices or which devices to target for your publishing. We are accustomed to designing for the larger iPad screen and currently face the challenge of authoring for two iPad screen dimensions. Adding iOS devices (iPhones 3GS, 4, 4S, 5, and iPod Touch,) some with identical aspect ratios but different resolutions, adds to the workload for DPS authoring and production. So how do we best address these devices in our workflow?

Ultimately we may be designing for only five screens if you are going to target all iOS devices. All of the of the older iPhone and iPod Touch devices share the same aspect ratio but offer two resolutions. And all iPads share the same aspect ratio, but offer two resolutions. The new player in this design challenge is iPhone 5 and fifth generation iPod Touch, they share a new aspect ratio and one resolution. The solution calls for five folio renditions if you’re going to target all of these 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.

How you create your InDesign files and leverage them to generate the layouts (or layout pairs for a dual-orientation folio) which then can generate the five folios for the device classes is the key. Five folios generated from three designs can take care of all 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/5 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 iPad rather than the iPhone you are targeting first. The lower resolution displays on the original iPad, iPad2 and iPhone 3GS share the same resolution, 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 iPad2 then you should primarily design for iPhone 3GS. If you build alternate layouts for HD displays, you can take advantage of style groups to quickly adapt your type to be larger for the HD displays.

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 iPhone workflow & production 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 only build 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/4S/5 and iPod Touch and a lower resolution folio will download to iPhone 3GS. The iPhone 4/4S and iPhone 5 have different pixel dimensions, and different aspect ratio. This means that you can use one design file to build the renditions for iPhone 3/4/4S, and a different design file or layout for iPhone 5.

^[1] Fourth and fifth generation iPod Touch are supported.

I generally avoid giving design advice for 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–20 pixels so that it’s readable. I find that I have more opinions when discussing DPS design for iPhone.

Text size

The original iPad, iPad2, and iPad Mini have the same screen resolutions as 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–20 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. Of course if you prefer to design for the higher resolution iPad you will find that fonts are twice the size that I have suggested. You will also find that if you can use the styles for iPad3 in your designs for iPhone 4/4S/5.

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.

Navigation and interactive regions

The smaller screen on iPhone is going to strongly influence how we design navigation and interactivity on these devices. Consider how people hold 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 iPad2 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 iPhone 3GS and 88 pixels on iPhone 4/4S/5 and iPad3. 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

• Single orientation design for 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 DPS App Builder to create your custom app, you have a couple choices when it comes to iOS devices. An app can work only on iPad, or it can work on both iPad and iPhone. You control this in DPS App Builder once you choose to target iOS. It is important to note that the app on iPhone (and iPod Touch) has some limitations when compared to the iPad version.

iPhone/iPod Viewer limitations include:

• Bookmarks are not supported.
• The Library View is a single column.
• You delete a folio by using an iOS swipe gesture to reveal the Remove command.
• Enterprise apps can have up to three custom icons.
• No Single Edition available for iPhone.

When you build your app for iOS, you will need to prepare icons and splash screens (or launch images) which support the devices which will run the app. As of May 2013, Apple requires these assets in both standard and high definition.

• For iPad, you will need:
  • SD icons that are 29, 50, 72, and 512 pixels square
  • HD icons that are 58, 100, 144, and 1024 pixels square
  • Vertical and horizontal splash screens:
    • 1024x768 and 769x1024
    • 2048x1536 and 1536x2048
• For iPhone and iPod Touch, you will also need:
  • SD icons: 29 and 57 pixels square
  • HD icons: 58 and 114 pixels square
  • Vertical splash screens for:
    • 320x480 pixels
    • 640x960 pixels
    • 640x1136 pixels

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

Streamlining your design process while maximizing your output options hinges on the fact that most 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 like how we can work with iPad design and production. iPhone 5 requires a unique layout design to fill the screen. For additional information on authoring for iPad3, see the article at Tablet publishing on the new iPad .

Design dimensions

Build your InDesign files with dimensions that match any type of iPhone as shown below. Which dimension set you chose may depend on whether you are also designing for iPad and your workflow for those devices. See the iPhone workflow & production section 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 dimension 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 it’s 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.

You can scale the display of your content in the Adobe Content Viewer. This feature will help you preview iPhone 4/4S/5 layouts accurately by zooming out to reduce the relative size of your folio. Zooming out to 50% will show an iPhone 4/4S/5 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 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 iPad2 first and then making renditions for hi-res iPad3 you will want to build for iPhone 3GS since styles and measurements will map directly to the smaller device that has the same resolution as iPad2. iPhone 5 will require an additional design file or alternate layout to fill the 1136x680 screen, this design will have closer parity to the designs for iPhone 4/4S with larger text sizes for readability.

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 additional features in CS6 it’s important to note that it is the only tool that allows you to 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 has limitations. You will likely face manual adjustments to your page content to suit the smaller screen size.

CS6: Liquid Page Rules and Alternate Layouts

InDesign CS6 introduced a couple 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. 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 feature in InDesign CS6. Alternate Layouts are a way to create pages with a different dimensions 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 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 “child” (or linked) text. This feature works across alternat layouts in a single file and can be create 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. InDesign documents should be 480x320, 960x640, or 1136x680 pixels. 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 three iPhones have a 3:2 aspect ratio, a single InDesign file can be used to generate articles for both the lower and high-resolution displays on iPhone 4/4S, iPhone 3GS and iPod Touch.

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/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/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.

Build layouts and folios for iPhone 5 and iPod Touch (gen 5)

1. Save the design document with a new name for building the iPhone 5 and iPod Touch (gen 5) layouts.
2. Change the page dimensions and orientation to support 1136x680.
3. Adjust content and design for this layout.
4. Use Folio Builder panel to create a new folio for iPhone 5.
5. Add articles to this hi-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.

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 Folio Builder panel to create a new folio for iPhone 4/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 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.
9. Create an alternate layout for the iPhone 5 and iPod Touch (gen 5) layouts.
10. Change the page dimensions and orientation to support 1136x680.
11. Adjust content and design for this layout.
12. Use Folio Builder panel to create a new folio for iPhone 5.
13. Add articles to this hi-res folio.

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 iPad2 and iPad3. The article Tablet Publishing on the new iPad should be consulted to get a broader understanding of publishing for all iOS devices.