Liquid Layout in Adobe InDesign: What is it Used For?

InDesign liquid pouring into smartphone

Liquid Layouts were an idea ahead of their time. They let you create “rules” governing how the items on your InDesign pages would scale and change position if the InDesign page were to change size.

liquid layout panel

This liquid ability was no doubt the InDesign team’s solution to a problem that was on its way: the mass availability of smartphones and tablets of various screen sizes, and the need to create digital content for these new devices.

The Liquid Layout feature pre-dated what would be the web’s solution to this problem: CSS Media Queries.

There’s a motto in investing, “being early is the same as being wrong.” Here, the InDesign team’s efforts were early, and Liquid Layout Rules do not map well to CSS Media Queries.

So what are Liquid Layouts good for?

15 Ways to Publish Digitally with InDesign & in5

different outputs illustrated

in5 lets you create interactive content using InDesign, and without coding.

What kinds of projects can you publish with in5?

Well…

This is by no means an exhaustive list, but here are several of the wonderful places that you can publish your in5 projects:

  1. Web
  2. Web App
  3. Mobile App
  4. WordPress
  5. Animated GIF
  6. Google Ad
  7. Kiosk App
  8. Tradeshow Presentation
  9. Live Presentation
  10. Sales Enablement App
  11. LMS
  12. Embed in another in5 project
  13. Distribute as a local download
  14. Part of a membership site
  15. Premium publication app

All of these options are described in the following video, and in the article below.

Let’s take a look at these options in detail.

How to Create Responsive Layouts using InDesign & in5

export responsive to various devices with InDesign & in5 head image

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.*

How to Create an Animated GIF with InDesign (& in5)

InDesign to Animated GIF via in5

Animated GIFs are a great way to hand off an animation as a single file that works all over the web (though notably not in a PDF).

A few great use cases for animated GIFs are

  • Email newsletters (which don’t support complex content)
  • Banners & ads (when HTML5 is not needed or supported)
  • Social media images (e.g., for Twitter, Facebook, and Linkedin timelines)

Thus far, the best way for a creative to create an animated GIF was to

  1. Open Adobe Animate
  2. Create animations using tweens
  3. Export as video
  4. Open the video in Photoshop (because Animate doesn’t do a great job with the colors)
  5. Export as a GIF using the Save for Web dialog

That process is okay if you’re fairly comfortable with both Animate and Photoshop, but it’s a bit convoluted even then (created the tweened animations, especially).

I recently opened Adobe Animate, which was formerly Flash Professional, to create an animated GIF. Even though I lived in Flash Pro for years, it still took me a half hour to create a simple 125 x 125 pixel ad.

Don’t get me wrong, Animate is great if you want fine control of your animation, but sometimes that’s overkill.

Why use InDesign?

In comparison, InDesign’s animation tools are superbly easy: simply apply a motion preset (adjust if needed). No keyframes, no timeline.

If you just need some simple fades and fly-ins this InDesign workflow is ideal.

The main limitation: There hadn’t been a way to export InDesign’s animation as animated GIFs, but now there is.

How to Create an Animated GIF using InDesign

Here’s a quick outline of the steps.

  1. Create a new file in InDesign. in5 v3.5.1 comes with a convenient Social Media Image document preset.document preset from File menu
  2. Add a Motion Preset via the Animation panel (Window > Interactive > Animation). Adjust and repeat with other items if desired.
  3. (Optional) Adjust the sequencing of multiple animations using the Timing panel (Window > Interactive > Timing).
  4. Export using in5 (in5 > Easy Export Wizard).
  5. Open the exported content in Google Chrome and use the in5 Animated GIF Maker extension to record and save your GIF.

You can now share the file via email or via social network updates.

Check out the steps in the video below.

You can test this out using a free trial version of in5.

The in5 Animated GIF Maker extension is available for free in the Chrome Extension Store.

Check out the GIF Maker Extension