PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Methods used
  • Method of Desktop first
  • Method of Mobile first
  • Principle
  • Before we start
  • Tips and recommendations for creating a new site with pages in Responsive Web Design or for transforming the pages found in an existing site
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 display of the page on different platforms via several editor features.
Check a WEBDEV example that supports Responsive Web Design by clicking the following link Site presenting WM Sport Assistant. Display this page and resize the browser to see the different resolutions.

Methods used

WEBDEV proposes 2 modes for creating and managing Responsive Web Design pages:
  • Desktop First mode: The page is defined in its largest version (Desktop) that is used as reference, then the page is modified for the lower blades (Tablet and Mobile).
  • Versions 22 and later
    Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the higher blades (Tablet and Desktop).
    New in version 22
    Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the higher blades (Tablet and Desktop).
    Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the higher blades (Tablet and Desktop).

Method of Desktop first

The developer must create the interface of his Web site in "Desktop" mode. Then, he will create the version in "Tablet" mode and finally he will create the version in "Mobile" mode.
This notion of "interface degradation" comes from the need to use the site on all the combinations of supports and screen resolutions.
During the design step, it means that a Web site is developed for a "desktop" use first. When reducing the display resolutions (page size), the content and the features are moved, resized or hidden.
Versions 22 and later

Method of Mobile first

First, the developer must create the interface of his Web site in "Mobile" mode. Then, he will create the version in "Tablet" mode and finally he will create the version in "Desktop" mode.
This notion of "interface improvement" comes from the need to add features to the site according to the combinations of supports and screen resolutions.
During the design step, it means that a Web site is developed for a "mobile" use first. When reducing the display resolutions (page size), the content and the features are either moved, or resized, or hidden.
New in version 22

Method of Mobile first

First, the developer must create the interface of his Web site in "Mobile" mode. Then, he will create the version in "Tablet" mode and finally he will create the version in "Desktop" mode.
This notion of "interface improvement" comes from the need to add features to the site according to the combinations of supports and screen resolutions.
During the design step, it means that a Web site is developed for a "mobile" use first. When reducing the display resolutions (page size), the content and the features are either moved, or resized, or hidden.

Method of Mobile first

First, the developer must create the interface of his Web site in "Mobile" mode. Then, he will create the version in "Tablet" mode and finally he will create the version in "Desktop" mode.
This notion of "interface improvement" comes from the need to add features to the site according to the combinations of supports and screen resolutions.
During the design step, it means that a Web site is developed for a "mobile" use first. When reducing the display resolutions (page size), the content and the features are either moved, or resized, or hidden.

Principle

In the WEBDEV editor, the representation of the different resolutions is performed via blades. A blade represents a browser size for a specific device. WEBDEV includes 3 blades:
  • The Mobile blade corresponding to smartphone devices.
  • The Tablet blade corresponding to tablet devices.
  • The Desktop blade corresponding to devices such as PC, MAC, etc.
See Responsive Web Design: Managing blades for more details.
Make sure that the Web site can operate even in Mobile version.
Summary:
  • In Desktop First mode, you must think "Desktop" before thinking "Tablet" then "Mobile": any GUI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be performed in "Desktop" mode.
  • Versions 22 and later
    In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any GUI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be performed in "Mobile" mode.
    New in version 22
    In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any GUI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be performed in "Mobile" mode.
    In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any GUI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be performed in "Mobile" mode.
Documentation about Responsive Web Design: Don't hesitate to read the following documentation pages (recommended reading order):
  1. Managing anchors.
  2. Managing blades.
  3. Creating a Responsive Web Design page.
  4. Test of Responsive Web Design pages.
  5. Managing a header bar.
  6. Applying the Responsive Web Design mode to an existing page.
  7. Tips.
Before we start

Tips and recommendations for creating a new site with pages in Responsive Web Design or for transforming the pages found in an existing site

Before implementing Responsive Web Design in a WEBDEV site, you must read the following recommendations:
  • General points
    • Correct ALL the GUI errors, in all the blades. This step is FUNDAMENTAL. A GUI error can occur in a blade and not in another one. The caption of the GUI error indicates the blade where the error occurred.
    • Depending on the mode (Desktop First or Mobile First), the layout must be performed in the "Desktop" or "Mobile" blade then it must be performed in the lower or higher blades (respectively "Tablet" and "Mobile" or "Desktop").
    • Transform the page templates for Responsive Web Design before transforming the site pages.
    • When creating a new page, it may be interesting to group the controls by logical block (by using a cell) in order to easily handle them in the blades.
    • Keep the same navigation order of controls in all the blades.
      Note: From WEBDEV Update 3 (210065), specific GUI errors are displayed if this order is not kept.Specific GUI errors are displayed if this order is not kept. See Responsive Web Design: Specific GUI errors for more details.
    • Don't forget to check the pages in your browser while reducing or enlarging the browser width in order to simulate all the resolutions.
      Note: The browsers also propose specific options for running the test of Responsive Web Design pages. See Check the "Responsive Web Design" pages for more details.
  • Controls
    • Depending on the mode (Desktop First or Mobile First), never add controls in the lower or higher blades. For example, in Desktop First mode, add the controls in the "Desktop" blade then perform the necessary adaptations in the lower blades.
    • The modifications made to a control found in a blade are contextual to this blade: this is the overload mechanism.
    • To display or enter the same information, do not hesitate to use different types of controls in each blade. For example, in Desktop First mode, you have the ability to use a radio button in the "Desktop" and "Tablet" blades and a combo box in the "Mobile" blade. Caution: the control exists in all blades.
      The control that must not appear in a blade must be made invisible in the other blades. To make the control visible or invisible:
      1. Select the control.
      2. Display the popup menu (right mouse click) and select "Responsive Web Design .. Visibility by blade".
    • Don't hesitate to divide an edit control into 2 sections: caption and input area. This allows you to easily handle the elements when switching to "Mobile" blade (case of Desktop First). For example, a caption on the left and an input area on the right become a caption above and an input area below.
    • Don't forget to use the indication text of the control or the alternative text (in the "Help" tab of the control description) to "save" space: switching to the lower blades is easier.
    • We advise you to resize a control in a blade rather than modifying the anchor in width of this control. Indeed, the anchor is defined for all the blades while the width can be overloaded for each blade.
    • Avoid the stackable controls. Stay on the grid to benefit from the Responsive features.
  • Blades
    • Define the toggle points of blades: When reducing or increasing the resolution, the page layout can be modified before the limit of the blade. In this case, all you have to do is modify the break point of the blade in order to always get the requested interface.
      In Desktop First mode:

      For example, the toggle point of the blades corresponds to the toggle from 4 to 3 then 2 elements per line when switching from "Desktop" mode to "Tablet" mode. To avoid going through the intermediate step (3 elements on the same line), the size of the "Tablet" blade must be modified in order to go from 4 to 2. Once the size of the "Tablet" blade is modified, its interface must be modified (if not already done) in order to display 2 elements side by side in "Tablet" mode. Therefore, when reducing resolution, the interface directly goes from 4 to 2 elements.
    • Check the overloads in each blade. Don't hesitate to delete all the overloads on a blade to rebuild the page layout (see Deleting a blade for more details).
    • Blade ruler (yellow, green and blue section): You have the ability to create a new blade or to resize an existing blade. A blade is required:
      • to adapt to a device. The "Tablet" blade (840 pixels) and the "Mobile" blade (480 pixels) are created by default (Google Material Design specifications).
      • to adapt its content (to be done by the developer) according to the site to create.
  • Anchoring (see Responsive Web Design: Managing anchors for more details).
    • Parameters of anchoring window:
      • Width:
        • Size in edit: option to use if the control must keep its size.
        • Adapt to the grid: option to use if the control must be reduced and if it must proportionally follow the page width in the browser.
    • Anchor: Why center a control?
      Responsive Web Design keeps the proportions, therefore a control that is centered will remain centered. There is no need to anchor it. The centered anchor exists but it is intended to the fixed-width controls and the entire width must be reserved.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment