Go Beyond Print – Crossmedia Output From InDesign and PrintUI

InDesign is a really powerful publishing platform, and many people equate InDesign to print. However, InDesign can be successfully used to produce full cross-media output. We should probably change our name from PrintUI to “CrossMedia UI”, because starting today we’re truly cross-media! Of course you’ve always been able to export a customized template as a PNG or a JPEG which can be put on a website somewhere or emailed, but it’s hard to truthfully call that “cross media output”. In the ideal world, you should be able to take a single piece of marketing material and be able to output that piece to all the channels of communication that you use. This includes print, website, downloadable datasheets and product information, online advertising, email and social. At PrintUI, we’re hard at work making that ideal a reality, and we’re introducing today a few features that are a big piece of that.

HTML Email Output

Email is a different problem than standard HTML output because email is “dumb” and highly structured. There’s also standard elements which appear on every email. Additionally, there needs to be a way to send out emails using a mass-emailing service such as Mailchimp. Our solution to this problem was to enable mapping of InDesign content to an HTML email template. We have a new panel in InDesign for creating these mappings. The process of setting up email templates goes something like this:

1. You create or download an email template. Starting with Mailchimp templates is a great way to go.
2. You add ids to all items in the email templates that are to be populated from the InDesign document.
3. Using the panel, you select the HTML document and optionally a css document.
4. If there’s a need to map stlying of text, you can do that as well. For mapping to work, the css must have class selectors rather than tag selectors. (i.e. .h1{} rather than h1{}) This is because all paragraphs are exported using p tags and styling is applied using classes.
5. Select the elements in the InDesign document that correspond to the HTML IDs and select the IDs from a dropdown.

HTML Microsites

Another exciting new feature is HTML Microsite output. After examining all our options including the native InDesign HTML export, we decided to create our own HTML export functionality. We do our best to match the layout in the exported HTML while maintaining live text (when possible) and keeping the HTML sane and editable further downstream. The HTML export is also very fast. We used every trick in the book to optimize performance and the average export of HTML takes under a second.

Font Handling

We also match fonts whenever possible and allow embedding of fonts for exact rendering of text. To use font embedding you legally must license the font for server use. Most font foundries have server licensing of their fonts. The price often depends on the specific use case. Another option is using Google Web Fonts which are free, generally decent quality and there’s a pretty large selection to choose from.

Uses

The HTML export can be used for a number of use cases. These include HTML banner ads which can be embedded using an iframe. It can be used for “microsites” which can act like mini websites to showcase a product and the like. You can even use them for creating product pages within larger sites.

Embedded HTML

The HTML export supports passthrough of HTML content. This allows embedding existing HTML content such as Google Maps or Youtube Video. By using an iframe link, you can include virtually any content including content with complex javascript and the like. For more information on setting up and using HTML output, please refer to our documentation.

Please note that the microsite and email output is an optional add-on to the standard PrintUI service, and as such, the HTML Email panel will only be usable if your account has these features enabled.