Clickable PDF presentations

This guide is for agencies and developers who build interactive PDFs, also called clickable PDFs. The same file opens in the browser and in the Mobile Locker apps for iPad, iPhone, Windows, and Android. A tab that only looks clickable in InDesign is not enough.

Where the file opens

Mobile Locker does not use one PDF viewer for every surface.

• The browser opens PDFs in Apryse WebViewer.
• The iOS, Windows, and Android apps open PDFs in Nutrient.

Both viewers follow standard PDF page links. They do not share every print-shop trick. Build the file so a normal PDF reader can click the tabs. Then the same file works in the browser and in the apps.

What to do

What not to do

These are the failures we see when an agency calls a file interactive and the tabs fail in Mobile Locker.

• Painted tabs with no link. The tab is artwork only. A thumbnail can still show the tab. A tap has nowhere to go. Preview will not show a hand cursor.
• A press or print export that drops hyperlinks. InDesign can export a PDF that looks finished and contains no links, no buttons, and no page destinations. “Print to PDF” and flatten steps can do the same thing.
• Spot color plus overprint on the tabs. A thumbnail can still draw that art. The browser and the apps can hide it. Nutrient on iOS simulates overprint by default, in the same way as Acrobat’s Overprint Preview: Auto. Do not depend on overprint for anything the rep must see. Keep navigation art in process color, with overprint off.
• PDF JavaScript as the way to change pages. A button that runs a script is not a page link. WebViewer runs embedded PDF JavaScript in a restricted sandbox. Nutrient can run a script as a form or annotation action. That is not a dependable page jump. Use a Go to page action.
• A form button whose appearance is the tab. Push-buttons are for forms. A highlight overlay can cover the button art, so the tab disappears even though the file still has a field. The visible tab should be ordinary page art. The click should be a link on top of that art. Use form fields when the user must type, check a box, or sign.
• PowerPoint on Mac: File, Export, PDF. That export drops links to other slides. Use the Acrobat tab in PowerPoint, or build the links in InDesign. See How to Convert PowerPoint to PDF the right way.
• A poster-size page. A page about 23 by 33 inches is a press board, not a tablet page. Side tabs are harder to see and harder to tap. Fit the page to the screen the rep will use.
• Clicks that live only in the design file. InDesign private data, optional-content layers, and buttons that were never exported are invisible to both viewers.

How to build the tabs

Use the Hyperlinks panel. Create a hyperlink from the tab to a page destination. Export an interactive PDF, or a print PDF that includes hyperlinks. That export is a page link, which both viewers follow.

Do not build the tab itself as a form button. If you already have a button, set the action to Go to page, not Run a JavaScript, and keep the visible tab as ordinary page art under the link.

The link rectangle should cover the whole tab, including the label. An invisible border is fine. If the tabs repeat, copy those links onto every page.

You do not need to know PDF internals to check the result. Preview is the check. A developer who opens the file can also confirm each tab is a link annotation with a Go To action. That is the same structure a working Mobile Locker brochure uses.

Example file

Download this sample and open it in Mac Preview. It has six pages. Each page has a box in the main area and six tabs along the right. The labels are Page 1 through Page 6. The box says Page 1 content, Page 2 content, and so on.

The colored tabs are ordinary page art. Each tab has a page link on top of it. The link border is invisible. The same six links are on every page. The darker tab is the page you are on. Click a tab and the page changes.

Each page also has a link to this guide. A designer who receives the file can open that link and find the rest of the documentation.

The page is 828 × 612 points. The color is process RGB, and overprint is off. The sample uses standard PDF fonts. Embed any custom font you use on the tabs. This file is a sample. It is not a client presentation.

Click the image to download the file.

Download the sample PDF

Color and page size

Design the page for the device, then export at that size. Do not ship a press board and expect the apps to crop it into a comfortable view.

Verify before you hand off

1. Open the PDF in Mac Preview. You can practice on the sample file.
2. Move the pointer over each tab. It should become a hand.
3. Click each tab. The page should change.
4. Repeat on a second page if the tabs appear on every page.
5. If you can, also open the file in Adobe Acrobat and do the same clicks.
6. If Preview does not change the page, the export has no links. Fix the export. Do not send the file.

Preview passing is the minimum. The browser and the apps still have to draw the same art. Process color and overprint off are what keep the tabs visible in both viewers.

Summary

For HTML interactive visual aids, see Image size and memory limits for HTML IVAs.

For product or upload questions, contact support@mobilelocker.com.