PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Principle for creating a "Responsive Web Design" page in WEBDEV
  • Implementation
  • Creating a page in "Responsive Web Design" mode
  • Implementation
  • The different elements of the editor
  • Creating controls in a page in Responsive Web Design mode
  • Practical example for managing the anchors in a Responsive Web Design page
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
From now on, the Web sites can be viewed on several platforms: mobiles, tablets, PCs, ... 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.
Principle for creating a "Responsive Web Design" page in WEBDEV

Implementation

To create a "Responsive Web Design" page, we advise you to:
Remarks:
Creating a page in "Responsive Web Design" mode

Implementation

To create a new page in "Responsive Web Design" mode:
  1. Click among the quick access buttons.
    • The window for creating a new element is displayed: 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), used as a reference, then it is reduced to the smaller slices (Tablet and Mobile).
    • Versions 22 and later
      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).
      New in version 22
      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).
      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.
Remarks:
  • The pages that use the "Responsive Web Design" mode are in HTML 5.
  • The edit mode of pages can be viewed and modified from the description window of the page, "General" tab.

The different elements of the editor

The page created in "Responsive Web Design" mode is displayed in an editor that is using specific options:
  • 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.
    • Versions 22 and later
      The Dashboard control: the number of columns changes according to the slice.
      New in version 22
      The Dashboard control: the number of columns changes according to the slice.
      The Dashboard control: the number of columns changes according to the slice.
Practical example for managing the anchors in a Responsive Web Design page
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 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).
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