Smart Image Exporting from InDesign to HTML and EPUB

The standard image format when exporting HTML or EPUB from InDesign is PNG because the PNG file format supports transparency (and more colors than a GIF).

The Problem

In some cases (e.g., photographic images), PNG can produce larger files, especially if you choose the High Definition (HD) option when exporting from the in5 dialog.

So, what if you know your images don’t have transparency and you want them to be HD…but you also want to try and keep the file sizes smaller?

In that case, you can use the Object Export Options (found in the Object menu of InDesign) to add custom settings to any given image. Great so far.

But now, what if you have a lot of images? It can take a long time to open the Object Export Options for each one, navigate to the EPUB and HTML tab, and select from the drop down menus.

The Solution

You can create an Object Style (Window > Styles) that only applies Export Options. And you can even narrow that to just the image type and quality.

Note how every checkbox for attributes in the image below has a minus sign (-), except the EPUB and HTML options. This means the style will let the object itself control those “pass through” settings. So only the image export settings are applied.

hd_jpg_object_class

Now you can simply select the images in your layout that you’d like to render as HD JPEGs (or any other type that you’d like to create an Object Style for), and it’s one click to apply the Object Style.

If you’re targeting an EPUB, you’re set to export. If you’re exporting HTML5 with in5, just make sure you choose Use Object Export Settings from the Advanced section of the in5 dialog.

in5_image_object_export

Here’s an IDML file with the style already created that can you can use to import the style into your own documents.

in5 & the InDesign CC 2015 Release

For a more up-to-date comparison between in5 and Publish online, see Publish Online vs. in5 — Digital Publishing from InDesign Compared

The InDesign CC 2015 updates the InDesign format. So, CC 2015 is a separate application from CC 2014. Here are some things you should know about the InDesign CC 2015 release and how they relate to in5.

Installation of InDesign CC 2015

You must click Advanced to avoid deleting older versionsAdobe has designed the new default installation behavior so that a CC 2015 app overwrites all previous versions of the application (InDesign CC, InDesign CC 2014, possibly InDesign CS6 if it’s linked to your CC account).

in5 is licensed to the version of InDesign, so before you install InDesign CC 2015 (but after you click the Update button next to InDesign CC 2015), make sure to sure to deselect the Remove old versions option. That should prevent you from losing versions of InDesign where you have in5 activated.

More words of caution about installation below.

Publish Online

If you’ve installed the English-language version InDesign CC 2015 it will come with a new “Technology Preview” called Publish Online. Publish Online lets you export and upload your document to Adobe’s Creative Cloud. Once the upload is complete, you will receive a public URL where your document is visible. Under the hood, InDesign has converted the InDesign document to HTML and uploaded it to Adobe’s server. This is similar in some ways to what in5 does, so we want to take some time to explain the similarities and differences between in5 and Publish Online, and the respective advantages of each.

Advantages of Publish Online

Convenience. Publish Online does not give you the HTML output files. Instead, it uploads them directly to an Adobe server and provides you with the URL to the upload location. This is a nice convenience if you don’t want to deal with uploading your files to a web server. It also means that the files will not be hosted on your company’s server, so the web address will be branded by Adobe, rather than your company’s name. It also means that you don’t control the output files: you can’t update them, re-purpose them, or move them elsewhere.

For those who simply want a quick way to get their content to the web, and don’t care about control or branding, Publish Online is a good way to go. Also note, the Publish Online preview currently creates a new URL each time you publish. So, if you send a URL to colleagues, then update your InDesign document and republish, your colleagues won’t see the updates unless you send them another message with the new URL.

Cost. If you already have an Adobe CC subscription, the new technology preview is free (if you’re an English-language user).

Advantages of in5

It’s now been almost 3 years since the Kickstarter project that launched in5. We’ve been busy making additions ever since. So, it’s to be expected that in5 will be further along in its development than Publish Online. However, there are also some key differences that are likely to persist as well. The differences listed here are accurate as of the release of CC 2015 and the writing of this post.

keyboard control button

With in5, you own the files. As long-time users of design software, we care very much about ownership of our files. We know how important it is to be able to make a simple update to our files (e.g., changing a copyright date or email address) several days, months, or even years after launching. Perhaps even after we no longer have access to the software that we used to create the original files.

One of the inherent advantages of the HTML file format is its flexibility with respect to making changes: HTML is saved as a text file that can be opened by any text editor. The “editability” of HTML has always been a high priority for in5, as we built in5 as a tool that would let users to edit their own files and implement any changes as needed (if they so desired).

So, unlike Publish Online, the files that you export with in5 are available on your local machine and are yours to keep and re-purpose as you see fit. With in5 output, you can:

  • Host the files on your own domain (with your company’s or your own personal brand)
  • Host the files privately if you so choose
  • Distribute the files over email or by another method
  • Extend or modify the output
  • Make edits to the files
  • Replace old versions on your server so users automatically see updates (without the need to send a new URL)
  • Embed your content into other formats like DPS
  • Convert your files into native apps (with services like Baker Framework, Amazon Marketplace, and Adobe PhoneGap Build)

Several Adobe technologies have come and gone and/or evolved over the years (e.g., Flash has changed dramatically, nearly everything built on Flex is gone, Adobe Version Cue no longer exists, Forms Central is gone, Adobe Stock came and went and now is back in a different form, to name a few). For this reason, I have personally felt uneasy about leaving my content on certain outside (e.g., Adobe) servers, since my files could disappear or be changed without my awareness or control.

Interactivity via the Folio Overlays. in5 supports the interactivity that can be created using the Folio Overlays panel within InDesign (scrolling frames, web content, pan and zoom boxes, slideshows). Publish Online does not support Folio Overlays.

Note: InDesign CC 2015 also removes the Folio Overlays panel. DPS is essentially “on hold” until Adobe comes out with a new version of their publishing solution. This leaves InDesign CC 2015 with less capability to create interactivity than CC 2014. This may be another reason to put off upgrading.

Text Rendering. in5 can render text as selectable, searchable HTML. In addition, in5 can embed fonts from your local machine (as well as rendering text as images to preserve appearance). Publish Online can only render text as images.

clickable links

Hyperlinks in Text. in5 includes working hyperlinks in the output, even when rendering text as images. Publish Online does not support hyperlinks within text in CC 2015 (which means that links within Tables of Contents will not work, either).

Format Options. In addition to being able to re-purpose your files, in5 also offers several 1-click format options right out of the box. For example, in5 lets you create a Web App that can be installed to a device’s Home Screen without the need for App Store approval.

Multiple Page Sizes. in5 supports documents with variable page sizes (e.g. having a longer, scrollable page). Publish Online does not.

CC 2015 and Installation of in5

in5 can be installed with Adobe Extension Manager (which now may be found in the Previous Versions section of your CC Desktop App). However, in order for InDesign CC 2015 to appear in Extension Manager CC, you may first need to install another CC 2015 application (in my case, Photoshop CC 2015 did the trick).

Watch out!

We’ve posted a CC 2015-compatible installer for in5, but I haven’t been able to successfully install an extension for InDesign CC 2015. In fact, with InDesign CC 2015 installed, I can no longer install extensions for InDesign CC or InDesign CC 2014, either. So exercise caution when installing CC 2015 if you rely on extensions.

We’re busy developing a workaround and will be posting it for our users ASAP.

As mentioned above, because the InDesign team has modified the file format, and CC 2015 is a separate application from all previous versions of InDesign, activating in5 in CC 2015 will require its own license seat.

Update (06/28/2015)

New custom installers for in5 are now available. These installers no longer rely on the Adobe Extension manager.

in5 Support for CC 2015 features

The main new feature that will be relevant to in5 users is Paragraph Shading, which lets you add a background color to a paragraph (or paragraph styles). in5 will offer support for this feature as a free update to v2 license holders in the near future.

In Summary

  1. Be very careful about updating to CC 2015 if you rely on extensions or you want to keep your previous installations of CC applications.
  2. Publish Online is a time-saver if you don’t want to use your own server.
  3. in5 has a lot of useful features to offer. CC 2015 updates coming soon.

6 Custom Solutions from the in5 Answer Exchange

One of the best things about exporting HTML5 from InDesign using in5 is that the output is infinitely extendable. Here’s a collection of free code snippets from the Answer Exchange that can be use to alter the functionality of your exported content:

  1. Smooth Swiping Slider – This will drag a preview of the next (or previous) page as the user swipes.
  2. Scale to Desktop Browser Window – in5 can automatically scale to a mobile device window using the viewport meta tag (which is configured by default), but desktop browsers don’t support the viewport meta tag. This solution provides a workaround for modern desktop browsers.
  3. Reset Multi-State Objects on New Page – Sometimes the appearance of MSOs is changed by user interaction and you want your MSOs to return to a “starting” state.
  4. Allow Text Selection with Swipe Enabled – With the swipe enabled, the page is listening for swipe gestures, which prevents text selection. This bit of code lets these two bits of functionality live together by disabling the swipe on live text only.
  5. Blinking Initial Next Arrow – This gives the user a visual clue on how they can begin to navigate your site/app/document.
  6. Make Lightbox Fill the Screen – By default, the lightbox covers 80% of the screen. This code causes it to fill 100% of the screen.

in5 v2.4 Adds Easy Analytics & Social Sharing

The latest version of in5 includes some big updates that should make several tasks more accessible to designers. It’s been possible to add custom code to in5 output for quite some time, but if you’re not used to working with code, there’s definitely an intimidation factor. With version 2.4, we’ve made it easier than ever to incorporate Google Analytics and Social Sharing buttons in your HTML (or app), without having to copy and paste code!

One-Step Google Analytics Tracking

You can now add Google Analytics to your in5 project simply by copying and pasting your Google Analytics Tracking ID into the in5 dialog.

Grab the Tracking ID from Google Analytics

That’s it! No more setup required. No need to even look at the tracking code below the ID.

in5-2_4_analytics

As soon as you post your HTML to a web server, Google Analytics will begin collecting data.

In addition to the basic tracking functionality, you can choose to monitor other events within the document:

  • Pages – lets you track which pages are viewed most and least often.
  • Button Clicks – lets you track how often buttons are clicked.
  • Audio and Video Playback – lets you see which media are being played in your document.
  • Social Sharing – lets you see how often your document is shared using the Social Sharing Buttons (more info below).

It’s free to sign up for Google Analytics.

Social Sharing Buttons

Have you created something with InDesign and in5 that you’d like people to share?

Now, a few checkboxes in the in5 dialog will do all the work for you.

in5-2_4_sharing

Fully functional buttons will then appear in your output.

in5-2_4_sharing_tweet

Split Text Extension For InDesign Adds Options for Characters and Text Styling

Version 1.1.0 of the Split Text extension adds options to break text into individual characters, as well as to break text based on styling. This version also fixes a bug with the GREP option.

Download

Sign-up for our newsletter and receive this premium extension for free.

If you’ve already sign-up for the newsletter, you can access the update using your original download link.