This chapter is from the book
This chapter is from the book
This chapter is from the book
Design and Workflow Considerations
Although tablet apps are electronic, they still use the concept of “pages.” But the design issues involved can be quite different from those encountered when designing for print. Interactive elements require a different way of thinking about how information is presented, and even about how the user is informed that elements of the page are interactive.
Another important difference is that many print publications, especially books and magazines, are really designed as facing-page spreads. Because the reader experiences both pages at once, they are effectively viewed as though they were a single page. When content moves to a tablet, there is no notion of spreads, and the overall design and design elements need to hold up in what are essentially single-page layouts.
Page orientation: H, V, or both?
One of the first decisions you need to make when converting a print publication to a tablet app is the orientation of the pages in the app. Because the iPad and most other tablets have a built in accelerometer, the screen rotates depending on how you hold the device. You can design your publication with pages that can be viewed in only a vertical orientation, only a horizontal orientation, or both vertical and horizontal orientations.
)
There is no right or wrong decision regarding page orientation. One thing to keep in mind, though, is that creating a publication with both orientations is going to be more work than creating a single-orientation app. New features in CS6, such as Liquid Layout rules and alternate layouts (discussed in Chapter 4), help with the process, but building an app with both orientations still requires extra effort.
Scrolling vs. individual pages
Although tablet apps don’t display pages in spreads like print publications do, the content still needs to hold up on its own page. One nice thing about pages on tablet apps is that they can be set as individual pages (similar to a print publication) or as scrolling pages (so that content is one continuous page that scrolls vertically).
The most common types of articles or pages that are set as scrolling pages are tables of contents, letters from the editor, credits, and colophons—“list type” articles. Other types of stories that are well suited to scrolling pages are articles that consist of short snippets of information, such as new product releases, new hot spots to visit, or anything that is essentially a list of items. On the other hand, long blocks of text such as feature stories can be harder to read in a scrolling view. It’s usually best to set those types of articles in a page-by-page view.
Scrolling pages are easy to set up in InDesign. Simply make the InDesign page long enough to fit the article. For example, you might set a horizontal page to 1024 × 2000 pixels and a vertical page to 768 × 2000 pixels. (The maximum page size in InDesign is 15,562 pixels.) You can also set the article to Smooth Scrolling in the Article Properties dialog box, discussed later in this chapter.
Whether content is set up in individual pages or as one scrolling page, it’s a good idea to give the reader some visual cue that more content is available. This cue could be a graphic image that you can see only part of, or it could be an arrow or other icon that points toward the rest of the article.
Fonts and images
Fonts look beautiful on tablets, especially on the Retina display iPad (2012), but that doesn’t mean you don’t have to make adjustments for tablet apps. When it comes to fonts, the main difference between layouts in print and on tablets is that very often body text that looks fine in print is too small on the tablet version. Most publications increase the body text size by at least 1 point or more, along with increasing any smaller text in the layout.
When you’re working with images for tablet apps, there are a couple of things to keep in mind. Like fonts, images look fantastic on most tablets. But keep in mind that tablets use an RGB color space, so it’s a good idea to keep your images in RGB whenever possible. You can download an ICC profile for the iPad at http://indesignsecrets.com/downloads/forcedl/iPad.icc. Load this profile into all your Creative Suite applications, and you’ll get more accurate color matching results.
You’ll also want to keep your options open when cropping an image. Avoid destructive cropping. For example, you may crop an image one way for the cover of your vertically oriented print publication, but if you are creating a horizontal orientation for your tablet app, you’ll need to crop the image differently, with more of the image showing on the sides.
Use high-resolution images for all non-interactive content. InDesign will automatically sample the images correctly for the device you’re designing for. Some interactive content is sampled and some is not, as we’ll discuss in later sections.
Interactivity visual cues
Part of what makes publications on tablets so compelling are the interactive features that can be included. There’s nothing like buttons, slideshows, or movies to spice things up! Because interactivity is such an important part of the tablet app experience, it’s important that your readers know it’s there.
The most common way to guide users to interactive elements is to develop a series of icons that indicate different types of activity. These can be included on a help page at the beginning of your publication to let users know how to navigate and use the DPS controls that appear when the screen is tapped.
)
Workflow considerations
There are many issues regarding workflow when creating a tablet app publication, especially when it’s in conjunction with a print version. We can’t cover them all in detail here, but we’d like to mention a couple of very important things to consider.
First and foremost is the issue of resources. Whether you work on your own or are part of a workgroup, it takes time and energy to create a tablet app of your publication. Even with the tools that were added to CS6 to make the process of creating documents in multiple sizes and orientations easier, don’t underestimate the additional work that’s going to be involved. As we’ve been highlighting in this section, the design considerations for tablet apps are quite different from those for print.
Another part of the typical workflow that is affected is proofing. How do you proof interactive content? How do you mark it up for changes? Certain elements can be output from InDesign in PDF format, but many cannot, or not very easily. Imagine you have a slideshow created with object states, each of which includes an image and text. You could make a PDF, but you’d have to make one for each state, one by one, and this can be very time consuming.
If you know you will be creating both a print and a tablet app version of your publication, plan for both at the very beginning. Allocate resources, whether it’s your own time or that of others, and right from the start, think about the assets as they relate to both your print version and your digital version.