Home / Information & Tutorials / The quick and dirty guide to building websites in InDesign

The quick and dirty guide to building websites in InDesign

As a rule I HATE website designs given to me like this but yes, you can use InDesign’s HTML export options to build a website. Although the results may not be what you expect…

We all realize that to construct an all-singing, all-moving site with Adobe programming, you’ll need Muse, Dreamweaver or Edge Reflow. In any case in the matter of a speedy site, shouldn’t we think about Indesign? Ater all, Indesign has had HTML send out abilities for a few years now, isn’t that so?

Off the top, I can think about a pleasant scope of suitable ventures for simply such a work process. I’ve undoubtedly you can too. For one thing, any false up and presentation work could all the more effortlessly be delivered in ID by a fashioner who utilizes that as their primary normal application.

Furthermore, while intricacy gets all the consideration, the truth of the matter is there are numerous destinations on the web are basic, holding a few features and craftsmanship and body content – these would be an alternate decent match. What’s more who hasn’t had a customer request that you make showcasing material where the substance are bound for both print and the web?

Furthermore on the off chance that you’ve been giving careful consideration, Adobe has been continuously including more media and intelligence capacities to ID throughout the last few years. Without a doubt, these increments have been unmistakably focused at their other fare choices – EPUB, Flash, SWF – yet it does lead one to think Indesign was likely getting to be more fit in its HTML yield, isn’t that so?

All things considered, possibly not. I try it attempt and this is what happened…

Setting up

I booted up ID with a huge grin all over and a hot container of espresso by my side one morning this week. I was all prepared to play with these fare HTML instruments I had seen in the recent past, however never had sufficient energy to play with. Yes, I was energized. In addition, I gullibly expected, this was going to be a snap in light of the fact that these alternatives had been around so long, they must be pleasantly cleaned at this point, correct? Yes, well… perhaps not.

I opened InDesign CC and choose File>New…>Document (Ctrl/Cmd+N), and right there you will see an option under the ‘Intent’ pop-up menu for ‘Web’ use.

Choose it and it gives us some basic webpage criteria filled in for us, and an option for other standard-ish web page dimensions. Though the default of 800×600 feels very circa 2007, I went with that for this test in hopes it somewhat eases the burden of creating multiple format versions. Life is a compromise, right?

I then began laying out a test page that would never win me any design awards, but I just wanted to throw some basic page elements on a page and export to see what I would get.

As you can see in the image, I plopped on a line of non-system text, two boxes, one with an image and the other with a solid fill color, and a pen-tool shape. I also included a couple of navigation control buttons, just to see if they would work.

First time unlucky

What I got was a wreck (and I’m not discussing the outline at this time). You can see in the first website page specimen picture that the filled box and the pen apparatus component didn’t even appear. At the same time it takes more than that to dissuade me. I attempted once more. Hmmm… also once more.

I contemplated that if the crate with the JPEG picture was showing up, that placing one in the pen instrument component may do likewise thing, so I made a 1-pixel square JPEG in Photoshop and drag/dropped it in. Achievement! This worked and in the following picture of the rendered site, you can see this.

Unfortunately, you can now also now see how the elements were not in the right positions. Tried as I might, noting I could think of made any significant improvement.

I then tried it in the just-released InDesign CC 2014.

You can see in that image that the export option in this version had some improvement. It rendered the solid fill box, and a gradient fill in the other pen tool element. But the layout was still very wrong.

Wrong direction

I realized I was not going about this right, and it certainly was not going to be as easy and painless as I had first assumed. So I sought out some expert advice in this narrow area. Again to my surprise, there was scant information on the subject to be found on the web, until I came across a very talented designer with serious technical chops named Michael Murphy.

Murphy was kind enough to answer some emails and take time to speak with me about this subject he may know more about than anyone else. In fact it is probably safe to say he had brought this to a high art, as with his other visual creations. He was able to shed a lot of light on this subject, and shares it all in great detail in a series of two courses on the subject published by lynda.com.

How to do it right

Murphy explained: “When repurposing InDesign content as HTML, there are two built-in export paths: EPUB (either Fixed Layout or Reflowable in CC 2014) or HTML. Both destinations require consistent use of styles (Character, Paragraph, and Object) throughout your project, and that all styles be connected to an HTML equivalent (e.g., the p tag for paragraphs, h1, h2, h3, and so on for headings, and em or strong for italic or bold, respectively). These let you maintain the structure and organization of your content, but not its appearance.

“For appearance, InDesign can generate CSS for both EPUB and HTML. However, the CSS InDesign generates strives to preserve the settings you’ve applied to a print layout (e.g., a book or a magazine article) and there are too many differences between the print- and screen-based reading experiences for that to produce optimal results.

“Because of this, it’s unlikely that you’ll get from start to finish without tinkering under the hood and getting into at least the CSS, if not the HTML markup itself.”

He went on to explain that typically, the HTML you’ll get out of InDesign will be most useful if you have an existing CSS you’re targeting (eg, a boilerplate CSS you use for EPUB projects, or a CSS used by your site or its content mangement system).

In that situation, you can simply make the necessary connections between your InDesign styles and their respective HTML tags and CSS classes. Those options are found in the Export Tagging areas of the Paragraph, Character, and Object Style Options dialogs. In the case of Object Styles, think of each object to which a style is applied as a DIV within your HTML and tag it accordingly.

Cold, hard truths

While EPUB fare is more foreseeable, web fare is continually attempting to hit a moving target. Accordingly, Indesign’s HTML send out simply won’t provide for you simple web-prepared yield of your print design. It’s just going to provide for you your substance – content and pictures, in the craved request – with proper HTML markup for repurposing on the web. Indeed with that constraint anyway, its a speedier way and far less dreary than doing it physically, particularly when you’ve secured the arranging and order in Indesign.

“Case in point,” Michael clarifies “consistently I fare a full month’s value of magazine articles from their Indesign formats to HTML for posting on the magazine’s site. With fare labeling incorporated with the styles in my layouts, the procedure is quick, generally clean, and kills tedious work and potential human slip from the mathematical statement. So exploiting the peculiarity eventually descends to reasonable desires and the ability to do the essential in advance prepare in your reports, formats, and styles.”

Along these lines, yes it is possible, and done well. It’s simply that one needs to approach it in a methodical manner and set up a decent work process. All of which means we are not discussing a straightforward one-off task. This is best suited for those that have sensible measures of repeating substance that needs to be brought to the web, and a substance administration framework or work process that will help it.

Using a plugin

So what about a plugin? Glad you asked! If all of that information above has your head spinning a bit, you aren’t alone. For the non-technical there is the alternative of using a plugin called In5, made by Ajar Productions. In5 adds an additional export option, called “Export HTML with In5…” right below the export that is natively in ID.

The options in In5’s dialog box have those of the native version, plus additional sections like SEO. The results, when all goes well, are a very useable webpages and site. This is a great option to have, especially in an niche area that has scant few options.

The bottom line: it would be nice if InDesign was the publishing Swiss Army knife I was hoping it was. To Adobe’s credit, they are working hard to bring us these tools. But as Michael Murphy pointed out to me, the differences between the two formats, print and web, is so great bridging that gap is hard.

My suggestion…USE PHOTOSHOP!!!

About Joshua Curci

Joshua Curci
I'm a very open person and a very honest person. You can ask me any question and I will answer it honestly but don't ask a question you don't want to know the answer to. My full name is Joshua Richard Curci and I am currently 22 years old. I love video games and movies and I keep up to date with all the new movies and video games. I also play basketball and I follow the NBA, NFL and AFL. I also love swimming and surfing and try to do both as much as I can. I love making effects tests which you can see on my portfolio page I do most of the videos for fun and not for a client but I only have limited hardware so my ideas don't come out like I envision them. I'm always looking for more projects and ideas ether voluntary or payed work but as I have already stated I have very limited hardware. If you need any info or want to contact me for anything then you can follow me bellow or contact me on my contact page.

Check Also


What does it mean to go viral

This term get thrown around a lot and most of the time people don’t really …