Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 11: How to Create Flexible Layouts

When you export HTML5 from InDesign with in5, it's viewable on any device, but how do tailor your layouts to those various devices? This lesson will show you how to create a layout that flexible for different devices and screen sizes.

Expert Contributors to this lesson

Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. Scaling to Mobile Device Screens
  2. Scaling for Desktop Computers
  3. Using InDesign's Liquid Layout Features
  4. Creating Alternate Layouts

Estimated time for lesson

Today’s lesson should take approximately 20 minutes.

Sometimes a single design will works across all target devices, sometimes multiple layouts are required. It depends on the design and the target devices.

Scaling to Mobile Device Screens

By default, when you export using in5 and view your files on a mobile device, your pages will automatically fill the width of the screen.

viewport zoom scaled to the width of the device

in5 automatically scales your InDesign layout to mobile screens

This is controlled by the Device Viewport Zoom setting in the Advanced section of the in5 export dialog.

The following Device Viewport Zoom options are available to help you control scaling on mobile devices.

The Device Viewport Zoom setting is the quickest way to have scaleable content, since you don't have to make any changes. The other settings are there for advanced users who wish to have greater control.

The main downside of this scaling method is that the viewport settings are ignored by desktop (and laptop) computers. This may not be a downside if you've already designed your layout at its ideal scale.

Scaling for Desktop Computers

You can also add similar functionality so that your layout fills the screen for non-mobile devices as well.

Follow the steps below to add scaling for desktop computers.

  1. Copy the code snippet from this post.
  2. Create a new text file and name it desktop.js (or whatever name you'd like to give it).
  3. Paste the code from Step 1 into the file and save it.
  4. Within your InDesign document, chose File > Export HTML5 with in5... to open the in5 dialog.
  5. Navigate to the Resources section of the in5 dialog and click the plus sign (+) next to the JavaScript heading.
  6. Click the Browse for file(s)... button and choose the file you created in Step 2 (e.g., desktop.js).
  7. Click OK in the in5 dialog to export.
  8. Click the View in Default Browser button when the export is finished.

Your content should then change sizes, while retaining the same layout, as you scale the browse window.

example of desktop scaling

Using InDesign's Liquid Layout Features

What if you'd like to change your layout as the browser window scales?

Fortunately, InDesign has a Liquid Layout panel for such cases (Window > Interactive > Liquid Layout).

Liquid Layout panel

The Liquid Layout panel lets you set "rules" for your pages.

layout rule options

The Object-based rule gives you the most control. If you apply the rule to your Master Pages, then your document pages should have the Controlled by Master rule applied.

With Object-based rules, you can control how each object is scaled and positioned.

For example, here are the rules for a Home button on the Master Page.

object-based rules for a home button

The Home button is pinned to the bottom left and has Resizing turned off.

Previewing Page Rules Effects

To preview your page rules without leaving InDesign, select the Page tool.

The page will be surrounded by eight rectangular handles. Drag one of the handles to preview the Page Rules in effect.

This is the document with the same Home button from above.

preview scaling with the page tool

Note that no matter how it's scaled, the Home buttons remains the same size and rests in the lower left-hand corner.

When you release the handle, the page and the items on it will snap back into place.

To export your in5 document with the Liquid Layout rules applied, choose Liquid as the Page Format in the in5 dialog.

Here's full video demo of Liquid Layout rules in action.

Creating Alternate Layouts

Liquid Layout rules can also help to speed up the creation of Alternative Layouts.

Alternate Layouts are created from the Pages panel.

When you create a new layout, assets are copied from an existing layout to the new one. Any Liquid Layout rules that have been applied to the existing layout will be used when creating the new layout. This can save you a lot time, since you won't have to make so many manul adjustments after creating the new layout.

use the Pages panel to create a new Alternate Layout

Alternate Layouts let you create different layouts for different devices and keep all of your assets together in one InDesign file.

Create Alternate Layout Dialog

The layouts are shown side-by-side in the Pages panel.

2 layouts shown in the Pages panel

If you need to create drastically different layouts for different devices, in5 will let you specify a specific layout in the Export Range menu.

Alternate Layouts shown in the Export Range menu

This will allow you to export each layout to its own directory. You can then create a "landing page" that directs viewers to the layout that best matches their device.

Here's an example landing page from Educabilidad, a Spanish-language journal produced with in5. This page lets viewers choose the option that suits them.

Multiple device options

The iPad and Android options in the image above are actually Web Apps that can be saved to the mobile user's Home Screen. We'll look at Web Apps in an upcoming lesson.

Take Aways

  • Mobile device scaling is enabled by default when you export with in5.
  • Desktop scaling can be added.
  • For more control, set up Liquid Layout rules, or create device-specific layouts.

If you've not already downloaded and installed in5, now's a good time to start.

Get in5 now & export for mobile