Guidelines for Creating Folios for SD and HD iPads

Quick Summary

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.

Background Information

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

Pass-Through Overlays

The following overlays are not resampled. The source files are uploaded directly to the server.

  • Videos (and audio clips)
  • Image sequences
  • Panoramas
  • Audio controller skins
  • Pan & Zoom images

Resampled Overlays

The following overlays are resampled in the same way that background content is resampled.

  • Slideshows
  • Buttons
  • 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.

Useful Links

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

_________________

62 Responses to Guidelines for Creating Folios for SD and HD iPads

  1. I will have to test it as soon as a get teh New Ipad

  2. Nancy Parrish says:

    THANKS, Bob. Looking forward to your next post!

    Meantime, I’m testing Gluon’s Pro Scale plug in for InDesign. Just trying to find an easier way to ‘scale up’ to the new size without reinventing the wheel on every article.

    Any thoughts?

    Thanks,
    nancy

    • Bob Bringhurst says:

      I’m not familiar with that plugin. The next version of InDesign will include all kinds of features that support multiple devices. Look around for some previews.

    • Uwe Laubender says:

      @Nancy – consider a different design when laying out contents for the iPad 3. Since we’ll get double resolution one could present more good readable contents per page.

      No plug-in or automation process (by scripting) will get you perfectly there. Maybe a rule set for scaling font sizes driven by some scripts can do the heavy lifting… Managing white space will be considered anew…

      Uwe

      • Nancy Parrish says:

        Thanks for your post– I agree it is not perfect. What I need is InDesign 6, which I think will fix all these issues with ONE article file to rule them all;) (Saw the Adobe Max preview video of the upgrade –and it is AWESOME!)

        This plug is certainly no home run–but it does ‘mostly work’ and for now, it helps me think I am moving in the right direction– towards the ipad 3 resolution. Until then, I remain hopeful!

  3. Pingback: magCulture.com/blog

  4. this works quite well — trying to update my single edition DONE for retina display.
    but I am concerned about HTML web content, how that scales for retina.
    in safari, a website is displayed with the same dimensions as non-retina devices.
    i am curious how that plays with DPS.

    —Johannes

  5. my experience with a few hours of creating single-source folios at retina resolution is that the iPad1 is having major memory problems and the content viewer quits a lot.

    —Johannes

    • Bob Bringhurst says:

      Thanks for testing, Johannes. How are you creating the iPad1 folio? Are you creating 1024×768 folios with 2048×1536 source files?

      • I am not using renditions, because I want to update my DONE magazine, so I am creating a 2048-px-folio with 2048-source files.
        They also don’t show up in the content viewer when going through the server. They show up on android.

  6. Graham Davis says:

    Hi Bob

    I’m confused. As neither Overlays Not Resampled or Pass-Through Overlays are resampled what is the difference?

    Graham

  7. Pingback: Folio tervezés iPadre

  8. Victor Gavenda says:

    You discuss some limitations of single-issue apps with regard to handling multiple resolutions; but what about multi-folio apps that contain only a single folio? Im thinking of something a book publisher might do.

    Thanks, Victor

    • Bob Bringhurst says:

      With multi-folio apps, you can create a single 1024×768 folio that will appear on both models. Not sure how it will look on the iPad3. We’ll find out Friday. If you create a 2048×1536 folio, it will appear only on the iPad3, not the earlier models. The best thing to do is to create a rendition folio, even if you’re using the same source files (1024×768) for both renditions. It doesn’t take more than a few minutes, and it scales the content before it gets to the viewer.

  9. Anton says:

    Tell me when you can and will do in the phone book for DPS IPhone?

  10. Pingback: Round up of recent Adobe DPS resources | SRPS Blog

  11. Pingback: DPS Release 19: Expanded Features in Adobe's Biggest Release Yet | Technology for Publishing LLC

  12. Gennady says:

    > If a customer with an iPad 3 downloads the 1024×768 app, content is scaled up and pixelated.
    - Bob, I’m not sure if it’s true: 1 square of iPad 1/2 of x color translates exactly into 4 squares of iPad 3 of the same x color (and it’s most probably done on hardware/iOS level). And this is just geometry. If you add physics – brighter pixels, your image will look better then on iPad 1/2. As for the 2048×1536 image on the iPad 1/2 it needs to be rendered to assign each 1 square average color of those 4 small ones. This shouldn’t make any significant difference compare to it’s 1024×768 version.
    Don’t have iPad 3 – just my thoughts.

    Best Regards,
    Gennady

  13. Pingback: This Week in InDesign Articles, Number 86 | InDesignSecrets

  14. Pingback: Retina-Displays und die Medienproduktion | Georg Obermayr

  15. My app, which is an interactive scrapbook w/ video, html animation and multi state objects filled with photos, looks great on the ipad 3. I can’t see any difference in the content– doesn’t look pixelated to me at all. I opened both ipads (2 and 3) and it looks exactly the same. Course, both are reading the app at the same resolution thru the Feb. version content viewer.

    I designed a test version at the higher res–but can’t test that until the content viewer is updated (I am a single license kind of girl;).

    So…just waiting on apple, yes? Or is there another shoe to drop?

    • Bob Bringhurst says:

      I had the same experience with one of my apps called Northwest Scenery. It’s basically a collection of photographs, and they look great on the iPad 3 — no need to create a separate rendition. But my DPS Tips app has several articles with pixelated text and fuzzy images. I’ll create single-source renditions and use PDF image foramt to reduce file size.

      I don’t know about any more shoes to drop. It’s a new and evolving industry.

  16. Graham Davis says:

    We have sideloaded a new custom viewer onto our iPad3 so that we could test 2048 folios and it appears correctly in the File Sharing part of iTunes. However although we have made local folios we can’t locate them (on Mac or PC) in order to drag them into the Documents area. Where are local folios stored?

    • Bob B. says:

      If you turn on Sideloading in a development app, you can either use the old Content Bundler (v11) tools to export a single .folio file, or you can hunt down local temporary .folio files and sideload those. On Mac OS, you need to show hidden files. If you have Lion, you can hold down Option and choose Go > Library. In your user library, drill down to Preferences > StageManager.[###] > Local Host, and then poke around in those folders for your .folio files.

      Another option is to build a custom Adobe Content Viewer and use Preview on Device, which requires PhoneDisk.

  17. Graham Davis says:

    Thanks Bob

  18. Blair Hamill says:

    I’m building a single folio using InDesign cs5.5 and the latest version of Adobe Content Viewer re-installed 3/25/12.

    I’m experiencing no problems creating a 768 x 1024 folio, viewing in folio producer and opening the iPad file utilizing Adobe Content Viewer. However, when attempting to create a deeper 768 x 1536 document, folio producer recognizes the file but Adobe Content Viewer won’t read it. Thoughts?

    Scrolling is enabled and document setups mesh

  19. Blair Hamill says:

    Just watched Smooth-scrolling Layouts on Adobe TV. My question is resolved and all is working great. Gotta remember to IMPORT smooth scrolling articles! Thanks

    • Bob Bringhurst says:

      That used to be the case, but you can now use Add to create Smooth Scrolling articles — you just need to select a Smooth Scrolling option in the dialog box.

  20. Tony C. says:

    Question.

    Are both renditions supposed to be visible in Content Viewer on the iPad3?

    Even after uploading sidecar.xml to both folio renditions; both renditions are available for download on the iPad3. How are users to know which folio is optimized for their iPad3 device? Does this only occur on Content Viewer? Will publishing to the distribution server change this behavior?

    • Bob Bringhurst says:

      Yes, but there was a recently fixed bug that caused both renditions to show up on the iPad 3. If you build a new viewer, you’ll see only the hi-res renditions.

  21. Uwe Laubender says:

    The link to “Colin Fleming’s article about targeting the new iPad 3″ is broken.
    Got an “404″ on that.

    Uwe

  22. Horacio Duek says:

    Thanks Bob for the article. Maybe I am missing something here. I don’t have an iPad 3 yet, but I just don’t understand why magazines created for the iPad 1 & 2 look pixelated in the iPad 3. The iPad 3 has four times the resolution of the iPad 1 & 2 (0.78 vs 3.14 megapixels), the size of the screen is the same in both devices. That means Apples has managed to fit 4 pixels in what used to be 1 pixel. If an 1024×768-image looks great in the iPad 1 & 2, that image should look the same in the iPad 3 as long as no interpolation is applied: the value of 1 given pixel in the 1024×768 matrix is “copied” to the 4 surrounding pixels in the 2048×1536 matrix, but since the new pixels in the iPad 3 are 1/4th the size of the “old” pixels, the 1024×768-image should look the same.
    Any ideas of why this is not happening?
    Thanks,
    Horacio

    • Paul Brouns says:

      Because the resolution is higher, the pixels that build the image just become more visible, just like when you zoom into a jpg image in Photoshop. To me as a designer this fuzziness is probably a bigger issue than to the general public, though.

      • Bob Bringhurst says:

        In my experience, 1024×768 folios look fine initially on the iPad 3. Then when you see how sharp retina size folios look and go back to 1024×768, it’s relatively disappointing in some cases.

  23. Paul Brouns says:

    Being a designer I have started designing my first folio. I am very dissapointed though, reading about resolution restrictions to the single-user edition! It would have been great to have a lower-threshold platform for designers that are interested in using Adobe’s software for all iPad resolutions.
    Having tested folio files on a new iPad I can add that all 1024×768 apps look way too fuzzy for my taste on retina resolution. Especially text and other hard-edged, angled or curved shapes. The Pdf-solution only makes text look sharper when you start to zoom. In its original state it is pixelised and just as fuzzy as a jpg version.
    I was ready to publish my first single-user app, but now I am both puzzled and disappointed by Adobe. I did not intend to buy a more expensive account for multi-editions, and now there is no other option if you want to show the best solution in all resolutions!

    • Bob Bringhurst says:

      With the v19 viewer, PDF articles zoom in on page load, so 1024×768 PDF articles look fairly good in most cases.

  24. Paul Brouns says:

    One more remark. The current adobe content viewer app on the new iPad so far still does not display retina size content! Does anyone have the same problem, or is the update not available in all countries yet (I live in the Netherlands)?

    • Bob Bringhurst says:

      You need access to the newest (v19) viewer to see retina size content. If you’re a Pro or Enterprise customer, you can create a custom version of the Adobe Content Viewer. If you have a Single Edition license, you can create a development viewer. Otherwise, you’ll have to wait until Apple approves the newest version of the Adobe Content Viewer.

  25. Paul Brouns says:

    I have updated the plugin software for Indesign 5.5 (folio builder 12_1_3 / folio producer 1-9-1). I have updated the two renditions of my test file using my Adobe login. Now I am getting a new problem: on the new iPad I get a notice that I need to update my adobe content viewer app. The problem: the newest one available in my app store is already installed which is 2.3.1 (dated 21 february).
    Should there be a newer one? In that case it is probably not available yet for Holland. Now I cannot even check my newly updated files anymore.

  26. Pingback: This Week in InDesign Articles, Number 87 | InDesignSecrets

  27. DanaOM says:

    I find when using HTML the text looks very crisp in oppose to adding text using the Type Tool for the iPad3. But when I use HTML to display text I can only use web safe fonts.
    Is it possible to add font files that will link to the HTML?

  28. Pingback: Authoring Guidelines for the New iPad « Adobe Digital Publishing

  29. Graham Davis says:

    I have done some iPad 3 tests using PDF image format:
    Using the same hi res source files in ID

    A::ID 1024 doc size: Folio Builder exports 1024 folio (1mb)
    B::ID 1024 doc size: Folio Builder exports 2048 folio (1mb)
    C::ID 2048 doc size: Folio Builder exports 2048 folio (4mb)

    At max zoom on iPad 3 A is inferior quality but B and C are the same but C is 4mb

    Clearly B is the most practical option but I don’t understand why B is not 4mb as the source files are hi res and the folio is being upscaled by Folio Builder?

    Can anyone explain this?

    The image above is 1000 px taken from 3 screen grabs from 3 folios each at max zoom but is reduced here because of blog limitation

    See http://forums.adobe.com/thread/989750

  30. Graham Davis says:

    Bob is it possible to answer my question in the previous post.

    Graham

  31. Anton says:

    Hello! Will there be an opportunity to create a single application for the iphone? and when?

    • Bob Bringhurst says:

      Yes, enabling single-viewer apps for the iPhone is on the roadmap, but I don’t have a date. My guess would be after the summer, but it’s just a guess.

  32. John L says:

    I have been searching for an answer for hours to a simple question and am more confused than ever.

    I want to know if I can make a version of my single edition app for the iPhone and the iPad – to me right now it seems the answer is no which is very, very disappointing.

    I need a way around this as I have built apps before using DPS that work on both devices and I have to bring them uo to date.

    • Bob Bringhurst says:

      No, you can’t create a single-folio app that appears on both the iPad and iPhone. You need to create a multi-folio app with different folio sizes that target either the iPad or iPhone, but never both. iPad folios don’t appear on an iPhone, and iPhone folios never appear on the iPad.

  33. James says:

    Hi Bob.

    I was wondering of you might help me out. I have created a single edition dps file and have it on the ‘test’ iPad [through iTunes] and have noticed that even though my articles have more than one page, I cant actually ‘scroll’ down through the content… I can only scroll left to right. I know the other pages are there in each article as I can see them when I take a look over ‘all of them’ using the small view all icon in the top right hand corner of the viewer. Is it one of the tick boxes above the languages when using the DPS App Builder?

    Many thanks in advance.
    James.
    james@studioview.co.uk

    • Bob Bringhurst says:

      It sounds like your articles have Horizontal Swipe Only selected. To check, select an article and choose Article Properties.

  34. Dee Iva says:

    Hi Bob
    I’m creating my first DPS publication for iPad and have noticed that the text is very fuzzy when I preview it on my iPad. I have the iPad that came out in March 2012. Is it only like this in the preview mode? Will it sharpen up once I upload it to the Folio Builder? This applies to both static text and text in overlays such as slideshows (which I have set to vector output).

    Many thanks

    Dee

    • Bob Bringhurst says:

      Hi Dee,

      When you create a new folio, use the most current viewer version. The default is v20, but you should select v24 or greater. Then the vector settings will have an effect.

      • Dee Iva says:

        Hi Bob
        Thanks for your reply.
        I updated Content Viewer today so it must be the latest version. How do I know which version I’m using? I haven’t created the folio yet, am just working on the individual pages. Will they sharpen up once I’ve put them into a folio?

        Many thanks

        Dee

        • Bob Bringhurst says:

          Yes, they should. What you see in the desktop viewer is just a rough preview. When you create the folio, click the “v20″ icon to select a newer viewer version. Then test the folio on the iPad using the Adobe Content Viewer app. If there are problems, the best place to go is the DPS Forum.