How to Load a PDF in a Lightbox on Mobile Safari

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

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

Video Tour of Designs Made by in5 Customers

Justin | design,extensions,HTML5,InDesign | Monday, May 22nd, 2017

I love seeing what people are making with in5. It absolutely blows me away!

Check out the video below to see a walk-through of some of the great sites and apps that designers are exporting from InDesign using in5.

Check out in5 >>

InDesign to SimpleHTML – Easily Repurpose Content with Uncluttered Markup

Justin | design,extensions,InDesign,publishing,software | Monday, May 15th, 2017

Simple HTML From InDesign header image

SimpleHTML is a new tool for InDesign that exports bare naked HTML from a Text Frame or Story.

There’s no <head> or <body> tag, no classes, no <div> wrappers, no clutter—just the HTML that you need to paste into a blog post (or email) editor.

(more…)

How Create an Animated Web Banner with InDesign & in5

Justin | design,HTML5,InDesign,Tutorials | Monday, May 8th, 2017
The banner above this text was made with Adobe InDesign.

Yes, InDesign. The page layout tool.

InDesign Hidden Gems

While InDesign is known for print layout, it also has extensive interactive capabilities, including:

  • An Easy-to-use Animation Panel
  • A Timing Panel to create sequenced animation
  • The ability to create different Object States that change with interaction
  • Interactive actions for Buttons and Form Elements

Just because InDesign was originally conceived as a page layout tool, doesn’t mean you have to create things that look like books.

In this article, I’ll show you how use InDesign’s interactive features and the in5 HTML5 export to create a web banner.

(more…)

Instant Publishing from InDesign and in5 with WordPress Plugin

Justin | design,extensions,HTML5,InDesign | Monday, April 10th, 2017

InDesign to in5 to WordPress

in5 (InDesign to HTML5) makes it easy to create HTML from InDesign. You can take the HTML right to the web, or convert it into a mobile app.

The new WordPress plugin makes the publishing part just as easy!

(more…)

Page 2 of 1512345...10...Last »