How to Create Responsive Layouts using InDesign & in5

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.

1. Create your primary layout (and all its pages).
2. Add Liquid Layout rules (optional—makes the following steps easier).
3. Create Alternate Layout(s) (Layout > Create Alternate Layout or using the Pages menu).
4. Reposition elements in new layouts (as needed).
5. Export with in5 using Responsive Layouts.*

* Exporting Responsive Layouts with in5 has a few requirements.

1. You must have a Gold plan or higher.
2. You must have Alternate Layouts in your document.
3. The layouts must have matching page counts (in5 switches between matching pages when you scale the browser).
4. The layouts must have differing page dimensions (so in5 knows when to adapt the layout).

Now let’s get into some of the details.

Switching between Portrait & Landscape Orientations

When you have two layouts that have inverted dimensions, in5 assumes you want the layouts to adapt based on orientation.

This is great if you’re only designing for one device (such as an iPad) but you want to accommodate both portrait and landscape views.

The video tutorial below shows you how to create a second layout and how to export with in5 to create a responsive layout.

But of course you can use more than two layouts!

The next video adds a third layout.

Adding a Smartphone Layout

This second tutorial shows you how to add a smartphone layout and automatically apply proportional scaling without having to choose all the export settings.

With more than two layouts (or two layouts that aren’t rotations of each other) the scaling occurs based on the width of the browser and the layouts (just as a web developer would do with CSS media queries).

And if you want more control than proportional scaling offers…

Using Proportional Scaling vs. Liquid Layout Rules

The following video walks you through a different example file and shows you how to use Liquid Layout, combine it with Responsive Layouts, and how it compares to proportional scaling so that you can understand all of the options and choose the setup that is right for your project.