Design Responsive Layout (Optimized Story Experience)

As a story designer, you can use responsive pages and define responsive rules to design stories that can adapt to different screen sizes.

Prerequisites

To design a story that can adapt to different screen sizes, use responsive pages. If you're creating a responsive story from scratch, on the Stories start page, under Create New choose Responsive. Then, select Optimized Design Experience as the design mode.

Context

With responsive pages in Optimized Story Experience, you can:

Configure responsive rules for different devices, including custom ones.

The rules cascade down from larger to smaller devices, and you can activate rules for specific devices to override.

For phones, there's a default responsive rule, where widgets are placed sequentially and each occupies the full width of the screen. You can further customize the rule.
Set widgets' position, size and visibility, so that they can be automatically adjusted to different screen sizes.
Freely position widgets.
Auto-flow widgets by horizontal or vertical priority.
Overlap widgets, for example, a button over a chart.
Have a live preview in edit time of how your story looks like on different devices.
Note

For iOS and Android phones and tablets, device preview doesn't include the view time toolbar, so the preview and actual view might be different. When designing your stories, take account of the vertical space of the toolbar, so that they fit into these devices.

On responsive pages, widgets can be grouped by lanes, and you can configure the responsive rule for each lane. Widgets in the same lane stay together when the responsive page is resized. To add a lane, from (More Actions) select Add Lane, and then select Add Lane to Left, Add Lane to Right, Add Lane Above or Add Lane Below.

Learning Tutorial

Click through the interactive tutorial illustrating how to define responsive rules in step-by-step instructions (3:00 min); the tutorial is captioned exclusively in English:

[To start the interactive tutorial, click here or on the picture.]

Procedure

From the device preview bar, select a device for which you'd like to configure the responsive rule.

By default the device preview bar is shown at the bottom. If not, from View in the toolbar, select Device Preview Bar.

The following devices are available:

Device	Width × Height
Auto	No limit The responsive rule for Auto applies to all devices, except for ones with rules defined.
Desktop	1920 × 1080 px
Laptop	1366 × 768 px
4k UHD	3840 × 2160 px
iOS Small Phone	375 × 812 px
iOS Large Phone	480 × 844 px
iOS Small Tablet	1024 × 768 px
iOS Large Phone	1366 × 1024 px
Android Generic Phone	480 × 853 px
Android Generic Tablet	1024 × 768 px
Android Large Tablet	1280 × 800 px

Note

For iOS phones and tablets, some features aren't supported, including Clock, multi-line Chart Title, Smart Insights, Footer, Background and Dynamic Images, Value Driver Tree, R Visualization, certain kinds of Dynamic Texts and Web Fonts.

For Android phones and tablets, some features aren't supported, including Clock, Smart Insights, Chart Footer, Background and Dynamic Images, Value Driver Tree, R Visualization, Geo Map, Data Action Trigger Widget and Currency Conversion in Chart.

If your device isn't in the list, you can select Add Device to add it to the list. Enter the width and height in pixel, and then you can configure the responsive rule for such a screen size.

Note

Currently, when you add your custom device, specifying iOS or Android system isn't yet supported.

Select a lane on the responsive page.
Go to the Builder panel of the lane. To open it, from View in the toolbar, select Right Side Panel.

Responsive Rule Configuration appears, with the selected device and corresponding screen width.
To start responsive rule configuration, switch on Activate.

The responsive rule automatically cascades to smaller devices. To configure another rule for its smaller device, you need to activate in the same way.
Set the widget position in either of the following ways:
- Free: You can freely move and position the widgets in the lane. Widgets stay in a specific position, irrespective of others and device type.
  You can also determine the space allowances on widgets' top or left:
  1. Under Set the space on top or Set the space on left, select Add Widget.
  2. From the dropdown list, select Each Widget or a specific widget.
    
    The setting for a specific widget overwrites the one for each widget.
  3. Specify the grid spaces:
    
    For the space on top, enter an integer between 0 and 200.
    
    For the space on left, enter an integer between 0 and 35.
    Tip
    
    In responsive rule configuration, widgets' size and position are specified by grid. Therefore, showing the grid makes it more convenient for you to do the settings. Under the dropdown list of your page, select Page Styling, and then in the Styling panel of the page, select Show Grid.
- Auto-Flow: Widgets are positioned sequentially, based on Row or Column.
  
  You can also select widgets to remove from auto-flow and set the space on its top and left so that they can be freely positioned to a specific place.
  
  A combination of free positioning and auto-flow is helpful when most widgets need to displayed one by one on smaller devices like mobile phone, while some always stay in a specific position regardless of screen size, such as your branding image.
Set the widget size:
1. Under Set the widget width or Set the widget height, select Add Widget.
2. From the dropdown list, select Each Widget or a specific widget.
  
  The setting for a specific widget overwrites the one for each widget.
3. Specify the widget width or height in grid.
  - For the widget width, enter an integer between 1 and 36. The percentage is also shown for you to calculate how much of the screen width the widgets take up.
  - For the widget height, enter an integer between 1 and 200.
Set the widget visibility.

Under Hide the widgets, select the widgets to be hidden on the device. For example, you can hide a table if it has too many data to be mobile friendly.
Define rules for all the other lanes on your page.

Results

You can configure responsive rules for more devices to make your story adapt to different devices. The device preview bar lets you select any device to have a live preview in edit time of how your story looks like and adjust your rule configuration accordingly.

In view time, the widgets are resized, repositioned or hidden when the screen reaches or is no greater than certain width, according to the responsive rule you've configured.

Unsupported APIs for Responsive Lanes

The following APIs, such as layout APIs, aren't supported for responsive lanes:

setLeft, getLeft
setRight, getRight
setTop, getTop
setBottom, getBottom
Page.moveWidget