Designing digital publications

Horizontal and vertical layouts must be in separate InDesign documents, not in the same document. You cannot mix and match orientations within folio; the entire folio must be dual, portrait, or landscape.

A dual-orientation article has two layouts—vertical or horizontal. When the user rotates the mobile device, the second orientation is displayed. A single-orientation folio is locked into that orientation. For example, if you create articles with only vertical InDesign files, that orientation remains in place even if the user rotates the mobile device. However, if a folio is portrait-only, full-screen videos can still be played in landscape mode.

Landscape and portrait layouts on the iPad

Each document can have multiple pages and assets that differ in the horizontal and vertical orientation.

Adobe recommends

Have a tutorial you would like to share?

Design Decisions for Digital Publishing Apps

Bob Bringhurst
Bob Bringhurst provides more detailed examples of digital publishing design decisions.

Smooth scrolling articles

You can turn on the Smooth Scrolling option for individual articles. Smooth scrolling is useful for long, single-page layouts such as a table of contents or a credits article. If smooth scrolling is turned on, create your design accordingly. For example, for the iPad, you can create landscape and portrait documents that are 1024x2000 and 768x2000, respectively.

In InDesign, use the New Document or Document Setup dialog box to specify the page size.

Page-by-page scrolling and smooth scrolling
A.
Horizontal page-by-page scrolling

B.
Horizontal smooth scrolling

C.
Vertical page-by-page scrolling

D.
Vertical smooth scrolling

Use the Article Properties dialog box to enable Smooth Scrolling. A document with Smooth Scrolling can have only a single page.

Note: A bug currently prevents the landscape smooth scrolling layout from being added to an article by clicking the Add button in the Folio Builder panel. For now, the best way to create a smooth scrolling article is to create _h and _v source files and import the article. See Import InDesign articles.

Smooth scrolling works only vertically at this time. To scroll an article horizontally, you can create scrollable content. See Scrollable frame overlays.

To adjust the size of the smooth scrolling page, use the Page tool to select the page, and then adjust the page’s height.

Video Tutorial

Smooth-Scrolling Layouts

Colin Fleming
Learn how to set up smooth-scrolling documents.

Swiping articles horizontally

If you want one or more articles to flow horizontally only, select the Horizontal Swipe Only option in the Article Properties dialog box. Users navigate “flattened articles” by swiping left and right rather than up and down.

View full size graphic
Flatten articles
A.
Unflattened article

B.
Flattened article

Only the first page of a flattened article shows up in the TOC, but all the pages appear in Browse mode and as scrubber thumbnails. You cannot flatten an article that is set to Smooth Scrolling.

Video Tutorial

Horizontal Swipe Layouts

Colin Fleming
Some publishers prefer that the reader move through an article horizontally. You'll see how to make this choice for an article in this video.

Using HTML

Here are three ways to take advantage of HTML using DPS tools:

Links to websites
Use hyperlinks or buttons to display a website. You can display Websites either in the external mobile browser or in an in-app browser in which users click a Close button to return to the folio. See Hyperlink overlays.

Web Content overlays
Create a Web Content overlay that displays a website or local HTML files within a view area. See Web Content overlays.

HTML articles
Instead of creating articles with InDesign documents, you can create an HTML folder and import it as an article. See Import HTML articles.

Enabling pinch and zoom for articles

If you want users to be able to pinch to zoom in on article content, choose the PDF image format when creating articles. Interactive overlays no longer disable pinch and zoom. Pinch-and-zoom PDF articles work only on the iPad viewer.

When creating or updating your custom viewer, make sure that you select the PDF Zooming Enabled option in the Viewer Builder.

Forums

More

Blogs & Twitter