InDesign
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.
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.
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…
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.
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.
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…
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…
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)?
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…
In comparison, here is the InDesign to html folder setup…
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 looking to create content for browser based consumption, using tools that you already know like InDesign is a great way to speed things up. No need to learn coding or new tools, and it’s fast and effective.
Moving on lets now see how we can take this further. If we carry on from our first example below lets take a look at adding some content.
I am now going to change the main content from one column to two, the top three boxes I will merge into one, and then duplicate the page 4 times, so I end up with 5 pages total. Within each main content box I will place a picture, and place a title at the top, indeed you could use InDesign’s Live Caption featured here to get your titles automatically placed. Also using the Live Caption feature means that the title will then update when you place a new picture into the same box as the previous picture. So we now have this…
With several pages now, we can use the Export html5 with in5 command to see what get when we have this sort of setup. Selecting this command and looking in the Basic options notice that we can set the Page format (currently set to Slider – Fade in). We can also enable swipe navigation (for tablets, etc).
So when I now click on OK my web pages becomes…
…making sure that I set up my output to Web. Nice and easy. I get buttons on the left and right to click on, can change the Page format to these…
Continuous scroll (Vertical/Horizontal)
Liquid
Slider (Vertical/Horizontal/Fade In)
…and re-export in just a few seconds. Very nice. But what about the other choices of exporting? Well we have two more – iPad Web App and Baker framework (HPUB). The latter I will not cover in this post but we will now have a look at the former. If I change my output to iPad Web App and click on OK what do I get? Well a new folder, containing my output. But when I open up the index.html so generated, this message appears…
Firstly we get a nice link that we can use to send an email to our iPad. So we can easily test this on our tablet – but you must make sure that you have uploaded your files to a web server, as emailing a link to a file on our desktop computer will not work. A tablet cannot just look at such a file, it must have a proper url. However this is easy to do and very easy to test. Just upload the folder called html5_output onto your web server and open up the index.html file generated by the export. Click on the link, send an email to yourself and voilá. A nice set pages that swipe on your tablet.
A word of warning, do not connect to an address with localhost in the name – it seems that the browser within an iPad does like that and you will get a connexion error. Just replace the words localhost with the actual ip address of the machine, e.g.
192.168.15.15:8888/html5_output/
Refresh the page if necessary and you have a lovely little web-based app that swipes beautifully.
Next up I want to look at some of the options within the export panels. The first is the text rendering setting.This is in the Basic area of the export panel, and previously I had set this to Images (preserves exact appearance). This means that the titles that I used looked right, but were images…
But look what happens when I set this to HTML with local font embedding (where possible)…
The heading is text, it can be highlighted, and it is in the font that you chose from within InDesign. Here is what the css looks like…
Lovely! However be careful, this means that the font you choose from within InDesign will actually be downloaded onto the viewer’s machine – this is a breach of copyright for a lot fonts. So only do this if the font you are using is open source. Google has a good list of open source fonts, as does font squirrel, and dafont.com. However always make sure that the license allows you to use it how you wish. If you cannot find a license, do not use the font.
Another nice feature is the ability to mark this page and its contents as things that need to be cached for offline viewing. When exporting with in5 go to the advanced options and set the Application cache to Cache all. Then click done and look at the result…
cache manifest file
html cache setting
One final thing worth looking at when you export with In5 is the metadata. I noticed that when you chose as an output the iPad web app option, testing this in your browser on your iPad produced an interesting result. The pages were all in fullscreen mode, and they were locked that way. You could not see the normal browser buttons etc, you were fully immersed in the set of pages that you exported. This was interesting, and I guessed that it must be due some meta tags that were telling the browser what to do. Looking at the source code, here are the meta tags created when you export…
<meta name=”generator” content=”In5 v1.4.6″>
<meta name=”viewport” content=”width=device-width”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
The first meta tag is obvious, and the next one is commonly used for mobile/tablet work to set the viewport. But the next two are interesting. Reading them you can see that they look like they change the behaviour of the web page. So let us look at the safari documentation and see what it has to say on these meta tags.
The apple-mobile-web-app-capable meta tag sets whether the web application runs in full-screen mode (if set to yes). This is really handy, and I can see this being very useful for on-line presentations and as such.
The apple-mobile-web-app-status-bar-style meta tag sets the style of the web app status bar, and has no effect unless the previous meta tag is set. You can choose default (status bar is normal), black, where the status bar has a black background, black-translucent (the status bar has a black and translucent background). If the setting is default or black, the web content is set below the status, however if you set it to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
Coupled with the Mac version of Safari being able to remotely debug your web pages, this makes for some interesting results for you to play around with. So when you are exporting to html5 from InDesign (using the in5 plugin) check the source code, and see what else you can do.