Exporting to HTML5 from InDesign

0800 156 0777

Exporting to HTML5 from InDesign

Having done a lot of HTML5 work in recent years, I was looking for a quick way to export my information from various applications that I use all the time. Today I am going to show you how to export from InDesign to HTML5. Exporting to html is easy, unfortunately the current export command is very poor. In order for me to export to HTML5 from InDesign properly I am going to use a lovely extensions called in5. This is not free, but if you need to get your content out to a web-based format quickly, especially into html5, then this is a very useful tool.

in5

Firstly I will create a simple page, based on the web intent options. Nothing fancy, just 1 column, 1024 x 768 pixels. First I will layout a few simple boxes, and then colour them in. I am not worried about content as of yet, I just want to see what the InDesign export to html command does compared to the in5 plugin.

Simple InDesign layout

Simple InDesign layout

So what happens when we export this to html, using InDesign's own export command (File > Export)? Well we do get some options, three panels to be precise. The first one is a general set of options…

 

InDesign to html general options

InDesign to html general options

Here I will select the document option (I have only one page in my document, so this option is fine). I am not using XML so I will base my html layout on my page layout, and I have not lists, so the rest of these options I can leave as the default.

My next set of options are for images, and at the moment I have no content, so I am not going to change anything here. I can set my image format here, choose whether to optimise my images or not and set my alignment and spacing options.

 

InDesign to html images options

InDesign to html images options

 Let us look at the last set of options - Advanced. This is dealing with CSS and JavaScript - I have no styles set up at all, and I am not applying any JavaScript here, so I will not changing anything. At the moment I am purely concerned with layout.

 

InDesign to html styles and scripts

InDesign to html styles and scripts

So now with a simple layout, coloured boxes in effect, let us see what we get when we use InDesign's File > Export > HTML feature. I get an html page, and a folder holding my css. Looking at the web page there is only one div, no colour, nothing. No multiple boxes, no layout comes over at all. The code is html5 though, it has an html5 doctype, but nothing has come through from the original layout…

 

html page code

html page code

So what do we get using the in5 plugin?After installing this plugin go to File > Export to HTML5 with in5 . We are presented with four panels worth of options. However, I am going to just leave all options alone and just click on OK. This is what I get…

 

indesign to html5 with in5

indesign to html5 with in5

A million times better. All the boxes have come through, all the colours have come through. Remember, I have not set up any stylesheets within InDesign at all, I just wanted to see what would happen if I just laid out coloured boxes. Here I now get what I was hoping for, coloured boxes within my web pages. Great - but what about the code? What code has actually been produced (both css and html)?

 

in5 code output

in5 code output

Looking at my screenshot, you see that the html is html5, and it is nicely laid out with divs, lists, and a nav element. Within the nav element, the boxes have been created using the button element, rather than a div. All-in-all a nice structure. But what about the css? Obviously for colour and layout to work, we must had some css generated. Well, a new folder was created on my desktop, so let's have a look…

 

in5 folder output

in5 folder output

In comparison, here is the InDesign to html folder setup…

 

indesign to html folder output

indesign to html folder output

Just one file, with very basic css inside. Whereas the in5 output gives me all my layout setup in html5 (divs, nav, lists, etc), plus it has styled it properly (position, colour, etc) and it has even added in JQuery (not that I need it in this example). All-in-all a much better result. The code is clean and simple, and even if I do not like the css and html created, it is very easy to change.

When you are creating a design for a webpage, you frequently have to wireframe/sketch out your design (using Photoshop etc). But then you have to get the result into code. So typically the web developer receives a picture and then they have to start from scratch. Here though, the web developer has a load of code already created for him/her - this means that they can hit the ground running, without starting over. This will reduce your production time significantly.

I will leave it there for now, but I will post shortly about to use this plug-in for creating slideshows, testing your web pages on your iPad, and using the Baker framework for pubs. If you are interested further, we do cover these and many other topics within our advanced InDesign course…

Advanced InDesign