If you’re in a hurry, here’s the executive summary.
- For iPads, we recommend creating 1024×768 folios with articles in the PDF image format. PDF results in smaller article size and maintains vectors. To avoid rasterizing text in slideshows and scrollable frames, you can choose Vector in the Folio Overlays panel. These articles in PDF image format look great on both SD and HD iPads.
- For multi-issue viewers, you can create separate SD and HD folio renditions so that the 1024×768 folio appears on the SD iPad and the 2048×1536 folio appears on the HD iPad. This approach is useful if you want to use PNG or JPG image format instead of PDF. The easiest rendition approach is to create 1024×768 source documents and use these as the basis for both the 1024×768 folio and the 2048×1536 folio. You might want to show/hide layers for certain overlays such as pan & zoom images.
- For single-issue viewers, you cannot create renditions. Create a single 1024×768 folio with PDF image format. For details, see Creating multi-rendition articles for iOS devices.
To help you make design decisions, let’s go over a few key points.
How Folios Are Rendered
First, it’s important to understand how folios are rendered. Any non-interactive content that appears on your page is resampled when the article is created. If your folio is 1024×768, all the non-interactive content on a page is compressed to a single image using the article’s image format setting: PNG, JPG, or PDF.
Rule of Thumb: Use PDF image format if possible. PDF yields smaller folios.
If your folio is 2048×1536, a 2048×1536 72-ppi background image* is rendered for each page. Non-interactive page items are scaled to conform to the folio size, regardless of the source documents’ size. For example, you could create 512×384 source documents with a 2048×1536 folio, and the content would get scaled up to the folio size. That offers a great opportunity to create two renditions from the same set of source files. But more on that later.
* I’m oversimplifying this. What I said is true of JPG/PNG folios, but it’s more complicated for PDF folios. A JPG or PNG-format article is rasterized at 72 ppi and is the dimension of the folio. However, PDF-format articles for 1024 and 2048 folios have the same dimensions, but have different resolution values for the SD and HD folios. For pre-v23 folios, PDF articles had 72/144 resolution values. For v23 and later, PDF articles have 108/216 resolution values. But don’t create 2048×1536 PDF articles—that’s a waste.
Overlays are handled differently than non-interactive items. Some overlay source files are resampled while others aren’t. When the article is created, certain overlay source files are uploaded to the server without any compression. Let’s call these “pass-through overlays.”
The following overlays are not resampled. The source files are uploaded directly to the server.
- Videos (and audio clips)
- Image sequences
- Audio controller skins
- Pan & Zoom images
The following overlays are resampled in the same way that background content is resampled.
- Scrollable Frames
Where to Scale Content
One other important issue to discuss: If a folio has a different size than the device, the viewer needs to scale the content either up or down. Whenever the viewer scales content, there is a memory hit that can affect performance. If content is scaled up, raster images and especially text can appear blurry.
Best Approach – One 1024×768 PDF Folio
It’s now possible to create a single 1024×768 PDF folio that looks great and performs well on both the SD 1024×768 models and the HD 2048×1536 model. There are three main improvements: (1) background images are now output at 108 ppi instead of 72, (2) you can use a vector format for slideshows and scrollable frames to avoid text pixelation, and (3) you can include both SD and HD assets in the folio for certain overlays. (For nearly all overlays, including separate SD and HD assets isn’t worthwhile, but it’s nice to know you can use it in rare cases.) You can learn more details by reading Creating multi-rendition articles for iOS devices.
Second Approach – Two Renditions, One Set of Source Files
The ability to create renditions to account for different Android devices has been around for awhile. This means you can create two different folios — one 1024×768 and one 2048×1536. If you set up the metadata properly, only the 1024×768 folio is available on the SD iPad, and only the 2048×1536 folio is available on the HD iPad.
Renditions work only for multi-issue viewer apps. I’ll discuss single-issue apps later.
You can create folios and source files in either 1024×768 or 2048×1536 format, although using the smaller source files is perfectly fine. Make sure that you use the “Import Multiple Files” technique when creating the new rendition. Using the sidecar.xml file adds all the appropriate metadata.
With renditions based on one set of source files, your content is scaled before it gets to the viewer.
When you create the 2048×1536 folio, smaller articles are scaled up. Your text will scale up just fine. For non-interactive images, use a reasonably high resolution. And here’s where the trick comes in. Use the Layers panel to handle pass-through overlays—especially pan & zoom image. When you create the articles in the folio, hide or show the layers as needed.
Content on hidden layers is not included in the article when it’s created.
For example, you can place a 400×300 72-ppi image sequence on the layer for low-resolution overlays. Then place an 800×600 72-ppi image sequence on the layer for high-resolution overlays. Scale the high-resolution image sequence by 50% to make the effective ppi 144.
Third Approach – Two Renditions, Two Source Files
With this approach, create two different folios—1024×768 and 2048×1536—and two different sets of source files.
With full renditions, content is optimized for all iPad sizes.
I don’t like this approach, but it might work for you.
Worst Approach (2048×1536)
With this approach, you create only 2048×1536 folios and articles to target only the iPad 3 model. We don’t recommend this approach.
2048×1536 folios do not appear in the viewer library of iPad 1 & 2 devices.
Creating Single-Issue Apps
We recommend that you create a 1024×768 folio using PDF image format. With this approach the 1024×768 content scales up nicely for the HD iPad, especially if you take advantage of a few features mentioned in Creating multi-rendition articles for iOS devices.
Other iPad Rendition Considerations
- Let’s suppose you publish a 1024×768 folio and then a week later you publish a 2048×1536 rendition of that folio. If your iPad 3 customers open the library before the larger rendition is available, only the smaller rendition remains available — they don’t get an update notice, and only the smaller rendition remains available. The only way for them to get the larger rendition is to remove and reinstall the viewer app. (This issue is scheduled to be fixed in an upcoming release.)
- If you have a Newsstand app, do not trigger a push notification until all renditions have been published as public and are available.
- When using DPS App Builder (previously called Viewer Builder) to create or update your viewer, create two sets of icons, splash screens and other images. For example, specify 1024×768 and 768×1024 images for the iPad1, and 2048×1536 and 1536×2048 images for the iPad3. The newest version of the Viewer Builder provides these additional options.
- I haven’t tested cover images yet, but I think it’s fine to continue providing only 1024×768 and 768×1024 images. The safest approach is to double the size of these images, which are scaled down as needed.
- If you want to specify thumbnail images for imported articles, include a 140×140 image (instead of 70×70 images) for iPad 3 renditions.
- To create renditions, make sure that you use the exact same Folio Name in the two folios. If it’s a retail app, use the same Product ID and Publication Date.
Help article about designing for multiple documents
Help article about creating renditions
Help article about Creating multi-rendition articles for iOS devices
Colin Fleming’s article about targeting the new iPad 3