Nature Sounds iOS App Created with in5 and Baker Framework

Justin | HTML5,InDesign,iOS | Monday, July 31st, 2017

Matthew Goodman of FunLab, LLC has created some really cool Nature Sounds apps for kids.

Check out the video below to see the apps in action.

The apps were built visually in InDesign using buttons, multi-state objects, and imported audio.

Matthew used in5 (InDesign to HTML5) to export the content for use with the Baker Framework, which he used to publish the content for the iPad and the iPhone..

If you can design content with InDesign—then you could be creating mobile apps, too…

Test Drive in5

How to Export Accessible, 508 Compliant HTML Layouts from InDesign

Justin | design,HTML5,InDesign,interaction,Tutorials | Monday, July 24th, 2017

header image for accessible, 508 complaint HTML from InDesign

I often get asked about accessibility and 508 compliance.

In this article, I’m going to demystify this topic by doing the following.

  1. Explain accessibility and 508 compliance in simple, straightforward terms
  2. Provide some general strategies for improving accessibility in your HTML content
  3. Provide some specific strategies for exporting accessible, 508 compliant HTML from InDesign using in5

(more…)

Getting Started with in5 (InDesign to HTML5)

Justin | design,extensions,HTML5,InDesign,tips | Monday, July 10th, 2017

sailboats at the start of a race

I’ve heard from a few people lately asking for introduction to in5.

This post has some resources to help you go from “zero to hero.”

I’ll explain what in5 does and how it can help you publish yourAdobe InDesign content online.

The 30-Second Version

in5 lets your export your layout, animation, and interactivity directly from InDesign.

in5 uses InDesign’s own interactive features, so you can focus on your design, instead of learning how to use unfamiliar software.

The slides above (In5 Benefits: A Quick Overview) offer a quick 30-second glance if you’re in a rush. 😉

(more…)

How to Load a PDF in a Lightbox on Mobile Safari (and elsewhere)

Justin | design,HTML5,tips | Monday, July 3rd, 2017

PDF inside lightbox on an ipad

A lightbox—which opens on top of the site (or app) that you are currently viewing—is a great way to load external content, but remain on the same page once the content is closed.

As a designer, a lightbox is a useful tool to keep readers in your “experience” and not force them to find their way back to your page.

Technically speaking, a lightbox loads external content into an <iframe>.

in5 (InDesign to HTML5) let’s you add lightboxes with a single checkbox—no coding or hassle required (and no thinking about iframes)!

The Problem: iOS, Lightboxes, and Multipage PDFs

A handful of in5 customers found that when loading multipage PDFs into a lightbox on iOS devices (iPads and iPhones), you can’t navigate to the second page.

This happens in part because iOS has a PDF viewer built into the web browser.

Normally, the built-in PDF view is quite handy, but when it’s loaded into an iframe, you don’t have access to the page navigation.

Google Drive to the Rescue!

Fortunately, if you

  1. upload your PDF to Google Drive and
  2. grab a shareable link (details below)

The Google online PDF viewer will let you navigate through all the pages (even in a lightbox).

Simply replace the hyperlink to your PDF with the Google Drive shareable URL.

Other sharing services that can view PDFs online would probably work too (e.g., Dropbox), but you may want to factor in how much user interface (UI) and branding of the service itself adds around the document.

Details on How to Get the Shareable Link

  1. While previewing your PDF in Google Drive, go to the fly out menu in the top-right of the viewing window.
    embed under flyout menu
  2. Then grab only the URL portion from the Embed dialog (leave the HTML code).

embeddable URL

Google Drive will keep the UI minimal if you add &embedded=true to the end of the URL.

Original Source: http://stackoverflow.com/questions/15480804/problems-displaying-pdf-in-iframe-on-mobile-safari

How to Add a Progress Bar for Reading Pages in an in5 Document

Justin | HTML5,InDesign,Tutorials | Monday, June 26th, 2017

hero image for post on adding a progress bar to in5 output

A question came in on the in5 Answer Exchange about how to create a progress bar to indicate the reader’s position within the page count.

This technique is popular with online news magazines.

In the following article, I’m going to show you how to create such a progress bar by attaching a single file when exporting your HTML from InDesign.

Update: this feature is now built into in5 if you have a Pro (or higher) plan and no custom coding is required. Release post.

(more…)