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 for Desktop Computers (and Mobile)
  2. Scaling to Mobile Device Screens using the Viewport
  3. Using InDesign's Liquid Layout Features
  4. Creating Alternate Layouts

Estimated time for lesson

Today’s lesson should take approximately 15 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.

Easy Scaling for Desktop Computers (and mobile)

You can easily scale your layout so that it fills the screen.

Follow the steps below to add scaling for desktop computers.

Simply choose a Desktop Scaling option in the Advanced section of the in5 dialog.

The available options are

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

example of desktop scaling

To apply this scaling to mobile devices as well, simply select the Use Desktop Scaling option in the Mobile Device Viewport Zoom setting.

mobile and desktop settings together

Using the Desktop Scaling on mobile provides you with options not available using the Mobile Device Viewport Zoom (below), such as scaling to the height or best fit.

Scaling to Mobile Device Screens using the Viewport

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 Mobile Device Viewport Zoom setting in the Advanced section of the in5 export dialog.

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

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

Pro tip: You can use the Mobile Article Explorer to make a mobile-friendly (and SEO-friendly) reading experience, even when rendering a precisely-scaled layout and text is rendered as images.

For more details on using the Mobile Article Explorer, check out the Creating Your First Interactive Document video course.

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.

Liquid Layout is great for simple files, like this animated web banner, but for more complex layouts, the Desktop Scaling is a great and quick option.

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

  • Desktop scaling is quick way to scale your layout to the screen and can be applied to mobile.
  • Mobile device scaling is enabled by default when you export with in5.
  • 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