Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I like to design using Omnigraffle, which can save files in PDF and several other standardized vector formats. I realize that "mockup to HTML" paid crowdsourcing services are a dime a dozen, but what about automatic conversion? Of course it's a very hard problem to solve computationally, but...

What are the most reliable software tools out there for automatically (or semi-automatically) converting a mockup (i.e. a PDF showing rectangular regions of color, text, and graphics) into tidy HTML+assets?

This is not asking about anything interactive like FORM controls, just static visual layout expressed cleanly in HTML.

share|improve this question
up vote 3 down vote accepted

A human.

In fact, that's the only reliable way.

Provided by 'reliable' we're talking some semblance of production ready/quality markup/css and JS.

share|improve this answer

Acrobat: File > Save As > Other Options > HTML WebPage.. then manually clean up.

I don't believe any automated method gives clean HTML. They all require some massaging no matter how good they claim to be. And any conversion also depends greatly upon construction of the PDF or original layout format.

share|improve this answer
I agree and would also point out that 'massaging/cleanup' can often be more time consuming that just building it properly from scratch (an example would be any markup Axure produces). – DA01 Nov 27 '12 at 4:36

"Cleanly" and "reliable" are the complicating factors here. There is thought that goes into building HTML and CSS that is not only reliable and easy to read but also easy to modify. Working with a reasonably good developer is the only clean and reliable path, in my experience.

Assuming you're trying to go it alone, you should reevaluate your workflow. Designing in Omnigraffle is your first step in the wrong direction. Have you considered something dedicated to the purpose like Dreamweaver or Fireworks? Their automated code output isn't what I would call clean by any stretch of the imagination, but it's going to give you a much better result than what you're looking for.

share|improve this answer
Omnigraffle is certainly acceptable for concepting/wireframing. In fact, I'd say it's better than DW or FW for no other reason than you're not tempted to let it create your markup for you. ;) – DA01 Nov 27 '12 at 4:37
It's fine for wireframes. It's terrible for design. I've compiled my own neutral UI kit over the years (something along these lines but with less 'flair'). I use it to throw wireframes together in Illustrator and later build it into a comp. – plainclothes Nov 27 '12 at 4:43

There is a spectrum from the easiest to "best", and any point on it is a trade off between the two. A single, full-page image with image-map links is the easiest, but not the best choice. Table-based design is easy, but again, very inflexible and inefficient to modify. A site with content and design completely separated is the ideal, possible with some kind of content management, but it might be more than you need.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.