Becoming a Digital Publishing Master 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.
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. 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. 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.
Lesson 11: How to Create Flexible Layouts
Expert Contributors to this lesson
Today's Course Outline
Estimated time for lesson
Easy Scaling for Desktop Computers (and mobile)
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.
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.
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.
To apply this scaling to mobile devices as well, simply select the Use Desktop Scaling option in the Mobile Device Viewport Zoom setting.
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.
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.
- Let in5 Choose (default) - in5 will automatically choose the Viewport Zoom setting based on the Page Format used to ensure that the layout fills the device’s viewport. This setting will set the Zoom to 100% when the Liquid Page Format is used, and will Zoom to the Page Width in all other cases.
- Let Device Choose - No viewport setting is added and the mobile device estimates the best sizing for the content.
- Use Desktop Scaling - Applies the chosen setting from Desktop Scaling to mobile devices. This is the only way to scale the height, as well as both the height and width. The Viewport can only scale to the width.
- Zoom to Device Width - Zooms the device display so that the content fills the width of the device.
- Zoom to Page Width - Zooms the device to match the width of a single page.
- Force 100% Scale - Ensures that the device will not zoom in or out by default.
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).
The Liquid Layout panel lets you set "rules" for your pages.
- Scale - scales all the objects on the page proportional to the window.
- Re-center - keeps all the objects centered in the window.
- Object-based - lets you set up rules for each object.
- Guide-based - uses document guides to scale and position objects.
- Controlled by Master - uses the rule applied to the page's Master Page.
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.
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.
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.
Alternate Layouts let you create different layouts for different devices and keep all of your assets together in one InDesign file.
The layouts are shown side-by-side 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.
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.
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.
- 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