Ajar Productions

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

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

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.

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

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

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

6 Custom Solutions from the in5 Answer Exchange

Justin

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:

Smooth Swiping Slider – This will drag a preview of the next (or previous) page as the user swipes.
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.
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.
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.
Blinking Initial Next Arrow – This gives the user a visual clue on how they can begin to navigate your site/app/document.
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

Justin

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.

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.

Fully functional buttons will then appear in your output.

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

Justin

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.

What’s the Difference Between an HTML5 Email and a Unicorn?

Justin

One is a mythological creature and the other one has a horn and dances on rainbows in the sky.

Chances are, you’d love to have a rich way to engage with your friends and customers in the comfort of their email client. I would, too. Unfortunately, there are many obstacles to accomplishing this, and no great solutions.

Why Can’t I Do That in an Email?

I get this question often from people who are interested in using in5 to convert their InDesign layout to an HTML email. Unfortunately, there’s no good way to convert a layout from a design application into an HTML email with a high level of fidelity. There are tons of different email clients and most of them don’t support many of things that we’ve taken for granted on the web for many years. For instance, the following items are limitations in most email clients:

No JavaScript (which rules out any interactivity—on the flip side, this is a good security feature within an email client)
Minimal CSS support, including no absolute positioning (like the positioning used in InDesign or Photoshop)
No header and no ability to include external files (so CSS all has to be placed in inline style tags)
No font embedding, which limits you to web safe fonts
No Audio, Video, or Plugins
No form elements

There are also more comprehensive lists of supported and unsupported features from MailChimp and Campaign Monitor.

What to Do Instead

Here are a few ways to approach the problem (granted, none of them scratch every itch).

Note that the new SimpleHTML export will export text, tables, images, and hyperlinks that can be easily copied into an email, but it will not copy the InDesign layout.

Link to a landing page

Generally, it’s best to keep emails (and their design elements) simple.

Why?

Deliverability. You don’t want your emails to get marked as spam and be ignored.

Also, many readers will have images turned off by default, so they may miss your design entirely.

If you entice your reader with some simple text and get them out to a web page, anything is possible. There’s no limit to the type of content that you can put on the web.

Your landing page can include video and interactivity (and all that good stuff listed above that’s impossible in an email).

And it’s pretty simple to link out to other parts of your site. Here’s a video where I create a landing page from InDesign and link it to other pages.

Check out the in5 customer showcase for examples of sites & landing pages created with InDesign & in5.

A single image

This image may or may not link to a richer site. Perhaps it’s a preview of the site itself, like a poster image on a YouTube video that is visible before you click to play the video.

If you want to include some motion to create engagement, consider using an animated GIF.

Pros: Simple to produce, can be visually rich, can use any fonts inside the image.

Cons: Many email clients might hide the image (make sure to use ALT text), no actual text in the email, can only include a single link.

Attach a PDF

This may be the best option for some longer messages that require a complex magazine-like or catalog layout.

Pros: Great layout capabilities in the PDF.

Cons: Forces the user to open something, doesn’t track if the document has been opened (like a link would when clicked), may be filtered as spam.

A table of images

The is the old school method of HTML layout (before CSS improved). You can still accomplish this using the slice tools in Photoshop and Illustrator. You can also use a table to combine text and images.

Pros: Can have multiple links, can include actual text, layout is preserved.

Cons: Layout may be inflexible, images will be hidden by some email clients by default.

Use a template provided by an email marketing vendor

This is probably the best solution for most people. It won’t allow you to work outside the bounds of your target delivery system (as InDesign or Photoshop would), and you can still use a WYSIWYG visual editor. Chances are good that you can find a decent template with an email marketing service (like MailChimp, AWeber, Constant Contact, or similar). This option deals with the reality of the situation. Your email is a bit like a resume, you want people to notice it, but it’s possible to overdo it and look unprofessional. A template keeps you in the “professional arena” and relies on your content to set your email apart from the other messages in your reader’s inbox.

Pros: Easy to use, likely to work in all major email clients, some templates are even responsive.

Cons: May seem less unique, cannot be created in your favorite design applications.

Hand code the email

You can always code the email yourself, as long as you know what you’re doing. If you’re interested in hand-coding or having a more flexible and innovative email, I highly recommend Chris Converse’s Responsive Email course.

Pros: More control, responsiveness (if desired).

Cons: A lot of work.

Final Thoughts

When in doubt, just keep it simple. The goal of most marketing emails is to get your reader somewhere else (like a website where they could buy your product). In that case, focus on communicating why it would be a benefit to the reader to click your link. And then, the sky is the limit on their interactive experience (once they’re out of their email client).