This article was taken from the handout to David Blatner’s InDesign 2014 Conference session, “InDesign and HTML5.”
This year’s InDesign Conference is taking place in Denver from November 16–18th.
Visit InDesignConference.com for more details.
***
It’s All About Standards
Publishing is all about successful communication, and communication is based on standards; the standard is the framework in which the communication is built.
Standards have been changing dramatically over the past 30 years: PostScript, PDF, Flash (“a wanna’ be standard”), and of course HTML.
The success of a standard is based on three things:
- its reach
- its ability to satisfy the desires of the designer/communicator/story-teller
- its ecosystem: tools to build with, people to support it, readers/writers/converters
HTML is the Interactive Standard that Matters Most
PostScript is being replaced by PDF in most cases for print. PDF is being replaced by HTML in many cases for interactive. (Interactive PDF has been going downhill ever since Adobe started depending on the Flash Player.)
There are many ways that HTML can reach its intended viewer. Here are the four basic categories in descending order of simplicity.
- Publish directly to the web.
- Insert into EPUB or DPS
- Save as a Web App
- Package the HTML in a native app wrapper
Note that I am not talking about HTML Email in this session. That’s nearly impossible with InDesign.
Why HTML
- It’s not Flash
- Self-distribution
- Private or public distribution
- No proprietary software required (for creation, distribution, or reading)
- You can build or wrap it any way you want
- Immediately desktop friendly (not just for mobile)
- No review process (can’t be denied by Apple app store)
- No developer account, certificates, etc.
- No requirement for ongoing subscriptions or plans
- HTML/CSS is widely known; you don’t have to figure out other opf and ncx files (in EPUB), etc.
- Easy to get into Amazon Store
However, HTML apps are not for everyone. Harder: subscriptions, in-app purchases, pixel-perfect layouts, analytics
Ultimately, DPS, Web Apps, and EPUB will likely collide… what will survive is: HTML.
What About Muse?
- Muse is a web design tool
- InDesign is a page-layout tool: it’s for documents (you could make a web page, but it’s really not designed for that)
- In general, HTML from InDesign (with in5) is usually an intermediary format
- Muse can do HTML features such as parallax scrolling, media queries; widgets (social media, etc.), in-browser editing, and lots more.
Getting HTML Out of InDesign
The File > Export feature in InDesign exports contents (text and graphics) as HTML, but not page geometry (where stuff is on the page).
Solutions:
- in5 (ajarproductions.com). Kickstartered in 2012, currently at version 2.4.
Just choose File > Export HTML5 with in5
- eDocker (edocker.com) is a larger system which also includes distribution options.
- Crack a fixed layout EPUB (FXL)
Other systems, too (see Resources, below)
What Can You Do With It?
- Publish directly to the web: After exporting HTML5, you can place the whole folder on a server. It is functionally a web site, though I still don’t recommend using InDesign as a web design tool. Think of it as a web “document” or “publication.”
- Insert into DPS Web Content: You can use the Web Content Overlay feature (in the Overlay panel) to load the HTML into a frame on your InDesign page. Make sure the web folder (the HTML5 you exported, along with CSS and Javascript) is in the same folder as the InDesign document. You probably want to turn on AutoPlay.
- Insert into DPS Folio as HTML Article: You can use the Folio Builder panel to target the web folder. This makes the HTML an actual article that you can swipe to/away from. See details in “Placing HTML into a DPS Folio” by Chris Converse in InDesign Magazine, Issue 61.
- EPUB?
- Save as a Web App: Web Apps act like apps on mobile devices. They can be cached for offline viewing and even saved to the home screen with a custom icon. Great for magazines, brochures, sales material, etc.
- Convert to Web View App: You can create an actual iOS or Android app by packaging the HTML in a native app wrapper. To do this, you would use a service or framework such as Adobe Phonegap (comes with CC), Baker Framework, or Liquid State.
in5 Features
- Text can be rendered as HTML, images (to preserve appearance), or SVG (preserve appearance and scaleability)
- Swipe Navigation
- Video and audio
- Viewport Zoom setting for mobile devices
- Export to Baker Framework, Liquid State, iPad Web App, and iPhone Web App
- Support for Folio Overlays: Slideshows,Web Content, Image Sequence, and Pan & Zoom, and Scrollable Frame
- Support for native InDesign Animation
- Support for Timing of multiple animations (sequencing)
- The ability to nest animation and interactivity within groups and Multi-State Objects
- Amazon Marketplace integration
See the full list of supported InDesign features in in5
Other Resources
- “Why The WebView Is The Future Of Mac OS X Apps”
- “Responsive HTML5 Apps: Write Once, Run Anywhere”
- OpenEFT
- Creating an iPad App with HTML5 and PhoneGap Build
Services publishing HTML magazines/documents or converting PDF to HTML5 flipbooks:
App creation tools that use HTML5
- AppStudio from Quark (works with InDesign; converts IDML to HTML5)
- Keep up-to-date with Adobe’s involvement in the world of Web Standards
- Technical articles on HTML5 App Development
- A great learning resource for creating Web Apps: flippinawesome.org
- A great place to learn about Web specs: www.webplatform.org
- A great community of Web Standards enthusiasts: movethewebforward.org
- Adobe Insight magazine, which contains HTML/PhoneGap articles and references
Examples
This article was last modified on July 8, 2021
This article was first published on April 13, 2015
Commenting is easier and faster when you're logged in!
