Implementation

• Create a "Responsive Web Design" page.
• Position all requested controls in the page.
• Check the anchors of the page and controls. This check is performed in the editor (see Practical example).
• Use slices to modify the behavior of the controls according to the display mode.

• To optimize the management of Responsive Web Design mode, don't forget to check:
  • advice and recommendations.
  • tips.
• To check the pages in different configurations, use the debug mode of browsers. For more details, see Check the "Responsive Web Design" pages.

Implementation

1. Click in the quick access buttons.
   • The creation window appears: click "Page" then "Page".
   • The page creation wizard starts.
2. Select the type of page to create: "Blank page" of "Responsive Web Design" type.
   
3. Select the edit mode:
   
   • Desktop First: The page is defined in its largest version (Desktop) that is used as reference, then it is reduced to the lower blades (Tablet and Mobile). Two options are available:
     • Edit in min. size: In this case, each slice will be edited in the page editor 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.
     • Edit in max. size: In this case, each slice will be edited in the page editor 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), used as a reference, then it is enlarged to the larger slices (Tablet and Desktop).
     In our example, the page is defined in Desktop First mode.
4. Validate the wizard. The page is automatically created and displayed in the editor.

• The pages that use the "Responsive Web Design" mode are in HTML 5.
• To view or change the editing mode of the pages, go to "General" tab of the page description window.
  
• Changing the Desktop First edit mode: To switch from "Edit in min. size" to "Edit in max. size" (or vice versa), open the context menu of the first slice (Mobile) and select the desired option:
  

The different elements of the editor

• 1. Ribbon bar containing the options specific to "Responsive Web Design".
• 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 slice, simply click on that slice.
• 3. Handle of edit browser. This handle is used to resize the browser in the editor in order to dynamically see how the controls adapt to the browser size. To reduce or increase the browser size in the editor, all you have to do is click the double arrow, keep the mouse button down 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 Responsive Web Design mode

• The controls created in a page in "Responsive Web Design" mode are automatically created in the largest slice or in the smallest one according to the Desktop First or Mobile First mode.
• Some of them are adapted to the "Responsive Web Design" mode:
  • The Navigation Bar control.
  • The Looper control: the number of columns changes according to the slice.
  • The Table control: the table columns are displayed (or not) according to the slice.
  • The Dashboard control: the number of columns changes according to the slice.

Let's use the edit browser to check the behavior of controls when the browser is resized.

You will notice that the images 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, simply change the anchoring of the controls:

1. Anchoring the Image control at the top left:
   • The anchor in X "Left" is kept: the control keeps its position in relation to the left border of the page.
   • The width is using the edit size. Therefore, the control cannot be truncated.
2. Anchoring the Image control at the top right:
   • The anchor in X becomes "Right": the control keeps its position in relation to the right page border.
   • The width is using the edit size. Therefore, the control cannot be truncated.
3. Anchoring of title:
   • The anchor in X becomes "Centered": the control remains centered in the page regardless of the page width.
   • The width is using the edit size. Therefore, the control cannot be truncated or displayed on several lines.
4. Anchoring the Static and Chart controls: This anchor is not modified. 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 slice:
  
• When resizing (Tablet slice):
  

Advanced mode: Example of override: You can also override the position of the Chart and Static controls in Mobile mode: