Indesign cs6 to html5

[Techi_Panda]

Hi experts

I am trying to create a html5  webpage from INDD file. The page design is shown in the below. The page contents boxes, texts, images and anchor objects etc.

My problem is

I tried to using Export>HTML option but the HTML output not matches perfectly to the page design.

My question is

1. Deos anyone tried these type of print design pages to HTML5

2. What are the suggestions from you experts the HTML5 web design matches close to print design

3. What is the best method to do this conversion without using any third party plugins. I just want to use only Indesign styles and formatting.

Kindly advice

Thanks in advance

[Jongware]

Techi Panda wrote:

Hi experts

1. Deos anyone tried these type of print design pages to HTML5

Experts do not try this. InDesign is not an HTML editor, it's page layout software. (A web "page" is something else than a book page.)

2. What are the suggestions from you experts the HTML5 web design matches close to print design

Experts don't expect HTML to "close" match a printed page.

3. What is the best method to do this conversion without using any third party plugins. I just want to use only Indesign styles and formatting.

Don't use InDesign to create HTML page with, use a HTML editor instead.

Apologies if the above answers are not what you want to hear, but InDesign is not an HTML editor, and it's unrealistic to expect a HTML page to look exactly like a professionally formatted page for print.

[Techi_Panda]

Hi Jongware

Thank you for your post. Actually I have did the print design of the book and its printed and the process is over. Now I want to convert the same book to web. This is the process i am involved. I understand the web layout can't be matched as print layout. i am just looking for suggestions how the conversion can be made in efficient method since this is the first experience for me in HTML5. I am converting this for using the book in smart phones.

Thanks again

[Jongware]

The problem is

I tried to using Export>HTML option but the HTML output not matches perfectly to the page design.

You might want to lower your expectations ...

InDesign has been designed from the very bottom up to produce PDF output, as exactly as possible. With HTML, on the other hand, you have very little control on how it will look on the user's screen. Consider different browser versions, web engines, fonts, display size, and reader device window size; even when using a dedicated HTML editor like Dreamweaver you cannot predict how a certain document will appear for any reader.

Apart from PDF output, all other exports from an InDesign is meant for re-purposing your printed matter. It's not guaranteed it will look exactly like your printed work (or, in the case of e-pubs and HTML, anything alike ...).

The Export to HTML function does the best it can do (*), and after that you have to do any further adjusting using a HTML editor. At that point it mainly depends on your own HTML skills, and on what one can realistically expect.

On a first glance, your sample page contains a problematic items:

1. The purple background left hand numbers, running off the page.

2. The purple and blue polygons with text inside them.

3. The 2-column text at the top.

4. The text in the yellow frames at the bottom.

It's possible to use tables in HTML to get something to look like this, but how ID converts it depends on how you created the layout in the first place. (For one, I don't think separate text frames get converted to proper spaced HTML tables.)

Of course, the biggest challenge is that a web page scrolls down continuous, where a printed page is of a fixed height. Some of your current text may span more than a single page, while others can be represented by a single web page. You need to make that decision yourself -- practically on a per-page basis.

(*) Granted, perhaps not as good as "technically" possible, when pushed to the very edge. But I imagine the Adobe enginerds do not consider creating an "exact" HTML conversion of any InDesign document a very high priority. I for one hope that getting actual "print" stuff like footnotes right (to name a personal gripe) are a bit higher on their list of to-do's.

[Guest]

Tables?? Shame on you, we don't do that sort of thing any more.

I don't actually see anything on the sample layout that couldn't be done with CSS3, so if you don't care about old browsers the appearance could be reconstructed – you can probably even get the display font from TypeKit if you really like it – but only if you know your way around CSS, because I don't know of any tool that will generate good CSS automatically. The only thing that InDesign can do here is generate the markup to hang the styles off. Assuming the text uses InDesign styles consistently, you can map those to HTML tags. If you do that sensibly, you get the structure, but I can't see any point in trying to automate the CSS generation at all, that sort of thing has to be done by hand.

Techi Panda refers to a book, so there would be the problem of splitting it out into pages on export and then adding navigation to allow people to move between them. The reference to using the book on smart phones does suggest that HTML may not be the best way to go. Generating an app via the Digital Publishing Suite thing may be more productive in the end, although I cannot speak from experience there, and I know there are cost implications.

This whole area of retargeting InDesign documents to other media (Web and epub) is a real pain, and obviously it's going to go on being an issue for many of us. My current feeling is that it's better not to start in ID, because it over-specifies the appearance. Instead, I'm going to experiment next time with starting from Markdown and use JongWare's script to import it into ID for a print version, but generate epub independently. That isn't much help to anyone who has already got a book in ID, though, or who doesn't know a lot of HTML and CSS.

[Jongware]

Nigel Chapman wrote:

Tables?? Shame on you, we don't do that sort of thing any more.

My own web pages are all Made By Hand™ -- you mean, it could be done with CSS3 columns, right? I have no idea how widespread the browser support is for that ...

..  I'm going to experiment next time with starting from Markdown and use JongWare's script to import it into ID for a print version, but generate epub independently. That isn't much help to anyone who has already got a book in ID, though, or who doesn't know a lot of HTML and CSS.

Now that is thinking outside the box! Yup, I wrote that script (and happy to see someone thinks about using it!) but I didn't think any further than 'importing into ID'. Of course you can use any already existing tool to convert your text to HTML as well!

Only thing is, I added a few 'enhancements' (which I cannot recall Top of Head right now), I'm pretty sure they won't work on every MD processor.

[Guest]

you mean, it could be done with CSS3 columns, right? I have no idea how widespread the browser support is for that …

I get a lot of mileage out of display:inline-block for this sort of thing, which is widely supported. But we begin to get off-topic here.

Sadly, I have to grind out my current little book the hard way, but I'm almost certain to try the Markdown route next time, so I'll let you know how it goes.

[Justin Putney]

Hi Techi Panda,

Other than exporting the entire page as an image...there isn't a good way to do this without a plugin.

We successfully funded a project on Kickstarter to build a plugin that exports InDesign to HTML and maintains layout fidelity. It will likely be out at the end of this year, and will function very much like a native part of InDesign once installed.

One other thought, you could export it as a PDF and use Google Docs to embed the PDF into a webpage.

[Techi_Panda]

Hi  [Jongware], Justin Putney and Nigel Chapman

Thank you for your suggestions. Really it helps. Finally I have started with the output HTML5 from Indesign and CSS3.

[Petteri_Paananen]

If you just need to get your indesign layout converted to a form that works with iPads etc.. you can also try

http://www.edocker.fi/index.php/en/products/edocker-tablet-publisher/

You can try it free for few days.

Here´s a 1 minute video: