ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Page editor / Responsive Web Design
  • Overview
  • Handling slices
  • Creating a slice
  • Deleting a slice
  • Describing a slice
  • Handling controls in the slices
  • Customizing each slice
  • Additional overrides: Image control and Menu control
  • Hiding controls in each slice
  • List of control parameters stored in each slice
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Warning
In version 28, the "Responsive Web Design: layout by slice" mode becomes "Slices (legacy Responsive mode)".
"Responsive (zoning and layouts)" is now the recommended mode for any new project. For more details, see New edit mode for mobile-friendly websites.
This page is adapted to the new options of version 28.
Overview
In the WEBDEV editor, different resolutions are represented via slices. A slice represents a browser size for a specific device. WEBDEV includes 3 slices:
  • The Mobile slice, which corresponds to smartphones.
  • The Tablet slice, which corresponds to tablets.
  • The Desktop slice, which corresponds to devices such as PC, MAC, etc.
The default slice (i.e. the reference slice) varies depending on the page creation mode:
  • in "Desktop First" mode, "Desktop" is the default slice.
  • in "Mobile First" mode, "Mobile" is the default slice.
The base unit used to define a Desktop, Tablet or Mobile device is the cm (centimeter) or the inch. A mobile device with a resolution set to 1920 pixels by 1080 pixels does not differ from a desktop screen with the same resolution. On the contrary, the size of a mobile screen will be equal to 6 or 8 inches while the size of a desktop screen will be equal to 19, 24 or 30 inches.
The slice-based system is used to customize the behavior of controls from a change of resolution (browser width) for all the lower resolutions (in "Desktop First" mode) or higher resolutions (in "Mobile First" mode).
Remarks:
  • The number of slices can be modified. We advise you to create a new slice as soon as the layout of your page changes (need to change the organization of controls in the page for example).
  • The size of slices can be modified.
In each slice, you can customize:
  • the size of controls,
  • the position of controls,
  • the CSS properties of the style,
  • if controls are hidden.
Remark: additional overrides are available for the Image and Menu controls. This allows you to use smaller images for the mobile devices or to change the menu orientation. For more details, see Additional overrides.
Handling slices

Creating a slice

To add a slice:
  1. On the "Slices" tab, in the "Resolution slices" group, click "New slice".
  2. Specify the name of the slice and its size, then validate.
    Creating a slice

Deleting a slice

To delete a slice:
  1. Select the slice to delete (click its name).
  2. On the "Slices" tab, in the "Resolution slices" group, click "Delete".
  3. The slice and all its overrides are deleted.

Describing a slice

To display the description of a slice:
  1. Display the slice header context menu (right click on the colored area).
  2. Select "Description of the slice".
  3. In the window that appears, you can set:
    • The name of the slice. This name is displayed in the slice header. Remark: This name is specific to WEBDEV: it is not used in the generated HTML code.
    • The number of columns in the slice.
    • The width of gutters between columns.
    • The use of gutters on the left and right borders of the page.
    • The zoom on fonts. This option is used to apply a percentage to enlarge the fonts on a platform. This enlargement percentage is applied to all the fonts displayed in the controls of the slice.
These options are also available in the "Slices" tab of WEBDEV.
Handling controls in the slices

Customizing each slice

A modification of the position or the size of a control in one slice is automatically applied to all smaller slices.
If a modification of the position or size of a control is made in a specific slice:
  • An override is created for the modified property. This override is assigned to the slice in which the modification was made.
  • This override can be viewed:
    • in the list of slice overrides:
      • via "Slices .. List of overrides for the controls" of the control context menu.
      • via "List of overrides" from the slice header context menu.
    • in the list of control overrides for the current slice. To view this list, select "Slices .. List of overrides for the selected controls".
  • This override is taken into account for the current slice and for all the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).
This rule also applies to the CSS properties of the style. You have the ability to modify the CSS properties for a single status (change the background color of control according to the platform for example).
To customize a control in a slice:
  1. Select the slice (click its name).
  2. Make the desired changes: move, resize, change the CSS properties, etc.
  3. The override is automatically applied to the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).
Remark: Some position overrides are not allowed. For example, you cannot swap the position of controls in a slice. In this case, a UI error occurs. See Why overriding the position and size of controls causes an overlap in the browser?.

Additional overrides: Image control and Menu control

  • For Image controls, you can override the image in each slice.
    1. Click the header of the slice in which the image must be modified.
    2. Change the image file used in the description window of the control ("Details" tab).
    3. Validate. The modification is taken into account for the current slice and the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).
  • For Menu controls, you can override the type of menu in each slice.
    1. Click the header of the slice in which the menu must be modified.
    2. Change the menu orientation in the control description window ("Details" tab).
    3. Validate. The modification is taken into account for the current slice and the smaller slices (in "Desktop First" mode) or larger slices (in "Mobile First" mode).

Hiding controls in each slice

In some cases, according to the browser width, you may have to hide a control.
To hide a control:
  1. Right-click the control to open the context menu.
  2. Select "Slices", then, in "Visibility by slice", select the slice in which the control must be hidden.
Caution: A hidden control can no longer be selected in the editor (in the slice in which it was hidden). It remains present in the page (therefore, it can be handled programmatically). However, it cannot be made visible through programming.
Remark: To show a control that was hidden in the editor, on the "Display" tab, in the "Show (all controls)" group, check "Hidden controls".

List of control parameters stored in each slice

By default, the modification of a control parameter (control name, control caption, ...) is applied to all the slices.
Some parameters are stored in each slice:
  • Position of control in X and in Y.
  • External size of control (width and height).
  • Hiding the control.
  • Number of columns in a Looper control.
  • Number of columns in a Dashboard control
  • Hiding a column in a Table control.
  • Source of Image control (associated file).
  • Orientation of menu.
  • Display mode of Navigation Bar control.
  • Size of page (height and width).
  • CSS style of control.
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment

Last update: 09/13/2023

Send a report | Local help