Implementation

• Create a page and select "Slices (legacy Responsive mode)".
• Position all the desired controls in the page.
• Check the anchors of the page and controls. You can check this directly in the editor (see Practical example).
• Use slices to change how the controls react according to the display mode.

• To optimize the Responsive Web Design mode, don't forget to check:
  • the advice and recommendations.
  • the tips.
• To test the pages under different configurations, use the debug mode in different browsers. For more details, see Testing pages in legacy responsive mode.

Implementation

1. Click in the quick access buttons.
   • In the window that appears, click "Page" then "Page".
   • The page creation wizard starts.
2. Select the type of page to be created: "Blank" and validate.. The page is automatically created and displayed in the editor.
3. Display the page description window: In the "Page" pane, in the "Description" group, click on "Description"..
4. On the "General" tab, go to "Edit mode" and select "Slices (legacy Responsive mode)".
   
5. Confirm changes and close the description window.
6. The different slices appear in the editor. The default mode is "Desktop First - Edit in max. size".
7. Configure the responsive editing mode:
   • Right-click the "Desktop (default)" header to open the context menu.
     
   • This menu allows you to set the propagation order of overrides. The different options are as follows:
     • Desktop First - Minimal size edition: The page is defined in its widest version Desktop which serves as a reference, then decreases to the lower slices Tablet and Mobile. Each slice will be edited in its minimum size. Thus, when the Tablet slice is selected, the editing area will be the Mobile slice, which is the smallest size in the Tablet slice.
     • Desktop First - Max size edition: The page is defined in its widest version Desktop which serves as a reference, then decreases to the lower slices Tablet and Mobile. Each slice will be edited in its maximum size. Thus, when the Tablet slice is selected, the editing area will be the Tablet slice, which is the largest size in the Tablet slice. Overrides are propagated
     • Mobile First: The page is defined in its smallest version Mobile which is used as a reference, then we increase towards the higher slices Tablet and Office.

The different elements of the editor

• 1. Ribbon with options specific to "Slices".
• 2. Slice ruler. This bar contains different slices representing the resolutions of the most common devices. These slices can be modified, deleted or added. To display a page in a specific resolution range, simply click the slice header.
• 3. Browser handle. This manipulate is used to resize the browser in the editor in order to dynamically see how the controls adapt to the browser size. To resize the browser in the editor, simply click and hold the double arrow and move horizontally.
• 4. Grid (in columns) used to position the controls in the page. This grid is used to simplify the positioning of controls. It has no real existence in the Web page. The grid simplifies the alignment and it allows you to automatically calculate the positioning of controls. This grid can be disabled when moving controls by pressing the Shift key.

Creating controls in a page in legacy responsive mode

• In legacy responsive mode, controls are automatically created in the largest or smallest slice, according to the Desktop First or Mobile First mode.
• Some controls are adapted to the legacy responsive mode:
  • The Navigation Bar control.
  • The RepeatString Looper control: adapts the number of columns to the slice.
  • The Table field: adaptation of table columns (masked or not) according to the slice.
  • Dashboard control: adaptation of the number of columns according to the slice.

Let's use the browser handles to see how controls react when the browser is resized.

You will notice that the images found in the 2 controls at the top of the screen are truncated.

If we reduce the browser width even more, the title appears on several lines.

To fix these problems, we are going to improve the anchoring of controls:

1. Anchoring the Image control at the top left:
   • The "Left" X anchor is retained: the field retains its position proportional to the left edge of the page..
   • The width uses the edit size. Therefore, the control cannot be truncated.
2. Anchoring the Image control at the top right:
   • X anchor becomes "Right": the field retains its position proportional to the right edge of the page..
   • The width uses the edit size. Therefore, the control cannot be truncated.
3. Anchoring of title:
   • The X anchor becomes "Centered": the field remains centered on the page regardless of page width..
   • The width uses the edit size. Therefore, the control cannot be truncated or displayed on several lines.
4. Static Text control and Chart: This control remains unchanged.. The controls are reduced according to the size of the page. The spacing between the Static and Chart controls is proportionally kept (anchor in X to left by default).

• Desktop blade:
  
• When resizing (Tablet slice):
  

Advanced mode: Example of overriding: it is also possible to override the position of the Chart control and Static Text control fields in Mobile mode: