Table of Contents
- The Problem
- The Solution
For a capstone subject at university we had to present our final result to the client and the examiner. Our presentation used an interactive prototype built in Adobe XD. Rather than requiring a switch from one application to another and back again, I wanted to explore a way we could present our solution with an all-in-one presentation.
Interactive PDFs are great, but they're limited in their abilities. Adobe XD has a great feature that allows you to embed a prototype with HTML - currently there's no way to embed in an interactive PDF. Therefore, in order to present to the client an application switch would've been needed. While this isn't the worst solution, it looks a little messy.
The solution became quite obvious - work out a way to build an interactive PDF into a web page.
By using a free InDesign plugin by Keith Gilbert that exports pages to HTML and combining it with my own scripting, I was able to build a responsive presentation viewer with page navigation and full screen capabilities.
Additional HTML for the rest of the class
I had noticed others in the class had created their own interactive prototypes for projects. To assist them, I created a simple responsive XD embedder. While XD does include a public link, it's Adobe branded and overloaded with menu toggles. It additionally allows users to comment on the projects - features not required for a presentation.
To help others in the class, I wrote a simple HTML document that would display the XD embed code and give them the option to open it in fullscreen.
All they'd need to do is replace the iframe src link in the document, and the file would do the rest of the work for them. I coded this in a single file to easily share the file around - all they'd need to do is edit one line and open the .html file in a browser of their choice for it to work.
This helped 10 other groups show off their prototypes in a simple and clean manner.