Using Adobe Publish Online

Interactive publishing from InDesign to the web, made easy

Once upon a time, a creative pro/publisher had a dream. She dreamt she could take her beautifully-designed InDesign print document, perhaps add some interactivity—buttons, slide shows, or animations—then publish that document out to the world, so that anyone with a browser, on any device, anywhere, could view and experience the document. With Publish Online, this dream becomes reality. This “technology preview” feature, first available in InDesign CC 2015, allows you to publish your InDesign document to the web, including interactivity, while keeping your layout intact. Using Publish Online, your InDesign document generates a unique URL when it is published to Adobe servers. The Adobe website provides an interface for users to navigate your document, zoom in or out, share the document, download a PDF of the document, or even embed the document on another website (Figure 1). To view this document online, click or tap here.

While it is a dream come true in many ways, there are currently several important limitations that mean Publish Online will not fulfill the wishes of every user. Perhaps the biggest single drawback is that the document is published on Adobe’s servers. This means that you cannot publish your document on your own servers, behind a firewall. And while the URL is unique and not easily discoverable, you cannot password protect the document. Finally, you cannot monetize the document; there’s no way to charge for it or

list it in an app or eBook store. But for many users and many types of documents, Publish Online offers a quick, easy, and low-cost/no-cost way to share your documents online. That most of InDesign’s interactive features, including animations, can be used is a big bonus. Contrast this with DPS, a solution that is expensive, requires significant resources, and doesn’t even support InDesign’s rich animation feature set!

Preparing Your Document

The good news about Publish Online is that no special preparation is required. Fonts in any format can be used, although it’s always a best practice these days to opt for OpenType or Typekit fonts when available. A Publish Online document is essentially like a fixed-layout EPUB that is published on Adobe servers. That means that your designed layout will remain intact. With CSS and HTML5 under the hood, you can use nearly all of InDesign’s interactive features in your document, too, and they will translate beautifully in the published document. You can include hyperlinks, buttons, object states (multi-state objects or MSOs), and animations, as well as audio and video files. The only exceptions are interactive features found in the Overlays panel—which are used primarily for DPS projects—as well as forms and bookmarks.

Setting the Options

Once you’re ready to publish your document, it’s as simple (literally!) as pushing a button. Click the Publish Online button in the upper right of your screen in the Application Bar (Figure 2).

You’ll also find a checkbox in the EPUB and PDF export dialog boxes that allow you to initiate the Publish Online process after your document is exported. Next, the Publish Online Options dialog box displays, and provides settings for determining exactly how your document will be published. There are only two groups of options: General and Advanced.

General Options

It’s important that you look through the General options (Figure 3) carefully.

First, you need to choose between Publish New Document or Update Existing Document. If you choose Update Existing Document, a drop-down menu appears, listing all the previous documents you have published, starting with the most recent (Figure 4). There’s an option to view them, in order to ensure you’re choosing the right document to update. The ability to update existing documents was added in the CC 2015.2 update, and it is a welcome addition. Once you publish a URL for your document, you want to be able to maintain that URL even as you make corrections or other updates to the document. When publishing a document for the first time, fill in the Title information, which is the text that will appear at the top of the browser window when the document is viewed. You can also fill in Description information. This is what will be displayed when you share the document via Facebook, and is also displayed in the Web Dashboard, as discussed later in this article. You can choose a range of pages to export, using standard page syntax, such as 1,3-6,10. You can also use Export To to publish your document in pages or spreads. And while a Publish Online document cannot be downloaded directly, you can click “Allow viewers to download the document as PDF (Print)” which will enable your viewers to download a PDF of your document. Next, switching to the Advanced options, you can choose any of your Print PDF presets, including custom presets, and the PDF will be created with settings from the chosen preset. There are a few things to keep in mind when selecting this option. First, some of the interactive features may not be included in the PDF. You can create a custom Print PDF preset that includes hyperlinks, but no other interactive elements will be functional in the PDF, including buttons, objects states, or animations. Their appearance on the page may be correct, but they will not work. The other thing to keep in mind is that the PDF that is created can only be of your current document. This usually works fine, but sometimes including interactive effects, such as animations, will result in a document page that doesn’t work in a PDF. For example, let’s say you have a large object on the page that you want to fade in, and then fade out. On your document page, and in the PDF, you will only see the object as it appears in full size on the Fade In, which may obscure other objects on the page, and is not what you want your viewers to see. But for many documents, the ability to download a PDF makes it possible to view the document and its content offline. This can be an important criterion for many situations.

Advanced Options

Under Advanced Options (Figure 5), you can choose a cover thumbnail for your document. This can be the first page of the document, an inside page from the document, or it can be a separate image.

This cover thumbnail will be displayed in the Publish Preview dialog box when you’re uploading the file and will also display when you share your document on Facebook or in the Web Dashboard. If you select an external image file, which can be JPEG, PNG, or GIF, it’s best to use the same proportions as your document file, but the image will always be quite small, so a 72-dpi resolution is fine. Image Settings control the size and format of the images on your document pages. I recommend you leave the Format set to Automatic, which lets InDesign determine the best format for all your images. The default Resolution setting is 96 ppi, which will work well for most documents. However, if you want the highest image quality possible, choose 144 ppi. Note the warning that appears, however: HiDPI images will significantly increase page downloading times. If you choose to convert all images to JPEG, you can set the image quality to Low, Medium, High, or Maximum. If you convert all images to GIF, you can choose an Adaptive, Web, or System palette. The last option, Download PDF Settings, is available only if you have chosen “Allow viewers to download the document as PDF (Print)” under the General Options. With that option selected, this setting allows you to choose from any of your Print PDF presets, including any custom presets you’ve created (Figure 6).

Publishing the Document

Once you’ve set the General and Advanced options, you’re ready to click OK and publish your document. After you click OK, InDesign will take a moment to prepare the document; then the Publish Online dialog box will display (Figure 7) and show the progress of your document upload. My experience, and that of others, has been that the documents upload in a very reasonable amount of time.

Once the upload is complete, the dialog box shows the cover thumbnail, along with the title and description that you set in the General options. You can view the document, or click icons that allow you to share it on Facebook, Twitter, or via email. You can also copy the URL to your clipboard. You’ll always want to click View first to preview your document, and make sure it looks the way you want it to, especially if you’ve included interactive elements. The View option will open your browser and take you to the unique URL for the document, where you can click through each page to check it. When you return to your InDesign document, the dialog box is still displayed until you click the Close button.

Sharing the Document

If you want to share your document on Facebook, Twitter, or in an email, click the appropriate icon in the dialog box. Sharing on Facebook will open your browser and allow you to add a comment. The cover page thumbnail, set in the Advanced options, along with the document title and description you set in the General options, will be posted on Facebook (Figure 8).

When you share the document on Twitter, your browser window will open with a post that includes the document title and the URL. You can edit the entry and then post to Twitter. When sharing your document, be sure to use the hashtag #IDPubOn, so others can easily find your work. Sharing via email will open your default email application and create a new email with the document title as the subject, and the document description and URL in the body of the email. Click the Copy button to copy the URL to your clipboard. You can then post the URL in other social media or paste it into any other document.

Using the Web Dashboard

Once you’ve published one or more documents to Publish Online, it’s important to be able to manage these documents. InDesign provides the Web Dashboard management tool for this purpose. Choose File > Web Dashboard to launch the Dashboard in your default browser (Figure 9).

The Dashboard opens to the Publications page, listing all the documents you’ve published, from the newest to the oldest, along with each document’s cover thumbnail, title, and description. The publication date for each is also listed. From this list, you can click on any document to go to the document URL. If you mouse over an entry, a Delete option appears that allows you to delete the document. Take care with deletions, though, since you can’t undo them, and make sure you don’t delete a document for which you have distributed the URL. The Analytics page gives you basic information about the behavior of the people reading your published documents. Overview shows cumulative stats for all your documents. Click Document Trends to see the number of Views and Readers for specific documents. Views shows the number of times any of your documents was viewed (visiting multiple pages within the same document counts as one view). If the same user refreshes the page in the same session, it is still counted as one view. The session ends after 30 minutes of inactivity, and from then on it is counted as a new view, which updates the view counter by +1. Readers shows the unique readers for your documents. When a document is viewed by the same browser on the same device, even if over several days, it counts as one unique reader. However, if the same reader opens the same document, but from a different browser on a different device, that will count as a new reader. Avg. Read Time (secs) shows the average amount of time spent viewing each document. In our example above, -almost six seconds were spent viewing per document—typical, perhaps, of today’s attention spans. Total Read Time (hrs) is the total time spent viewing all documents. You’ll usually view the Web Dashboard on your computer, having launched it from InDesign. However, you can also access the Dashboard from your phone or other mobile device (Figure 10), by logging in to https://indd.adobe.com/dashboard, and signing in with your Adobe ID. The pages are not responsive, but still, you can manage your documents when not at your computer. Figure 10: The Web Dashboard can be viewed from your phone or other mobile device.

Viewing a Document

Once your document is published, the real fun begins: viewing the document. Publish Online documents will open a window in your default browser, and icons will display at the bottom of the window. After a few seconds, the icons will be hidden, but they can be displayed again by mousing over the bottom of the window (Figure 11).

When viewing on a computer, you can navigate from page to page using the left or right arrows adjacent to the sides of the document. Use the Toggle Thumbnails icon to view thumbnails, and click on a thumbnail to turn to that page. To zoom in, click the icon and click on the page; use the Zoom Out icon to zoom back out and view the entire document page. Clicking the Full Screen icon puts the document into full screen mode; press the ESC key to return to viewing the document in your browser window. The Share icon allows you to share the document on Facebook, Twitter, or via email. The options are the same as those available in the Publish Online dialog box when you publish the document (see “Sharing the document” above). The Embed icon generates code that can be used to embed the Publish Online document in a website page. See the next section, “Embedding a Publish Online Document in a Website,” on page <OV>. If, when publishing your document, you set it to “Allow viewers to download the document as PDF (Print),” the Download PDF icon will be available. When the icon is clicked, a PDF of the document will display in the reader’s browser window and can be viewed, saved, or printed from there. If you did not set the document to allow a PDF download, the icon will not be displayed.

Viewing on Mobile Devices

On mobile devices, such as an iPad, there are some additional ways to interact with a Publish Online document by using various gestures. In order to see the Publish Online interface, tap on the screen. As on a computer, navigation arrows are available on either side of the document page, or at the bottom of the screen, depending on the device. You can toggle  thumbnails and navigate by tapping on them. However, as you would expect on a mobile device, you can also swipe from page to page. Zoom in and out by pinching the page. Some functions, such as Full Screen mode, are not available on all mobile devices. This is often a limitation of the device. You cannot copy the embed code or download a PDF from mobile devices. Also, keep in mind that Publish Online pages are not responsive. That means, for example, that while most documents will look fabulous on an iPad, they may be too small to read easily on an iPhone without zooming in and out.

Embedding a Publish Online Document in a Website

While the ability to share Publish Online is useful, it’s not necessarily sufficient for engaging the target audience, especially if the document is related to a business or corporate enterprise. A document may need to be available directly from a website, and that’s where embedding a Publish Online document comes in. With embedding, you can display the document directly on a website page. To embed a document, it must first be published. Every published document has an embed icon, as shown in Figure 11. When you click the icon, the Embed On Your Site dialog box displays, showing a preview of your document as it will appear when it is embedded (Figure 12).

Embed options allow you to choose the size the document will be initially on your web page. You can choose a preset small, medium, or large size, or enter a custom value. The thumbnail displayed will change size to reflect the setting you’ve chosen. You can also set the document start page, using any page in the document, and that page will be the page displayed initially.  Usually, though, you’ll want to leave it set to page 1. The Embed Code field contains the code you’ll need to incorporate into your website. Click on the code to select it, and then copy and paste it into the appropriate HTML file on your site. The document will display in the size and with the start page specified (Figure 13). You’ll notice in the document preview, and when the document is published on your website, there is a Read Now button in the center of the page. This provides a visual prompt to the reader that the page can be clicked. Visual prompts are important, but if you have other visual prompts on your web page, you may not want this button to appear. Fortunately, you can modify the code to remove it.

How to Remove the Read Now Button when Embedding Documents

When you embed a Publish Online document in a web page, a Read Now button displays over the first page of the document. You can remove this button by making a change to the URL of the document within the code before you add it to your website’s HTML. Here is an example of a standard embed code: <iframe style="border: 1px solid #777;" src="https://indd.adobe.com/embed/1dd285f0-92d2-494e-820a-d0eeb96c3312?startpage=1" width="650px" height="460px" frameborder="0" allowfullscreen="allowfullscreen"> </iframe> The URL of the document within this code (marked in red above) is: https://indd.adobe.com/embed/1dd285f0-92d2-494e-820a-d0eeb96c3312?startpage=1 Change the word embed to view and delete the start page information at the end of the URL. It will look like this within the embed code: https://indd.adobe.com/view/1dd285f0-92d2-494e-820a-d0eeb96c3312 This means your start page will always be page 1. But the document will other­wise function normally, and the Read Now button will not appear. When the embedded document is clicked on your website, it can be viewed within the frame in which it initially appears, using the navigation arrows. However, if the reader clicks anywhere on the page other than the navigation arrows, the document will change to full screen mode.

What’s It Good For?

So, who can use Publish Online, and for what kinds of documents? The answer yields a long list. Any type of document that doesn’t require password protection, or which isn’t directly for sale, is a candidate for Publish Online. If you think about it, one of the big problems today for digital distribution has to do with file format. If you have a document or publication—whether a book, catalog, or brochure—the challenge is how to make it available to the widest audience possible. Conversion to HTML for a website is not always a viable option, and PDF documents are limited, especially when it comes to engaging your audience with interactivity. Corporations want to extend the reach of their print collateral, and they can do so easily with Publish Online, while maintaining the look of their print products. Educational institutions have countless catalogs, brochures, and other information that they want to make available online. And almost every business that sells a product needs to find a cost-effective way to distribute sales and product information, often via both print and online. For these users and many others, Publish Online is an ideal solution. It offers the ability to create an online presence that’s finally “one-click,” and provides an opportunity to add rich media and interactivity, all while utilizing existing resources. It’s of no small significance that InDesign’s interactive features are accessible and relatively easy to learn for anyone who is familiar with InDesign, and no other application or coding skills are required. The possibilities are endless. You can see several examples of currently published documents on the previous pages: from magazine publishers, to universities, to manufacturers, Publish Online provides a great solution for making documents easily available anywhere.

Looking to the Future

Publish Online is a new technology, and very much in its infancy. And so there’s plenty of room to grow and improve. There are many features that need to be included in the future. Features we’d like to see down the road include:

• Searchable text
• Integration with InDesign’s Book panel
• The ability to choose a separate PDF to be downloaded (for example, one that doesn’t have interactive elements that might otherwise obscure content)

Perhaps more importantly, we believe that in order for Publish Online to remain an evolving, robust technology, Adobe is going to have to figure out a way to allow users to password protect or otherwise limit access and sharing of Publish Online documents. For many companies—no matter what Adobe does with Publish Online on Adobe servers, even if they can, for example, add some kind of password protection—the technology is not an option unless Publish Online can be run on their own corporate servers. Much of the content of corporate America cannot and will not be placed on Adobe servers. It would be interesting to see if Publish Online could be made available as some kind of SDK (software developer kit), where a company could license technology from Adobe, but run it on their own servers. There is certainly precedent for this, WordPress being just one example. Time will tell. In the meantime, Publish Online remains a very exciting option for publishing all kinds of documents. With just the click of a button, InDesign content, including interactivity, can be made available online for users of all kinds of devices, anywhere, to view, engage in, and enjoy.