The Responsive settings window

Step 4 - Pages > Page Layout Table and Toolbar Commands >

The Responsive settings window

Previous pageReturn to chapter overviewNext page

You can use the commands in this window to define how each object in a page behaves, according to the screen resolution. This window appears when you click on the Responsive button in the toolbar of the page layout table in the Page Creation window.

Before you can use the options in the Responsive settings window, you must first indicate that you want to create a responsive website by selecting the option for this in the Resolutions and Responsive Design window.

The Responsive settings window shows:

the Responsive Bar which shows all the breakpoints and corresponding viewports, that were defined in the Resolutions and Responsive Design window. Click on a viewport to select it.
a short list to remind you of the operations you can do on the page, according to the selected viewport;
a page layout that reproduces the configuration initially defined in the page layout table, with the necessary commands for defining object behavior.

If you select the Desktop viewport on the Responsive Bar, the configuration defined in the Page Creation window is shown in the page layout. Starting from this situation, you must define the necessary changes to the page layout when the page is displayed at a resolution that falls within the viewport  immediately after the current one. So, you need to:

1. define the order in which the objects are to be displayed.
2. decide whether any objects are to be hidden and, if so, which.
3. define the line breaks.

When you have finished working on the page layout, you have to select the next viewport on the Responsive Bar: the configuration shown in the page layout is updated according to the settings for the Desktop viewport and now you can continue with the layout changes to define how the page will be displayed when it is shown at a resolution that falls within the next interval. Continue in this way for all the viewports that you have defined, until you come to the last one, the Smartphone viewport.

You don't have to set a display order for the objects in intermediate viewports because they inherit the settings from the Desktop viewport.

You don't have to do anything for the Smartphone viewport because all the objects that haven't been hidden will be completely linearized, one after the other.

The commands for re-defining the page layout and object behavior when a new breakpoint is reached are shown in the toolbar above the page layout:

Display Order

Here, you can decide the order in which the various objects are displayed in the page.

The program automatically suggests a display order for the objects in the page layout: each object's display order number is shown in the bottom righthand corner of the object. If you want to change the default order, select the Display Order option and click on the objects in the page layout in the order you want them to be linearized: when you click on an object to put in order, the program highlights the objects that can follow it with a red border and you must choose one of these.

If you click a second time on the selected object, you undo the selection and continue from the previous position.

Depending on how the objects are placed on the page (the number of cells that they occupy and their position with respect to other objects), you may find that you create blocks of objects as you put them in the order you want. An object block is treated as a single object at subsequent breakpoints. These blocks are highlighted in the page layout so you know where they are, and they influence the subsequent display order possibilities.  

Click on the triangle in the Display Order button to display a submenu with these items:

Order all the objects from the beginning: this option is selected by default and it presumes that the first object you click on will be the first in the order of display. You then have to click on all the other objects in the order you wish them to appear.
Continue ordering from an object: you can select the object in the page layout from which you want to start your own display order. This means you accept the default numbering up to a certain point, and then you decide yourself the order in which the remaining objects are to be displayed. Click on the objects in the order you want them to appear, respecting the indications on your possible choices that are given by the program.

The object display order finishes when you reach the last object on the page. You can interrupt the selection before reaching the last object, by using the following commands:

Complete ordering: this ends the display order procedure and confirms the selections made so far.
Cancel object order: this interrupts the display order procedure and undoes the selections you have made, restoring the original display order.

For further information, see How the Object Display Order works.

Show/Hide Objects

Use this command to make objects on the page visible or invisible. You do this after having specified the object display order for the page layout.

Click on an object to make it invisible: it will be shown differently in the page layout but it will still maintain its position in the order you have specified.

Making an object invisible at a specific breakpoint means that, when the page is displayed at lower resolutions, the object in question will not appear. All the visible objects will be rearranged as though the invisible object did not exist.

When an object is made invisible at a certain breakpoint, it will not appear in the page layout for the lower resolution breakpoints.

When you have finished selecting the objects to make invisible for the breakpoint you are working on, click on the Show/Hide Object button again to confirm your settings.  

Line break

Use this command to force a line break so that an object, or a block of objects, is displayed on a new line in the page at lower resolutions than the breakpoint you are working on.

The program displays a broken gray line on the page layout where it is possible to add a line break, and you only have to click on this to add one. The broken line now becomes red: click a second time to remove the line break.

When you have finished, click on the Line break button again to confirm your selections.

For further information, see How to add Line Breaks and why you need them.



Best practices:


How to create a page using the page layout table


How to create a responsive website