Share this project

Done

Share this project

Done
InDesign to HTML5's video poster
Play

Take your designs straight from InDesign to HTML5 in an easy to use and easy to distribute format. Read more

238
backers
$12,264
pledged of $5,000 goal
0
seconds to go

Funded!

This project was successfully funded on August 16, 2012.

Take your designs straight from InDesign to HTML5 in an easy to use and easy to distribute format.

About this project

Hi, my name is Justin Putney. I'm a designer and a developer, and partner at Ajar Productions. My wife, AJ, and I started Ajar Productions as a husband-and-wife animation studio. Over the last several years, we've been focusing more on software for animators and designers.

If you're like many designers we know, you're able to produce some fantastic designs using InDesign. More and more, clients are asking for digital projects like HTML5 websites and mobile apps. Unfortunately, there hasn't been an easy way to translate your designs into web and mobile experiences.

Your contribution to this project will help us change that. Below are some reasons why we think you might be interested in contributing.

Note: We've reached out funding goal early, but we're still looking for backers. Additional capital means additional resources, so we've added some stretch goals. For additional project updates, you can also follow us on Twitter @justinputney and @ajarproductions.

How InDesign to HTML5 will work

Using InDesign->HTML5 will be as easy as selecting File > Export. The output of our tool will be very similar to that of the fantastic Interactive SWF exporter currently in InDesign. However, InDesign->HTML5 output will not rely on the Flash Player and will thus work on mobile devices, including iPads and iPhones.

Simply select Export to HTML5...
Simply select Export to HTML5...

Note: We will include Flash Player fallbacks for older browsers that do not support HTML5 audio and video.

The exporter will present you with a dialog with basic options: page animation type, navigation style, font embedding, background color, etc. There will also be several advanced options tucked away: allow offline storage, keywords for Search Engine Optimization (SEO), etc.

What the exporter might look like.
What the exporter might look like.

Then the exporter will do the rest!

What about the existing HTML export?

As one InDesign guru put it, "ID's HTML export is designed to extract content, not geometry." In the graphic below, the original layout (the same one used in the video demo above) is at the top. The thumbnail at the bottom left shows the HTML created by exporting my sample file. As you can see, it bears no resemblance to the original layout. No only that, but because the text was white, and the images in the master page were not exported, I had to select the text for it to be visible at all.

Default InDesign HTML export
Default InDesign HTML export


As a second test, I copied the elements from the master page and pasted them directly on a single page. The results of that export are shown in the thumbnail at the bottom right. A single image (the HTML5 logo) made it into the HTML page, but the output is still a far cry from the original layout.

The HTML exporter does allow the designer to attach external CSS and JavaScript files, but this assumes the designer is comfortable with code and has time to re-conceive of the layout in HTML. Here are just a few of the ways in which our product will differ from the existing HTML export feature:

  • Layout. Element positioning will be maintained.
  • Format. Up-to-date HTML will be used (rather than an older version).
  • Font embedding.
  • WYSIWYG. No programming knowledge will be required to adjust the final layout.
  • Built-in page navigation (if desired).
  • Master page content will be included.

Why not just use the Adobe Digital Publishing Suite (DPS)?

DPS is the industry-standard technology, introduced by Adobe in InDesign CS5.5 (and retroactively in CS5), to export interactive designs to tablet devices. The layout fidelity is fantastic, but there are several disadvantages:

  • Cost (ranges from $395 to > $100,000, + usage fees).
  • Pricing is optimized for wide distribution (10,000+ users). This is good for the NY Times, but untenable for the single designer, small shop, or someone who needs to distribute work within their company.
  • Limited output. Only outputs to tablet devices and the iPhone (no other phones or desktop machines).
  • Distribution for review requires that all users who want to see your project 1) sign up for an Adobe.com account, then 2) send you their email address associated with the account. You then 3) add their email to a distribution list. Once they've 4) downloaded the Adobe Content Viewer to their tablet, your project should appear with that app.
  • Distribution as a app involves other costs. For example, in order to distribute your project as an iPhone or iPad, you must sign up to be an iOS developer with Apple, which costs $99 to $299 per year.
  • Number of projects that you can distribute is limited.
  • You must have a newer version of InDesign to use DPS.

Other products like PressRun come with similar costs, usage fees, and limited output formats.

What about Interactive PDFs?

Interactive PDFs are an awesome format. Unfortunately, mobile device PDF readers only have a subset of the features available in the desktop versions. That's why interactive features and animation do not appear within PDFs on mobile devices. Additionally, mobile browsers do not support plugins, so PDFs have to be downloaded and launched in a separate app (rather than being viewed directly in the browser).

Advantages of our InDesign to HTML5 product

  • Affordable (< $100 when released).
  • Open, editable output (viewable on all devices).
  • Easy to use (export right from InDesign).
  • Easy to distribute your final product.
  • Backward-compatible with previous versions of InDesign (back to CS4, possibly CS3).
  • No usage fees.
  • Distribute an unlimited number of projects.

Our product will export pure HTML, JavaScript, and CSS. The exported content can be easily edited by a developer, if desired. You can then distribute your project by posting directly to the web or by packaging it into a mobile app using PhoneGap. The underlying code will be based on the well-tested JQuery and JQuery Mobile libraries.

Why Kickstarter for this product?

We know that there's an immediate need for this product. We think that Kickstarter is a good way to provide us with funding during development, so that we can get this project into your hands. Additionally, if you contribute $100 or more, you'll have access to a working prototype once the Kickstarter project closes.

After the product is released, we plan to continue adding features and supporting the product indefinitely.

Praise for Ajar Productions' products

As designer and a developer with significant experience building creative extensions, I know our studio can help you share your designs across digital platforms and help you wow your customers. Here are some comments from satisfied users of our products:

OMG! Thanks a lot, this is awesome!

This script has just made my day, month and year. Fantastic!

WOW! [><] WOW!!! Awesome Justin! Saved me a ton of time! Thank You…

Saved me some sleepless nights! Thank you so much.

You can also out the comments section to see what backers of this project are saying.

Other products we've built

The full list of products can be found through our products page. Here are a few examples:

FAQ

  • Yes. InDesign->HTML5 will be available for both Windows and Mac OS.

    Last updated:
  • Yes. It will definitely be compatible back to InDesign CS4. We have confirmed that most of the necessary functionality is available for CS3, but a different installation mechanism will be required for CS3. So, right now it's strong possibility, but we can't guarantee it. If there's a lot of demand for a CS3 version, we'll find a way to make it happen.

    Last updated:

Rewards

  • You selected
    Pledge $10 or more

    1 backer

    Our undying gratitude permanently recorded with every copy of the software that is distributed and on the acknowledgements section of the product website. Plus, access to purchase the initial release before it is publicly available.

    Estimated delivery:
  • You selected
    Pledge $25 or more

    125 backers

    All of the above. Plus, 1 license upon release of the product (estimated release price: $89).

    Estimated delivery:
  • You selected
    Pledge $40 or more

    6 backers

    All of the above, plus 1 bonus license if we reach our Stretch Goal (as described in Update #4) for 2 licenses total.

    Estimated delivery:
  • You selected
    Pledge $50 or more

    53 backers

    All of the above. Plus, 1 year of free upgrades. This will give you access to all of the new features and functionality that we plan to add after version 1.0 is released.

    Estimated delivery:
  • You selected
    Pledge $80 or more

    8 backers

    All of the above. Plus, 1 additional license upon release, for a total of 2 licenses, both with 1 year of free upgrades.

    Estimated delivery:
  • You selected
    Pledge $100 or more

    33 backers

    All of the above. Plus, immediate access to working pre-release versions as well as the pre-release forum, where you can share what features you'd like to see in the product.

    Estimated delivery:
  • You selected
    Pledge $150 or more

    2 backers

    All of the above. Plus, priority status for your feature requests in the pre-release forum, which lets your concerns cut to the front of the line.

    Estimated delivery:
  • You selected
    Pledge $200 or more

    4 backers

    All of the above. Plus, 2 additional licenses, for a total of 4, all with priority status.

    Estimated delivery:
  • You selected
    Pledge $300 or more

    0 backers

    All of the above. Total of 6 licenses, all with priority status.

    Estimated delivery:
  • You selected
    Pledge $400 or more

    0 backers

    All of the above. Total of 10 licenses for your team, all with priority status.

    Estimated delivery:
  • You selected
    Pledge $600 or more

    0 backers

    All of the above. Total of 15 licenses for your team, all with priority status.

    Estimated delivery:
  • You selected
    Pledge $800 or more

    0 backers

    All of the above. Total of 20 licenses for your team, all with priority status.

    Estimated delivery:
  • You selected
    Pledge $1,000 or more

    1 backer Limited (4 left of 5)

    Every single thing listed above, including 20 licenses and priority status. Plus, free updates for the lifetime of the product (never pay for an upgrade). A text link to your webpage on the Ajar Productions blog for 1 year (300 - 1,000 unique visits per day).

    Estimated delivery:

Funding period

- (30 days)