346 Export to HTML5

- [Instructor] You know that InDesign can export HTML right? For example, I'll go up to the File menu, choose Export, and now here in the Format pop-up menu, I can choose HTML. But this feature will only export your text and graphics. It totally ignores the page layout. This is here just so that you can get your content out of InDesign, and put it into WordPress, or give it to a web developer to make pretty. So what do you do if you want to export your document as HTML, and keep the page geometry, you know, how the page looks, plus animations, interactive features, and all that? It's totally possible, but you need to use either a free script, or a commercial plugin.

Once you have one of those, it's really easy. Actually, I should say that you can get HTML out of InDesign, by exporting a fixed-layout EPUB file. Most people don't realize that EPUB is written entirely in HTML5, but you can actually crack open an EPUB file and see the HTML and CSS inside of it. But here's the problem; EPUB files can only work in dedicated EPUB readers, and not everyone has an EPUB reader that can handle fixed-layout EPUBs.

Now, there's one other way to get HTML out of InDesign. I'll click that. You can come up to the File menu, and you can choose Publish Online. This is a very cool Creative Cloud service that lets you export an entire document as HTML to be hosted on Adobe's servers. It's really easy! I love Publish Online, but it does require that you use Adobe's servers, so you can't edit the HTML or put in on your own site, or put it into an app or something like that.

That's where the free script and the plugin come in. Let's look at those. First, you can find that free script here on InDesignSecrets. Now I need to say that if you're InDesign document is more than one page long, you need to read through this blog post carefully, and learn about how to add page navigation links. Otherwise you'll export your pages, but you won't be able to navigate from one page to the next. But in my case, here, let me jump back to InDesign. This is just a one page document, so I don't need to worry about that.

Now, I will point out that this file does have several interactive elements in it, including a hyperlink, an animation, like this object here, this logo is going to fade-in. And this one over here is going to slide in from the right. And it also has a little slideshow, that is, when you click these buttons down here, you get a different graphic up here. Now I've already added all of those interactive features to this document using the interactive features built into InDesign. I've also gone ahead and downloaded the script from our website, and I installed it.

If you need help installing scripts, we talk about that in another movie here in the online training library. So now, to run the script I need the scripts panel, and I can find that by going to the Window menu, the Utilities sub-menu, and then choosing Scripts. I've placed this inside my user folder. There it is; Export FXL HTML. I will open that folder, and you can see the script here. To run the script, I just double-click it.

There's a picture of Keith Gilbert, he's the one who wrote this script. In fact, I should mention that Keith also has a bunch of movies here in the online training library that you should check out. Anyway, in this case, I'm going to click Okay, and InDesign asks me where I want to place it. I'll tell it to place it on the desktop, and then InDesign asks me a few items about how I want the images to be exported. I'll click Export, and it's done. The file export is complete. I'll switch to my desktop here, and you can see the files over here.

It's the same name as the InDesign file, but dot HTML. And it also created a folder full of resources here. I'll open that up, and you can see what's inside of it. There's my JavaScripts, images, and here's the CSS. But, the proof is in the pudding, so let's go ahead and open this HTML file in my web browser. There it is, did you see the animations? Again, this is all HTML and CSS in JavaScript. My buttons work too.

You can see I can click on the buttons down here, and the images change. Now, what's great is that you own this HTML now. You can put it on your own server, put it in Dropbox or whatever else you'd like to do with it. So this is incredible, but there are some problems. For example, if I had objects that bled onto the pasteboard they won't get cropped properly, so they're fully visible in the exported HTML. Also, this script will only work well with single-sided documents.

That is, non-facing pages. Now, if you need more power, more control, like if you really want a high-end HTML export, well, this free script may not do it for you. Instead you probably want to check out our plugin called in5, which you can find at ajarproductions.com. in5 gives you a ton more features. For example, it has swipe navigation for mobile devices. It even lets you export your HTML into a web app. So, the free script from Keith is awesome, but it's limited.

in5 is amazing and does far more. Okay, that's it. Now you know how to get fully-formatted HTML out of Adobe InDesign.