Responsive Web Design: Tips

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Editors / Window editor and page editor / Page editor / Responsive Web Design

Overview
When to create a new slice?
How to manage the reduction or the enlargement of slices?
How to optimize the visible space in a slice?
Why overriding the position and size of controls causes an overlap in the browser?

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Responsive Web Design: Tips

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

The Responsive Web Design was used in your pages but you still encounter some lock points.

This page presents several layout tips.

In any case:

Check all the UI errors: they indicate the affected control and slice.
Start from the default slice:
- Start from the "Desktop" slice in "Desktop First" mode and reduce the browser in the editor (using the handle) to check the consistency of modifications.
- Start from the "Mobile" slice in "Mobile First" mode and enlarge the browser in the editor (using the handle) to check the consistency of modifications.

When to create a new slice?

You can create a slice:

To manage a specific device.
To manage a specific display. in the following example (page in "Desktop First" mode), an intermediate display is requested:

How to manage the reduction or the enlargement of slices?

By default, the controls are using the anchoring in width "Adapted to the grid". Therefore, the controls are proportionally reduced or enlarged according to the mode (Desktop First or Mobile First) . For example in "Desktop First":

To limit the reduction of controls, all you have to do is define the minimum size:

"Min size" option in the "UI" tab of the description window of control.
"Min size" option in the window for managing the control anchors.

To avoid reducing the controls, the anchoring in width "Use the edit size" must be applied to the controls.

Remark: If a UI error occurs or if the control content cannot be exploited visually, the control must be moved and resized.

How to optimize the visible space in a slice?

The page layout is kept by default. The content of the page is adapted to the slice.

To optimize the visible space, you can reduce the page margins (inside margins) in a slice and apply the horizontal anchoring "Use the edit size" to the controls.

For example in Desktop First mode:

Why overriding the position and size of controls causes an overlap in the browser?

The position of the control is overridden in the "Mobile" and/or "Tablet" slice: in the browser, overriding the position and size of controls causes them to overlap.

What is the problem? Overriding the position in the "Mobile" and/or "Tablet" slice changes the order of controls defined in the "Desktop" slice (which is used as reference slice in "Desktop First" mode).

In "Responsive Web Design" mode, the controls are organized in relation to the other ones. This order depends on the position (from top to bottom then from left to right) and on the anchor. It must be exactly the same in all slices.

Indeed, the "Responsive Web Design" technology uses a single HTML stream for all the slices, while repositioning the controls by CSS. The order of controls in the reference slice defines the order of controls in the HTML stream.

Example: In the following example, the page contains a cell that groups another cell and an image:

The order of controls in the "Desktop" slice (the reference slice) is:

the CELL_1 cell that groups the second CELL_2 cell and the image,
the CELL_2 cell,
the image.

In the "Mobile" slice, the size and position of controls are overridden: the image is placed before the CELL_2 cell. The order of controls in the "Mobile" slice is different from the order of controls in the "Desktop" slice:

At runtime, there is an overlap, as the order of controls in the "Desktop" and "Mobile" slices is different: the image will overflow on the CELL_2 cell and it cannot "push" it:

To avoid any unexpected overlap in the browser, make sure that the order of controls in the "Mobile" and"Tablet" slices is the same as the order of controls in the "Desktop" slice (reference slice).

In our example, to get the expected result, you have the ability to use two Image controls:

The first Image control will be placed before the CELL_2 control in the Desktop slice (therefore, it will be first in the order of controls in the reference slice). It will be visible in the "Mobile" slice only.
The second Image control will be visible in the "Desktop" slice only.

To simplify the positioning of controls in the "Mobile" and/or "Tablet" blade, from version 21 Update 3, a UI compilation error is systematically generated by the page editor if the order of controls is not respected between the different blades.