ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Page editor / Responsive Web Design
  • Overview
  • Creating the page and the header bar
  • Creating a page
  • Creating the header bar
  • Creating the bar elements
  • Creating the title and logo
  • Implementing the logo
  • Implementing the title
  • Page test
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
This help page explains how to create a page containing a header in legacy responsive mode.
The main steps are:
Remark: The same method can be used to create a footer bar.
Creating the page and the header bar

Creating a page

To create a new page in "Responsive Web Design" 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. Right-click to open the context menu of the page and select "Description".
  8. Type the page name: "PAGE_usingcell".
  9. Validate the description window.
  10. Save the window (Ctrl + S).

Creating the header bar

The slice presentation bar is displayed in the editor:
We are going to create a page header with cells.
The following operations must be performed:
  1. Click the Desktop slice.
    Reminder: You should always work first in the reference slice:
    • Desktop slice in Desktop First mode.
    • Mobile slice in Mobile First mode.
  2. On the "Creation" tab, in the "Containers" group, select "Cell".
  3. Click in the page: the control appears in creation mode.
  4. Position the control in the upper-left corner and resize it horizontally until it reaches the full width of the page. There is no need to resize it vertically in this example.
    Tip: Don't hesitate to define a background color for the cell in order to better see it.
    In this example, the cell has an orange background color and a rounded border.
  5. The result is as follows:
    • "Desktop" slice:
    • "Tablet" slice:
    • "Mobile" slice:
To simulate the change of width in the editor:
  1. Display the "Desktop" slice: click the "Desktop" header.
  2. Click the double arrow in the "Browser width" tooltip. Keep the left mouse button down and move to the left.
  3. Move the mouse to the left or to the right: the browser width is modified in the editor.
  4. The cell follows the browser width.
    Indeed, the anchor defined for the cell allows the cell to follow the width of the grid, therefore to adapt to the page width
We are going to study the anchoring options available for the cell:
  1. Select the Cell control.
  2. Right-click to open the context menu and select "Anchor". The anchor options window appears:
  3. In this window, under "Horizontal anchors", the "Enlarge or reduce like the browser (or its container)" option is selected. The width of the selected element (here, the cell) adapts to the width of the page. In this case, the cell follows the page width (as already seen).
  4. To test this behavior, change the "Width" parameter and select "Fixed width".
  5. Validate.
  6. Enable the UI errors if necessary:
    • on the "Project" tab, in the "Project" group, click "Description": in the "Compilation" tab of the project description, check "Enable UI compilation".
    • display the "Compilation errors" pane and click .
  7. Save the page (Ctrl + S).
  8. We are going to check the difference of behavior:
    • Display the "Desktop" slice: nothing changes.
    • Display the "Tablet" or "Mobile" slice: the cell is not resized horizontally anymore.
    • The cell is wider than the limit resolution: UI errors occur:
There are 2 solutions to these UI errors:
  • Solution 1: Go back to the previous horizontal anchor option: "Enlarge or reduce like the browser (or its container)".
  • Solution 2: Change the width of the cell in each slice where the error occurs. Therefore, the width of the cell will be fixed in each slice.
    For example, in the illustration below, the cell width was modified in the "Mobile" slice.
Solution 2 is simple but it is valid only if the dimension of "Desktop", "Tablet" and "Mobile" slices is fixed and known: the Web site operates on the same type of device/browser.
Solution 1 will work regardless of the resolution of your browser. Therefore, you don't have to worry about your target.
In this page, we will be using the solution 1: we will change the horizontal anchor option to "Enlarge or reduce like the browser (or its container)".
  1. Display the "Desktop" slice.
  2. Right-click the Cell control to open the context menu. Select "Anchor".
  3. Under "Horizontal anchors", select "Enlarge or reduce like the browser (or its container)".
  4. Validate
Creating the bar elements

Creating the title and logo

We are going to add a title and a logo into the cell.
To create the title:
  1. Display the "Desktop" slice.
  2. On the "Creation" tab, in the "Usual controls" group, click and then click inside the cell at the upper-left corner of the page: the control appears in creation mode.
To create the logo:
  1. Display the "Desktop" slice.
  2. On the "Creation" tab, in the "Usual controls" group, expand "Image" and select "Image".
  3. Click in the page at the top right in the cell: the control appears in creation mode.

Implementing the logo

First, we are going to handle the image:
  1. Select an image in the WEBDEV catalog:
    • Open the Image control description window (select "Description" in the context menu).
    • In the "General" tab, click Drop-down button to the right of "Image". Select "Catalog" from the menu that is displayed.
    • In the image catalog, type "car" for example and select an image in the list.
    • Select a width set to 80 and validate.
    • Validate the next screen to save the image in the site directory.
  2. The description window of the image is upated. Validate.
If the image is not displayed entirely, resize it vertically or horizontally WHILE keeping the Shift key down.
Remark: You can prevent elements from snapping to the grid by keeping the Shift key down: move and resize operations are performed with pixel precision.
After these operations, you get:
No other operation will be performed on the "Desktop" slice. Let's now see what happens in the other 2 slices ("Tablet" and "Mobile"):
  1. Select the "Tablet" slice, then the "Mobile" slice.
    • "Tablet" slice:
    • "Mobile" slice:
  2. The image overflows the area in the two presentation modes. This display problem comes from an anchoring problem.
  3. Stay in the "Mobile" slice. The other slices will be fixed thereafter.
  4. Check the anchor options of the Image control ("Anchor" in the context menu).
    The image keeps the creation width in the WEBDEV editor. The width does not depend on the page width.
  5. The image must be moved to the left in order to be displayed inside the page.
  6. Select the "Tablet" slice. The same display problem occurs.
  7. Perform the same operations to correct the display.

Implementing the title

Let's now work on the title:
  1. Display the "Desktop" slice.
  2. Type the title and choose a style for the text:
    • Right-click the Static control to open the context menu and select "Description".
    • In the description window:
      • Give a name to the control: "RTA_TITLE".
      • Click the "Edit rich text" button and type "Page with cells" for example.
      • Choose the "Times New Roman" font with a size set to 20 pixels.
  3. Press Esc to exit from the control edit mode.
  4. Display the "Tablet" slice, then the "Mobile" slice:
    • "Tablet" slice:
    • "Mobile" slice:
  5. The caption is reduced horizontally, the text is no longer visible in the "Mobile" slice. The caption is just visible in the "Tablet" slice.
To correct this display problem of Static control, the anchoring parameters of Static control must be modified.
  1. Select the "Mobile" slice if necessary.
  2. Select the Static control.
  3. Right-click the control to open the context menu and select "Anchor".
  4. Change the horizontal anchor option. Select "Fixed width" and confirm.
  5. The control stretches so that the content is entirely visible.
Page test
Let's now check the behavior of the header bar at runtime.
  1. Test the page (click in the quick access buttons).
  2. You get these 3 representations (reduce the width of your browser to simulate an execution on a tablet or on a mobile device).
    • Browser ("Desktop" slice):
    • Browser ("Tablet" slice):
    • Browser ("Mobile" slice):
The image moves and it is not properly aligned with the right border of browser. Furthermore, it changes line below the title.
Once again, it is an anchor-related problem.
The problem comes from the anchors. In reality, the image is anchored on the left, but it should follow the right border of the browser.
To fix this, let's anchor the image to the right:
  1. Select the "Desktop" slice.
  2. Select the Image control.
  3. Right-click the control to open the context menu and select "Anchor".
  4. Change the anchor settings. Select "Right" () and confirm.
  5. Test the page (click in the quick access buttons).
  6. The image is properly aligned even in a small resolution.
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment

Last update: 06/20/2023

Send a report | Local help