InDesign and HTML5
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
 |
Export to XFL ePub, unpack the ePub (with ePub unzipper or simply rename the file to .zip en unzip). There is your Working HTML5 folder.
Now rename your main page to index.xhtml or build your own portal site that links to the rest of the files if you have more pages.
This way I could simply upload the unzipped FXL file to my host for those that could not read a new FXL ePub. If you choose the right fonts and the right Object Export Options for some troublesome transparency it will render on Mac, Firefox, Windows 7, 8 Chrome, Explorer.
Easy.
hi Frans : have you tried? do you have a working example?
This was posted more than w years ago! In the meantime we have the exelent export script from Keith Gilbert to do the work for you.
I sent lots of files to in5 to see if they could get a real world complex magazine layout to work for them, but they couldn’t quite get there. Unfortunately, I no longer work there so I am no longer in contact with them in this regard. But they were making huge strides.
Eugene, You let me have some of your files for testing. They were very useful, thank you.
Frans, I like your epub export trick, very ingenious. You might be interested in looking at our plugin, still under development.
https://www.kerntiff.co.uk/products-4-indesign/baker-export
Rich
Why is Indesign not a web design tool?
Lots of stuff is much easier than in Photoshop or Illustrator.
You can place things pixel accurate, the guide-tool for columns is better than the one in photoshop and you have the abbility to use different pages for the different pages of the website with the functions of master-pages etc.
Normally you design a webpage and give it to the code guy who put the design into html that is based on an common CMS – and Indsign is a great tool for that.
I don’t see the real benefit of exporting page geometry html out of indesign. It’s only for very spacial purposes.
If you’re in app publishing, you will use one of the big toolkits around and if you wanna create a professional webpage on your own learn html, css, php and get familiar with one of the common CMS. If you wanna create a simple microsite (for whatever reason) use muse or somthing like that.
Beni,
Your last paragraph answered your question.
Rich
Just to be clear: These handouts were from a session at The InDesign Conference, so some of the notes probably don’t make a lot of sense unless you were there in person. But there is some good information in there, including links that many people interested in HTML may not know about.
Also, if you’re interested in using InDesign for wire framing or prototyping, check out these links:
https://creativepro.com/indesign-magazine-issue-69-wireframing-prototyping.php
https://creativepro.com/indesign-create-uxui-designs.php
Twixl Publisher has native support for HPub files (which e.g. can be created with in5) and allows you to distribute them using our Twixl Distribution Platform. This allows you to easily create apps based on HTML content, either as a single issue app for iOS or a multi-issue app supporting in-app purchases, subscriptions, entitlements, …
One of the advantages is that we provide a very easy (non-technical) way to create the app without the need for doing things manually in Xcode (compared to the Baker Framework approach).
Support for Android and HPub is currently under development.
Hi David,
Thanks for sharing these notes online!
If anyone is interested in learning more about InDesign and HTML, I also have a Lynda.com course on the subject:
https://www.lynda.com/InDesign-tutorials/Creating-HTML-Layouts-InDesign/360616-2.html
And, come to PePcon!
https://pepcon.com
Thanks, Justin!
Credit where credit is due: The notes above were originally based on a session that Justin and Jerome Silverman and I presented at PePcon 2014 in Chicago. I then repurposed them for The InDesign Conference. You can learn much more about the current state of HTML and InDesign at the upcoming PePcon.
This is very useful overview, thanks. I appreciate the links, too.
Useful article for those who interested in indesign to web and mobile app.
Very interesting read. Glad that their are articles like these to help and guide starters like me. I have opted for the Liquid State platform and it has proved to be a great help.
A bit pathetic when compared to QuarkXPress 2017 HTML 5.