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.


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

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.


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?

email iconOne 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.

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.

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 on Lynda.com. Don’t have a Lynda.com account? Get 30 days of free unlimited access to lynda.com. And check out these basic tips from MailChimp.

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

in5 2.3 Adds Lazy Loading Images for Faster Load Times and Convert Selections to Web Overlays for DPS

Convert Selection to a Web Overlay

This feature lets DPS users take advantage of the wonderful Animation and Timing Panels in InDesign.

Credit for this feature goes to Keith Gilbert who came up with a way to use content exported by in5 to include native InDesign animations in DPS projects. Keith wrote up the idea on InDesign Secrets and suggested that we automate these steps as a feature. Which is exactly what we’ve done. So, now you can simply make a selection and right-click (or use the Object menu) and choose Convert Selection to Web Overlay Using in5…. A special version of the in5 dialog will then appear, and once you’ve selected the options you’d like and clicked OK, in5 will export the content, create a Web Overlay (animation and all) inside your current document, and hide the original content in a separate layer.

Convert Selection to Web Overlay

Lazy Load Images

Lazy Load Images will only load images on the current page and neighboring pages, rather than loading all of the images in the document right away. This is a feature we’ve wanted to add for quite some time, so we’re glad that we can finally make it available!

Turning this option on can dramatically reduce the load time in the browser, especially for long documents. There’s not much of a downside to this feature, so it is turned on by default.

Bookmark Linking within “Tall” Pages

Version 2.3 also adds the ability to link to locations within pages using Bookmark Anchors. This feature came about based on a request on the Answer Exchange. To create vertical chapters in Baker Framework output, in5 supports creating taller pages that can be scrolled vertically (swiping takes the reader to the next “chapter”). We even added a script that could merge multiple pages into one tall page. Doing so, however, made it difficult to link to locations inside of the tall page. Now, you can create a Bookmark Anchor (a bookmark from within a text frame), and use a button to link to that Anchor, and clicking that button will now take the reader to the tall page and scroll to the anchor location.

Added Video Options

We’ve had a couple of requests to support the None Video Controller skin option, so we’ve added support that option, which will hide the control bar at the bottom of a video (when not in fullscreen mode). Choosing any other skin will show the full controller in the output.

We’ve also had a few requests for the Play Full Screen Video Overlay option. This option allows a video, once reached (or clicked to play), to take over the screen. This works best on a browser and device that supports this behavior.

Support for Top and Left Pull Tabs

Pull Tabs are essentially a nice hack of the Scrollable Frame Overlay. To see screenshots of pull tabs in action, check out this InDesign Secrets article where Keith Gilbert has some tips and tools for pull tabs. Pull tabs are simply scrollable areas with the scrollbar hidden and they rely on a touch device. in5 has supported tabs that start at the bottom or right side of the screen for quite some time because they simply required scrolling functionality, but tabs at the top and left were essentially inverted, so the browser didn’t realize that scrolling was desired. Even though there was overset content in the frame, it was in the wrong direction. So we’ve added some code in the output to recognize this and to trick the browser into scrolling normally. Hopefully this will be helpful for fans of pull tabs.

Download the update

You can update your current version or test a trial version of in5 by visiting the download page.

Other fixes in version 2.3

Here’s a list of other items that we’ve updated for the latest version:

  • Updated Add to Home Screen graphics for iOS 8.
  • Fixed tap start on Image Sequences.
  • Fixed error in non-English versions of InDesign caused by none swatch.
  • Fixed syntax for transform origin in webkit.
  • Fixed error with ampersands in video paths.
  • Fixed errors that may occur when scrollable frames exist inside of other scrollable frames.
  • Fixed in5 footer position on Baker and LSPS output options.
  • Fixed error related to Custom Rasterization and update in5 to support new settings in CC 2014.
  • Fixed nested text frames that are marked as scrolling frames but do not have scrolling content.