0

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.

Improve this question

4 Answers 4

Reset to default
3

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.

Improve this answer
2

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.

Improve this answer
1
  • 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
    Commented Nov 27, 2012 at 4:36
2

"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.

Improve this answer
2
  • 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
    Commented Nov 27, 2012 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
    Commented Nov 27, 2012 at 4:43
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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