ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Page editor / Responsive Web Design
  • Overview
  • How to create a page using WEBDEV's legacy responsive mode
  • Implementation
  • Creating a page in legacy responsive mode
  • Implementation
  • The different elements of the editor
  • Creating controls in a page in legacy responsive mode
  • Practical example for using anchors in a page in legacy responsive mode
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
Websites can be viewed on several platforms: mobiles, tablets, PCs, etc. The browser size changes on each device as well as the space used to display data.
The "Responsive Web Design" method consists in creating a single page that automatically adapts according to the platform used.
WEBDEV allows you to create pages by using the "Responsive Web Design" method and it allows you to optimize the page display on different platforms via several editor features. These pages use WEBDEV's legacy responsive mode.
How to create a page using WEBDEV's legacy responsive mode

Implementation

To create a page using the legacy responsive mode:
Remarks:
Creating a page in legacy responsive mode

Implementation

To create a page using the legacy responsive mode:
  1. Click in the quick access buttons.
    • The new element window appears: click "Page" then "Page".
    • The page creation wizard starts.
  2. Select the type of page to create: Select "Blank" and confirm. The page is automatically created and displayed in the editor.
  3. Open the page description window: On the "Page" tab, in the "Description" group, click "Description".
  4. In the "General" tab, go to "Edit mode" and select "Slices (legacy Responsive mode)".
  5. Validate 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 - Edit in min. size: 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). 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 - Edit in max. size: 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). 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), 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.
Remark: The pages that use the "Responsive Web Design" mode are in HTML 5.

The different elements of the editor

The page created in "Responsive Web Design" mode is displayed in an editor that uses specific options (here, page created using "Desktop First: Edit in min. size") :
  • 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 handle 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 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.
Practical example for using anchors in a page in legacy responsive mode
We are going to configure the anchors for the following page (our sample page is in Desktop First mode):
The controls have been crated in the page with the default anchoring options.
Let's use the browser handles to see how controls react 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 uses 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 uses 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 uses 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).
The result is as follows:
  • 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:
Related Examples:
WW_Overview_Mobile_Application Complete examples (WEBDEV): WW_Overview_Mobile_Application
[ + ] This example is a responsive Web site that presents a Mobile application.
It includes a static page that is entirely responsive.
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment

Last update: 07/17/2023

Send a report | Local help