Transitioning to Flow for Responsive Design

Breaking the Compromise

In the Articulate 360 world, you often have to choose: Storyline for high interactivity or Rise for responsiveness. Flow eliminates this trade-off.

Welcome to your transition into responsive design. In the Articulate ecosystem, you've likely felt the split between the freedom of Storyline and the responsiveness of Rise. Flow in Claro bridges this gap, giving you the granular control of a slide-based tool with the fluid nature of a modern web page. Flow uses a box-model architecture. It's truly adaptive, not just scaled. Rise is responsive, but you're often stuck within the confines of pre-built blocks that can feel rigid. Storyline offers great precision but struggles on mobile devices without scaling the whole interface.

Claro vs. Flow: Choosing Your Canvas

Within Claro, you have two primary authoring modes. Choosing the right one depends on your instructional goals and delivery requirements.

Before you build, you must choose your canvas. Think of Claro as your precision tool for software simulations and fixed aspect ratios. Think of Flow as your adaptive tool, perfect for the modern learner who switches between desktop and mobile throughout the day. Flow behaves like a website. It's the best choice for content that needs to look native on any screen size. Claro behaves like Storyline. Use it when every pixel must stay in place, like in a complex software simulation.

The Anatomy of a Flow Page

Flow uses a nested hierarchy known as the Box Model. This structure is what allows content to reflow automatically on smaller screens.

To master Flow, you must understand its hierarchy. It starts with Sections, which hold Rows. Rows are divided into Columns, and finally, your Elements sit inside those columns. This nesting is the secret to responsive behavior. Rows determine how many columns you have. You might choose a three-column layout for a 'Meet the Team' section. Columns act as the immediate containers for your elements. They handle the stacking logic on mobile. Elements are the stars of the show—your text, images, and buttons. Sections are your big building blocks. Use them to group related content or set full-width backgrounds.

Freedom from Rigid Blocks

Unlike Articulate Rise, which restricts you to pre-defined block templates, Flow allows you to build custom layouts from scratch.

One of the biggest shifts from Articulate Rise is the move away from rigid blocks. In Rise, you pick a block and fill in the blanks. In Flow, you build the block. Want a video next to a quiz question? Or a button right next to an image? In Flow, you can do that easily.

The Magic of Breakpoints

Use the Responsive Preview to see how your design adapts. Adjust properties at specific breakpoints without affecting other views.

Let's see responsiveness in action. Here is a three-column layout on a desktop. As we shrink the screen to a mobile size, watch how the columns stack vertically. Perfect. See how the learner can now scroll through the content without pinching or zooming? This is 'true' responsiveness.

Identify the Design Pitfall

Examine the scenario below. Why might this layout fail on a mobile device?

A designer is trying to position a caption exactly 50 pixels from the left of an image using absolute coordinates. Tell me why this is a mistake in a Flow project.