Tour Guide Orientation

In design, development, web

An automated layout maintained by others and updated on a weekly basis to produce print and web-based products.

The client needed a cumbersome manual design process automated so several different designers with a wide variety of technical skills could quickly and easily create serial products as booklets and simple single-page websites.

The automation had to work with Adobe Creative Suite and had to be user-friendly so even the least technically savvy person could complete the weekly task.

With the restrictions mentioned above I chose to write a JavaScript program designers could execute from inside Adobe InDesign. The source content would be provided each week as an Excel file with images specified in a file path column in the file. The image files already existed in a shared folder. In terms of the layout, it needed to be easy to read and follow plus because this was a weekly product attention needed to be called out for the major updates to content since often times the individual entries may not change that often week to week.

Once the designer ran the program a UI window launched inside InDesign and requested the designer select the Excel file to use and the folder where they want the files all exported to. From there the program utilized some pretty great features of Adobe InDesign (XML import with XSLT) to extract all the data from the Excel sheets, convert them to InDesign chapters with reflowed text frames, apply paragraph styles with CSS export values, and finally export the entire InDesign book as a print-ready PDF and a collection of HTML/CSS and JavaScript files.

The web files were for a simple single-page website for use specifically on tablets. With a very specific use case no time was spent on ensuring responsiveness; however, proper HTML5 web standards for semantic markup and accessibility were employed whenever possible. Additional programming had to be done on the CSS and JavaScript files post automation from InDesign since a straight export dumps a lot of unneeded code in your files.

Note: Company logos/naming and analytic text has been removed at the client’s request. Imagery shown was not used in actual product and is from the amazing site unsplash.