With in5 v3.6, it’s now possible to create responsive web (and app) designs visually using InDesign’s Alternate Layouts feature.
Yes, you can now create responsive designs without coding, without using a framework, or involving a web developer.
How to Create Responsive Layouts in InDesign
The basic steps are pretty straight-forward.
- Create your primary layout (and all its pages).
- Add Liquid Layout rules (optional—makes the following steps easier).
- Create Alternate Layout(s) (Layout > Create Alternate Layout or using the Pages menu).
- Reposition elements in new layouts (as needed).
- Export with in5 using Responsive Layouts.*
When I added Presentation Mode to in5, I didn’t quite know all the ways that people would be using it, but I quickly received some reports about really cool projects.
José Gouveia was one of the first designers to jump in and start creating inventive presentations.
He’s using InDesign to design his layouts (including animation and video) and in5 to export those layouts to self-running HTML presentations that he can display at tradeshows.
He displays the presentation in a kiosk app like Dave Hickey‘s project, but on a tall, vertical monitor (using Android), instead of an iPad.
You can see his handiwork in the video below.
“I just printed out a poster on foam core, cut out a space for my iPad, and stuck it to the kiosk unit.”
That’s Dave Hickey, designer of The Artful Astronomy of L.M. Montgomery—an interactive kiosk app built with Adobe InDesign and in5—referring (modestly) to the beautiful display he created in the image above.
Adobe InDesign has long had methods for publishing presentations—directly from InDesign using the Presentation Mode or via PDF using Full Screen Mode—but these methods never reached the level of sophistication and control found in Powerpoint and Keynote presentations.
That’s because those methods didn’t support many of InDesign’s powerful interactive features like Animation and Multi-State Objects. They simply produced static slideshows with no controllable transitions between slides.
In the past, I’ve modified my in5 output from InDesign so that I could present slides using HTML and include interactivity in my presentations.
When I noticed that my favorite conference—Creative Pro Week—now includes an entire day on presentations (dubbed the Click conference) it got my wheels turning about adding explicit presentation capabilities to in5.
Presentation expert, Mark Heaps, is heading up that section of the conference and also presenting an InDesign session on presentations.
I reached out to Mark and asked him what it would take to make InDesign an awesome presentation tool. You can see the results of our discussions below.
It sounds like I’m exaggerating doesn’t it?
Almost none of the interactivity in an interactive PDF actually works, even in Adobe Acrobat and Adobe Reader.
What doesn’t work in a PDF
Here’s a list of things that you can create with InDesign that don’t work in a PDF:
- Animated GIFs
- Multi-State Objects
- Embedded HTML content (like YouTube videos)
- Button actions related to several of the above items
- Scrollable Frames
- Custom page transitions (like flipbook pages)
- Designer-controlled responsiveness
*Video was supported previously in Acrobat and Adobe Reader, but it was dependent on the Flash Player (which no longer comes bundled with the Adobe apps).
The introduction of smartphones and tablets—almost none of which now support Flash—and a slew of new PDF readers, essentially guarantee that interactive PDF features will not work when your clients view your PDFs.
To see the breakdown of an interactive PDF in action, and to get a sneak peek at the solutions that I describe below, you can watch the following video.