Adapt Layout to Other Screen Ratios

responsive.png

Manage dynamic layout of your app on different screen ratios (responsive design). If you want to enhance UX/UI for a type of device (for example a menu for the smartphone), create device-specific versions (adaptive design).

By default new projects have a fixed ratio. There will be black banners if you launch your app from another screen ratio. 

If you want to adapt your project to other screen ratios, you've got 2 options:

  • Responsive design to adapt layout automatically
  • Create device-specific layout (adaptative design)

 Please note: responsive design doesn't support orientation. If you use landscape layout, this will remain landscape on a mobile.

Responsive design

    1. To active dynamic layout management, go to the toolbar and activate the Size & Position Scale option.

      responsive window

    2. By activating the Size & Position Scale option every object will automatically adapt to new screen ratios. If you want to change its apparence, you can define an individual behaviour. Select the object and click on the icon of the toolbar. You have access to different parameters.

responsive settings

Pinning

Pinning an element to an edge instructs that element to move as the edge itself moves. When pinned to non-opposing edges, the distance from the element to those edges remains fixed. For example, an element that is placed 100 pixels away from the right edge and is also pinned to the right edge will change its location as the document resizes so it’s always 100 pixels away from the right edge.

When an element is pinned to opposing edges, the element’s location changes so the proportion of the distance from the element’s center to the opposing edges is always preserved. The best example for this case is element centering: an element that is centered between the right and left edges and is also pinned to those edges will always be centered regardless of how the document’s size changes.

A more complex example is an element in a 1000px wide document whose center is 200px from the left edge and 800px from the right edge. When this element is pinned to both edges and the document has width scaling enabled, the element’s center will always be positioned so that 20% of the document’s width is between itself and the document’s left edge while 80% of the distance is between itself and the right edge.

Resizing 

Element resizing is controlled by the two sizing arrows. By default, both sizing arrows are activated which means that the element’s width and height will change as the document’s size changes. An element whose height is 20% of the document’s height will resize to ensure its height is always 20% of the document’s height.

You can control scaling behavior when height and width sizing is selected. You have access to three options:

  • Stretch: the object stretches to match new dimensions.
  • Aspect fit: this default option keeps proportions and ensures that the object never expands outside of its bounding region.
  • Aspect fill:  this option keeps proportions and makes sure the element always fills its bounding region, even if that means it may spill outside.

 

Create Device-Specific Versions

If you created a mobile app, you will probably make some changes for the tablet version (and vice versa). Another menu, new navigation, replace elements ...

To create a specific version, you must at the moment create a new project and use the copy/paste between projects to replace elements.

For the deployment, these versions will be brought together in order to automatically redirect to the right version for the device.

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!